UX: New topic card layout (#79)
This commit is contained in:
Jordan Vidrine
@@ -85,19 +85,6 @@
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-item {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
//to be moved to topic card segment for general use
|
||||
// .navigation-category & {
|
||||
// .badge-category__wrapper {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topic-title {
|
||||
|
||||
+170
-149
@@ -24,132 +24,67 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-select-enabled .topic-list-item {
|
||||
grid-template-areas:
|
||||
"avatar author status status . activity"
|
||||
". topic-title topic-title topic-title likes-replies likes-replies category";
|
||||
.bulk-select {
|
||||
grid-area: bulk-select;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@include breakpoint(large) {
|
||||
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
|
||||
grid-template-rows: 22px minmax(22px, auto);
|
||||
grid-template-areas:
|
||||
"avatar author status status . activity"
|
||||
". topic-title topic-title topic-title . . likes-replies"
|
||||
". topic-title topic-title topic-title . . category";
|
||||
}
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"avatar category-status category-status . . . . activity"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||
"avatar author . . . . . likes-replies";
|
||||
}
|
||||
}
|
||||
|
||||
body.user-messages-page .topic-list-item {
|
||||
.topic-category-status-data {
|
||||
display: none;
|
||||
}
|
||||
grid-template-areas:
|
||||
"avatar author status status . . activity"
|
||||
". topic-title topic-title topic-title likes-replies likes-replies likes-replies";
|
||||
&.excerpt-expanded {
|
||||
grid-template-columns: 44px repeat(6, 1fr) auto;
|
||||
grid-template-rows: 22px auto auto 30px;
|
||||
grid-template-areas:
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
|
||||
@include breakpoint(extra-large) {
|
||||
grid-template-areas:
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . likes-replies"
|
||||
". excerpt excerpt excerpt excerpt excerpt . likes-replies";
|
||||
}
|
||||
}
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title activity"
|
||||
"avatar author . . . . . likes-replies";
|
||||
.topic-excerpt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-item {
|
||||
.topic-list-body .topic-list-item {
|
||||
text-overflow: ellipsis;
|
||||
padding: 0.75em 1rem;
|
||||
border: 1px solid var(--primary-300);
|
||||
display: grid;
|
||||
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
|
||||
grid-template-columns: 22px min-content min-content auto min-content min-content min-content;
|
||||
grid-template-rows: 22px minmax(22px, auto);
|
||||
grid-template-areas:
|
||||
"avatar author status status . . activity"
|
||||
". topic-title topic-title topic-title likes-replies likes-replies category";
|
||||
"activity activity activity activity . . status"
|
||||
"topic-title topic-title topic-title topic-title likes-replies likes-replies category";
|
||||
grid-column-gap: 12px;
|
||||
grid-row-gap: 8px;
|
||||
border-radius: var(--d-border-radius);
|
||||
&.excerpt-expanded {
|
||||
grid-template-columns: 44px auto repeat(5, 1fr) auto;
|
||||
grid-template-columns: 22px auto repeat(5, 1fr) auto;
|
||||
grid-template-rows: 22px auto auto 30px;
|
||||
grid-template-areas:
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt likes-replies category";
|
||||
"activity activity activity activity . . . status"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title . ."
|
||||
"excerpt excerpt excerpt excerpt excerpt excerpt . ."
|
||||
"excerpt excerpt excerpt excerpt excerpt excerpt likes-replies category";
|
||||
@include breakpoint(extra-large) {
|
||||
grid-template-areas:
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . likes-replies"
|
||||
". excerpt excerpt excerpt excerpt excerpt . category";
|
||||
"activity activity activity activity . . . status"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title . ."
|
||||
"excerpt excerpt excerpt excerpt excerpt excerpt excerpt likes-replies"
|
||||
"excerpt excerpt excerpt excerpt excerpt excerpt excerpt category";
|
||||
}
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"category-status category-status category-status . . . . activity"
|
||||
"activity activity activity activity activity activity activity status"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||
"avatar author . . . . . likes-replies";
|
||||
"category . . . . . . likes-replies";
|
||||
.topic-excerpt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint(large) {
|
||||
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
|
||||
grid-template-columns: 22px repeat(6, 1fr);
|
||||
grid-template-rows: 22px minmax(22px, auto);
|
||||
grid-template-areas:
|
||||
"avatar author status status . . activity"
|
||||
". topic-title topic-title topic-title . . likes-replies"
|
||||
". topic-title topic-title topic-title . . category";
|
||||
"activity activity activity activity activity activity status"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||
"category . . . . . likes-replies";
|
||||
}
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-columns: 25px repeat(7, 1fr);
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"category-status category-status category-status . . . . activity"
|
||||
"activity activity activity activity activity activity activity status"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||
"avatar author . . . . . likes-replies";
|
||||
"category . . . . . . likes-replies";
|
||||
}
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--primary-200);
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// display contents
|
||||
@@ -165,34 +100,42 @@ body.user-messages-page .topic-list-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// avatar & author
|
||||
.topic-author-avatar-data,
|
||||
.author-avatar {
|
||||
grid-area: avatar;
|
||||
margin: 0;
|
||||
// topic activity, avatar, text
|
||||
.topic-activity-data {
|
||||
grid-area: activity;
|
||||
}
|
||||
.topic-author-avatar img.avatar,
|
||||
.author-avatar img.avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: var(--d-border-radius);
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
td.topic-author-data {
|
||||
grid-area: author;
|
||||
.topic-activity {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
.topic-author-data .topic-author {
|
||||
color: var(--primary-500);
|
||||
|
||||
.topic-activity__user {
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.topic-activity__user .avatar {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// status
|
||||
.topic-status-data {
|
||||
grid-area: status;
|
||||
position: relative;
|
||||
}
|
||||
.topic-status-card {
|
||||
@include breakpoint("large", min-width) {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -22px;
|
||||
background-color: var(--d-content-background);
|
||||
height: 85%;
|
||||
font-size: var(--font-down-3);
|
||||
}
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
@@ -203,7 +146,6 @@ body.user-messages-page .topic-list-item {
|
||||
border-radius: var(--d-border-radius);
|
||||
border: 1px solid var(--status-color);
|
||||
color: var(--status-color);
|
||||
grid-area: status;
|
||||
width: min-content;
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
height: calc(100% - 2px);
|
||||
@@ -216,8 +158,6 @@ body.user-messages-page .topic-list-item {
|
||||
|
||||
.topic-status-card.--pinned {
|
||||
--status-color: var(--primary-500);
|
||||
background-color: transparent;
|
||||
line-height: unset;
|
||||
}
|
||||
.topic-status-card.--hot {
|
||||
--status-color: #e45735;
|
||||
@@ -225,7 +165,7 @@ body.user-messages-page .topic-list-item {
|
||||
|
||||
// title
|
||||
td.main-link .link-top-line {
|
||||
font-size: var(--font-0);
|
||||
font-size: var(--font-up-1);
|
||||
grid-area: topic-title;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -245,7 +185,9 @@ body.user-messages-page .topic-list-item {
|
||||
td.main-link .link-top-line a.raw-topic-link {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.link-top-line .topic-post-badges .badge-notification.unread-posts {
|
||||
display: none;
|
||||
}
|
||||
.topic-post-badges .badge-notification.unread-posts {
|
||||
background-color: var(--tertiary);
|
||||
color: var(--tertiary);
|
||||
@@ -281,17 +223,13 @@ body.user-messages-page .topic-list-item {
|
||||
|
||||
td.topic-category-status-data {
|
||||
display: contents;
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-area: category-status;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
td.topic-category-status-data .badge-category__wrapper,
|
||||
td.main-link .link-bottom-line .badge-category__wrapper {
|
||||
td.topic-category-data {
|
||||
grid-area: category;
|
||||
overflow: unset;
|
||||
align-self: flex-end;
|
||||
}
|
||||
td.topic-category-data .badge-category__wrapper,
|
||||
td.main-link .link-bottom-line .badge-category__wrapper {
|
||||
border-radius: var(--d-border-radius);
|
||||
padding: 6px;
|
||||
align-self: flex-end;
|
||||
@@ -300,7 +238,7 @@ body.user-messages-page .topic-list-item {
|
||||
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
|
||||
);
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
@include breakpoint(tablet) {
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
@@ -360,45 +298,47 @@ body.user-messages-page .topic-list-item {
|
||||
}
|
||||
}
|
||||
|
||||
// Bookmarks
|
||||
|
||||
.topic-list-item.bookmark-list-item {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: 25px auto repeat(5, 1fr) min-content;
|
||||
}
|
||||
grid-template-columns: 22px min-content min-content auto min-content min-content 36px;
|
||||
grid-template-areas:
|
||||
"avatar . . . . update dropdown"
|
||||
". topic-title topic-title topic-title topic-title category dropdown";
|
||||
"avatar update metadata metadata metadata metadata dropdown"
|
||||
"topic-title topic-title topic-title topic-title topic-title category dropdown";
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: 22px min-content min-content auto min-content min-content min-content 36px;
|
||||
grid-template-areas:
|
||||
"avatar . . . . . update dropdown"
|
||||
". topic-title topic-title topic-title topic-title . category dropdown";
|
||||
"avatar update metadata metadata metadata metadata metadata dropdown"
|
||||
"topic-title topic-title topic-title topic-title topic-title likes-replies category dropdown";
|
||||
}
|
||||
&.has-metadata {
|
||||
grid-template-areas:
|
||||
"avatar metadata metadata metadata metadata update dropdown"
|
||||
". topic-title topic-title topic-title likes-replies category dropdown";
|
||||
"avatar update metadata metadata metadata metadata dropdown"
|
||||
"topic-title topic-title topic-title topic-title likes-replies category dropdown";
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-areas:
|
||||
"avatar metadata metadata metadata metadata . update dropdown"
|
||||
". topic-title topic-title topic-title likes-replies . category dropdown";
|
||||
"avatar update metadata metadata metadata metadata metadata dropdown"
|
||||
"topic-title topic-title topic-title topic-title likes-replies . category dropdown";
|
||||
}
|
||||
}
|
||||
&.excerpt-expanded {
|
||||
grid-template-areas:
|
||||
"avatar topic-title topic-title topic-title topic-title topic-title update dropdown"
|
||||
"avatar excerpt excerpt excerpt excerpt excerpt . dropdown"
|
||||
". excerpt excerpt excerpt excerpt excerpt . dropdown"
|
||||
". excerpt excerpt excerpt excerpt excerpt category dropdown";
|
||||
"avatar update metadata metadata metadata metadata metadata dropdown"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title . dropdown"
|
||||
"excerpt excerpt excerpt excerpt excerpt excerpt . dropdown"
|
||||
"excerpt excerpt excerpt excerpt excerpt excerpt category dropdown";
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: 22px min-content min-content auto min-content min-content min-content 36px;
|
||||
.post-excerpt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.has-metadata {
|
||||
grid-template-areas:
|
||||
"avatar metadata metadata metadata metadata metadata update dropdown"
|
||||
"avatar topic-title topic-title topic-title topic-title topic-title topic-title dropdown"
|
||||
". excerpt excerpt excerpt excerpt excerpt . dropdown"
|
||||
". excerpt excerpt excerpt excerpt excerpt category dropdown";
|
||||
"avatar update metadata metadata metadata metadata metadata dropdown"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title dropdown"
|
||||
"excerpt excerpt excerpt excerpt excerpt excerpt . dropdown"
|
||||
"excerpt excerpt excerpt excerpt excerpt excerpt category dropdown";
|
||||
}
|
||||
}
|
||||
td.main-link .link-bottom-line {
|
||||
@@ -418,6 +358,7 @@ body.user-messages-page .topic-list-item {
|
||||
}
|
||||
.post-excerpt {
|
||||
grid-area: excerpt;
|
||||
margin: 0;
|
||||
}
|
||||
.topic-list-data:last-of-type {
|
||||
display: contents;
|
||||
@@ -435,15 +376,24 @@ body.user-messages-page .topic-list-item {
|
||||
}
|
||||
}
|
||||
|
||||
// Assigned List
|
||||
|
||||
.topic-list-item.assigned-list-item {
|
||||
grid-template-columns: 22px min-content min-content auto min-content min-content 36px;
|
||||
grid-template-areas:
|
||||
"avatar author status status . activity dropdown"
|
||||
". topic-title topic-title topic-title likes-replies category dropdown";
|
||||
"activity activity activity activity activity status dropdown"
|
||||
"topic-title topic-title topic-title topic-title likes-replies category dropdown";
|
||||
@include breakpoint(large) {
|
||||
grid-template-areas:
|
||||
"activity activity activity activity activity status dropdown"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title dropdown"
|
||||
"category . . . . likes-replies dropdown";
|
||||
}
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-areas:
|
||||
"avatar author status status . . . activity dropdown"
|
||||
". topic-title topic-title topic-title . . . . dropdown"
|
||||
". topic-title topic-title topic-title likes-replies likes-replies likes-replies category dropdown";
|
||||
"activity activity activity activity activity activity status dropdown"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title . dropdown"
|
||||
"category . . . . . likes-replies dropdown";
|
||||
}
|
||||
.assign-topic-buttons {
|
||||
display: contents;
|
||||
@@ -456,3 +406,74 @@ body.user-messages-page .topic-list-item {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
|
||||
// User Messages
|
||||
|
||||
body.user-messages-page .topic-list-item {
|
||||
td.topic-category-data,
|
||||
td.topic-likes-replies-data,
|
||||
td.topic-status-data {
|
||||
display: none;
|
||||
}
|
||||
grid-template-areas:
|
||||
"activity activity activity activity activity activity activity"
|
||||
"topic-title topic-title topic-title topic-title likes-replies likes-replies likes-replies";
|
||||
&.excerpt-expanded {
|
||||
grid-template-columns: 22px repeat(6, 1fr) auto;
|
||||
grid-template-rows: 22px auto auto 30px;
|
||||
grid-template-areas:
|
||||
"activity activity activity activity activity activity activity activity"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||
"excerpt excerpt excerpt excerpt excerpt excerpt . ."
|
||||
"excerpt excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
|
||||
@include breakpoint(extra-large) {
|
||||
grid-template-areas:
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . likes-replies"
|
||||
". excerpt excerpt excerpt excerpt excerpt . likes-replies";
|
||||
}
|
||||
}
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"activity activity activity activity activity activity activity activity"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title";
|
||||
.topic-excerpt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-select-enabled .topic-list-item {
|
||||
grid-template-areas:
|
||||
"avatar author status status . activity"
|
||||
". topic-title topic-title topic-title likes-replies likes-replies category";
|
||||
.bulk-select {
|
||||
grid-area: bulk-select;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@include breakpoint(large) {
|
||||
grid-template-columns: 22px min-content min-content auto min-content min-content min-content;
|
||||
grid-template-rows: 22px minmax(22px, auto);
|
||||
grid-template-areas:
|
||||
"avatar author status status . activity"
|
||||
". topic-title topic-title topic-title . . likes-replies"
|
||||
". topic-title topic-title topic-title . . category";
|
||||
}
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"avatar category-status category-status . . . . activity"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||
"avatar author . . . . . likes-replies";
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user