From 2a5d72ea818e955674f196c2ad7517bb46e8876e Mon Sep 17 00:00:00 2001 From: Norwin Roosen Date: Fri, 13 Nov 2020 17:46:15 +0100 Subject: [PATCH 1/8] fix media query edge case was failing for 768px width before --- web_src/less/_dashboard.less | 4 ++-- web_src/less/_form.less | 8 ++++---- web_src/less/_repository.less | 8 ++++---- web_src/less/_review.less | 2 +- web_src/less/_user.less | 6 +++--- 5 files changed, 14 insertions(+), 14 deletions(-) diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less index f2dd145f552e..e11e08283dd6 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 only screen and (max-width: 767px) { top: 10px; left: auto; width: auto; @@ -55,7 +55,7 @@ left: auto !important; } - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 767px) { width: 100%; } } diff --git a/web_src/less/_form.less b/web_src/less/_form.less index a7b65265f25c..b47a242c0743 100644 --- a/web_src/less/_form.less +++ b/web_src/less/_form.less @@ -251,7 +251,7 @@ textarea:focus, .inline.field > label, input { - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 767px) { width: 100% !important; } } @@ -289,7 +289,7 @@ textarea:focus, width: 50% !important; } - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 767px) { label, input, .selection.dropdown { @@ -316,7 +316,7 @@ textarea:focus, .selection.dropdown:not(.owner) { width: 50% !important; - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 767px) { width: 100% !important; } } @@ -345,7 +345,7 @@ textarea:focus, } .new.org .ui.form { - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 767px) { .field button, .field a { margin-bottom: 1em; diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 29ae5ac07ce3..47370f80ec5f 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -221,7 +221,7 @@ #clone-panel { width: 350px; - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 767px) { width: 100%; } @@ -284,7 +284,7 @@ } .ui.tiny.blue.buttons { - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 767px) { width: 100%; } } @@ -634,7 +634,7 @@ width: 100%; } - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 767px) { flex-direction: column; h1 { @@ -2035,7 +2035,7 @@ } button { - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 767px) { margin-bottom: 1em; } } diff --git a/web_src/less/_review.less b/web_src/less/_review.less index df6da056c877..6d9b6f5ce537 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -142,7 +142,7 @@ a.blob-excerpt:hover { margin-left: .5rem; } -@media only screen and (max-width: 768px) { +@media only screen and (max-width: 767px) { #review-box > .menu { > .ui.segment { width: 94vw; diff --git a/web_src/less/_user.less b/web_src/less/_user.less index 4af96bfd3dba..0d9123caf254 100644 --- a/web_src/less/_user.less +++ b/web_src/less/_user.less @@ -51,18 +51,18 @@ img { width: 100%; } - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 767px) { height: 250px; overflow: hidden; img { max-height: 768px; - max-width: 768px; + max-width: 767px; } } } - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 767px) { width: 100%; } } From c16c1d5575b35a734c334905927425c7a2969d14 Mon Sep 17 00:00:00 2001 From: Norwin Roosen Date: Fri, 13 Nov 2020 19:03:37 +0100 Subject: [PATCH 2/8] code review --- web_src/less/_repository.less | 2 +- web_src/less/_user.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 47370f80ec5f..f1a43b43d622 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -2995,7 +2995,7 @@ tbody.commit-list { vertical-align: middle; } -@media only screen and (max-width: 767.98px) { +@media only screen and (max-width: 767px) { tr.commit-list { width: 100%; } diff --git a/web_src/less/_user.less b/web_src/less/_user.less index 0d9123caf254..ad394e43032a 100644 --- a/web_src/less/_user.less +++ b/web_src/less/_user.less @@ -56,7 +56,7 @@ overflow: hidden; img { - max-height: 768px; + max-height: 767px; max-width: 767px; } } From c181e24d8428b49036194410a1ac897de1f8fbfc Mon Sep 17 00:00:00 2001 From: Norwin Roosen Date: Fri, 13 Nov 2020 20:16:28 +0100 Subject: [PATCH 3/8] define responsive breakpoints as less variables --- web_src/less/_admin.less | 10 +++++---- web_src/less/_base.less | 14 +++++++----- web_src/less/_dashboard.less | 6 +++-- web_src/less/_form.less | 18 ++++++++------- web_src/less/_home.less | 6 +++-- web_src/less/_repository.less | 28 ++++++++++++------------ web_src/less/_review.less | 10 +++++---- web_src/less/_user.less | 6 +++-- web_src/less/features/heatmap.less | 6 +++-- web_src/less/themes/theme-arc-green.less | 4 +++- 10 files changed, 63 insertions(+), 45 deletions(-) diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less index 1a6180d2276a..ebbacf0af719 100644 --- a/web_src/less/_admin.less +++ b/web_src/less/_admin.less @@ -1,3 +1,5 @@ +@import "./variables.less"; + .admin { &.notice { padding-top: 15px; @@ -88,16 +90,16 @@ #notice-table { .notice-description { - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { max-width: 80vw; } - @media only screen and (max-width: 991px) and (min-width: 768px) { + @media @mediaScreenMd { max-width: 360px; } - @media only screen and (min-width: 992px) and (max-width: 1199.98px) { + @media @mediaScreenLg { max-width: 510px; } - @media only screen and (min-width: 1200px) { + @media @mediaScreenXl { max-width: 640px; } } diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 63c99324fd26..d02ca475f180 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -1,3 +1,5 @@ +@import "./variables.less"; + :root { /* documented customizable variables */ --fonts-proportional: -apple-system, "BlinkMacSystemFont", system-ui, "Segoe UI", "Roboto", "Helvetica", "Arial"; @@ -312,7 +314,7 @@ a:hover, margin-right: 0 !important; } - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { #navbar:not(.shown) > *:not(:first-child) { display: none; } @@ -752,7 +754,7 @@ a:hover, } &.pagination.menu { - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { .item:not(.active):not(.navigation), .item.navigation span.navigation_label { display: none; @@ -878,7 +880,7 @@ footer { } // Conditional display -@media only screen and (min-width: 768px) { +@media only screen and @breakMdMin { .mobile-only, .ui.button.mobile-only { display: none; @@ -891,7 +893,7 @@ footer { } } -@media only screen and (max-width: 767px) { +@media @mediaScreenSm { .not-mobile { display: none; } @@ -919,7 +921,7 @@ footer { clip: auto; } -@media only screen and (max-width: 991px) and (min-width: 768px) { +@media @mediaScreenMd { .ui.container { width: 95%; } @@ -934,7 +936,7 @@ footer { border-width: 1px !important; } -@media only screen and (max-width: 1200px) { +@media only screen and @breakLgMax { .ui.menu.new-menu { overflow-x: auto !important; justify-content: left !important; diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less index e11e08283dd6..bdfe7766dde9 100644 --- a/web_src/less/_dashboard.less +++ b/web_src/less/_dashboard.less @@ -1,3 +1,5 @@ +@import "./variables.less"; + .dashboard { padding-top: 15px; @@ -33,7 +35,7 @@ left: 90%; width: 15%; - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { top: 10px; left: auto; width: auto; @@ -55,7 +57,7 @@ left: auto !important; } - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { width: 100%; } } diff --git a/web_src/less/_form.less b/web_src/less/_form.less index b47a242c0743..e55ad31c7351 100644 --- a/web_src/less/_form.less +++ b/web_src/less/_form.less @@ -1,3 +1,5 @@ +@import "./variables.less"; + input, textarea, .ui.input > input, @@ -142,7 +144,7 @@ textarea:focus, text-align: center; } - @media only screen and (min-width: 768px) { + @media only screen and @breakMdMin { width: 800px !important; .header { @@ -169,7 +171,7 @@ textarea:focus, } } - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { .optional .title { margin-left: 15px; } @@ -211,7 +213,7 @@ textarea:focus, } } -@media only screen and (min-width: 768px) { +@media only screen and @breakMdMin { .g-recaptcha, .h-captcha { margin: 0 auto !important; @@ -251,7 +253,7 @@ textarea:focus, .inline.field > label, input { - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { width: 100% !important; } } @@ -289,7 +291,7 @@ textarea:focus, width: 50% !important; } - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { label, input, .selection.dropdown { @@ -307,7 +309,7 @@ textarea:focus, &.new.repo { .ui.form { - @media only screen and (min-width: 768px) { + @media only screen and @breakMdMin { #auto-init { margin-left: @create-page-form-input-padding+15px; } @@ -316,7 +318,7 @@ textarea:focus, .selection.dropdown:not(.owner) { width: 50% !important; - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { width: 100% !important; } } @@ -345,7 +347,7 @@ textarea:focus, } .new.org .ui.form { - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { .field button, .field a { margin-bottom: 1em; diff --git a/web_src/less/_home.less b/web_src/less/_home.less index 10d6ca336248..c8671c468134 100644 --- a/web_src/less/_home.less +++ b/web_src/less/_home.less @@ -1,10 +1,12 @@ +@import "./variables.less"; + .home { .logo { max-width: 220px; } .hero { - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { h1 { font-size: 3.5em; } @@ -14,7 +16,7 @@ } } - @media only screen and (min-width: 768px) { + @media only screen and @breakMdMin { h1 { font-size: 5.5em; } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index f1a43b43d622..518ee837917f 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 @breakLgMax { .title { max-width: 150px; } @@ -221,7 +221,7 @@ #clone-panel { width: 350px; - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { width: 100%; } @@ -284,7 +284,7 @@ } .ui.tiny.blue.buttons { - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { width: 100%; } } @@ -634,7 +634,7 @@ width: 100%; } - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { flex-direction: column; h1 { @@ -1035,7 +1035,7 @@ #avatar-arrow; } - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { .form .button { width: 100%; @@ -1588,7 +1588,7 @@ background: #ffffff; line-height: 30px; - @media only screen and (max-width: 992px) { + @media only screen and @breakMdMax { flex-direction: column; align-items: flex-start; } @@ -2035,7 +2035,7 @@ } button { - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { margin-bottom: 1em; } } @@ -2120,7 +2120,7 @@ } } - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { .dividing.header .stackable.grid .button { margin-top: 2px; margin-bottom: 2px; @@ -2995,7 +2995,7 @@ tbody.commit-list { vertical-align: middle; } -@media only screen and (max-width: 767px) { +@media @mediaScreenSm { tr.commit-list { width: 100%; } @@ -3005,7 +3005,7 @@ tbody.commit-list { } } -@media only screen and (min-width: 768px) and (max-width: 991.98px) { +@media @mediaScreenMd { tr.commit-list { width: 723px; } @@ -3014,7 +3014,7 @@ tbody.commit-list { } } -@media only screen and (min-width: 992px) and (max-width: 1199.98px) { +@media @mediaScreenLg { tr.commit-list { width: 933px; } @@ -3023,7 +3023,7 @@ tbody.commit-list { } } -@media only screen and (min-width: 1200px) { +@media @mediaScreenXl { tr.commit-list { width: 1127px; } @@ -3069,7 +3069,7 @@ tbody.commit-list { } } -@media only screen and (max-width: 767px) { +@media @mediaScreenSm { .ui.stackable.menu { &.mobile--margin-between-items > .item { margin-top: 5px; @@ -3329,7 +3329,7 @@ td.blob-excerpt { .repository .ui.menu.new-menu { background: none !important; - @media only screen and (max-width: 1200px) { + @media only screen and @breakLgMax { &::after { background: none !important; } diff --git a/web_src/less/_review.less b/web_src/less/_review.less index 6d9b6f5ce537..eaf5eec3e91a 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; @@ -142,7 +144,7 @@ a.blob-excerpt:hover { margin-left: .5rem; } -@media only screen and (max-width: 767px) { +@media @mediaScreenSm { #review-box > .menu { > .ui.segment { width: 94vw; @@ -157,19 +159,19 @@ a.blob-excerpt:hover { } } -@media only screen and (min-width: 768px) and (max-width: 992px) { +@media @mediaScreenMd { #review-box .CodeMirror-scroll { max-width: 700px; } } -@media only screen and (min-width: 992px) and (max-width: 1200px) { +@media @mediaScreenLg { #review-box .CodeMirror-scroll { max-width: 800px; } } -@media only screen and (min-width: 1200px) { +@media @mediaScreenXl { #review-box .CodeMirror-scroll { max-width: 900px; } diff --git a/web_src/less/_user.less b/web_src/less/_user.less index ad394e43032a..3f5b6e38774c 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,7 +53,7 @@ img { width: 100%; } - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { height: 250px; overflow: hidden; @@ -62,7 +64,7 @@ } } - @media only screen and (max-width: 767px) { + @media @mediaScreenSm { width: 100%; } } diff --git a/web_src/less/features/heatmap.less b/web_src/less/features/heatmap.less index 3aa46a500f32..eecdff7d3cae 100644 --- a/web_src/less/features/heatmap.less +++ b/web_src/less/features/heatmap.less @@ -1,3 +1,5 @@ +@import "../variables.less"; + #user-heatmap { width: 107%; // Fixes newest contributions not showing text-align: center; @@ -7,7 +9,7 @@ padding: 0 !important; } - @media (max-width: 1200px) { + @media @breakLgMax { & { display: none; } @@ -31,7 +33,7 @@ left: 25px; } -@media (max-width: 1200px) { +@media @breakLgMax { .heatmap-container .total-contributions { left: 21px; } diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index c22f424a12c9..1b98e75d38b5 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; @@ -1249,7 +1251,7 @@ td.blob-hunk { background: #2a2e3a; border-color: transparent !important; - @media only screen and (max-width: 1200px) { + @media only screen and @breakLgMax { &::after { background: linear-gradient(to right, transparent 0%, #2a2e3a 100%); } From f4c8d8cb9b0686a91c6199dbe3da166b46ad0a6a Mon Sep 17 00:00:00 2001 From: Norwin Roosen Date: Fri, 13 Nov 2020 20:25:31 +0100 Subject: [PATCH 4/8] add missing variables.less --- web_src/less/variables.less | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 web_src/less/variables.less diff --git a/web_src/less/variables.less b/web_src/less/variables.less new file mode 100644 index 000000000000..20ba3b8bd662 --- /dev/null +++ b/web_src/less/variables.less @@ -0,0 +1,21 @@ +// here a standard set of media queries is defined, that is compatible with the +// responsive grid used in formantic css. As there only is a precompiled build +// of formantic checked in (since 946bbbe),we can't use their less variables +// here, but these breakpoints shouldn't change in the foreseable future. + +@breakSmMax: ~"(max-width: 767px)"; +@breakMdMin: ~"(min-width: 768px)"; +@breakMdMax: ~"(max-width: 991px)"; +@breakLgMin: ~"(min-width: 992px)"; +@breakLgMax: ~"(max-width: 1200px)"; +@breakXlMin: ~"(min-width: 1201px)"; + +@mediaSm: @breakSmMax; +@mediaMd: ~"@breakMdMin and @breakMdMax"; +@mediaLg: ~"@breakLgMin and @breakLgMax"; +@mediaXl: ~"@breakXlMin"; + +@mediaScreenSm: ~"screen and @mediaSm"; +@mediaScreenMd: ~"screen and @mediaMd"; +@mediaScreenLg: ~"screen and @mediaLg"; +@mediaScreenXl: ~"screen and @mediaXl"; From f49b3ed6e4c9c90901b124df46eaa45dcee202b0 Mon Sep 17 00:00:00 2001 From: Norwin Roosen Date: Sat, 14 Nov 2020 20:14:59 +0100 Subject: [PATCH 5/8] rename variables, drop screen constraints --- 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 | 8 +++---- web_src/less/_user.less | 4 ++-- web_src/less/features/heatmap.less | 4 ++-- web_src/less/themes/theme-arc-green.less | 2 +- web_src/less/variables.less | 25 +++++++------------- 11 files changed, 58 insertions(+), 65 deletions(-) diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less index ebbacf0af719..4a943a81d1d2 100644 --- a/web_src/less/_admin.less +++ b/web_src/less/_admin.less @@ -90,16 +90,16 @@ #notice-table { .notice-description { - @media @mediaScreenSm { + @media @mediaSm { max-width: 80vw; } - @media @mediaScreenMd { + @media @mediaMd { max-width: 360px; } - @media @mediaScreenLg { + @media @mediaLg { max-width: 510px; } - @media @mediaScreenXl { + @media @mediaXl { max-width: 640px; } } diff --git a/web_src/less/_base.less b/web_src/less/_base.less index d02ca475f180..e6005472e801 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -314,7 +314,7 @@ a:hover, margin-right: 0 !important; } - @media @mediaScreenSm { + @media @mediaSm { #navbar:not(.shown) > *:not(:first-child) { display: none; } @@ -754,7 +754,7 @@ a:hover, } &.pagination.menu { - @media @mediaScreenSm { + @media @mediaSm { .item:not(.active):not(.navigation), .item.navigation span.navigation_label { display: none; @@ -880,7 +880,7 @@ footer { } // Conditional display -@media only screen and @breakMdMin { +@media @mediaMdAndUp { .mobile-only, .ui.button.mobile-only { display: none; @@ -893,7 +893,7 @@ footer { } } -@media @mediaScreenSm { +@media @mediaSm { .not-mobile { display: none; } @@ -921,7 +921,7 @@ footer { clip: auto; } -@media @mediaScreenMd { +@media @mediaMd { .ui.container { width: 95%; } @@ -936,7 +936,7 @@ footer { border-width: 1px !important; } -@media only screen and @breakLgMax { +@media @mediaLgAndDown { .ui.menu.new-menu { overflow-x: auto !important; justify-content: left !important; @@ -1377,7 +1377,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 bdfe7766dde9..d6f3ac4aac73 100644 --- a/web_src/less/_dashboard.less +++ b/web_src/less/_dashboard.less @@ -35,7 +35,7 @@ left: 90%; width: 15%; - @media @mediaScreenSm { + @media @mediaSm { top: 10px; left: auto; width: auto; @@ -57,7 +57,7 @@ left: auto !important; } - @media @mediaScreenSm { + @media @mediaSm { width: 100%; } } diff --git a/web_src/less/_form.less b/web_src/less/_form.less index e55ad31c7351..46099f4c4a05 100644 --- a/web_src/less/_form.less +++ b/web_src/less/_form.less @@ -144,7 +144,7 @@ textarea:focus, text-align: center; } - @media only screen and @breakMdMin { + @media @mediaMdAndUp { width: 800px !important; .header { @@ -171,7 +171,7 @@ textarea:focus, } } - @media @mediaScreenSm { + @media @mediaSm { .optional .title { margin-left: 15px; } @@ -213,7 +213,7 @@ textarea:focus, } } -@media only screen and @breakMdMin { +@media @mediaMdAndUp { .g-recaptcha, .h-captcha { margin: 0 auto !important; @@ -222,7 +222,7 @@ textarea:focus, } } -@media screen and (max-height: 575px) { +@media (max-height: 575px) { #rc-imageselect, .g-recaptcha, .h-captcha { @@ -253,7 +253,7 @@ textarea:focus, .inline.field > label, input { - @media @mediaScreenSm { + @media @mediaSm { width: 100% !important; } } @@ -291,7 +291,7 @@ textarea:focus, width: 50% !important; } - @media @mediaScreenSm { + @media @mediaSm { label, input, .selection.dropdown { @@ -309,7 +309,7 @@ textarea:focus, &.new.repo { .ui.form { - @media only screen and @breakMdMin { + @media @mediaMdAndUp { #auto-init { margin-left: @create-page-form-input-padding+15px; } @@ -318,7 +318,7 @@ textarea:focus, .selection.dropdown:not(.owner) { width: 50% !important; - @media @mediaScreenSm { + @media @mediaSm { width: 100% !important; } } @@ -347,7 +347,7 @@ textarea:focus, } .new.org .ui.form { - @media @mediaScreenSm { + @media @mediaSm { .field button, .field a { margin-bottom: 1em; diff --git a/web_src/less/_home.less b/web_src/less/_home.less index c8671c468134..6c9342f4e0c6 100644 --- a/web_src/less/_home.less +++ b/web_src/less/_home.less @@ -6,7 +6,7 @@ } .hero { - @media @mediaScreenSm { + @media @mediaSm { h1 { font-size: 3.5em; } @@ -16,7 +16,7 @@ } } - @media only screen and @breakMdMin { + @media @mediaMdAndUp { h1 { font-size: 5.5em; } @@ -58,7 +58,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 518ee837917f..7fa2a25a31b2 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -122,7 +122,7 @@ text-overflow: ellipsis; } - @media @breakLgMax { + @media @mediaLgAndDown { .title { max-width: 150px; } @@ -221,7 +221,7 @@ #clone-panel { width: 350px; - @media @mediaScreenSm { + @media @mediaSm { width: 100%; } @@ -284,7 +284,7 @@ } .ui.tiny.blue.buttons { - @media @mediaScreenSm { + @media @mediaSm { width: 100%; } } @@ -634,7 +634,7 @@ width: 100%; } - @media @mediaScreenSm { + @media @mediaSm { flex-direction: column; h1 { @@ -1035,7 +1035,7 @@ #avatar-arrow; } - @media @mediaScreenSm { + @media @mediaSm { .form .button { width: 100%; @@ -1588,7 +1588,7 @@ background: #ffffff; line-height: 30px; - @media only screen and @breakMdMax { + @media @mediaMdAndDown { flex-direction: column; align-items: flex-start; } @@ -2029,13 +2029,13 @@ button, input { - @media only screen and (max-width: 438px) { + @media (max-width: 438px) { width: 100%; } } button { - @media @mediaScreenSm { + @media @mediaSm { margin-bottom: 1em; } } @@ -2120,7 +2120,7 @@ } } - @media @mediaScreenSm { + @media @mediaSm { .dividing.header .stackable.grid .button { margin-top: 2px; margin-bottom: 2px; @@ -2995,7 +2995,7 @@ tbody.commit-list { vertical-align: middle; } -@media @mediaScreenSm { +@media @mediaSm { tr.commit-list { width: 100%; } @@ -3005,7 +3005,7 @@ tbody.commit-list { } } -@media @mediaScreenMd { +@media @mediaMd { tr.commit-list { width: 723px; } @@ -3014,7 +3014,7 @@ tbody.commit-list { } } -@media @mediaScreenLg { +@media @mediaLg { tr.commit-list { width: 933px; } @@ -3023,7 +3023,7 @@ tbody.commit-list { } } -@media @mediaScreenXl { +@media @mediaXl { tr.commit-list { width: 1127px; } @@ -3069,7 +3069,7 @@ tbody.commit-list { } } -@media @mediaScreenSm { +@media @mediaSm { .ui.stackable.menu { &.mobile--margin-between-items > .item { margin-top: 5px; @@ -3329,7 +3329,7 @@ td.blob-excerpt { .repository .ui.menu.new-menu { background: none !important; - @media only screen and @breakLgMax { + @media @mediaLgAndDown { &::after { background: none !important; } diff --git a/web_src/less/_review.less b/web_src/less/_review.less index eaf5eec3e91a..b7b67f9a3ff2 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -144,7 +144,7 @@ a.blob-excerpt:hover { margin-left: .5rem; } -@media @mediaScreenSm { +@media @mediaSm { #review-box > .menu { > .ui.segment { width: 94vw; @@ -159,19 +159,19 @@ a.blob-excerpt:hover { } } -@media @mediaScreenMd { +@media @mediaMd { #review-box .CodeMirror-scroll { max-width: 700px; } } -@media @mediaScreenLg { +@media @mediaLg { #review-box .CodeMirror-scroll { max-width: 800px; } } -@media @mediaScreenXl { +@media @mediaXl { #review-box .CodeMirror-scroll { max-width: 900px; } diff --git a/web_src/less/_user.less b/web_src/less/_user.less index 3f5b6e38774c..333db8c7b77f 100644 --- a/web_src/less/_user.less +++ b/web_src/less/_user.less @@ -53,7 +53,7 @@ img { width: 100%; } - @media @mediaScreenSm { + @media @mediaSm { height: 250px; overflow: hidden; @@ -64,7 +64,7 @@ } } - @media @mediaScreenSm { + @media @mediaSm { width: 100%; } } diff --git a/web_src/less/features/heatmap.less b/web_src/less/features/heatmap.less index eecdff7d3cae..d6d79b4f0a2f 100644 --- a/web_src/less/features/heatmap.less +++ b/web_src/less/features/heatmap.less @@ -9,7 +9,7 @@ padding: 0 !important; } - @media @breakLgMax { + @media @mediaLgAndDown { & { display: none; } @@ -33,7 +33,7 @@ left: 25px; } -@media @breakLgMax { +@media @mediaLgAndDown { .heatmap-container .total-contributions { left: 21px; } diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 1b98e75d38b5..977354fe7347 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -1251,7 +1251,7 @@ td.blob-hunk { background: #2a2e3a; border-color: transparent !important; - @media only screen and @breakLgMax { + @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 index 20ba3b8bd662..394c0dc82cc3 100644 --- a/web_src/less/variables.less +++ b/web_src/less/variables.less @@ -1,21 +1,14 @@ // here a standard set of media queries is defined, that is compatible with the // responsive grid used in formantic css. As there only is a precompiled build -// of formantic checked in (since 946bbbe),we can't use their less variables +// of fomantic checked in (since 946bbbe), we can't use their less variables // here, but these breakpoints shouldn't change in the foreseable future. -@breakSmMax: ~"(max-width: 767px)"; -@breakMdMin: ~"(min-width: 768px)"; -@breakMdMax: ~"(max-width: 991px)"; -@breakLgMin: ~"(min-width: 992px)"; -@breakLgMax: ~"(max-width: 1200px)"; -@breakXlMin: ~"(min-width: 1201px)"; +@mediaMdAndUp: ~"(min-width: 768px)"; +@mediaMdAndDown: ~"(max-width: 991px)"; +@mediaLgAndUp: ~"(min-width: 992px)"; +@mediaLgAndDown: ~"(max-width: 1200px)"; -@mediaSm: @breakSmMax; -@mediaMd: ~"@breakMdMin and @breakMdMax"; -@mediaLg: ~"@breakLgMin and @breakLgMax"; -@mediaXl: ~"@breakXlMin"; - -@mediaScreenSm: ~"screen and @mediaSm"; -@mediaScreenMd: ~"screen and @mediaMd"; -@mediaScreenLg: ~"screen and @mediaLg"; -@mediaScreenXl: ~"screen and @mediaXl"; +@mediaSm: ~"(max-width: 767px)"; +@mediaMd: @mediaMdAndUp and @mediaMdAndDown; +@mediaLg: @mediaLgAndUp and @mediaLgAndDown; +@mediaXl: ~"(min-width: 1201px)"; From fb6d6ab6ccbbc4cd029f71d37263c43acf59159c Mon Sep 17 00:00:00 2001 From: Norwin Roosen Date: Sun, 15 Nov 2020 23:27:13 +0100 Subject: [PATCH 6/8] fix less import --- web_src/less/_admin.less | 2 -- web_src/less/_base.less | 2 -- web_src/less/_dashboard.less | 2 -- web_src/less/_form.less | 2 -- web_src/less/_home.less | 2 -- web_src/less/features/heatmap.less | 2 -- web_src/less/index.less | 1 + 7 files changed, 1 insertion(+), 12 deletions(-) diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less index 4a943a81d1d2..a9931eb8d437 100644 --- a/web_src/less/_admin.less +++ b/web_src/less/_admin.less @@ -1,5 +1,3 @@ -@import "./variables.less"; - .admin { &.notice { padding-top: 15px; diff --git a/web_src/less/_base.less b/web_src/less/_base.less index e6005472e801..a08ff50e0479 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -1,5 +1,3 @@ -@import "./variables.less"; - :root { /* documented customizable variables */ --fonts-proportional: -apple-system, "BlinkMacSystemFont", system-ui, "Segoe UI", "Roboto", "Helvetica", "Arial"; diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less index d6f3ac4aac73..b73959c6ab36 100644 --- a/web_src/less/_dashboard.less +++ b/web_src/less/_dashboard.less @@ -1,5 +1,3 @@ -@import "./variables.less"; - .dashboard { padding-top: 15px; diff --git a/web_src/less/_form.less b/web_src/less/_form.less index 46099f4c4a05..5116fa5cf23d 100644 --- a/web_src/less/_form.less +++ b/web_src/less/_form.less @@ -1,5 +1,3 @@ -@import "./variables.less"; - input, textarea, .ui.input > input, diff --git a/web_src/less/_home.less b/web_src/less/_home.less index 6c9342f4e0c6..affc5b255b8d 100644 --- a/web_src/less/_home.less +++ b/web_src/less/_home.less @@ -1,5 +1,3 @@ -@import "./variables.less"; - .home { .logo { max-width: 220px; diff --git a/web_src/less/features/heatmap.less b/web_src/less/features/heatmap.less index d6d79b4f0a2f..f11c71c32885 100644 --- a/web_src/less/features/heatmap.less +++ b/web_src/less/features/heatmap.less @@ -1,5 +1,3 @@ -@import "../variables.less"; - #user-heatmap { width: 107%; // Fixes newest contributions not showing text-align: center; diff --git a/web_src/less/index.less b/web_src/less/index.less index 15b9062e1c12..e99cbc724e50 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -23,3 +23,4 @@ @import "_chroma"; @import "./helpers.less"; +@import "./variables.less"; From 484a7e7a20c917a17190b693b68e5623730a8194 Mon Sep 17 00:00:00 2001 From: Norwin Date: Sun, 15 Nov 2020 22:28:22 +0000 Subject: [PATCH 7/8] Apply suggestions from code review Co-authored-by: silverwind --- web_src/less/variables.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/less/variables.less b/web_src/less/variables.less index 394c0dc82cc3..23f6ac6de9e0 100644 --- a/web_src/less/variables.less +++ b/web_src/less/variables.less @@ -1,7 +1,7 @@ // here a standard set of media queries is defined, that is compatible with the -// responsive grid used in formantic css. As there only is a precompiled build +// 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 foreseable future. +// here, but these breakpoints shouldn't change in the foreseeable future. @mediaMdAndUp: ~"(min-width: 768px)"; @mediaMdAndDown: ~"(max-width: 991px)"; From a6a0ac146450a5b24d8a15ce3d1637ec0a8ed456 Mon Sep 17 00:00:00 2001 From: Norwin Roosen Date: Mon, 16 Nov 2020 09:45:44 +0100 Subject: [PATCH 8/8] code review altough it doesnt matter, LESS lazy evals variables --- web_src/less/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/index.less b/web_src/less/index.less index e99cbc724e50..1b0701ae8149 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"; @@ -23,4 +24,3 @@ @import "_chroma"; @import "./helpers.less"; -@import "./variables.less";