Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Untangle award badge admin CSS (#29614) 

I was skimming through existing pages to get a feel for the admin UI guidelines. I noticed that this part was missing its margin. On some further investigation, it seems that a single CSS selector, .award-badge was being used both for the section and for the button in the header, so I decided to 1) separate the two and 2) add in the missing margin.
This commit is contained in:
Ted Johansson 2024-11-06 16:10:39 +08:00 committed by GitHub
parent a097d86eea
commit 3be925e161
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/admin/addon/templates/admin-badges/award.hbs
View File

@ -1,4 +1,4 @@
<section class="award-badge">
<section class="current-badge content-body">
<h2>{{i18n "admin.badges.mass_award.title"}}</h2>
<p>{{i18n "admin.badges.mass_award.description"}}</p>

47
app/assets/stylesheets/common/admin/badges.scss
View File

@ -87,6 +87,30 @@
.readonly-field {
color: var(--primary-high);
}
.badge-preview {
min-height: 110px;
max-width: 300px;
display: flex;
align-items: center;
background-color: var(--primary-very-low);
border: 1px solid var(--primary-low);
padding: 0 10px 0 10px;
img,
svg {
width: 60px;
height: 60px;
}
.badge-display-name {
margin-left: 5px;
}
}
.badge-required {
font-weight: bold;
}
}
.current-badge-actions {
@ -118,29 +142,6 @@
color: var(--danger);
}
}
.badge-preview {
min-height: 110px;
max-width: 300px;
display: flex;
align-items: center;
background-color: var(--primary-very-low);
border: 1px solid var(--primary-low);
padding: 0 10px 0 10px;
img,
svg {
width: 60px;
height: 60px;
}
.badge-display-name {
margin-left: 5px;
}
}
.badge-required {
font-weight: bold;
}
}
// badge-grouping modal