diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss index aa95a0042..e18157e01 100644 --- a/frontend/src/styles/z_media-queries.scss +++ b/frontend/src/styles/z_media-queries.scss @@ -1,13 +1,4 @@ -@media only screen and (max-width: 1330px) { - .ad.ad-v { - display: none; - } - #app { - grid-template-columns: auto; - } -} - -@media only screen and (max-width: 1250px) { +@media only screen and (max-width: 1450px) { #leaderboardsWrapper #leaderboards { .mainTitle { font-size: 2rem; @@ -37,6 +28,25 @@ } } } +} + +@media only screen and (max-width: 1330px) { + .ad.ad-v { + display: none; + } + #app { + grid-template-columns: auto; + } +} + +@media only screen and (max-width: 1250px) { + #leaderboardsWrapper #leaderboards { + .tables table { + tr td:nth-child(5) { + display: none; + } + } + } #quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchControlsWrapper { grid-template-columns: 1fr 1fr max-content; } @@ -80,6 +90,50 @@ width: 50% !important; } } + #leaderboardsWrapper { + #leaderboards { + .leaderboardsTop { + flex-direction: column; + align-items: baseline; + grid-template-areas: + "title title" + "subtitle subtitle" + "yesterday yesterday" + "buttons buttons"; + grid-template-columns: 1fr; + .buttons { + margin-top: 0.5rem; + } + .buttonGroup { + grid-auto-flow: column; + } + .showYesterdayButton { + margin-left: 0; + } + } + .tables { + grid-template-columns: unset; + table { + .avatarNameBadge .badge .text { + display: block; + } + tr td:last-child { + width: 30%; + } + } + } + .tables .rightTableWrapper, + .tables .leftTableWrapper { + height: calc(50vh - 10rem); + } + .tables table { + tr td:nth-child(5) { + display: table-cell; + width: auto; + } + } + } + } } @media only screen and (max-width: 1000px) { @@ -102,13 +156,6 @@ } } } - #leaderboardsWrapper #leaderboards { - .tables table { - tr td:nth-child(5) { - display: none; - } - } - } } @media only screen and (max-width: 900px) { @@ -294,41 +341,13 @@ #commandLineInput { width: 600px !important; } - #leaderboardsWrapper { - #leaderboards { - .leaderboardsTop { - flex-direction: column; - align-items: baseline; - grid-template-areas: - "title title" - "subtitle subtitle" - "yesterday yesterday" - "buttons buttons"; - grid-template-columns: 1fr; - .buttons { - margin-top: 0.5rem; - } - .buttonGroup { - grid-auto-flow: column; - } - .showYesterdayButton { - margin-left: 0; - } - } - .tables { - grid-template-columns: unset; - table { - .avatarNameBadge .badge .text { - display: block; - } - tr td:last-child { - width: 30%; - } - } - } - .tables .rightTableWrapper, - .tables .leftTableWrapper { - height: calc(50vh - 10rem); +} + +@media only screen and (max-width: 750px) { + #leaderboardsWrapper #leaderboards { + .tables table { + tr td:nth-child(5) { + display: none; } } } @@ -371,6 +390,24 @@ } @media only screen and (max-width: 650px) { + #leaderboardsWrapper #leaderboards { + width: 85vw; + .tables .rightTableWrapper, + .tables .leftTableWrapper { + height: calc(50vh - 10rem); + } + .tables { + grid-template-columns: unset; + table { + .avatarNameBadge .badge .text { + display: block; + } + tr td:nth-child(4) { + display: none; + } + } + } + } .profile { grid-template-columns: 1fr; grid-template-rows: auto auto auto; @@ -767,24 +804,6 @@ #commandLineInput { width: 400px !important; } - #leaderboardsWrapper #leaderboards { - width: 85vw; - .tables .rightTableWrapper, - .tables .leftTableWrapper { - height: calc(50vh - 10rem); - } - .tables { - grid-template-columns: unset; - table { - .avatarNameBadge .badge .text { - display: block; - } - tr td:nth-child(4) { - display: none; - } - } - } - } } @media only screen and (max-width: 400px) {