From 75ebf7c5bd48e64d58aef9892ce6b6fbf69e5f1a Mon Sep 17 00:00:00 2001 From: Norwin Date: Tue, 17 Nov 2020 05:33:19 +0000 Subject: [PATCH] fix media query edge case (#13546) * fix media query edge case was failing for 768px width before * code review * define responsive breakpoints as less variables * add missing variables.less * rename variables, drop screen constraints * fix less import * Apply suggestions from code review Co-authored-by: silverwind * code review altough it doesnt matter, LESS lazy evals variables Co-authored-by: zeripath Co-authored-by: silverwind Co-authored-by: techknowlogick --- web_src/less/_admin.less | 8 +++---- web_src/less/_base.less | 14 +++++------ web_src/less/_dashboard.less | 4 ++-- web_src/less/_form.less | 18 +++++++------- web_src/less/_home.less | 6 ++--- web_src/less/_repository.less | 30 ++++++++++++------------ web_src/less/_review.less | 10 ++++---- web_src/less/_user.less | 10 ++++---- web_src/less/features/heatmap.less | 4 ++-- web_src/less/index.less | 1 + web_src/less/themes/theme-arc-green.less | 4 +++- web_src/less/variables.less | 14 +++++++++++ 12 files changed, 72 insertions(+), 51 deletions(-) create mode 100644 web_src/less/variables.less diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less index d1bcfb6e2..0487a5b2a 100644 --- a/web_src/less/_admin.less +++ b/web_src/less/_admin.less @@ -88,16 +88,16 @@ #notice-table { .notice-description { - @media only screen and (max-width: 767px) { + @media @mediaSm { max-width: 80vw; } - @media only screen and (max-width: 991px) and (min-width: 768px) { + @media @mediaMd { max-width: 360px; } - @media only screen and (min-width: 992px) and (max-width: 1199.98px) { + @media @mediaLg { max-width: 510px; } - @media only screen and (min-width: 1200px) { + @media @mediaXl { max-width: 640px; } } diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 293c460fd..b313e2163 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -334,7 +334,7 @@ a:hover, margin-right: 0 !important; } - @media only screen and (max-width: 767px) { + @media @mediaSm { #navbar:not(.shown) > *:not(:first-child) { display: none; } @@ -774,7 +774,7 @@ a:hover, } &.pagination.menu { - @media only screen and (max-width: 767px) { + @media @mediaSm { .item:not(.active):not(.navigation), .item.navigation span.navigation_label { display: none; @@ -900,7 +900,7 @@ footer { } // Conditional display -@media only screen and (min-width: 768px) { +@media @mediaMdAndUp { .mobile-only, .ui.button.mobile-only { display: none; @@ -913,7 +913,7 @@ footer { } } -@media only screen and (max-width: 767px) { +@media @mediaSm { .not-mobile { display: none; } @@ -941,7 +941,7 @@ footer { clip: auto; } -@media only screen and (max-width: 991px) and (min-width: 768px) { +@media @mediaMd { .ui.container { width: 95%; } @@ -956,7 +956,7 @@ footer { border-width: 1px !important; } -@media only screen and (max-width: 1200px) { +@media @mediaLgAndDown { .ui.menu.new-menu { overflow-x: auto !important; justify-content: left !important; @@ -1398,7 +1398,7 @@ table th[data-sortt-desc] { } .dropdown:not(.selection) > .menu.review-box > * { - @media only screen and (max-height: 700px) { + @media (max-height: 700px) { .CodeMirror, .CodeMirror-scroll { min-height: 100px; diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less index d798f2bed..b73aa83d7 100644 --- a/web_src/less/_dashboard.less +++ b/web_src/less/_dashboard.less @@ -33,7 +33,7 @@ left: 90%; width: 15%; - @media only screen and (max-width: 768px) { + @media @mediaSm { top: 10px; left: auto; width: auto; @@ -55,7 +55,7 @@ left: auto !important; } - @media only screen and (max-width: 768px) { + @media @mediaSm { width: 100%; } } diff --git a/web_src/less/_form.less b/web_src/less/_form.less index 1f9a02b26..03f5c83bc 100644 --- a/web_src/less/_form.less +++ b/web_src/less/_form.less @@ -142,7 +142,7 @@ textarea:focus, text-align: center; } - @media only screen and (min-width: 768px) { + @media @mediaMdAndUp { width: 800px !important; .header { @@ -169,7 +169,7 @@ textarea:focus, } } - @media only screen and (max-width: 767px) { + @media @mediaSm { .optional .title { margin-left: 15px; } @@ -211,7 +211,7 @@ textarea:focus, } } -@media only screen and (min-width: 768px) { +@media @mediaMdAndUp { .g-recaptcha, .h-captcha { margin: 0 auto !important; @@ -220,7 +220,7 @@ textarea:focus, } } -@media screen and (max-height: 575px) { +@media (max-height: 575px) { #rc-imageselect, .g-recaptcha, .h-captcha { @@ -252,7 +252,7 @@ textarea:focus, .inline.field > label, input { - @media only screen and (max-width: 768px) { + @media @mediaSm { width: 100% !important; } } @@ -290,7 +290,7 @@ textarea:focus, width: 50% !important; } - @media only screen and (max-width: 768px) { + @media @mediaSm { label, input, .selection.dropdown { @@ -308,7 +308,7 @@ textarea:focus, &.new.repo { .ui.form { - @media only screen and (min-width: 768px) { + @media @mediaMdAndUp { #auto-init { margin-left: @create-page-form-input-padding+15px; } @@ -317,7 +317,7 @@ textarea:focus, .selection.dropdown:not(.owner) { width: 50% !important; - @media only screen and (max-width: 768px) { + @media @mediaSm { width: 100% !important; } } @@ -346,7 +346,7 @@ textarea:focus, } .new.org .ui.form { - @media only screen and (max-width: 768px) { + @media @mediaSm { .field button, .field a { margin-bottom: 1em; diff --git a/web_src/less/_home.less b/web_src/less/_home.less index 707c87327..fb31bedfa 100644 --- a/web_src/less/_home.less +++ b/web_src/less/_home.less @@ -4,7 +4,7 @@ } .hero { - @media only screen and (max-width: 767px) { + @media @mediaSm { h1 { font-size: 3.5em; } @@ -14,7 +14,7 @@ } } - @media only screen and (min-width: 768px) { + @media @mediaMdAndUp { h1 { font-size: 5.5em; } @@ -52,7 +52,7 @@ footer { .ui.container .left, .ui.container .right { - @media only screen and (max-width: 880px) { + @media (max-width: 880px) { display: block; text-align: center; float: none; diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 3058ec0cc..8b131e50b 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -122,7 +122,7 @@ text-overflow: ellipsis; } - @media (max-width: 1200px) { + @media @mediaLgAndDown { .title { max-width: 150px; } @@ -216,7 +216,7 @@ #clone-panel { width: 350px; - @media only screen and (max-width: 768px) { + @media @mediaSm { width: 100%; } @@ -279,7 +279,7 @@ } .ui.tiny.blue.buttons { - @media only screen and (max-width: 768px) { + @media @mediaSm { width: 100%; } } @@ -629,7 +629,7 @@ width: 100%; } - @media only screen and (max-width: 768px) { + @media @mediaSm { flex-direction: column; h1 { @@ -1025,7 +1025,7 @@ } } - @media only screen and (max-width: 767px) { + @media @mediaSm { .form .button { width: 100%; @@ -1578,7 +1578,7 @@ background: #ffffff; line-height: 30px; - @media only screen and (max-width: 992px) { + @media @mediaMdAndDown { flex-direction: column; align-items: flex-start; } @@ -2019,13 +2019,13 @@ button, input { - @media only screen and (max-width: 438px) { + @media (max-width: 438px) { width: 100%; } } button { - @media only screen and (max-width: 768px) { + @media @mediaSm { margin-bottom: 1em; } } @@ -2110,7 +2110,7 @@ } } - @media only screen and (max-width: 767px) { + @media @mediaSm { .dividing.header .stackable.grid .button { margin-top: 2px; margin-bottom: 2px; @@ -3002,7 +3002,7 @@ tbody.commit-list { vertical-align: middle; } -@media only screen and (max-width: 767.98px) { +@media @mediaSm { tr.commit-list { width: 100%; } @@ -3012,7 +3012,7 @@ tbody.commit-list { } } -@media only screen and (min-width: 768px) and (max-width: 991.98px) { +@media @mediaMd { tr.commit-list { width: 723px; } @@ -3021,7 +3021,7 @@ tbody.commit-list { } } -@media only screen and (min-width: 992px) and (max-width: 1199.98px) { +@media @mediaLg { tr.commit-list { width: 933px; } @@ -3030,7 +3030,7 @@ tbody.commit-list { } } -@media only screen and (min-width: 1200px) { +@media @mediaXl { tr.commit-list { width: 1127px; } @@ -3076,7 +3076,7 @@ tbody.commit-list { } } -@media only screen and (max-width: 767px) { +@media @mediaSm { .ui.stackable.menu { &.mobile--margin-between-items > .item { margin-top: 5px; @@ -3336,7 +3336,7 @@ td.blob-excerpt { .repository .ui.menu.new-menu { background: none !important; - @media only screen and (max-width: 1200px) { + @media @mediaLgAndDown { &::after { background: none !important; } diff --git a/web_src/less/_review.less b/web_src/less/_review.less index 23b8a3178..79b97d6b9 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -1,3 +1,5 @@ +@import "variables.less"; + .ui.button.add-code-comment { padding: 2px; position: absolute; @@ -146,7 +148,7 @@ a.blob-excerpt:hover { margin-left: .5rem; } -@media only screen and (max-width: 768px) { +@media @mediaSm { #review-box > .menu { > .ui.segment { width: 94vw; @@ -161,19 +163,19 @@ a.blob-excerpt:hover { } } -@media only screen and (min-width: 768px) and (max-width: 992px) { +@media @mediaMd { #review-box .CodeMirror-scroll { max-width: 700px; } } -@media only screen and (min-width: 992px) and (max-width: 1200px) { +@media @mediaLg { #review-box .CodeMirror-scroll { max-width: 800px; } } -@media only screen and (min-width: 1200px) { +@media @mediaXl { #review-box .CodeMirror-scroll { max-width: 900px; } diff --git a/web_src/less/_user.less b/web_src/less/_user.less index 9fa319deb..47095dd2a 100644 --- a/web_src/less/_user.less +++ b/web_src/less/_user.less @@ -1,3 +1,5 @@ +@import "variables.less"; + .user { &:not(.icon) { padding-top: 15px; @@ -51,18 +53,18 @@ img { width: 100%; } - @media only screen and (max-width: 768px) { + @media @mediaSm { height: 250px; overflow: hidden; img { - max-height: 768px; - max-width: 768px; + max-height: 767px; + max-width: 767px; } } } - @media only screen and (max-width: 768px) { + @media @mediaSm { width: 100%; } } diff --git a/web_src/less/features/heatmap.less b/web_src/less/features/heatmap.less index 3c11e0593..538384738 100644 --- a/web_src/less/features/heatmap.less +++ b/web_src/less/features/heatmap.less @@ -7,7 +7,7 @@ padding: 0 !important; } - @media (max-width: 1200px) { + @media @mediaLgAndDown { & { display: none; } @@ -30,7 +30,7 @@ left: 25px; } -@media (max-width: 1200px) { +@media @mediaLgAndDown { .heatmap-container .total-contributions { left: 21px; } diff --git a/web_src/less/index.less b/web_src/less/index.less index 15b9062e1..1b0701ae8 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -1,5 +1,6 @@ @import "~font-awesome/css/font-awesome.css"; +@import "./variables.less"; @import "./features/gitgraph.less"; @import "./features/animations.less"; @import "./features/heatmap.less"; diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index a4412145a..ad3d49194 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -1,3 +1,5 @@ +@import "../variables.less"; + :root { --color-primary: #87ab63; --color-primary-dark-1: #93b373; @@ -1222,7 +1224,7 @@ td.blob-hunk { background: #2a2e3a; border-color: transparent !important; - @media only screen and (max-width: 1200px) { + @media @mediaLgAndDown { &::after { background: linear-gradient(to right, transparent 0%, #2a2e3a 100%); } diff --git a/web_src/less/variables.less b/web_src/less/variables.less new file mode 100644 index 000000000..23f6ac6de --- /dev/null +++ b/web_src/less/variables.less @@ -0,0 +1,14 @@ +// here a standard set of media queries is defined, that is compatible with the +// responsive grid used in fomantic css. As there only is a precompiled build +// of fomantic checked in (since 946bbbe), we can't use their less variables +// here, but these breakpoints shouldn't change in the foreseeable future. + +@mediaMdAndUp: ~"(min-width: 768px)"; +@mediaMdAndDown: ~"(max-width: 991px)"; +@mediaLgAndUp: ~"(min-width: 992px)"; +@mediaLgAndDown: ~"(max-width: 1200px)"; + +@mediaSm: ~"(max-width: 767px)"; +@mediaMd: @mediaMdAndUp and @mediaMdAndDown; +@mediaLg: @mediaLgAndUp and @mediaLgAndDown; +@mediaXl: ~"(min-width: 1201px)";