diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss index e407fa1..2c93757 100644 --- a/scss/topic-cards.scss +++ b/scss/topic-cards.scss @@ -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 {