github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-06 13:06:56 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Enforce 'prefix' notation for media-query ranges (#30913)

Browse Source 
"context" notation is not supported in iOS < 16.4, and we don't have any
post-processing on our CSS files which can automatically make that
conversion.

For now, changing the stylelint config to enforce the more-compatible
syntax, and updating all occurences.
This commit is contained in:
David Taylor
2025-01-21 23:42:17 +00:00
committed by GitHub
parent 9b100db91c
commit c266e4acb8
33 changed files with 85 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -90,7 +90,7 @@ $mobile-breakpoint: 700px;
position: relative;
.nav-stacked {
@media screen and (width <= 700px) {
@media screen and (max-width: 700px) {
margin: 0;
}
}
@ -108,7 +108,7 @@ $mobile-breakpoint: 700px;
&.admin-site-settings-category {
overflow: hidden;
@media (width <= 500px) {
@media (max-width: 500px) {
background-color: var(--primary-very-low);
}
}
@ -143,7 +143,7 @@ $mobile-breakpoint: 700px;
display: none;
}
@media screen and (width <= 970px) and (width >= 768px) {
@media screen and (max-width: 970px) and (min-width: 768px) {
td,
th {
padding: 6px 4px;
@ -173,7 +173,7 @@ $mobile-breakpoint: 700px;
.admin-contents table.grid {
// Table switches to grid for narrow screens
@media screen and (width <= 767px) {
@media screen and (max-width: 767px) {
thead {
display: none;
}
@ -240,7 +240,7 @@ $mobile-breakpoint: 700px;
}
}
@media screen and (width >= 550px) {
@media screen and (min-width: 550px) {
tr {
grid-template-columns: repeat(6, 1fr);
}
@ -587,7 +587,7 @@ $mobile-breakpoint: 700px;
.username {
input[type="text"] {
min-width: 15em;
@media screen and (width <= 500px) {
@media screen and (max-width: 500px) {
box-sizing: border-box;
width: 100%;
}
@ -608,7 +608,7 @@ $mobile-breakpoint: 700px;
.search-logs-filter {
margin-left: auto;
@media screen and (width <= 700px) {
@media screen and (max-width: 700px) {
flex: 1 1 100%;
margin-left: 0;
}
@ -788,7 +788,7 @@ $mobile-breakpoint: 700px;
// Hide the search checkbox for very small screens
// Todo: find somewhere to display it - probably requires switching its order in the html
@media (width <= 550px) {
@media (max-width: 550px) {
display: none;
}
}
@ -840,7 +840,7 @@ $mobile-breakpoint: 700px;
z-index: z("base") - 1;
width: 250px;
}
@media (width <= 500px) {
@media (max-width: 500px) {
width: 50%;
}
@ -875,7 +875,7 @@ $mobile-breakpoint: 700px;
transition: transform 0.3s ease;
@include transform(translateX(250px));
}
@media (width <= 500px) {
@media (max-width: 500px) {
transition: transform 0.3s ease;
@include transform(translateX(50%));
}
@ -945,7 +945,7 @@ section.details {
}
}
@media all and (width >= 320px) and (width <= 500px) {
@media all and (min-width: 320px) and (max-width: 500px) {
.full-width {
margin: 0;
}

4
app/assets/stylesheets/common/admin/admin_filter.scss
View File

@ -6,14 +6,14 @@
.admin-filter__input-container {
min-width: 50%;
@media screen and (width <= 500px) {
@media screen and (max-width: 500px) {
width: 100%;
}
input {
min-width: 15em;
margin: 0;
@media screen and (width <= 500px) {
@media screen and (max-width: 500px) {
box-sizing: border-box;
width: 100%;
}

2
app/assets/stylesheets/common/admin/admin_report.scss
View File

@ -213,7 +213,7 @@
border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.5em;
@media screen and (width <= 400px) {
@media screen and (max-width: 400px) {
flex-wrap: wrap;
}

2
app/assets/stylesheets/common/admin/admin_report_counters.scss
View File

@ -26,7 +26,7 @@
}
}
@media screen and (width <= 400px) {
@media screen and (max-width: 400px) {
&.title .d-icon {
display: none;
}

12
app/assets/stylesheets/common/admin/customize.scss
View File

@ -200,11 +200,11 @@
justify-content: space-between;
width: 79.7%;
@media screen and (width <= 700px) {
@media screen and (max-width: 700px) {
width: 100%;
}
@media screen and (width >= 700px) and (width <= 768px) {
@media screen and (min-width: 700px) and (max-width: 768px) {
width: 73%;
}
@ -386,10 +386,10 @@
max-height: 60vh;
border-bottom-right-radius: var(--d-border-radius);
border-bottom-left-radius: var(--d-border-radius);
@media screen and (height <= 1000px) {
@media screen and (max-height: 1000px) {
max-height: 50vh;
}
@media screen and (height <= 800px) {
@media screen and (max-height: 800px) {
max-height: 40vh;
}
border-right: 1px solid var(--primary-low);
@ -937,7 +937,7 @@
width: calc(100% - 10px);
}
}
@media screen and (width <= 880px) {
@media screen and (max-width: 880px) {
table.grid {
thead {
display: none;
@ -961,7 +961,7 @@
}
}
@media screen and (width <= 580px) {
@media screen and (max-width: 580px) {
table.grid {
tr td.editing-input {
grid-column-start: 1;

6
app/assets/stylesheets/common/admin/dashboard.scss
View File

@ -109,7 +109,7 @@
border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.5em;
@media screen and (width <= 400px) {
@media screen and (max-width: 400px) {
flex-wrap: wrap;
}
@ -197,7 +197,7 @@
}
}
@media screen and (width <= 400px) {
@media screen and (max-width: 400px) {
flex-wrap: wrap;
.storage-stats,
@ -547,7 +547,7 @@
.update-header {
flex: 1 1 100%;
@media screen and (width <= 650px) {
@media screen and (max-width: 650px) {
margin: 0;
}

14
app/assets/stylesheets/common/admin/staff_logs.scss
View File

@ -9,7 +9,7 @@
.staff-actions {
width: 100%;
word-wrap: break-word;
@media screen and (width >= 550px) and (width <= 767px) {
@media screen and (min-width: 550px) and (max-width: 767px) {
table.staff-logs tr {
display: grid;
grid-template-rows: auto auto;
@ -169,10 +169,10 @@
.combobox {
width: 140px;
}
@media screen and (width >= 900px) {
@media screen and (min-width: 900px) {
margin-left: auto;
}
@media screen and (width <= 899px) {
@media screen and (max-width: 899px) {
margin-top: 1em;
}
}
@ -193,13 +193,13 @@ table.screened-ip-addresses {
}
}
@media screen and (width >= 550px) {
@media screen and (min-width: 550px) {
table.screened-ip-addresses tr {
grid-template-columns: repeat(5, 1fr) auto;
}
}
@media screen and (width <= 549px) {
@media screen and (max-width: 549px) {
table.screened-ip-addresses tr {
td.actions {
grid-row: 3;
@ -382,7 +382,7 @@ table.search-logs-list {
td.term {
width: 60%;
word-wrap: break-word;
@media screen and (width <= 767px) {
@media screen and (max-width: 767px) {
width: 100%;
}
}
@ -391,7 +391,7 @@ table.search-logs-list {
td:not(.term) {
text-align: center;
}
@media screen and (width >= 550px) {
@media screen and (min-width: 550px) {
tr {
td.term {
grid-column-start: 1;

2
app/assets/stylesheets/common/base/activation.scss
View File

@ -24,7 +24,7 @@
padding: 2rem 3rem;
background: var(--secondary);
margin: 10vh auto 1em auto;
@media screen and (height <= 700px) {
@media screen and (max-height: 700px) {
margin: 1em auto 1em auto;
}
}

4
app/assets/stylesheets/common/base/compose.scss
View File

@ -23,7 +23,7 @@ html.composer-open {
max-width: 740px;
}
@media screen and (width <= 1200px) {
@media screen and (max-width: 1200px) {
min-width: 0;
}
z-index: z("composer", "content");
@ -165,7 +165,7 @@ html.composer-open {
margin-right: 5px;
max-width: 100px;
@include ellipsis;
@media screen and (width <= 500px) {
@media screen and (max-width: 500px) {
display: none;
}
}

2
app/assets/stylesheets/common/base/crawler_layout.scss
View File

@ -138,7 +138,7 @@ body > noscript {
width: 20%;
}
@media (width <= 850px) {
@media (max-width: 850px) {
table-layout: auto;
margin: 0;

6
app/assets/stylesheets/common/base/magnific-popup.scss
View File

@ -532,8 +532,8 @@ button {
}
@if $include-mobile-layout-for-image {
@media all and (width <= 800px) and (orientation: landscape),
screen and (height <= 300px) {
@media all and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
@ -599,7 +599,7 @@ button {
}
// Scale navigation arrows and reduce padding from sides
@media all and (width <= 900px) {
@media all and (max-width: 900px) {
.mfp-arrow {
@include transform(scale(0.75));
}

4
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -134,7 +134,7 @@
position: relative;
border-radius: 0;
padding: 0.857em;
@media screen and (height <= 400px) {
@media screen and (max-height: 400px) {
// helps with 400% zoom level
font-size: var(--font-down-1);
padding: 0.5em 0.875em;
@ -150,7 +150,7 @@
right: 6px;
top: 6px;
font-size: var(--font-down-3);
@media screen and (height <= 400px) {
@media screen and (max-height: 400px) {
// helps with 400% zoom level
right: 0;
top: 0;

2
app/assets/stylesheets/common/base/modal.scss
View File

@ -368,7 +368,7 @@
width: calc(100% - 36px);
padding: 10px 4px 4px 4px;
}
@media screen and (width <= 760px) {
@media screen and (max-width: 760px) {
.incoming-email-html-part {
width: calc(100% - 10px);
}

6
app/assets/stylesheets/common/base/not-found.scss
View File

@ -18,7 +18,7 @@
.page-not-found-topics {
display: flex;
@media screen and (width <= 600px) {
@media screen and (max-width: 600px) {
flex-wrap: wrap;
}
}
@ -30,7 +30,7 @@
max-width: 400px;
margin-bottom: 40px;
padding-right: 20px;
@media screen and (width <= 600px) {
@media screen and (max-width: 600px) {
width: 100%;
}
@ -44,7 +44,7 @@
flex-wrap: wrap;
align-items: baseline;
margin-bottom: 15px;
@media screen and (width <= 600px) {
@media screen and (max-width: 600px) {
&:nth-of-type(n + 6) {
display: none;
}

2
app/assets/stylesheets/common/base/onebox.scss
View File

@ -154,7 +154,7 @@ aside.onebox {
img:not(.avatar, .onebox-avatar-inline) {
max-height: 170px;
max-width: 20%;
@media all and (width <= 600px) {
@media all and (max-width: 600px) {
max-width: 35%;
}
height: auto;

4
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -689,7 +689,7 @@ aside.quote {
.buttons {
display: flex;
flex-wrap: wrap;
@media screen and (width <= 420px) {
@media screen and (max-width: 420px) {
flex-direction: column;
align-items: flex-start;
@ -1344,7 +1344,7 @@ span.mention {
}
}
@media all and (width <= 767px) {
@media all and (max-width: 767px) {
.reply-to-tab {
span {
display: none;

6
app/assets/stylesheets/common/base/topic.scss
View File

@ -51,7 +51,7 @@
}
// timeline
@media screen and (width >= 925px) {
@media screen and (min-width: 925px) {
// at 925px viewport width and above the timeline is visible (see topic-navigation.js)
.topic-navigation {
grid-area: timeline;
@ -94,7 +94,7 @@
}
// progress bar
@media screen and (width <= 924px) {
@media screen and (max-width: 924px) {
grid-template-areas: "posts";
grid-template-columns: auto;
@ -193,7 +193,7 @@
.title-wrapper {
display: flex;
flex-wrap: wrap;
@media screen and (width >= 925px) {
@media screen and (min-width: 925px) {
width: 90%; // topic title isn't full-width on wide screens
}
}

6
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -44,7 +44,7 @@
}
}
@media all and (width <= 750px) {
@media all and (max-width: 750px) {
.show-badge .user-badge-with-posts .badge-user a.post-link {
width: auto;
}
@ -231,7 +231,7 @@
h3 {
margin-bottom: 0.25em;
font-size: var(--font-up-1);
@media screen and (width >= 900px) {
@media screen and (min-width: 900px) {
font-size: var(--font-up-2);
}
}
@ -242,7 +242,7 @@
width: 100%;
align-self: flex-start;
@media screen and (width >= 767px) {
@media screen and (min-width: 767px) {
max-width: calc(var(--d-max-width) / 2);
}

2
app/assets/stylesheets/common/base/user.scss
View File

@ -520,7 +520,7 @@
}
}
@media all and (width <= 600px) {
@media all and (max-width: 600px) {
float: none;
width: 100%;
}

4
app/assets/stylesheets/common/components/topic-map.scss
View File

@ -51,7 +51,7 @@ body:not(.archetype-private_message) {
&.--op,
&.--bottom {
@media screen and (width <= 500px) {
@media screen and (max-width: 500px) {
padding-left: 0;
}
}
@ -253,7 +253,7 @@ body:not(.archetype-private_message) {
color: var(--primary-medium);
}
@media screen and (width <= 475px) {
@media screen and (max-width: 475px) {
display: none;
}
}

2
app/assets/stylesheets/common/login/invite-signup.scss
View File

@ -81,7 +81,7 @@
padding: 2rem 3rem;
background: var(--secondary);
margin: 0 auto;
@media screen and (width <= 700px) {
@media screen and (max-width: 700px) {
margin: 1em auto 1em auto;
padding: 1rem;
}

2
app/assets/stylesheets/common/modal/login-modal.scss
View File

@ -166,7 +166,7 @@
}
.desktop-view & {
@media screen and (width <= 767px) {
@media screen and (max-width: 767px) {
// important to maintain narrow desktop widths
// for auth modals in Discourse Hub on iPad
.d-modal__header {

2
app/assets/stylesheets/common/modal/modal-overrides.scss
View File

@ -343,7 +343,7 @@
}
}
@media screen and (width <= 768px) {
@media screen and (max-width: 768px) {
.d-modal {
&__container {
width: 100%;

6
app/assets/stylesheets/common/topic-timeline.scss
View File

@ -20,7 +20,7 @@
transition: max-height 0.4s ease-out;
}
@media screen and (height <= 425px) {
@media screen and (max-height: 425px) {
max-height: 75vh;
}
@ -53,7 +53,7 @@
box-shadow: var(--shadow-composer);
padding: 20px 0;
z-index: z("fullscreen");
@media screen and (height <= 425px) {
@media screen and (max-height: 425px) {
padding-top: 10px;
}
@ -78,7 +78,7 @@
line-height: var(--line-height-large);
display: block;
@include line-clamp(8);
@media screen and (height <= 425px) {
@media screen and (max-height: 425px) {
@include line-clamp(5);
}
}

6
app/assets/stylesheets/desktop/category-list.scss
View File

@ -170,13 +170,13 @@
}
div.column.categories {
@media all and (width <= 600px) {
@media all and (max-width: 600px) {
margin-right: 0;
}
@media all and (width >= 600px) {
@media all and (min-width: 600px) {
margin-right: 1em;
}
@media all and (width >= 700px) {
@media all and (min-width: 700px) {
margin-right: 2em;
}
}

2
app/assets/stylesheets/desktop/login-signup-page.scss
View File

@ -47,7 +47,7 @@
height: 100%;
}
@media screen and (width <= 767px) {
@media screen and (max-width: 767px) {
// important to maintain narrow desktop widths
// for auth modals in Discourse Hub on iPad
.has-alt-auth {

2
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -750,7 +750,7 @@ span.highlighted {
/* Tablet (portrait) ----------- */
@media all and (width <= 790px) {
@media all and (max-width: 790px) {
.topic-avatar {
width: 45px;
}

2
app/assets/stylesheets/mobile/components/user-card.scss
View File

@ -105,7 +105,7 @@
}
.public-user-fields {
@media screen and (height <= 550px) {
@media screen and (max-height: 550px) {
max-height: 12vh;
}
max-height: 40vh;

2
app/assets/stylesheets/mobile/modal.scss
View File

@ -82,7 +82,7 @@ html:not(.keyboard-visible.mobile-view) {
font-size: var(--font-up-4);
}
@media only screen and (device-width <= 568px) {
@media only screen and (max-device-width: 568px) {
.flag-modal-body .flag-message {
height: 3em;
}

2
app/assets/stylesheets/mobile/topic-post.scss
View File

@ -138,7 +138,7 @@ nav.post-controls button.reply .d-icon {
.post-admin-menu {
bottom: -50px;
left: 135px;
@media screen and (width <= 374px) {
@media screen and (max-width: 374px) {
left: 50px;
}
}

26
app/assets/stylesheets/wizard.scss
View File

@ -57,7 +57,7 @@ body.wizard {
@include breakpoint("mobile-extra-large") {
height: 50px;
}
@media screen and (height <= 900px) {
@media screen and (max-height: 900px) {
.desktop-view & {
display: none;
}
@ -182,7 +182,7 @@ body.wizard {
&__field.text-governing-law,
&__field.text-city-for-disputes {
@media only screen and (width <= 568px) {
@media only screen and (max-width: 568px) {
display: none;
}
}
@ -202,7 +202,7 @@ body.wizard {
box-sizing: border-box;
margin-right: 1em;
@media only screen and (width <= 925px) {
@media only screen and (max-width: 925px) {
width: 100%;
margin-left: auto;
margin-right: auto;
@ -215,7 +215,7 @@ body.wizard {
border-radius: 0.5em;
margin-top: -1em;
@media only screen and (width <= 925px) {
@media only screen and (max-width: 925px) {
display: none;
}
}
@ -312,7 +312,7 @@ body.wizard {
&__step-form {
flex: 1 0 50%;
@media only screen and (width <= 568px) {
@media only screen and (max-width: 568px) {
width: 100%;
}
}
@ -344,7 +344,7 @@ body.wizard {
&__step-text {
display: inline;
@media only screen and (width <= 568px) {
@media only screen and (max-width: 568px) {
display: none;
}
}
@ -549,7 +549,7 @@ body.wizard {
margin: 0;
}
@media only screen and (width <= 568px) {
@media only screen and (max-width: 568px) {
font-size: var(--font-0);
}
}
@ -558,7 +558,7 @@ body.wizard {
color: var(--primary-high);
font-size: var(--font-up-1);
margin: 0.25em 0 0.5em 3.5em;
@media only screen and (width <= 568px) {
@media only screen and (max-width: 568px) {
margin-left: 2em;
}
}
@ -619,7 +619,7 @@ body.wizard {
position: relative;
vertical-align: middle;
transition: background 0.25s;
@media only screen and (width <= 568px) {
@media only screen and (max-width: 568px) {
height: 20px;
width: 35px;
}
@ -637,7 +637,7 @@ body.wizard {
color: var(--secondary);
top: 4px;
left: 9px;
@media only screen and (width <= 568px) {
@media only screen and (max-width: 568px) {
top: 3px;
left: 5px;
font-size: var(--font-down-3);
@ -652,7 +652,7 @@ body.wizard {
top: 4px;
left: 4px;
transition: left 0.25s;
@media only screen and (width <= 568px) {
@media only screen and (max-width: 568px) {
height: 12px;
width: 12px;
}
@ -671,7 +671,7 @@ body.wizard {
&__checkbox:checked + .wizard-container__checkbox-slider::before {
left: 26px;
@media only screen and (width <= 568px) {
@media only screen and (max-width: 568px) {
left: 20px;
}
}
@ -750,7 +750,7 @@ body.wizard {
.wizard-congratulations-wrap {
display: flex;
gap: 1em;
@media screen and (width <= 750px) {
@media screen and (max-width: 750px) {
flex-direction: column-reverse;
}
}

2
plugins/discourse-presence/assets/stylesheets/presence.scss
View File

@ -75,7 +75,7 @@
// When topic progress is visible in the posts grid area and is sticky,
// adjust positioning so presence is on the same line
@media screen and (width <= 924px) {
@media screen and (max-width: 924px) {
body:has(.topic-navigation.with-topic-progress)
.topic-above-footer-buttons-outlet.presence {
margin-top: -3.2em;

1
stylelint.config.mjs
View File

@ -39,5 +39,6 @@ export default {
"scss/comment-no-empty": null,
"function-linear-gradient-no-nonstandard-direction": null,
"scss/at-mixin-pattern": null,
"media-feature-range-notation": "prefix",
},
};