bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use grid areas so it's easier to tell what's going on

Browse Source
This commit is contained in:
Andy Smith
2025-08-19 17:03:42 -05:00
parent 167434d238
commit 1d0939b847
1 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/cards.css
+15 -13
View File
@@ -218,27 +218,35 @@
.card__meta-avatars {
align-self: center;
grid-row: 1 / span 3;
/* grid-row: 1 / span 3; */
}
.card__meta-avatars--assignees {
display: flex;
grid-column: 4;
/* grid-column: 4; */
.avatar {
margin-inline-end: calc(-1 * var(--meta-spacer-inline));
}
}
/* Assign grid areas */
.card__meta-avatars--author { grid-area: avatars-author; }
.card__meta-avatars--assignees { grid-area: avatars-assignees; }
.card__meta-text--added { grid-area: text-added; }
.card__meta-text--author { grid-area: text-author; }
.card__meta-text--updated { grid-area: text-updated; }
.card__meta-text--assignees { grid-area: text-assignees; }
/* Small screens */
@media (max-width: 639px) {
.card__meta {
column-gap: var(--meta-spacer-inline);
grid-template-columns: repeat(3, auto);
grid-areas:
grid-template-areas:
"text-added text-author avatars-assignees"
"text-updated text-updated avatars-assignees"
"text-assignees text-assignees avatars-assignees";
grid-template-columns: auto 1fr auto;
}
.card__meta-avatars--author,
@@ -254,21 +262,19 @@
.card__meta-text--updated,
.card__meta-text--assignees {
border-block-start: var(--meta-border);
grid-column: 1 / 4;
}
}
/* Large screens */
@media (min-width: 640px) {
.meta {
grid-template-columns: repeat(4, auto);
grid-areas:
.card__meta {
grid-template-areas:
"avatars-author text-added text-updated avatars-assignees"
"avatars-author text-author text-assignees avatars-assignees";
grid-template-columns: repeat(4, auto);
}
.card__meta-avatars--author {
grid-column: 1;
margin-inline-end: var(--meta-spacer-inline);
}
@@ -279,26 +285,22 @@
/* Top */
.card__meta-text:nth-of-type(odd) {
border-block-end: var(--meta-border);
grid-row: 1;
padding-block-end: var(--meta-spacer-block);
}
/* Bottom */
.card__meta-text:nth-of-type(even) {
grid-row: 2;
padding-block-start: var(--meta-spacer-block);
}
/* Left */
.card__meta-text:nth-of-type(-n+2) {
border-inline-end: var(--meta-border);
grid-column: 2;
padding-inline-end: var(--meta-spacer-inline);
}
/* Right */
.card__meta-text:nth-of-type(n+3) {
grid-column: 3;
padding-inline-start: var(--meta-spacer-inline);
}