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

A11Y: set modal widths with EMs; improves scaling (#14863)

Browse Source
This commit is contained in:
Kris
2021-11-09 14:56:05 -05:00
committed by GitHub
parent 3becc55833
commit a87216f1f3
5 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,10 +12,11 @@
} }
.modal-inner-container { .modal-inner-container {
--modal-max-width: 47em; // set in ems to scale with user font-size
box-sizing: border-box; box-sizing: border-box;
flex: 0 1 auto; flex: 0 1 auto;
margin: 0 auto; margin: 0 auto;
max-width: 700px; max-width: var(--modal-max-width);
background-color: var(--secondary); background-color: var(--secondary);
box-shadow: shadow("modal"); box-shadow: shadow("modal");
@ -273,7 +274,7 @@
pre code { pre code {
white-space: pre-wrap; white-space: pre-wrap;
max-width: 700px; max-width: var(--modal-max-width);
} }
} }
@ -364,7 +365,7 @@
} }
.incoming-email-content { .incoming-email-content {
height: 300px; height: 300px;
max-width: 700px; max-width: 100%;
width: 90vw; // forcing textarea wider width: 90vw; // forcing textarea wider
textarea, textarea,
.incoming-email-html-part { .incoming-email-html-part {
@ -372,6 +373,7 @@
border: none; border: none;
border-top: 1px solid var(--primary-low); border-top: 1px solid var(--primary-low);
padding-top: 10px; padding-top: 10px;
width: 100%;
} }
textarea { textarea {
font-family: monospace; font-family: monospace;
@ -427,7 +429,8 @@
} }
.change-timestamp { .change-timestamp {
max-width: 420px; width: 28em; // scales with user font-size
max-width: 90vw; // prevents overflow due to extra large user font-size
} }
.change-timestamp { .change-timestamp {

3
app/assets/stylesheets/common/base/share_link.scss
View File

@ -59,7 +59,8 @@
box-shadow: shadow("card"); box-shadow: shadow("card");
background-color: var(--secondary); background-color: var(--secondary);
padding: 0.5em; padding: 0.5em;
width: 300px; width: 20em; // scales with user font-size
max-width: 100vw; // prevents overflow due to extra large user font-size
display: none; display: none;
&.visible { &.visible {
display: block; display: block;

3
app/assets/stylesheets/desktop/modal.scss
View File

@ -112,6 +112,7 @@
.create-invite-bulk-modal, .create-invite-bulk-modal,
.share-topic-modal { .share-topic-modal {
.modal-inner-container { .modal-inner-container {
width: 600px; width: 40em; // scale with user font-size
max-width: 100vw; // prevent overflow if user font-size is enourmous
} }
} }

3
plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
View File

@ -311,7 +311,8 @@
html:not(.mobile-view) { html:not(.mobile-view) {
.fixed-modal .discourse-local-dates-create-modal.modal-body { .fixed-modal .discourse-local-dates-create-modal.modal-body {
width: 600px; width: 40em; // using ems to scale with user font size
max-width: 100vw; // avoids overflow if someone has extreme font-sizes impacting width
max-height: 400px !important; max-height: 400px !important;
} }
} }

3
plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss
View File

@ -1,6 +1,7 @@
.poll-ui-builder-modal { .poll-ui-builder-modal {
.modal-inner-container { .modal-inner-container {
width: 600px; width: 40em; // scale with user font-size
max-width: 100vw; // prevent overflow if user font-size is enourmous
} }
.modal-body { .modal-body {