IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-29 20:24:05 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Make badges grid a grid (#13719)

Browse Source 
Even grid gaps, more space for text, removed on-hover shadow

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
This commit is contained in:
Jarek Radosz 2021-07-13 21:58:51 +02:00 committed by GitHub
parent a64aea38b7
commit 15320d432b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/discourse/app/templates/components/badge-card.hbs
View File

@ -23,10 +23,8 @@
{{/if}}
{{/if}}
<div class="badge-contents" >
<div class="badge-icon {{badge.badgeTypeClassName}}">
<a href={{url}}>{{icon-or-image badge}}</a>
</div>
<div class="badge-contents">
<a href={{url}} class="badge-icon {{badge.badgeTypeClassName}}">{{icon-or-image badge}}</a>
<div class="badge-info">
<div class="badge-info-item">
<h3><a href={{url}} class="badge-link">{{badge.name}}</a></h3>

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

@ -121,12 +121,9 @@
}
.badge-card {
position: relative;
display: inline-block;
background-color: var(--primary-very-low);
border: 1px solid var(--primary-low);
margin-bottom: 2vh;
transition: box-shadow 0.25s;
position: relative;
.check-display {
position: absolute;
@ -151,9 +148,8 @@
.badge-contents {
display: flex;
min-height: 128px;
height: 100%;
padding: 0 10%;
min-height: 8em;
padding: 0 1.5em;
.badge-link {
color: var(--primary);
@ -161,19 +157,20 @@
.badge-icon {
display: flex;
flex: 0 0 auto;
width: 1.23em;
margin-right: 5%;
flex-shrink: 0;
margin-right: 1.5em;
align-items: center;
justify-content: center;
font-size: 3.5em;
a {
width: 100%;
width: 64px;
svg {
font-size: 3.5em;
}
img {
width: 100%;
max-width: 65px;
max-height: 80px;
max-width: 64px;
max-height: 64px;
}
&.badge-type-gold .fa {
@ -193,11 +190,8 @@
display: flex;
flex: 1 1 auto;
align-items: center;
padding: 1em 1.5em 1em 0;
padding: 1em 0;
color: var(--primary);
@media screen and (max-width: 600px) {
padding-right: 0;
}
h3 {
margin-bottom: 0.25em;
@ -209,38 +203,15 @@
}
}
&.medium {
flex: 0 0 auto;
width: 32%;
margin-right: 1.63%;
@media screen and (min-width: 851px) {
&:nth-of-type(3n) {
margin-right: 0;
}
}
@include breakpoint(medium) {
width: 48.5%;
&:nth-of-type(2n) {
margin-right: 0;
}
}
@include breakpoint(mobile-extra-large) {
flex: 0 0 100%;
}
&:hover {
box-shadow: shadow("card");
}
&:active {
box-shadow: none;
}
}
&.large {
width: 100%;
align-self: flex-start;
@media screen and (min-width: 767px) {
max-width: calc(#{$large-width} / 2);
margin-right: 1.5em;
}
.badge-contents {
padding: 0 5%;
h3 {
@ -273,15 +244,20 @@
}
.badge-group-list {
display: grid;
grid: auto-flow / repeat(3, 1fr);
grid-gap: 1em;
margin-bottom: 1.5em;
display: flex;
flex-wrap: wrap;
@include breakpoint(medium) {
justify-content: space-between;
grid: auto-flow / repeat(2, 1fr);
}
@include breakpoint(mobile-extra-large) {
grid: auto-flow / 1fr;
}
.title {
width: 100%;
font-size: $font-up-1;
}
}