Skip to content

Commit 75ebf7c

Browse files
noerwzeripathsilverwindtechknowlogick
authored
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 <[email protected]> * code review altough it doesnt matter, LESS lazy evals variables Co-authored-by: zeripath <[email protected]> Co-authored-by: silverwind <[email protected]> Co-authored-by: techknowlogick <[email protected]>
1 parent b838252 commit 75ebf7c

File tree

12 files changed

+72
-51
lines changed

12 files changed

+72
-51
lines changed

‎web_src/less/_admin.less‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,16 +88,16 @@
8888

8989
#notice-table {
9090
.notice-description {
91-
@media only screen and (max-width: 767px) {
91+
@media @mediaSm {
9292
max-width: 80vw;
9393
}
94-
@media only screen and (max-width: 991px) and (min-width: 768px) {
94+
@media @mediaMd {
9595
max-width: 360px;
9696
}
97-
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
97+
@media @mediaLg {
9898
max-width: 510px;
9999
}
100-
@media only screen and (min-width: 1200px) {
100+
@media @mediaXl {
101101
max-width: 640px;
102102
}
103103
}

‎web_src/less/_base.less‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,7 @@ a:hover,
334334
margin-right: 0 !important;
335335
}
336336

337-
@media only screen and (max-width: 767px) {
337+
@media @mediaSm {
338338
#navbar:not(.shown) > *:not(:first-child) {
339339
display: none;
340340
}
@@ -774,7 +774,7 @@ a:hover,
774774
}
775775

776776
&.pagination.menu {
777-
@media only screen and (max-width: 767px) {
777+
@media @mediaSm {
778778
.item:not(.active):not(.navigation),
779779
.item.navigation span.navigation_label {
780780
display: none;
@@ -900,7 +900,7 @@ footer {
900900
}
901901

902902
// Conditional display
903-
@media only screen and (min-width: 768px) {
903+
@media @mediaMdAndUp {
904904
.mobile-only,
905905
.ui.button.mobile-only {
906906
display: none;
@@ -913,7 +913,7 @@ footer {
913913
}
914914
}
915915

916-
@media only screen and (max-width: 767px) {
916+
@media @mediaSm {
917917
.not-mobile {
918918
display: none;
919919
}
@@ -941,7 +941,7 @@ footer {
941941
clip: auto;
942942
}
943943

944-
@media only screen and (max-width: 991px) and (min-width: 768px) {
944+
@media @mediaMd {
945945
.ui.container {
946946
width: 95%;
947947
}
@@ -956,7 +956,7 @@ footer {
956956
border-width: 1px !important;
957957
}
958958

959-
@media only screen and (max-width: 1200px) {
959+
@media @mediaLgAndDown {
960960
.ui.menu.new-menu {
961961
overflow-x: auto !important;
962962
justify-content: left !important;
@@ -1398,7 +1398,7 @@ table th[data-sortt-desc] {
13981398
}
13991399

14001400
.dropdown:not(.selection) > .menu.review-box > * {
1401-
@media only screen and (max-height: 700px) {
1401+
@media (max-height: 700px) {
14021402
.CodeMirror,
14031403
.CodeMirror-scroll {
14041404
min-height: 100px;

‎web_src/less/_dashboard.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
left: 90%;
3434
width: 15%;
3535

36-
@media only screen and (max-width: 768px) {
36+
@media @mediaSm {
3737
top: 10px;
3838
left: auto;
3939
width: auto;
@@ -55,7 +55,7 @@
5555
left: auto !important;
5656
}
5757

58-
@media only screen and (max-width: 768px) {
58+
@media @mediaSm {
5959
width: 100%;
6060
}
6161
}

‎web_src/less/_form.less‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ textarea:focus,
142142
text-align: center;
143143
}
144144

145-
@media only screen and (min-width: 768px) {
145+
@media @mediaMdAndUp {
146146
width: 800px !important;
147147

148148
.header {
@@ -169,7 +169,7 @@ textarea:focus,
169169
}
170170
}
171171

172-
@media only screen and (max-width: 767px) {
172+
@media @mediaSm {
173173
.optional .title {
174174
margin-left: 15px;
175175
}
@@ -211,7 +211,7 @@ textarea:focus,
211211
}
212212
}
213213

214-
@media only screen and (min-width: 768px) {
214+
@media @mediaMdAndUp {
215215
.g-recaptcha,
216216
.h-captcha {
217217
margin: 0 auto !important;
@@ -220,7 +220,7 @@ textarea:focus,
220220
}
221221
}
222222

223-
@media screen and (max-height: 575px) {
223+
@media (max-height: 575px) {
224224
#rc-imageselect,
225225
.g-recaptcha,
226226
.h-captcha {
@@ -252,7 +252,7 @@ textarea:focus,
252252

253253
.inline.field > label,
254254
input {
255-
@media only screen and (max-width: 768px) {
255+
@media @mediaSm {
256256
width: 100% !important;
257257
}
258258
}
@@ -290,7 +290,7 @@ textarea:focus,
290290
width: 50% !important;
291291
}
292292

293-
@media only screen and (max-width: 768px) {
293+
@media @mediaSm {
294294
label,
295295
input,
296296
.selection.dropdown {
@@ -308,7 +308,7 @@ textarea:focus,
308308

309309
&.new.repo {
310310
.ui.form {
311-
@media only screen and (min-width: 768px) {
311+
@media @mediaMdAndUp {
312312
#auto-init {
313313
margin-left: @create-page-form-input-padding+15px;
314314
}
@@ -317,7 +317,7 @@ textarea:focus,
317317
.selection.dropdown:not(.owner) {
318318
width: 50% !important;
319319

320-
@media only screen and (max-width: 768px) {
320+
@media @mediaSm {
321321
width: 100% !important;
322322
}
323323
}
@@ -346,7 +346,7 @@ textarea:focus,
346346
}
347347

348348
.new.org .ui.form {
349-
@media only screen and (max-width: 768px) {
349+
@media @mediaSm {
350350
.field button,
351351
.field a {
352352
margin-bottom: 1em;

‎web_src/less/_home.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55

66
.hero {
7-
@media only screen and (max-width: 767px) {
7+
@media @mediaSm {
88
h1 {
99
font-size: 3.5em;
1010
}
@@ -14,7 +14,7 @@
1414
}
1515
}
1616

17-
@media only screen and (min-width: 768px) {
17+
@media @mediaMdAndUp {
1818
h1 {
1919
font-size: 5.5em;
2020
}
@@ -52,7 +52,7 @@
5252
footer {
5353
.ui.container .left,
5454
.ui.container .right {
55-
@media only screen and (max-width: 880px) {
55+
@media (max-width: 880px) {
5656
display: block;
5757
text-align: center;
5858
float: none;

‎web_src/less/_repository.less‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@
122122
text-overflow: ellipsis;
123123
}
124124

125-
@media (max-width: 1200px) {
125+
@media @mediaLgAndDown {
126126
.title {
127127
max-width: 150px;
128128
}
@@ -216,7 +216,7 @@
216216
#clone-panel {
217217
width: 350px;
218218

219-
@media only screen and (max-width: 768px) {
219+
@media @mediaSm {
220220
width: 100%;
221221
}
222222

@@ -279,7 +279,7 @@
279279
}
280280

281281
.ui.tiny.blue.buttons {
282-
@media only screen and (max-width: 768px) {
282+
@media @mediaSm {
283283
width: 100%;
284284
}
285285
}
@@ -629,7 +629,7 @@
629629
width: 100%;
630630
}
631631

632-
@media only screen and (max-width: 768px) {
632+
@media @mediaSm {
633633
flex-direction: column;
634634

635635
h1 {
@@ -1025,7 +1025,7 @@
10251025
}
10261026
}
10271027

1028-
@media only screen and (max-width: 767px) {
1028+
@media @mediaSm {
10291029
.form .button {
10301030
width: 100%;
10311031

@@ -1578,7 +1578,7 @@
15781578
background: #ffffff;
15791579
line-height: 30px;
15801580

1581-
@media only screen and (max-width: 992px) {
1581+
@media @mediaMdAndDown {
15821582
flex-direction: column;
15831583
align-items: flex-start;
15841584
}
@@ -2019,13 +2019,13 @@
20192019

20202020
button,
20212021
input {
2022-
@media only screen and (max-width: 438px) {
2022+
@media (max-width: 438px) {
20232023
width: 100%;
20242024
}
20252025
}
20262026

20272027
button {
2028-
@media only screen and (max-width: 768px) {
2028+
@media @mediaSm {
20292029
margin-bottom: 1em;
20302030
}
20312031
}
@@ -2110,7 +2110,7 @@
21102110
}
21112111
}
21122112

2113-
@media only screen and (max-width: 767px) {
2113+
@media @mediaSm {
21142114
.dividing.header .stackable.grid .button {
21152115
margin-top: 2px;
21162116
margin-bottom: 2px;
@@ -3002,7 +3002,7 @@ tbody.commit-list {
30023002
vertical-align: middle;
30033003
}
30043004

3005-
@media only screen and (max-width: 767.98px) {
3005+
@media @mediaSm {
30063006
tr.commit-list {
30073007
width: 100%;
30083008
}
@@ -3012,7 +3012,7 @@ tbody.commit-list {
30123012
}
30133013
}
30143014

3015-
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
3015+
@media @mediaMd {
30163016
tr.commit-list {
30173017
width: 723px;
30183018
}
@@ -3021,7 +3021,7 @@ tbody.commit-list {
30213021
}
30223022
}
30233023

3024-
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
3024+
@media @mediaLg {
30253025
tr.commit-list {
30263026
width: 933px;
30273027
}
@@ -3030,7 +3030,7 @@ tbody.commit-list {
30303030
}
30313031
}
30323032

3033-
@media only screen and (min-width: 1200px) {
3033+
@media @mediaXl {
30343034
tr.commit-list {
30353035
width: 1127px;
30363036
}
@@ -3076,7 +3076,7 @@ tbody.commit-list {
30763076
}
30773077
}
30783078

3079-
@media only screen and (max-width: 767px) {
3079+
@media @mediaSm {
30803080
.ui.stackable.menu {
30813081
&.mobile--margin-between-items > .item {
30823082
margin-top: 5px;
@@ -3336,7 +3336,7 @@ td.blob-excerpt {
33363336
.repository .ui.menu.new-menu {
33373337
background: none !important;
33383338

3339-
@media only screen and (max-width: 1200px) {
3339+
@media @mediaLgAndDown {
33403340
&::after {
33413341
background: none !important;
33423342
}

‎web_src/less/_review.less‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "variables.less";
2+
13
.ui.button.add-code-comment {
24
padding: 2px;
35
position: absolute;
@@ -146,7 +148,7 @@ a.blob-excerpt:hover {
146148
margin-left: .5rem;
147149
}
148150

149-
@media only screen and (max-width: 768px) {
151+
@media @mediaSm {
150152
#review-box > .menu {
151153
> .ui.segment {
152154
width: 94vw;
@@ -161,19 +163,19 @@ a.blob-excerpt:hover {
161163
}
162164
}
163165

164-
@media only screen and (min-width: 768px) and (max-width: 992px) {
166+
@media @mediaMd {
165167
#review-box .CodeMirror-scroll {
166168
max-width: 700px;
167169
}
168170
}
169171

170-
@media only screen and (min-width: 992px) and (max-width: 1200px) {
172+
@media @mediaLg {
171173
#review-box .CodeMirror-scroll {
172174
max-width: 800px;
173175
}
174176
}
175177

176-
@media only screen and (min-width: 1200px) {
178+
@media @mediaXl {
177179
#review-box .CodeMirror-scroll {
178180
max-width: 900px;
179181
}

0 commit comments

Comments
 (0)