Skip to content

Commit b4de2ee

Browse files
BurntimeXBurntimeX
authored
Merge pull request #6384 from WoltLab/6.2-discussion-list
Generic styling for a discussion list
2 parents 765b5c8 + c732dcf commit b4de2ee

1 file changed

Lines changed: 295 additions & 0 deletions

File tree

‎wcfsetup/install/files/style/ui/discussionList.scss‎

Lines changed: 295 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
1+
.discussionList {
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
6+
.discussionList__item {
7+
display: flex;
8+
flex-direction: column;
9+
gap: 10px;
10+
position: relative;
11+
}
12+
13+
.discussionList__item:not(:last-child) {
14+
border-bottom: 1px solid var(--wcfContentBorderInner);
15+
}
16+
17+
@include screen-sm-down {
18+
.discussionList__item:not(:last-child) {
19+
padding-bottom: 15px;
20+
margin-bottom: 15px;
21+
}
22+
}
23+
24+
@include screen-md-up {
25+
.discussionList__item:not(:last-child) {
26+
padding-bottom: 20px;
27+
margin-bottom: 20px;
28+
}
29+
}
30+
31+
.discussionList__item__header {
32+
align-items: center;
33+
display: flex;
34+
gap: 10px;
35+
justify-content: space-between;
36+
}
37+
38+
.discussionList__item__meta {
39+
align-items: center;
40+
display: flex;
41+
gap: 10px;
42+
43+
color: var(--wcfContentDimmedText);
44+
45+
@include wcfFontSmall;
46+
}
47+
48+
.discussionList__item__meta__content {
49+
display: flex;
50+
}
51+
52+
@include screen-xs {
53+
.discussionList__item__meta {
54+
gap: 5px;
55+
}
56+
57+
.discussionList__item__meta__avatar img {
58+
height: 24px;
59+
width: 24px;
60+
}
61+
62+
.discussionList__item__meta__content {
63+
align-items: center;
64+
}
65+
66+
.discussionList__item__meta__time {
67+
display: flex;
68+
}
69+
70+
.discussionList__item__meta__time::before {
71+
content: "•";
72+
margin: 0 3px;
73+
}
74+
}
75+
76+
@include screen-sm-up {
77+
.discussionList__item__meta__content {
78+
flex-direction: column;
79+
}
80+
}
81+
82+
.discussionList__item__toolbar {
83+
align-items: center;
84+
display: grid;
85+
column-gap: 10px;
86+
grid-template-areas: "status interactions";
87+
grid-template-columns: auto fit-content(200px);
88+
z-index: 1;
89+
}
90+
91+
.discussionList__item__status {
92+
display: flex;
93+
gap: 5px;
94+
grid-area: status;
95+
}
96+
97+
.discussionList__item__interactions {
98+
display: flex;
99+
grid-area: interactions;
100+
opacity: 1;
101+
}
102+
103+
@media (hover: hover) {
104+
.discussionList__item:not(:hover) .discussionList__item__toolbar {
105+
grid-template-columns: min-content fit-content(0);
106+
column-gap: 0;
107+
}
108+
109+
.discussionList__item__toolbar {
110+
transition:
111+
grid-template-columns 0.24s ease-in-out 0.12s,
112+
column-gap 0.24s ease-in-out 0.12s;
113+
}
114+
115+
.discussionList__item:not(:hover) .discussionList__item__interactions {
116+
opacity: 0;
117+
}
118+
119+
.discussionList__item__interactions {
120+
transition: opacity 0.24s ease-in-out 0.12s;
121+
}
122+
}
123+
124+
.discussionList__item__interactions .button:not(:hover) {
125+
background-color: transparent;
126+
color: inherit;
127+
}
128+
129+
.discussionList__item__interactions .dropdown {
130+
display: flex;
131+
}
132+
133+
.discussionList__item__content {
134+
display: grid;
135+
grid-template-areas:
136+
"markAsRead title image"
137+
"teaser teaser image"
138+
"labels labels image";
139+
grid-template-columns: min-content 1fr min-content;
140+
grid-template-rows: min-content min-content 1fr;
141+
}
142+
143+
.discussionList__item__markAsRead {
144+
align-items: center;
145+
grid-area: markAsRead;
146+
display: flex;
147+
padding: 0 5px;
148+
margin-right: 5px;
149+
z-index: 1;
150+
}
151+
152+
.discussionList__item__unread__indicator {
153+
background-color: var(--wcfButtonPrimaryBackground);
154+
border-radius: 50%;
155+
display: inline-block;
156+
height: 10px;
157+
width: 10px;
158+
}
159+
160+
@media (hover: hover) {
161+
.discussionList__item__markAsRead:hover .discussionList__item__unread__indicator {
162+
background-color: var(--wcfButtonPrimaryBackgroundActive);
163+
}
164+
}
165+
166+
.discussionList__item__title {
167+
grid-area: title;
168+
169+
@include wcfFontHeadline;
170+
@include wcfFontBold;
171+
}
172+
173+
@include screen-xs {
174+
.discussionList__item__title {
175+
font-size: 14px;
176+
}
177+
}
178+
179+
.discussionList__item__labels {
180+
grid-area: labels;
181+
margin-top: 5px;
182+
}
183+
184+
.discussionList__item__teaser {
185+
display: -webkit-box;
186+
grid-area: teaser;
187+
overflow: hidden;
188+
margin-top: 5px;
189+
-webkit-line-clamp: 2;
190+
-webkit-box-orient: vertical;
191+
}
192+
193+
@include screen-xs {
194+
.discussionList__item__teaser {
195+
font-size: 12px;
196+
}
197+
}
198+
199+
.discussionList__item__image {
200+
grid-area: image;
201+
width: 160px;
202+
overflow: hidden;
203+
border-radius: var(--wcfBorderRadius);
204+
margin-left: 10px;
205+
}
206+
207+
@include screen-xs {
208+
.discussionList__item__image {
209+
display: none;
210+
}
211+
}
212+
213+
.discussionList__item__image img {
214+
height: 100px;
215+
object-fit: cover;
216+
object-position: center center;
217+
width: 100%;
218+
}
219+
220+
.discussionList__item__link {
221+
color: inherit;
222+
223+
&::before {
224+
content: "";
225+
inset: 0;
226+
position: absolute;
227+
}
228+
229+
&:hover,
230+
&:focus {
231+
color: inherit;
232+
}
233+
}
234+
235+
@media (hover: hover) {
236+
.discussionList__item__link:hover,
237+
.discussionList__item__link:focus {
238+
text-decoration: underline;
239+
text-underline-offset: 0.2em;
240+
}
241+
}
242+
243+
.discussionList__item__footer {
244+
align-items: center;
245+
display: flex;
246+
gap: 10px;
247+
color: var(--wcfContentDimmedText);
248+
249+
@include wcfFontSmall;
250+
}
251+
252+
.discussionList__item__lastPost {
253+
margin-inline-start: auto;
254+
display: flex;
255+
gap: 10px;
256+
position: relative;
257+
}
258+
259+
.discussionList__item__lastPost__link {
260+
z-index: 1;
261+
color: inherit;
262+
263+
&::before {
264+
content: "";
265+
inset: 0;
266+
position: absolute;
267+
}
268+
269+
&:hover,
270+
&:focus {
271+
color: inherit;
272+
}
273+
}
274+
275+
@media (hover: hover) {
276+
.discussionList__item__lastPost__link:hover,
277+
.discussionList__item__lastPost__link:focus {
278+
text-decoration: underline;
279+
text-underline-offset: 0.2em;
280+
}
281+
}
282+
283+
.discussionList__item__replies,
284+
.discussionList__item__lastPost__time,
285+
.discussionList__item__lastPost__author {
286+
align-items: center;
287+
display: flex;
288+
gap: 3px;
289+
}
290+
291+
@include screen-xs {
292+
.discussionList__item__lastPost__author {
293+
display: none;
294+
}
295+
}

0 commit comments

Comments
 (0)