Skip to content

Commit 20ab4ba

Browse files
HACO8888HACO8888
authored
v2.17.8 (#253)
2 parents d7e4190 + 62e71aa commit 20ab4ba

7 files changed

Lines changed: 167 additions & 67 deletions

File tree

‎components/Threads/desktop/Skeleton.module.scss‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
.preview {
3131
position: relative;
32-
padding: 2rem;
32+
padding: 1.5rem;
3333
box-sizing: border-box;
3434
height: var(--thread-height);
3535
width: 100%;
@@ -41,12 +41,10 @@
4141
width: auto;
4242
display: flex;
4343
flex-direction: initial;
44-
4544
margin-bottom: 0.3rem;
4645

4746
.user {
4847
width: 3rem;
49-
5048
position: relative;
5149
background-color: $skeleton-background-color;
5250
overflow: hidden;
@@ -69,13 +67,12 @@
6967
}
7068
}
7169

72-
>span {
70+
> span {
7371
padding: 0 0.1rem;
7472
}
7573

7674
.sig {
7775
width: 5rem;
78-
7976
position: relative;
8077
background-color: $skeleton-background-color;
8178
overflow: hidden;
@@ -107,7 +104,6 @@
107104

108105
.title {
109106
width: 50%;
110-
111107
position: relative;
112108
background-color: $skeleton-background-color;
113109
overflow: hidden;
@@ -134,8 +130,8 @@
134130
}
135131

136132
.content {
137-
height: 4rem;
138-
133+
height: 3rem; // 改為兩行的高度 (對應 min-height: calc(1em * 1.5 * 2))
134+
margin-bottom: 0.5rem;
139135
position: relative;
140136
background-color: $skeleton-background-color;
141137
overflow: hidden;
@@ -158,9 +154,40 @@
158154
}
159155
}
160156

157+
// 新增 hashtag skeleton
158+
.hashtags {
159+
display: flex;
160+
gap: 0.5rem;
161+
margin-top: 0.3rem;
162+
}
163+
164+
.hashtag {
165+
width: 3rem;
166+
height: 1.5rem;
167+
position: relative;
168+
background-color: $skeleton-background-color;
169+
overflow: hidden;
170+
border-radius: 0.75rem;
171+
172+
&::after {
173+
position: absolute;
174+
top: 0;
175+
right: 0;
176+
bottom: 0;
177+
left: 0;
178+
transform: translateX(-100%);
179+
background-image: linear-gradient(90deg,
180+
rgba(#fff, 0) 0,
181+
rgba(#fff, 0.2) 20%,
182+
rgba(#fff, 0.5) 60%,
183+
rgba(#fff, 0));
184+
animation: shimmer 2s infinite;
185+
content: '';
186+
}
187+
}
188+
161189
.cover {
162190
min-width: 25%;
163-
164191
position: relative;
165192
background-color: $skeleton-background-color;
166193
overflow: hidden;

‎components/Threads/desktop/ThreadsList.module.scss‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "@/app/styles/variables.scss";
22

33
.threads {
4-
--thread-height: 10rem;
4+
--thread-height: 12rem;
55
position: relative;
66
width: 100%;
77
border-radius: $border-radius;
@@ -10,7 +10,7 @@
1010
gap: $gap;
1111
overflow-y: auto;
1212

13-
>p {
13+
> p {
1414
width: 100%;
1515
text-align: center;
1616
padding-bottom: 0.5rem;
@@ -58,10 +58,36 @@
5858

5959
.previewContent {
6060
display: -webkit-box;
61-
-webkit-line-clamp: 3;
61+
-webkit-line-clamp: 2;
6262
-webkit-box-orient: vertical;
6363
overflow: hidden;
6464
color: black;
65+
margin-bottom: 0.5rem;
66+
line-height: 1.5; // 行高倍數
67+
min-height: calc(1em * 1.5 * 2); // 1em * line-height * 行數
68+
}
69+
70+
.hashtags {
71+
display: flex;
72+
flex-wrap: wrap;
73+
gap: 0.5rem;
74+
margin-top: 0.3rem;
75+
}
76+
77+
.hashtag {
78+
padding: 0.25rem 0.6rem;
79+
background: rgba(95, 205, 245, 1);
80+
color: #ffffff;
81+
border-radius: 0.75rem;
82+
font-size: 0.75rem;
83+
font-weight: 600;
84+
transition: all 0.2s ease;
85+
white-space: nowrap;
86+
87+
&:hover {
88+
background: #5FCDF5;
89+
color: white;
90+
}
6591
}
6692

6793
.cover {
@@ -101,7 +127,7 @@
101127
opacity: 60%;
102128
}
103129

104-
&>span {
130+
& > span {
105131
padding: 0 0.1rem;
106132
}
107133
}
@@ -115,7 +141,7 @@
115141
justify-content: flex-end;
116142
flex: content;
117143

118-
&>span {
144+
& > span {
119145
padding: 0 0.1rem;
120146
}
121147

@@ -141,7 +167,7 @@
141167
align-items: center;
142168
justify-content: center;
143169

144-
>h1 {
170+
> h1 {
145171
font-size: $info-title-font-size;
146172
}
147173
}

‎components/Threads/desktop/ThreadsList.tsx‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const Thread = ({ threadData }: { threadData: TThread }) => {
4343
return (
4444
<Link
4545
href={`/post/${threadData._id}`}
46-
className={style.thread + " cursor-pointer select-none "}
46+
className={style.thread + " cursor-pointer select-none"}
4747
style={{
4848
backgroundColor: isAnnouncement ? "white" : "",
4949
}}
@@ -62,11 +62,7 @@ export const Thread = ({ threadData }: { threadData: TThread }) => {
6262
</div>
6363
<div className={style.statist}>
6464
<p className={style.date}>
65-
{
66-
new Date(threadData.createdAt!)
67-
.toLocaleString("zh-TW")
68-
.split(" ")[0]
69-
}
65+
{new Date(threadData.createdAt!).toLocaleString("zh-TW").split(" ")[0]}
7066
</p>
7167
<div className={style.likes}>
7268
<Image
@@ -90,11 +86,11 @@ export const Thread = ({ threadData }: { threadData: TThread }) => {
9086
</div>
9187
</div>
9288
</div>
89+
9390
<div className={style.title_bar}>
9491
<h1 className={style.previewTitle}>
9592
{isAnnouncement && "🔔 公告 - "}
9693
{threadData.title}
97-
{/* {threadData.pinned && " • 已置頂"} */}
9894
</h1>
9995
</div>
10096

@@ -106,21 +102,34 @@ export const Thread = ({ threadData }: { threadData: TThread }) => {
106102
>
107103
{markdownToPlainText(threadData.content)}
108104
</p>
105+
106+
{threadData.hashtag && threadData.hashtag.length > 0 && !isAnnouncement && (
107+
<div className={style.hashtags}>
108+
{threadData.hashtag.slice(0, 3).map((tag, index) => (
109+
<span key={index} className={style.hashtag}>
110+
#{tag}
111+
</span>
112+
))}
113+
</div>
114+
)}
109115
</div>
116+
110117
<div
111118
className={style.cover}
112119
style={{
113120
display: isAnnouncement ? "none" : "",
114121
}}
115122
>
116-
<Image
117-
src={fixCoverUrl(threadData.cover!)}
118-
alt="cover image"
119-
style={{ objectFit: "cover" }}
120-
priority
121-
sizes="100%"
122-
fill
123-
></Image>
123+
{threadData.cover && (
124+
<Image
125+
src={fixCoverUrl(threadData.cover)}
126+
alt="cover image"
127+
style={{ objectFit: "cover" }}
128+
priority
129+
sizes="100%"
130+
fill
131+
/>
132+
)}
124133
</div>
125134
</Link>
126135
);
@@ -137,6 +146,11 @@ const ThreadSkeleton = () => {
137146
</div>
138147
<div className={skeleton.title}></div>
139148
<p className={skeleton.content}></p>
149+
<div className={skeleton.hashtags}>
150+
<div className={skeleton.hashtag}></div>
151+
<div className={skeleton.hashtag}></div>
152+
<div className={skeleton.hashtag}></div>
153+
</div>
140154
</div>
141155
<div className={skeleton.cover}></div>
142156
</div>

‎components/Threads/mobile/Skeleton.module.scss‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
@import "@/app/styles/variables.scss";
22

33
.thread {
4-
--thread-height: 12rem;
4+
--thread-height: 8rem;
55
background: $panel-background-color;
6-
border-radius: $border-radius;
6+
border-radius: $mobile-border-radius;
77
max-height: var(--thread-height);
88
height: var(--thread-height);
9-
display: flex;
10-
flex-direction: row;
11-
justify-content: space-between;
9+
margin-bottom: 0.5rem;
1210

1311
animation-name: breath;
1412
animation-duration: 0.8s;
@@ -20,7 +18,6 @@
2018
from {
2119
background-color: rgba(255, 255, 255, 0.5);
2220
}
23-
2421
to {
2522
background-color: rgba(255, 255, 255, 0.2);
2623
}
@@ -29,24 +26,23 @@
2926

3027
.preview {
3128
position: relative;
32-
padding: 2rem;
29+
padding: 1rem;
3330
box-sizing: border-box;
3431
height: var(--thread-height);
3532
width: 100%;
3633
overflow: hidden;
3734
}
3835

3936
.info {
40-
font-size: 0.85rem;
37+
font-size: 0.75rem;
4138
width: auto;
4239
display: flex;
4340
flex-direction: initial;
44-
4541
margin-bottom: 0.3rem;
4642

4743
.user {
4844
width: 3rem;
49-
45+
height: 0.75rem;
5046
position: relative;
5147
background-color: $skeleton-background-color;
5248
overflow: hidden;
@@ -69,13 +65,13 @@
6965
}
7066
}
7167

72-
>span {
68+
> span {
7369
padding: 0 0.1rem;
7470
}
7571

7672
.sig {
77-
width: 5rem;
78-
73+
width: 4rem;
74+
height: 0.75rem;
7975
position: relative;
8076
background-color: $skeleton-background-color;
8177
overflow: hidden;
@@ -106,15 +102,13 @@
106102
}
107103

108104
.title {
109-
width: 50%;
110-
105+
width: 60%;
106+
height: 1rem;
111107
position: relative;
112108
background-color: $skeleton-background-color;
113109
overflow: hidden;
114110
border-radius: 0.3rem;
115111
margin-bottom: 0.5rem;
116-
height: 1.75rem;
117-
flex: 1;
118112

119113
&::after {
120114
position: absolute;
@@ -134,8 +128,8 @@
134128
}
135129

136130
.content {
137-
height: 4rem;
138-
131+
height: 0.9rem;
132+
margin-bottom: 0.5rem;
139133
position: relative;
140134
background-color: $skeleton-background-color;
141135
overflow: hidden;
@@ -158,13 +152,19 @@
158152
}
159153
}
160154

161-
.cover {
162-
min-width: 25%;
155+
.hashtags {
156+
display: flex;
157+
gap: 0.4rem;
158+
margin-top: 1rem;
159+
}
163160

161+
.hashtag {
162+
width: 2.5rem;
163+
height: 1.1rem;
164164
position: relative;
165165
background-color: $skeleton-background-color;
166166
overflow: hidden;
167-
border-radius: $border-radius;
167+
border-radius: 0.6rem;
168168

169169
&::after {
170170
position: absolute;

0 commit comments

Comments
 (0)