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

UX: Categories restyling (#184)

Browse Source 
Some CSS sprinkling for our most used category list formats:
### Desktop: Categories and Latest Topics 
| Default | Horizon |
|--------|--------|
| ![CleanShot 2025-06-17 at 17 28
45@2x](https://github.com/user-attachments/assets/4babf4d4-9c25-4780-bb72-c37b13d6f843)|
![CleanShot 2025-06-17 at 17 28
08@2x](https://github.com/user-attachments/assets/741a24fe-fca4-4eb8-97c9-96f5eb30b575)
|

### Desktop: Boxes with Subcategories
| Default | Horizon |
|--------|--------|
| ![CleanShot 2025-06-17 at 15 09
07@2x](https://github.com/user-attachments/assets/21e71f3b-b795-44d8-b56c-7edbe8fc465c)
| ![CleanShot 2025-06-17 at 17 29
46@2x](https://github.com/user-attachments/assets/41707610-cd09-4ebd-8fee-0f637e154fbf)
|

### Mobile: Categories with Featured Topics
| Default | Horizon |
|--------|--------|
| ![CleanShot 2025-06-17 at 17 30
53@2x](https://github.com/user-attachments/assets/665b6f19-c3d3-4438-8960-2170d0c69af3)
| ![CleanShot 2025-06-17 at 17 30
27@2x](https://github.com/user-attachments/assets/ca0fd595-1b0d-4ee9-b805-c538e4cdbc90)
|
This commit is contained in:
chapoi
2025-06-18 15:23:24 +02:00
committed by GitHub
parent 1e5f71473a
commit dac23d544c
3 changed files with 395 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
common/common.scss
+1
View File
@@ -1,6 +1,7 @@
@import "box-view";
@import "buttons";
@import "chat";
@import "categories-view";
@import "color-choice";
@import "composer";
@import "composer-peek-mode";
scss/categories-view.scss
+357
View File
@@ -0,0 +1,357 @@
@use "lib/viewport";
.categories-and-latest {
.category-list {
border-collapse: separate;
th.topics {
display: none;
}
thead tr th {
font-size: var(--font-up-1-rem);
font-weight: bold;
}
tbody {
display: flex;
flex-direction: column;
gap: 1em;
padding-top: 1em;
border: 0;
}
tbody tr {
display: grid;
grid-template-areas:
"title topics"
"category category"
"subcategory subcategory";
row-gap: 1em;
border: 1px solid var(--primary-300);
border-radius: var(--d-border-radius-large);
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
}
td.category {
display: contents;
border-top-left-radius: var(--d-border-radius-large);
border-bottom-left-radius: var(--d-border-radius-large);
border-width: 2px;
padding: 1em 1.5rem;
}
tbody h3 {
grid-area: title;
padding: 1em 0 0 1.5rem;
font-size: var(--font-up-1-rem);
.category-name {
display: flex;
align-self: center;
}
.badge-category {
gap: 0.25em;
align-items: center;
font-size: var(--font-up-1-rem);
.d-icon:first-of-type:not(.d-icon-lock),
&.--style-square::before,
&.--style-emoji .emoji {
width: 1.25em;
height: 1.25em;
margin-right: 0.25em;
}
&.--style-square::before {
border-radius: 6px;
}
}
.d-icon.d-icon-lock {
order: 1;
}
}
.topics {
width: auto;
padding: 1em 1.5rem 0 0;
display: flex;
align-items: center;
justify-content: end;
}
.category-description {
grid-area: category;
padding: 0 1.5rem;
margin: 0;
font-size: var(--font-down-1-rem);
}
.subcategories {
grid-area: subcategory;
gap: 0.25em 0.5em;
padding: 0 1.5rem 1em;
margin: 0;
.badge-category__wrapper {
background-color: light-dark(
oklch(from var(--category-badge-color) 98% calc(c * 0.2) h),
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
);
padding: 0.25em 0.5rem;
border-radius: var(--d-border-radius);
}
.badge-category__name {
color: light-dark(
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
);
}
.badge-category.--style-square::before {
border-radius: 3px;
}
}
}
.latest-topic-list {
.table-heading {
border: 0;
font-size: var(--font-up-1-rem);
font-weight: bold;
}
&-item {
display: grid;
grid-template-columns: min-content min-content auto min-content;
grid-template-areas:
"creator title title status"
". category activity activity";
grid-column-gap: 0.75rem;
grid-row-gap: 0.5rem;
background: var(--d-content-background);
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
text-overflow: ellipsis;
padding: 0.75em 1rem;
border: 1px solid var(--primary-300);
border-radius: var(--d-border-radius-large);
margin-top: 1em;
}
.main-link,
.topic-stats {
display: contents;
}
.top-row {
grid-area: title;
}
.bottom-row {
grid-area: category;
.discourse-tags {
display: none;
}
}
.badge-category__wrapper {
border-radius: var(--d-border-radius);
padding: 0.25em 0.5rem;
background-color: light-dark(
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
);
@include viewport.until(md) {
padding: 0.25em 0.5rem;
font-size: var(--font-down-2);
}
.badge-category__name {
color: light-dark(
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
);
}
}
.topic-list-data {
grid-area: likes-replies;
}
.num.posts-map {
display: none;
}
.topic-last-activity {
grid-area: activity;
display: flex;
align-items: center;
text-align: left;
font-size: var(--font-down-1-rem);
&::before {
content: "";
display: inline-block;
width: 0.25em;
height: 0.25em;
background-color: var(--primary-500);
border-radius: 100%;
margin-right: 0.5em;
}
}
.topic-poster {
grid-area: creator;
width: auto;
align-self: flex-start;
.avatar {
height: 24px;
width: 24px;
border-radius: var(--d-border-radius-small);
}
}
}
}
@include viewport.until(sm) {
.category-list.with-topics {
margin-inline: 1rem;
.num.posts,
.category-topics-count {
display: none;
}
.category-list {
&-item {
padding-top: 0;
padding-bottom: 0;
border-top: 0 !important;
border-bottom: 0 !important;
}
}
tbody {
display: flex;
flex-direction: column;
tr:first-of-type {
order: -2;
}
tr.subcategories-list {
order: -1;
}
tr:nth-last-of-type(2) {
border-bottom: 0;
}
}
th.main-link {
padding-top: 0;
}
}
}
.category-boxes.with-subcategories {
@include viewport.from(sm) {
margin-top: 0;
}
@include viewport.until(md) {
padding-inline: 1rem;
box-sizing: border-box;
}
.category {
border: 0;
&-box-inner {
border-radius: var(--d-border-radius-large);
border: 1px solid var(--primary-300);
background: var(--d-content-background);
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
&:hover {
.discourse-no-touch & {
border-color: var(--accent-color);
background: var(--d-content-background);
}
}
&.selected {
box-shadow:
0 0 0 2px var(--accent-color),
0 0 12px 1px var(--topic-card-shadow);
}
}
&-details {
display: flex;
flex-direction: column;
gap: 1rem;
height: 100%;
}
&-box-heading {
h3 {
text-align: left;
}
.badge-category {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1em;
justify-content: space-between;
width: 100%;
&__wrapper {
display: flex;
}
&.--style-square::before {
aspect-ratio: 1 / 1;
height: auto;
width: 13%;
border-radius: var(--d-border-radius);
}
&__name {
flex-basis: 100%;
font-size: var(--font-up-1-rem);
}
.d-icon:not(.d-icon-lock),
img.emoji {
aspect-ratio: 1 / 1;
height: auto;
width: 13%;
}
}
}
.description {
text-align: left;
margin: 0;
font-size: var(--font-down-1-rem);
}
.subcategories {
margin-top: auto;
row-gap: 0.5em;
.subcategory {
margin-bottom: 0;
font-size: var(--font-down-1);
}
}
}
}
scss/topic-cards.scss
+37
View File
@@ -16,6 +16,43 @@
}
}
.topic-list,
.category-boxes .subcategories {
.badge-category__wrapper {
border-radius: var(--d-border-radius);
padding: 3px 6px;
background-color: light-dark(
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
);
@include viewport.until(md) {
padding: 2px 6px;
font-size: var(--font-down-2);
}
.badge-category__name {
color: light-dark(
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
);
}
}
}
// undo all the above for the few instances that arent styled like traditional badges
.category-text-title {
.badge-category__wrapper {
border-radius: 0;
padding: 0;
background-color: transparent;
.badge-category__name {
color: var(--primary);
}
}
}
.topic-list-body {
border: none;
display: flex;