maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[deploy] Update modal padding to improve visual balance (#9504)

Browse source
This commit is contained in:
Lisa Sy 2020-07-31 12:37:29 -07:00 • committed by GitHub
parent 864b13b9ab
commit 2f09256713
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 62 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/assets/stylesheets/components/modals.scss
View file

@ -3,20 +3,24 @@
.crayons-modal {
--modal-max-width: 768px;
--modal-body-padding: var(--su-3);
--modal-header-padding: var(--su-2);
--modal-header-padding: var(--su-2) var(--su-2) var(--su-2) var(--su-3);
--modal-header-font-size: var(--fs-l);
--modal-body-font-size: var(--fs-base);
@media (min-width: $breakpoint-s) {
--modal-header-padding: var(--su-2) var(--su-2) var(--su-2) var(--su-4);
--modal-body-padding: var(--su-4);
--modal-header-padding: var(--su-4);
}
@media (min-width: $breakpoint-m) {
--modal-header-padding: var(--su-3) var(--su-3) var(--su-3) var(--su-6);
--modal-body-padding: var(--su-6);
--modal-header-padding: var(--su-4) var(--su-4) var(--su-4) var(--su-6);
--modal-header-font-size: var(--fs-xl);
--modal-body-font-size: var(--fs-l);
}
@media (min-width: $breakpoint-l) {
--modal-body-padding: var(--su-7) var(--su-8);
--modal-body-padding: var(--su-8);
}
position: fixed;
@ -72,10 +76,15 @@
align-items: center;
justify-content: space-between;
padding: var(--modal-header-padding);
&__title {
font-size: var(--modal-header-font-size);
}
}
&__body {
flex: 1 auto;
font-size: var(--modal-body-font-size);
padding: var(--modal-body-padding);
max-height: 100%;
overflow-y: auto;
@ -85,12 +94,19 @@
&--s {
@media (min-width: $breakpoint-s) {
--modal-max-width: 480px;
--modal-body-padding: var(--su-6);
--modal-header-font-size: var(--fs-l);
--modal-body-font-size: var(--fs-base);
}
}
&--m {
@media (min-width: $breakpoint-m) {
--modal-max-width: 640px;
--modal-body-padding: var(--su-7);
--modal-header-padding: var(--su-3) var(--su-5);
--modal-header-font-size: var(--fs-xl);
--modal-body-font-size: var(--fs-l);
}
}
}

38
app/assets/stylesheets/moderators.scss
View file

@ -179,44 +179,6 @@
}
}
.flag-user-modal {
.flag-user-modal-header {
padding-left: var(--su-4);
h2 {
font-weight: var(--fw-bold);
font-size: var(--fs-l);
line-height: var(--lh-tight);
}
.modal-header-close-icon {
border-radius: 100%;
background: var(--base-10);
}
}
.flag-user-modal-body {
span {
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--base-90);
}
.crayons-fields {
margin-top: var(--su-4);
.abuse-report-link {
margin: var(--su-4) 0 0 var(--su-7);
}
}
.buttons-container {
margin-top: var(--su-8);
}
}
}
.mod-container {
display: flex;
flex-direction: column;

82
app/javascript/packs/flagUserModal.jsx
View file

@ -106,7 +106,7 @@ export function FlagUserModal({ modCenterArticleUrl, authorId }) {
>
<div class="crayons-modal__box">
<header class="crayons-modal__box__header flag-user-modal-header">
<h2>Flag User</h2>
<h2 class="crayons-modal__box__header__title">Flag User</h2>
<button
type="button"
class="crayons-btn crayons-btn--icon crayons-btn--ghost modal-header-close-icon"
@ -123,12 +123,12 @@ export function FlagUserModal({ modCenterArticleUrl, authorId }) {
</svg>
</button>
</header>
<div class="crayons-modal__box__body flag-user-modal-body">
<span>
Thanks for keeping DEV safe. Here is what you can do to flag this
user:
</span>
<div class="crayons-fields">
<div class="crayons-modal__box__body">
<div class="grid gap-4">
<p>
Thanks for keeping DEV safe. Here is what you can do to flag this
user:
</p>
<div class="crayons-field crayons-field--radio">
<input
type="radio"
@ -154,40 +154,42 @@ export function FlagUserModal({ modCenterArticleUrl, authorId }) {
</p>
</label>
</div>
<a
href={`/report-abuse?url=${
modCenterArticleUrl
? `${document.location.origin}${modCenterArticleUrl}`
: document.location
}`}
class="fs-base abuse-report-link"
>
Report other inappropriate conduct
</a>
</div>
<div class="buttons-container">
<Button
class="crayons-btn crayons-btn--danger mr-2"
id="confirm-flag-user-action"
onClick={(_event) => {
const {
current: { dataset: adminVomitReaction },
} = vomitAllRef;
<p>
<a
href={`/report-abuse?url=${
modCenterArticleUrl
? `${document.location.origin}${modCenterArticleUrl}`
: document.location
}`}
className="crayons-link crayons-link--brand"
>
Report other inappropriate conduct
</a>
</p>
<div>
<Button
class="crayons-btn crayons-btn--danger mr-2"
id="confirm-flag-user-action"
onClick={(_event) => {
const {
current: { dataset: adminVomitReaction },
} = vomitAllRef;
confirmFlagUser(adminVomitReaction);
enableConfirmButton(false);
}}
disabled={!isConfirmButtonEnabled}
>
Confirm action
</Button>
<Button
class="crayons-btn crayons-btn--secondary"
id="cancel-flag-user-action"
onClick={toggleFlagUserModal}
>
Cancel
</Button>
confirmFlagUser(adminVomitReaction);
enableConfirmButton(false);
}}
disabled={!isConfirmButtonEnabled}
>
Confirm action
</Button>
<Button
class="crayons-btn crayons-btn--secondary"
id="cancel-flag-user-action"
onClick={toggleFlagUserModal}
>
Cancel
</Button>
</div>
</div>
</div>
</div>