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

UX: adapt topic card layout for bookmarks & assigned list (#97)

Browse Source
This commit is contained in:
chapoi
2025-04-02 01:48:52 +08:00
committed by GitHub
parent 05d4b79fc9
commit def09bcca5
1 changed files with 103 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/topic-cards.scss
+103 -35
View File
@@ -315,46 +315,81 @@
.link-bottom-line {
font-size: unset;
}
grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
//regular card without excerpt class
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
grid-template-areas:
". . . . . . dropdown"
"avatar update metadata metadata metadata category dropdown";
"avatar update metadata metadata metadata . category";
@include breakpoint(mobile-extra-large) {
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
grid-template-areas:
". . . . . . . dropdown"
"avatar update metadata metadata metadata metadata category dropdown";
" . . . . . . dropdown"
"update metadata metadata metadata metadata category category";
.avatar {
display: none;
}
}
&.has-metadata {
grid-template-areas:
". . . . . . dropdown"
"avatar update metadata metadata metadata category dropdown";
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
@include breakpoint(mobile-extra-large) {
grid-template-areas:
". . . . . . . dropdown"
"avatar update metadata metadata metadata metadata category dropdown";
}
}
&.excerpt-expanded {
grid-template-areas:
". . . . . . . dropdown"
"avatar update metadata metadata metadata metadata metadata dropdown"
"excerpt excerpt excerpt excerpt excerpt . . dropdown"
"excerpt excerpt excerpt excerpt excerpt category category dropdown";
@include breakpoint(mobile-extra-large) {
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
.post-excerpt {
"update update metadata metadata metadata metadata category category";
.avatar {
display: none;
}
}
&.has-metadata {
}
//card with excerpt (all in horizon since the toggle is gone)
&.excerpt-expanded {
grid-template-columns: 20px min-content auto minmax(0, 100px);
@include breakpoint(extra-large, $rule: min-width) {
grid-template-columns: 20px min-content auto min-content;
}
grid-template-areas:
". . . dropdown"
"avatar update metadata metadata"
"excerpt excerpt excerpt ."
"excerpt excerpt excerpt category";
.badge-category__wrapper {
align-self: flex-end;
height: min-content;
max-width: 100%;
}
@include breakpoint(mobile-extra-large) {
grid-template-columns: auto min-content;
grid-template-areas:
". . . . . . . dropdown"
"avatar update metadata metadata metadata metadata metadata dropdown"
"excerpt excerpt excerpt excerpt excerpt . . dropdown"
"excerpt excerpt excerpt excerpt excerpt category category dropdown";
". dropdown"
"category category";
.post-excerpt,
.avatar {
display: none;
}
}
&.has-metadata {
grid-template-columns: 20px min-content auto min-content;
grid-template-areas:
". . . dropdown"
"avatar update metadata metadata"
"excerpt excerpt excerpt . "
"excerpt excerpt excerpt category";
@include breakpoint(mobile-extra-large) {
grid-template-columns: auto min-content;
grid-template-areas:
" . dropdown"
"metadata category";
.bookmark-metadata {
flex-wrap: wrap;
}
}
}
}
td.author-avatar {
grid-area: avatar;
}
@@ -372,12 +407,21 @@
display: contents;
.bookmark-metadata {
grid-area: metadata;
margin: 0;
display: flex;
align-items: center;
gap: var(--spacing-inline-xs);
}
.bookmark-metadata-item {
margin: 0;
vertical-align: middle;
}
.bookmark-status-with-link {
grid-column: 1/-2;
grid-row: 1/2;
}
}
.post-excerpt {
grid-area: excerpt;
margin: 0;
@@ -386,12 +430,24 @@
display: contents;
.bookmark-actions-dropdown {
grid-area: dropdown;
align-self: center;
align-self: flex-start;
height: 1em;
.select-kit-header {
padding-top: 0;
margin-left: auto;
align-items: center;
background: transparent;
}
.select-kit-header-wrapper {
height: 1em;
width: 1em;
}
}
}
.post-metadata.topic-list-data.updated-at {
grid-area: update;
margin-left: auto;
}
td.activity .post-activity {
display: none;
@@ -400,28 +456,40 @@
// Assigned List
.topic-list-item.assigned-list-item {
.topic-status-card {
display: none;
}
td.main-link .link-top-line {
grid-column: 1/-3;
}
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 min-content;
grid-template-areas:
". . . . . status dropdown"
"activity . . . likes-replies category dropdown";
"activity . . . . likes-replies category";
@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-areas:
"category category . . . . status dropdown"
". . . . . . . dropdown"
"activity . . . . . likes-replies dropdown";
". . . . . . . . "
"activity . . . . . . likes-replies";
}
.assign-topic-buttons {
display: contents;
.assign-actions-dropdown {
grid-area: dropdown;
align-self: center;
justify-content: flex-end;
height: 1em;
.select-kit-header {
padding-top: 0;
margin-left: auto;
align-items: center;
background: transparent;
}
.select-kit-header-wrapper {
height: 1em;
width: 1em;
}
}
}
td.topic-category-status-data {