IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Tweak groups page css (#13775)

Browse Source 
Improves icon-name alignment.
This commit is contained in:
Jarek Radosz 2021-07-20 12:26:52 +02:00 committed by GitHub
parent 3d387d7891
commit 351ef6c2cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/assets/stylesheets/common/base/groups.scss
View File

@ -14,8 +14,7 @@
.groups-header-filters-name, .groups-header-filters-name,
.groups-header-filters-type { .groups-header-filters-type {
margin-right: 5px; margin: 0 0.5em 0.5em 0;
margin-bottom: 0.5em;
} }
&:last-child { &:last-child {
@ -28,65 +27,68 @@
} }
.groups-boxes { .groups-boxes {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(4, 1fr);
margin: 1em 0; margin: 1em 0;
width: 100%; width: 100%;
@supports (display: grid) {
display: grid; @include breakpoint("medium") {
grid-template-columns: repeat(4, 24%); grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1.333%; }
grid-row-gap: 1em;
@include breakpoint("tablet") { @include breakpoint("mobile-extra-large") {
grid-template-columns: repeat(3, 32%); grid-template-columns: repeat(2, 1fr);
grid-column-gap: 2%;
}
@include breakpoint("mobile-large") {
grid-template-columns: 100%;
}
} }
.group-box { .group-box {
@include breakpoint("mobile-large") {
margin: 0;
}
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
border: 1px solid var(--primary-low); border: 1px solid var(--primary-low);
color: var(--primary); color: var(--primary);
.discourse-no-touch & { .discourse-no-touch & {
transition: all 0.25s; transition: all 0.25s;
&:hover { &:hover {
box-shadow: shadow("card"); box-shadow: shadow("card");
} }
} }
.group-membership { .group-membership {
color: var(--primary-medium); color: var(--primary-medium);
margin-top: auto; margin-top: auto;
padding-top: 1em; padding-top: 1em;
.is-group-owner, .is-group-owner,
.is-group-member { .is-group-member {
color: var(--success); color: var(--success);
} }
} }
.group-box-inner { .group-box-inner {
padding: 1em; padding: 1em;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
min-height: 8em;
.group-info-wrapper { .group-info-wrapper {
align-items: center;
display: flex; display: flex;
overflow: hidden;
flex: 0 1 auto; flex: 0 1 auto;
margin-bottom: 0.25em;
min-height: 40px;
overflow: hidden;
.group-avatar-flair { .group-avatar-flair {
margin-top: 0.2em; margin-right: 0.5em;
margin-right: 8px;
flex: 0 0 auto;
} }
.group-info { .group-info {
flex: 1 0 auto; flex: 1 1 auto;
margin-bottom: 1em;
width: 70%;
span { span {
width: 100%; width: 100%;
@ -95,6 +97,7 @@
} }
} }
} }
.group-user-count { .group-user-count {
display: flex; display: flex;
align-items: center; align-items: center;