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

Change layout of meta data to avoid early truncation

Browse Source
This commit is contained in:
Adrien Maston
2026-02-11 17:24:25 +01:00
parent 37d7f5c569
commit 69e185b3c2
1 changed files with 66 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-perma.css
+66 -2
View File
@@ -108,6 +108,63 @@
.card__meta {
grid-area: meta;
margin-inline-end: auto;
@media (max-width: 639px) {
--meta-spacer-block: 0.75ch;
inline-size: 100%;
grid-template-areas:
"avatars-author text-added"
"avatars-author text-author"
"text-updated text-updated"
"text-assignees text-assignees"
"avatars-assignees avatars-assignees";
grid-template-columns: auto 1fr;
&:has(.card__meta-avatars--assignees .avatar) {
&:not(:has(.reaction)) {
.card__meta-avatars--assignees {
margin-inline-end: calc(var(--btn-size) + var(--meta-spacer-block));
}
}
}
&:not(:has(.card__meta-avatars--assignees .avatar)) {
grid-template-areas:
"avatars-author text-added"
"avatars-author text-author"
"... text-updated"
"avatars-assignees text-assignees";
.card__meta-text--assignees {
margin-inline-end: calc(var(--btn-size) + var(--meta-spacer-block));
}
}
.card__meta-text {
border: 0;
padding: 0;
}
.card__meta-text + .card__meta-text {
border-block-start: var(--card-border);
margin-block-start: var(--meta-spacer-block);
padding-block-start: var(--meta-spacer-block);
}
.card__meta-avatars--assignees {
margin-inline-start: unset;
margin-block-start: calc(var(--meta-spacer-block) * 2);
}
.card__meta-avatars--author {
display: initial;
}
.card__meta-avatars--assignees .avatar {
display: grid;
}
}
}
.card__stages {
@@ -163,6 +220,7 @@
@media (max-width: 639px) {
font-size: var(--text-x-small);
position: relative;
}
}
@@ -192,11 +250,17 @@
}
&:not(:has(.reaction)) {
position: static;
.reactions__trigger {
--btn-border-color: var(--color-ink-light);
}
@media (max-width: 639px) {
inset-inline-end: 0;
}
@media (min-width: 640px) {
position: static;
}
}
}