Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 94f4251

Browse files
comment-section made fully responsive
1 parent f39321f commit 94f4251

File tree

7 files changed

+208
-12
lines changed

7 files changed

+208
-12
lines changed

‎src/components/intermediate/CommentSection/CommentSection.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,20 @@
3636
max-width: calc((730 / 16) * 1rem);
3737
margin: 0 auto;
3838
}
39+
40+
@media only screen and (max-width: 900px) {
41+
.comment-section-container {
42+
padding: 1rem 5rem;
43+
}
44+
}
45+
@media only screen and (max-width: 800px) {
46+
.comment-section-container {
47+
padding: 5rem calc((24 / 16) * 1rem);
48+
}
49+
}
50+
51+
@media only screen and (max-width: 400px) {
52+
.comment-section-container {
53+
padding: 5rem calc((15 / 16) * 1rem);
54+
}
55+
}

‎src/components/intermediate/CommentSection/CommentSection.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,13 @@ const CommentSection = () => {
6666
// THIS setTimeout IS ONLY FOR DEMO PURPOSE
6767
// - TO MAKE SPINNER APPEAR LONGER ON SCREEN
6868
// IN REAL APP, OFC would be no setTimeout
69-
setTimeout(()=>{
70-
setComments(response.data.comments)
71-
setIsLoading(false)
72-
},2000)
69+
// setTimeout(()=>{
70+
// setComments(response.data.comments)
71+
// setIsLoading(false)
72+
// },2000)
7373

74-
// setComments(response.data.comments)
75-
// setIsLoading(false)
74+
setComments(response.data.comments)
75+
setIsLoading(false)
7676

7777
} catch (err) {
7878
console.log(err);
@@ -83,7 +83,7 @@ const CommentSection = () => {
8383

8484

8585
const emojiStyle = {
86-
position: 'fixed',
86+
position: 'absolute',
8787
top: '1rem',
8888
left: '1rem',
8989
textDecoration: 'none',

‎src/components/intermediate/CommentSection/SwitchAccount.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,15 @@
4646
.comment-section-active-user > button > img {
4747
opacity: 1;
4848
}
49+
50+
@media only screen and (max-width: 800px) {
51+
.comment-section-list {
52+
display: flex;
53+
gap: 0.75rem;
54+
}
55+
56+
.comment-section-list-item > button {
57+
width: 2.5rem;
58+
height: 2.5rem;
59+
}
60+
}

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/workflow.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,8 @@ TODOS:
9090

9191
- ADD ALT TAGS FOR IMGS + DO SOME AY11 CHECKING / ACCESSIBILITY TESTS
9292

93+
- ADD REALTIME STAMPS
94+
9395
### VOTE SYSTEM ✅
9496

9597
FOR VOTING COMMENT=
@@ -133,3 +135,12 @@ Same 6 cases.
133135
User has voted down, and clicks on vote down again => score +1 ✅, remove from vote object ✅.
134136

135137
User has voted up and click on downvote => score -2 ✅, voted: true, direction: down ✅,
138+
139+
BREAKPOINTS:
140+
141+
900px
142+
800px
143+
650px
144+
400px
145+
370px
146+
340px

‎src/components/intermediate/CommentSection/components/AddComment/AddComment.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,35 @@
7070
width: max-content;
7171
margin-left: auto;
7272
}
73+
74+
@media only screen and (max-width: 900px) {
75+
.comment-section-add-comment-form {
76+
display: grid;
77+
grid-template-columns: repeat(2, 1fr);
78+
grid-template-rows: repeat(2, auto);
79+
grid-template-areas:
80+
"reply reply"
81+
"img button";
82+
gap: calc((13 / 16) * 1rem);
83+
width: 100%;
84+
}
85+
86+
.comment-section-add-comment-form > textarea {
87+
grid-area: reply;
88+
}
89+
90+
.comment-section-add-comment-form > img {
91+
grid-area: img;
92+
}
93+
.comment-section-add-comment-form > button {
94+
grid-area: button;
95+
max-width: max-content;
96+
margin-left: auto;
97+
}
98+
}
99+
100+
@media only screen and (max-width: 400px) {
101+
.comment-section-add-comment-form {
102+
padding: calc((15 / 16) * 1rem);
103+
}
104+
}

‎src/components/intermediate/CommentSection/components/Comments/CommentItem/Comment/Comment.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -344,11 +344,13 @@ const Comment = ({data, type, isReplying, setIsReplying, setReplyingToID}) => {
344344
:
345345
<p className="comment-section-comment-body">
346346

347-
{type === 'reply' && Array.isArray(data.replyingTo) ?
347+
{type === 'reply' && Array.isArray(data.replyingTo)&&data.replyingTo.length>0 ?
348348
data.replyingTo.map((reply) => <a className='comment-section-replying-to comment-section-replying-to-multi' href="#">@{reply}</a>)
349-
: <a className='comment-section-replying-to' href="#">{data.replyingTo && '@'}{data?.replyingTo}</a>
350-
}
351-
{data?.content}
349+
: data.replyingTo ? <a className='comment-section-replying-to' href="#">@{data?.replyingTo}</a> : null
350+
}
351+
352+
{data?.content}
353+
352354
</p>
353355
}
354356

‎src/components/intermediate/CommentSection/components/Comments/CommentItem/CommentItem.css‎

Lines changed: 123 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
background-color: var(--comment-section-Very-light-gray);
2626
border-radius: 0.75rem;
2727
min-height: calc((100 / 16) * 1rem);
28-
2928
display: grid;
3029
}
3130

@@ -132,6 +131,7 @@
132131
align-items: center;
133132
cursor: pointer;
134133
transition: var(--comment-section-transition);
134+
font-size: 1rem;
135135
}
136136

137137
.comment-section-comment-right-buttons button:hover {
@@ -228,3 +228,125 @@
228228
.comment-section-delete-btn:hover {
229229
opacity: 0.5;
230230
}
231+
232+
@media only screen and (max-width: 800px) {
233+
.comment-section-replies-list {
234+
padding-left: calc((24 / 16) * 1rem);
235+
margin-left: 0;
236+
border-left: 2px solid var(--comment-section-Light-gray);
237+
}
238+
}
239+
240+
@media only screen and (max-width: 650px) {
241+
.comment-section-comment {
242+
display: flex;
243+
flex-direction: column-reverse;
244+
gap: calc((20 / 16) * 1rem);
245+
position: relative;
246+
}
247+
248+
.comment-section-comment-counter {
249+
min-height: unset;
250+
display: flex;
251+
width: max-content;
252+
}
253+
254+
.comment-section-comment-counter button {
255+
width: auto;
256+
257+
padding: calc((15 / 16) * 1rem) 0.9rem;
258+
/* border: 1px solid red; */
259+
}
260+
261+
.comment-section-comment-right-buttons {
262+
position: absolute;
263+
bottom: calc((37 / 16) * 1rem);
264+
right: calc((20 / 16) * 1rem);
265+
266+
height: auto;
267+
display: flex;
268+
gap: 1rem;
269+
}
270+
271+
/* MODAL */
272+
273+
.comment-section-delete-modal-container {
274+
padding: 1rem;
275+
}
276+
277+
.comment-section-delete-modal {
278+
padding: calc((24 / 16) * 1rem) calc((18 / 16) * 1rem);
279+
}
280+
281+
.comment-section-cancel-delete-btn,
282+
.comment-section-delete-btn {
283+
padding: 1rem calc((12 / 16) * 1rem);
284+
}
285+
}
286+
287+
@media only screen and (max-width: 400px) {
288+
.comment-section-replies-list {
289+
padding-left: calc((15 / 16) * 1rem);
290+
}
291+
292+
.comment-section-comment {
293+
padding: calc((15 / 16) * 1rem);
294+
}
295+
296+
.comment-section-comment-right-buttons {
297+
position: absolute;
298+
bottom: calc((28 / 16) * 1rem);
299+
right: calc((15 / 16) * 1rem);
300+
}
301+
}
302+
303+
@media only screen and (max-width: 370px) {
304+
.comment-section-comment-details {
305+
display: grid;
306+
grid-template-columns: repeat(3, min-content);
307+
grid-template-rows: repeat(2, min-content);
308+
gap: 0;
309+
width: 100%;
310+
}
311+
312+
.comment-section-comment-details img {
313+
grid-area: 1 / 1 / 4 / 2;
314+
width: 3rem;
315+
height: 3rem;
316+
margin-right: 1rem;
317+
}
318+
319+
.comment-section-comment-details a {
320+
grid-area: 1 / 2 / 2 / 3;
321+
margin-right: 1rem;
322+
margin-top: 0.2rem;
323+
}
324+
325+
.comment-section-comment-details span {
326+
grid-area: 1 / 3 / 2 / 4;
327+
margin-top: 0.2rem;
328+
}
329+
330+
.comment-section-comment-details p {
331+
grid-area: 3 / 2 / 4 / 3;
332+
width: max-content;
333+
margin-bottom: 0.2rem;
334+
font-size: 0.9rem;
335+
}
336+
}
337+
338+
@media only screen and (max-width: 370px) {
339+
.comment-section-delete-modal-container {
340+
padding: 1rem;
341+
}
342+
343+
.comment-section-delete-modal {
344+
padding: calc((24 / 16) * 1rem) calc((18 / 16) * 1rem);
345+
}
346+
347+
.comment-section-cancel-delete-btn,
348+
.comment-section-delete-btn {
349+
padding: 1rem calc((10 / 16) * 1rem);
350+
font-size: 0.75rem;
351+
}
352+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /