Skip to content

Commit 8f83152

Browse files
author
satoshinotdead
committed
2 parents d79d907 + 7263400 commit 8f83152

File tree

4 files changed

+402
-3
lines changed

4 files changed

+402
-3
lines changed

‎common/common.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import "box-view";
22
@import "buttons";
33
@import "chat";
4+
@import "categories-view";
45
@import "color-choice";
56
@import "composer";
67
@import "composer-peek-mode";

‎scss/categories-view.scss‎

Lines changed: 357 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,357 @@
1+
@use "lib/viewport";
2+
3+
.categories-and-latest {
4+
.category-list {
5+
border-collapse: separate;
6+
7+
th.topics {
8+
display: none;
9+
}
10+
11+
thead tr th {
12+
font-size: var(--font-up-1-rem);
13+
font-weight: bold;
14+
}
15+
16+
tbody {
17+
display: flex;
18+
flex-direction: column;
19+
gap: 1em;
20+
padding-top: 1em;
21+
border: 0;
22+
}
23+
24+
tbody tr {
25+
display: grid;
26+
grid-template-areas:
27+
"title topics"
28+
"category category"
29+
"subcategory subcategory";
30+
row-gap: 1em;
31+
border: 1px solid var(--primary-300);
32+
border-radius: var(--d-border-radius-large);
33+
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
34+
}
35+
36+
td.category {
37+
display: contents;
38+
border-top-left-radius: var(--d-border-radius-large);
39+
border-bottom-left-radius: var(--d-border-radius-large);
40+
border-width: 2px;
41+
padding: 1em 1.5rem;
42+
}
43+
44+
tbody h3 {
45+
grid-area: title;
46+
padding: 1em 0 0 1.5rem;
47+
font-size: var(--font-up-1-rem);
48+
49+
.category-name {
50+
display: flex;
51+
align-self: center;
52+
}
53+
54+
.badge-category {
55+
gap: 0.25em;
56+
align-items: center;
57+
font-size: var(--font-up-1-rem);
58+
59+
.d-icon:first-of-type:not(.d-icon-lock),
60+
&.--style-square::before,
61+
&.--style-emoji .emoji {
62+
width: 1.25em;
63+
height: 1.25em;
64+
margin-right: 0.25em;
65+
}
66+
67+
&.--style-square::before {
68+
border-radius: 6px;
69+
}
70+
}
71+
72+
.d-icon.d-icon-lock {
73+
order: 1;
74+
}
75+
}
76+
77+
.topics {
78+
width: auto;
79+
padding: 1em 1.5rem 0 0;
80+
display: flex;
81+
align-items: center;
82+
justify-content: end;
83+
}
84+
85+
.category-description {
86+
grid-area: category;
87+
padding: 0 1.5rem;
88+
margin: 0;
89+
font-size: var(--font-down-1-rem);
90+
}
91+
92+
.subcategories {
93+
grid-area: subcategory;
94+
gap: 0.25em 0.5em;
95+
padding: 0 1.5rem 1em;
96+
margin: 0;
97+
98+
.badge-category__wrapper {
99+
background-color: light-dark(
100+
oklch(from var(--category-badge-color) 98% calc(c * 0.2) h),
101+
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
102+
);
103+
padding: 0.25em 0.5rem;
104+
border-radius: var(--d-border-radius);
105+
}
106+
107+
.badge-category__name {
108+
color: light-dark(
109+
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
110+
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
111+
);
112+
}
113+
114+
.badge-category.--style-square::before {
115+
border-radius: 3px;
116+
}
117+
}
118+
}
119+
120+
.latest-topic-list {
121+
.table-heading {
122+
border: 0;
123+
font-size: var(--font-up-1-rem);
124+
font-weight: bold;
125+
}
126+
127+
&-item {
128+
display: grid;
129+
grid-template-columns: min-content min-content auto min-content;
130+
grid-template-areas:
131+
"creator title title status"
132+
". category activity activity";
133+
grid-column-gap: 0.75rem;
134+
grid-row-gap: 0.5rem;
135+
background: var(--d-content-background);
136+
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
137+
text-overflow: ellipsis;
138+
padding: 0.75em 1rem;
139+
border: 1px solid var(--primary-300);
140+
border-radius: var(--d-border-radius-large);
141+
margin-top: 1em;
142+
}
143+
144+
.main-link,
145+
.topic-stats {
146+
display: contents;
147+
}
148+
149+
.top-row {
150+
grid-area: title;
151+
}
152+
153+
.bottom-row {
154+
grid-area: category;
155+
156+
.discourse-tags {
157+
display: none;
158+
}
159+
}
160+
161+
.badge-category__wrapper {
162+
border-radius: var(--d-border-radius);
163+
padding: 0.25em 0.5rem;
164+
background-color: light-dark(
165+
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
166+
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
167+
);
168+
169+
@include viewport.until(md) {
170+
padding: 0.25em 0.5rem;
171+
font-size: var(--font-down-2);
172+
}
173+
174+
.badge-category__name {
175+
color: light-dark(
176+
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
177+
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
178+
);
179+
}
180+
}
181+
182+
.topic-list-data {
183+
grid-area: likes-replies;
184+
}
185+
186+
.num.posts-map {
187+
display: none;
188+
}
189+
190+
.topic-last-activity {
191+
grid-area: activity;
192+
display: flex;
193+
align-items: center;
194+
text-align: left;
195+
font-size: var(--font-down-1-rem);
196+
197+
&::before {
198+
content: "";
199+
display: inline-block;
200+
width: 0.25em;
201+
height: 0.25em;
202+
background-color: var(--primary-500);
203+
border-radius: 100%;
204+
margin-right: 0.5em;
205+
}
206+
}
207+
208+
.topic-poster {
209+
grid-area: creator;
210+
width: auto;
211+
align-self: flex-start;
212+
213+
.avatar {
214+
height: 24px;
215+
width: 24px;
216+
border-radius: var(--d-border-radius-small);
217+
}
218+
}
219+
}
220+
}
221+
222+
@include viewport.until(sm) {
223+
.category-list.with-topics {
224+
margin-inline: 1rem;
225+
226+
.num.posts,
227+
.category-topics-count {
228+
display: none;
229+
}
230+
231+
.category-list {
232+
&-item {
233+
padding-top: 0;
234+
padding-bottom: 0;
235+
border-top: 0 !important;
236+
border-bottom: 0 !important;
237+
}
238+
}
239+
240+
tbody {
241+
display: flex;
242+
flex-direction: column;
243+
244+
tr:first-of-type {
245+
order: -2;
246+
}
247+
248+
tr.subcategories-list {
249+
order: -1;
250+
}
251+
252+
tr:nth-last-of-type(2) {
253+
border-bottom: 0;
254+
}
255+
}
256+
257+
th.main-link {
258+
padding-top: 0;
259+
}
260+
}
261+
}
262+
263+
.category-boxes.with-subcategories {
264+
@include viewport.from(sm) {
265+
margin-top: 0;
266+
}
267+
268+
@include viewport.until(md) {
269+
padding-inline: 1rem;
270+
box-sizing: border-box;
271+
}
272+
273+
.category {
274+
border: 0;
275+
276+
&-box-inner {
277+
border-radius: var(--d-border-radius-large);
278+
border: 1px solid var(--primary-300);
279+
background: var(--d-content-background);
280+
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
281+
282+
&:hover {
283+
.discourse-no-touch & {
284+
border-color: var(--accent-color);
285+
background: var(--d-content-background);
286+
}
287+
}
288+
289+
&.selected {
290+
box-shadow:
291+
0 0 0 2px var(--accent-color),
292+
0 0 12px 1px var(--topic-card-shadow);
293+
}
294+
}
295+
296+
&-details {
297+
display: flex;
298+
flex-direction: column;
299+
gap: 1rem;
300+
height: 100%;
301+
}
302+
303+
&-box-heading {
304+
h3 {
305+
text-align: left;
306+
}
307+
308+
.badge-category {
309+
display: flex;
310+
flex-wrap: wrap;
311+
align-items: flex-start;
312+
gap: 1em;
313+
justify-content: space-between;
314+
width: 100%;
315+
316+
&__wrapper {
317+
display: flex;
318+
}
319+
320+
&.--style-square::before {
321+
aspect-ratio: 1 / 1;
322+
height: auto;
323+
width: 13%;
324+
border-radius: var(--d-border-radius);
325+
}
326+
327+
&__name {
328+
flex-basis: 100%;
329+
font-size: var(--font-up-1-rem);
330+
}
331+
332+
.d-icon:not(.d-icon-lock),
333+
img.emoji {
334+
aspect-ratio: 1 / 1;
335+
height: auto;
336+
width: 13%;
337+
}
338+
}
339+
}
340+
341+
.description {
342+
text-align: left;
343+
margin: 0;
344+
font-size: var(--font-down-1-rem);
345+
}
346+
347+
.subcategories {
348+
margin-top: auto;
349+
row-gap: 0.5em;
350+
351+
.subcategory {
352+
margin-bottom: 0;
353+
font-size: var(--font-down-1);
354+
}
355+
}
356+
}
357+
}

‎scss/hiddenstuff.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
.list-controls #create-topic,
33
.notifications-button-footer .reason .text,
44
.pinned-button .reason .text,
5-
.more-topics__browse-more,
6-
// footer-message might cause issues, not sure what possible stuff can be in there, but the general idea is to hide it bcs having an ugly H3 (what?) CTA at the bottom is just… ugly imo
7-
.footer-message {
5+
.more-topics__browse-more {
86
display: none;
97
}

0 commit comments

Comments
 (0)