shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more

Browse Source
This commit is contained in:
Jordan Vidrine
2025-03-28 08:25:49 -05:00
parent 2983bac4a0
commit 1459099b8d
1 changed files with 86 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/topic-cards.scss
+86 -68
View File
@@ -29,58 +29,63 @@
padding: 0.75em 1rem; padding: 0.75em 1rem;
border: 1px solid var(--primary-300); border: 1px solid var(--primary-300);
display: grid; display: grid;
grid-template-columns: 20px min-content min-content auto min-content min-content min-content; grid-template-columns: 20px min-content min-content auto min-content;
grid-template-rows: auto minmax(20px, auto); grid-template-rows: auto minmax(20px, auto);
grid-template-areas: grid-template-areas:
". . . . . . status" ". . . . status"
"activity activity activity activity activity likes-replies category"; "activity . . likes-replies category";
grid-column-gap: 12px; grid-column-gap: 12px;
grid-row-gap: 8px; grid-row-gap: 8px;
border-radius: var(--d-border-radius); border-radius: var(--d-border-radius);
td.main-link .link-top-line {
grid-row: 1/2;
grid-column: 1/-1;
font-weight: 500;
}
&.--has-status-card td.main-link .link-top-line {
grid-column: 1/-2;
}
@include breakpoint(extra-large) { @include breakpoint(extra-large) {
grid-template-columns: 20px repeat(6, 1fr);
grid-template-areas: grid-template-areas:
". . . . . . status" ". . . . status"
"activity activity activity activity activity likes-replies category"; "activity . . likes-replies category";
} }
@include breakpoint(mobile-extra-large) { @include breakpoint(mobile-extra-large) {
td.main-link .link-top-line { td.main-link .link-top-line,
grid-row: 2/3 !important; &.--has-status-card td.main-link .link-top-line {
grid-column: 1/-1 !important; grid-row: 2/3;
grid-column: 1/-1;
} }
grid-template-columns: 25px repeat(7, 1fr); grid-template-columns: 25px repeat(5, 1fr);
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;
grid-template-areas: grid-template-areas:
"category category category category category category category status" "category category category category category status"
". . . . . . . ." ". . . . . ."
"activity activity activity activity activity activity activity likes-replies"; "activity . . . . likes-replies";
border: none; border: none;
border-bottom: 1px solid var(--primary-200); border-bottom: 1px solid var(--primary-200);
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
} }
&.excerpt-expanded { &.excerpt-expanded {
grid-template-columns: 20px auto repeat(5, 1fr) auto; grid-template-columns: 20px min-content min-content auto min-content;
grid-template-rows: auto auto auto 30px; grid-template-rows: auto auto auto;
grid-template-areas: grid-template-areas:
". . . . . . . status" ". . . . status"
"activity activity activity activity activity activity activity activity" "activity . . . ."
"excerpt excerpt excerpt excerpt excerpt excerpt . ." "excerpt excerpt excerpt likes-replies category";
"excerpt excerpt excerpt excerpt excerpt excerpt likes-replies category";
@include breakpoint(extra-large) { @include breakpoint(extra-large) {
grid-template-areas: grid-template-areas:
". . . . . . . status" ". . . . status"
"activity activity activity activity activity activity activity activity" "activity . . . ."
"excerpt excerpt excerpt excerpt excerpt excerpt excerpt likes-replies" "excerpt excerpt excerpt likes-replies category";
"excerpt excerpt excerpt excerpt excerpt excerpt excerpt category";
} }
@include breakpoint(mobile-extra-large) { @include breakpoint(mobile-extra-large) {
grid-template-columns: 25px auto repeat(6, 1fr);
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;
grid-template-areas: grid-template-areas:
". . . . . . . status" "category category category category status"
"activity activity activity activity activity activity activity activity" ". . . . ."
"category . . . . . . likes-replies"; "activity . . . likes-replies";
.topic-excerpt { .topic-excerpt {
display: none; display: none;
} }
@@ -172,21 +177,6 @@
--status-color: #e45735; --status-color: #e45735;
} }
// title
td.main-link .link-top-line {
font-size: var(--font-0);
grid-row: 1/2;
grid-column: 1/-1;
font-weight: 500;
display: flex;
}
&.--has-status-card {
td.main-link .link-top-line {
grid-column: 1/-2;
}
}
.link-top-line .event-date { .link-top-line .event-date {
margin-left: 0.5em; margin-left: 0.5em;
font-size: var(--font-down-3); font-size: var(--font-down-3);
@@ -218,7 +208,8 @@
// excerpt // excerpt
.topic-excerpt { .topic-excerpt {
grid-area: excerpt; grid-row: 3 / -1;
grid-column: 1 / -2;
margin: 0; margin: 0;
font-size: var(--font-down-2); font-size: var(--font-down-2);
} }
@@ -408,7 +399,6 @@
} }
// Assigned List // Assigned List
.topic-list-item.assigned-list-item { .topic-list-item.assigned-list-item {
td.main-link .link-top-line { td.main-link .link-top-line {
grid-column: 1/-3; grid-column: 1/-3;
@@ -416,13 +406,16 @@
grid-template-columns: 20px min-content min-content auto min-content min-content 36px; grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
grid-template-areas: grid-template-areas:
". . . . . status dropdown" ". . . . . status dropdown"
"activity activity activity activity likes-replies category dropdown"; "activity . . . likes-replies category dropdown";
@include breakpoint(mobile-extra-large) { @include breakpoint(mobile-extra-large) {
td.main-link .link-top-line {
grid-column: 1/-2 !important;
}
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px; grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
grid-template-areas: grid-template-areas:
". . . . . . status dropdown" "category category . . . . status dropdown"
"activity activity activity activity activity activity activity dropdown" ". . . . . . . dropdown"
"category category category category category category likes-replies dropdown"; "activity . . . . . likes-replies dropdown";
} }
.assign-topic-buttons { .assign-topic-buttons {
display: contents; display: contents;
@@ -449,24 +442,25 @@ body.user-messages-page .topic-list-item {
td.topic-status-data { td.topic-status-data {
display: none; display: none;
} }
<<<<<<< HEAD td.main-link .link-top-line {
grid-row: 1 / 2;
grid-column: 1 / -1;
}
grid-template-areas: grid-template-areas:
". . . . . . ." ". . . . . . ."
"activity activity activity activity activity likes-replies likes-replies"; "activity . . . . likes-replies likes-replies";
=======
>>>>>>> FIX: Messed up CSS grid on messages list (#88)
&.excerpt-expanded { &.excerpt-expanded {
grid-template-columns: 20px repeat(6, 1fr) auto; grid-template-columns: 20px repeat(6, 1fr) auto;
grid-template-rows: 20px auto auto 30px; grid-template-rows: 20px auto auto 30px;
grid-template-areas: grid-template-areas:
". . . . . . . ." ". . . . . . . ."
"activity activity activity activity activity activity activity activity" "activity . . . . . . ."
"excerpt excerpt excerpt excerpt excerpt excerpt . ." "excerpt excerpt excerpt excerpt excerpt excerpt . ."
"excerpt excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies"; "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
@include breakpoint(extra-large) { @include breakpoint(extra-large) {
grid-template-areas: grid-template-areas:
". . . . . . . ." ". . . . . . . ."
"activity activity activity activity activity activity activity activity" "activity . . . . . . ."
"excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies" "excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies"
"excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies"; "excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies";
} }
@@ -476,7 +470,7 @@ body.user-messages-page .topic-list-item {
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-areas: grid-template-areas:
". . . . . . . ." ". . . . . . . ."
"activity activity activity activity activity activity activity activity"; "activity . . . . . . .";
.topic-excerpt { .topic-excerpt {
display: none; display: none;
} }
@@ -485,10 +479,33 @@ body.user-messages-page .topic-list-item {
// Bulk select // Bulk select
.bulk-select-enabled .topic-list-item { .bulk-select-enabled .topic-list-body .topic-list-item {
td.topic-likes-replies-data {
display: none;
}
td.main-link .link-top-line,
&.--has-status-card td.main-link .link-top-line {
grid-column: 2/-1;
font-weight: 500;
}
.topic-excerpt {
grid-area: excerpt;
margin: 0;
}
&.excerpt-expanded {
grid-template-areas:
"bulk-select . . . status" "bulk-select activity . . ."
"bulk-select excerpt excerpt excerpt category";
@include breakpoint(mobile-extra-large) {
grid-template-areas:
"bulk-select category . . . status"
"bulk-select . . . . ."
"bulk-select activity activity . . .";
}
}
grid-template-areas: grid-template-areas:
"bulk-select activity activity activity . . status" "bulk-select . . . status"
"bulk-select . . . likes-replies likes-replies category"; "bulk-select activity activity . category";
.bulk-select { .bulk-select {
grid-area: bulk-select; grid-area: bulk-select;
padding: 0; padding: 0;
@@ -500,19 +517,20 @@ body.user-messages-page .topic-list-item {
} }
} }
@include breakpoint(large) { @include breakpoint(large) {
grid-template-columns: 20px repeat(6, 1fr);
grid-template-rows: 20px minmax(20px, auto);
grid-template-areas: grid-template-areas:
"bulk-select activity activity activity activity activity status" "bulk-select . . . status"
"bulk-select . . . . . ." "bulk-select activity activity . category";
"bulk-select category . . . . likes-replies";
} }
@include breakpoint(mobile-extra-large) { @include breakpoint(mobile-extra-large) {
grid-template-columns: 25px auto repeat(6, 1fr); td.main-link .link-top-line,
grid-template-rows: auto auto auto; &.--has-status-card td.main-link .link-top-line {
grid-column: 2/-1;
grid-row: 2;
font-weight: 500;
}
grid-template-areas: grid-template-areas:
"bulk-select activity activity activity activity activity activity status" "bulk-select category . . . status"
"bulk-select . . . . . . ." "bulk-select . . . . ."
"bulk-select category . . . . . likes-replies"; "bulk-select activity activity . . .";
} }
} }