Skip to content

Commit 87c42ac

Browse files
Richajaishwal0Richajaishwal0
committed
implemented basic static discussion page
1 parent 0eb0a7e commit 87c42ac

File tree

3 files changed

+633
-36
lines changed

3 files changed

+633
-36
lines changed

‎src/components/discussions/DiscussionList.tsx‎

Whitespace-only changes.

‎src/pages/dashboard/dashboard.css‎

Lines changed: 321 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -176,30 +176,338 @@
176176

177177
/* Discussion Section */
178178
.discussion-container {
179-
max-width: 800px;
179+
max-width: 1200px;
180180
margin: 0 auto;
181-
padding: 2rem 0;
181+
padding: 2rem 1rem;
182+
color: var(--ifm-font-color-base);
183+
margin-left: 2rem;
182184
}
183185

184-
.discussion-container h2 {
185-
font-size: 2rem;
186+
.discussion-header {
187+
text-align: center;
188+
margin-bottom: 3rem;
189+
}
190+
191+
.discussion-header h1 {
192+
font-size: 3rem;
193+
font-weight: 700;
186194
margin-bottom: 1rem;
187-
color: var(--ifm-heading-color);
195+
color: var(--ifm-color-emphasis-900);
188196
}
189197

190-
.discussion-container p {
198+
.discussion-header h1 .highlight {
199+
background: linear-gradient(135deg, var(--ifm-color-primary), #e74c3c);
200+
-webkit-background-clip: text;
201+
-webkit-text-fill-color: transparent;
202+
background-clip: text;
203+
}
204+
205+
.discussion-header p {
206+
font-size: 1.1rem;
191207
color: var(--ifm-color-emphasis-700);
208+
max-width: 600px;
209+
margin: 0 auto;
210+
}
211+
212+
.discussion-toolbar {
213+
display: flex;
214+
justify-content: space-between;
215+
align-items: center;
192216
margin-bottom: 2rem;
193-
font-size: 1.1rem;
194-
line-height: 1.6;
217+
padding: 0.5rem;
218+
background: var(--ifm-background-surface-color);
219+
border-radius: 12px;
220+
border: 1px solid var(--ifm-toc-border-color);
195221
}
196222

197-
.giscus-container {
198-
margin-top: 2rem;
199-
background: var(--ifm-card-background-color);
223+
.toolbar-left {
224+
display: flex;
225+
align-items: center;
226+
gap: 0.5rem;
227+
}
228+
229+
.tab-btn {
230+
padding: 0.75rem 1.25rem;
231+
border: none;
232+
background: transparent;
233+
color: var(--ifm-color-emphasis-700);
234+
font-size: 0.9rem;
235+
font-weight: 600;
236+
cursor: pointer;
200237
border-radius: 8px;
201-
padding: 2rem;
202-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
238+
transition: all 0.2s ease;
239+
}
240+
241+
.tab-btn:hover {
242+
background: var(--ifm-menu-color-background-active);
243+
color: var(--ifm-color-primary);
244+
}
245+
246+
.tab-btn.active {
247+
background: var(--ifm-color-primary);
248+
color: white;
249+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
250+
}
251+
252+
.sort-dropdown select {
253+
padding: 0.75rem 2.5rem 0.75rem 1.25rem;
254+
border: 1px solid var(--ifm-toc-border-color);
255+
border-radius: 8px;
256+
background: var(--ifm-background-color);
257+
color: var(--ifm-color-emphasis-600);
258+
font-size: 0.9rem;
259+
font-weight: 500;
260+
cursor: pointer;
261+
appearance: none;
262+
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
263+
background-repeat: no-repeat;
264+
background-position: right 1rem center;
265+
background-size: 1em;
266+
}
267+
268+
.new-discussion-btn {
269+
display: flex;
270+
align-items: center;
271+
gap: 0.5rem;
272+
padding: 0.75rem 1.5rem;
273+
background: var(--ifm-color-primary);
274+
color: white;
275+
border: none;
276+
border-radius: 8px;
277+
font-size: 0.9rem;
278+
font-weight: 600;
279+
cursor: pointer;
280+
transition: all 0.2s ease;
281+
}
282+
283+
.new-discussion-btn:hover {
284+
background: var(--ifm-color-primary-dark);
285+
}
286+
287+
.categories-bar {
288+
display: flex;
289+
gap: 1rem;
290+
margin-bottom: 2rem;
291+
padding-bottom: 1rem;
292+
border-bottom: 1px solid var(--ifm-toc-border-color);
293+
overflow-x: auto;
294+
scrollbar-width: none;
295+
}
296+
297+
.categories-bar::-webkit-scrollbar {
298+
display: none;
299+
}
300+
301+
.category {
302+
padding: 0.5rem 1.25rem;
303+
border-radius: 20px;
304+
background: var(--ifm-background-surface-color);
305+
border: 1px solid var(--ifm-toc-border-color);
306+
color: var(--ifm-color-emphasis-700);
307+
font-size: 0.9rem;
308+
font-weight: 500;
309+
cursor: pointer;
310+
white-space: nowrap;
311+
transition: all 0.2s ease;
312+
}
313+
314+
.category:hover {
315+
background: var(--ifm-menu-color-background-active);
316+
border-color: var(--ifm-color-primary);
317+
color: var(--ifm-color-primary);
318+
}
319+
320+
.category.active {
321+
background: var(--ifm-color-primary);
322+
color: white;
323+
border-color: var(--ifm-color-primary);
324+
font-weight: 600;
325+
}
326+
327+
.search-filters {
328+
display: flex;
329+
gap: 1rem;
330+
margin-bottom: 2rem;
331+
align-items: center;
332+
}
333+
334+
.search-bar {
335+
flex: 1;
336+
position: relative;
337+
}
338+
339+
.search-bar input {
340+
width: 100%;
341+
padding: 0.75rem 1.25rem 0.75rem 3rem;
342+
border: 1px solid var(--ifm-toc-border-color);
343+
border-radius: 8px;
344+
background: var(--ifm-background-surface-color);
345+
color: var(--ifm-font-color-base);
346+
font-size: 0.9rem;
347+
transition: all 0.2s ease;
348+
}
349+
350+
.search-bar input:focus {
351+
outline: none;
352+
border-color: var(--ifm-color-primary);
353+
box-shadow: 0 0 0 2px var(--ifm-color-primary-lightest);
354+
}
355+
356+
.searchbar-icon {
357+
position: absolute;
358+
top: 50%;
359+
left: 1rem;
360+
transform: translateY(-50%);
361+
color: var(--ifm-color-emphasis-500);
362+
}
363+
364+
.discussions-list {
365+
display: grid;
366+
grid-template-columns: 1fr;
367+
gap: 1.5rem;
368+
}
369+
370+
.discussion-item {
371+
display: flex;
372+
gap: 1.5rem;
373+
padding: 1.5rem;
374+
background: var(--ifm-card-background-color);
375+
border-radius: 12px;
376+
border: 1px solid var(--ifm-toc-border-color);
377+
transition: all 0.2s ease;
378+
}
379+
380+
.discussion-item:hover {
381+
transform: translateY(-2px);
382+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
383+
border-color: var(--ifm-color-primary);
384+
}
385+
386+
.discussion-item.pinned {
387+
background: var(--ifm-color-primary-lightest);
388+
border-left: 4px solid var(--ifm-color-primary);
389+
}
390+
391+
.discussion-avatar {
392+
width: 48px;
393+
height: 48px;
394+
border-radius: 50%;
395+
overflow: hidden;
396+
flex-shrink: 0;
397+
}
398+
399+
.discussion-avatar img {
400+
width: 100%;
401+
height: 100%;
402+
object-fit: cover;
403+
}
404+
405+
.discussion-content {
406+
flex: 1;
407+
}
408+
409+
.discussion-header-content {
410+
display: flex;
411+
justify-content: space-between;
412+
align-items: flex-start;
413+
margin-bottom: 0.75rem;
414+
}
415+
416+
.discussion-header-content h3 {
417+
font-size: 1.2rem;
418+
font-weight: 600;
419+
margin: 0;
420+
color: var(--ifm-heading-color);
421+
}
422+
423+
.pinned-badge {
424+
display: inline-flex;
425+
align-items: center;
426+
gap: 0.375rem;
427+
padding: 0.375rem 0.75rem;
428+
background: var(--ifm-color-primary-light);
429+
color: var(--ifm-color-primary-darkest);
430+
border-radius: 20px;
431+
font-size: 0.75rem;
432+
font-weight: 600;
433+
}
434+
435+
.discussion-body p {
436+
color: var(--ifm-color-emphasis-700);
437+
font-size: 0.9rem;
438+
line-height: 1.6;
439+
margin: 0 0 1.25rem 0;
440+
}
441+
442+
.discussion-meta {
443+
display: flex;
444+
justify-content: space-between;
445+
align-items: center;
446+
flex-wrap: wrap;
447+
gap: 1rem;
448+
}
449+
450+
.tags {
451+
display: flex;
452+
gap: 0.5rem;
453+
flex-wrap: wrap;
454+
}
455+
456+
.tags .tag {
457+
padding: 0.375rem 0.75rem;
458+
background: var(--ifm-color-emphasis-100);
459+
border-radius: 20px;
460+
color: var(--ifm-color-emphasis-700);
461+
font-size: 0.75rem;
462+
font-weight: 500;
463+
}
464+
465+
.meta-info {
466+
display: flex;
467+
align-items: center;
468+
gap: 1.25rem;
469+
color: var(--ifm-color-emphasis-600);
470+
font-size: 0.875rem;
471+
}
472+
473+
.meta-info span {
474+
display: flex;
475+
align-items: center;
476+
gap: 0.375rem;
477+
}
478+
479+
.giscus-wrapper {
480+
margin-top: 3rem;
481+
padding-top: 2rem;
482+
border-top: 1px solid var(--ifm-toc-border-color);
483+
}
484+
485+
@media (max-width: 768px) {
486+
.discussion-toolbar {
487+
flex-direction: column;
488+
gap: 1rem;
489+
align-items: stretch;
490+
}
491+
492+
.toolbar-left {
493+
flex-wrap: wrap;
494+
justify-content: center;
495+
}
496+
497+
.search-filters {
498+
flex-direction: column;
499+
align-items: stretch;
500+
}
501+
502+
.discussion-item {
503+
flex-direction: column;
504+
gap: 1rem;
505+
}
506+
507+
.discussion-meta {
508+
flex-direction: column;
509+
align-items: flex-start;
510+
}
203511
}
204512

205513
/* Dashboard Container */

0 commit comments

Comments
 (0)