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

Use CSS grid for improved layout 

This avoids the final card being full-width
This commit is contained in:
David Taylor 2020-03-09 17:22:38 +00:00
parent 74ab657d6c
commit d977f9acaa
No known key found for this signature in database
GPG Key ID: 46904C18B1D3F434
1 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
common/common.scss
View File

@ -19,14 +19,14 @@
} }
.user-card-directory { .user-card-directory {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(auto-fit, minmax(calc(min(400px, 100%)), 1fr));
justify-content: center; grid-gap: 60px 20px;
margin-top: 60px;
.user-card { .user-card {
z-index: z("base"); z-index: z("base");
position: relative; position: relative;
left: auto;
width: 100%; width: 100%;
box-shadow: none; box-shadow: none;
margin: 0; margin: 0;
@ -41,9 +41,8 @@
} }
.user-card-container { .user-card-container {
flex-grow: 1; width: 100%;
width: 500px;
margin: 50px 5px 10px 5px;
background-color: $secondary; background-color: $secondary;
box-shadow: shadow("card"); box-shadow: shadow("card");
margin-bottom: auto; margin-bottom: auto;