From 4c7f0d51abf5bd32923e525decafdad8378da980 Mon Sep 17 00:00:00 2001 From: Shubham-Lal Date: Sun, 14 Jul 2024 23:09:46 +0530 Subject: [PATCH 1/2] client: modify card ui --- client/src/App.css | 15 +++++-- .../components/card/closed-debate-card.css | 39 ++++++++----------- .../components/card/closed-debate-card.tsx | 10 ++--- .../src/components/card/open-debate-card.css | 19 ++++----- .../src/components/card/open-debate-card.tsx | 8 ++-- 5 files changed, 43 insertions(+), 48 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index 25f9ac6..2377420 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -75,8 +75,15 @@ } .column-debates { - display: grid; - grid-template-columns: repeat(3, 1fr); + /* display: grid; + grid-template-columns: repeat(3, 1fr); */ + display: block; + columns: 3; +} + +.card-break { + break-inside: avoid; + margin-bottom: 20px; } @media screen and (max-width: 1880px) { @@ -85,10 +92,10 @@ columns: 2; } - .card-break { + /* .card-break { break-inside: avoid; margin-bottom: 20px; - } + } */ } @media screen and (max-width: 1024px) { diff --git a/client/src/components/card/closed-debate-card.css b/client/src/components/card/closed-debate-card.css index 9b2b6ed..66f16c4 100644 --- a/client/src/components/card/closed-debate-card.css +++ b/client/src/components/card/closed-debate-card.css @@ -1,18 +1,20 @@ #closed-card, #closed-card-loading { - min-height: 270px; + /* min-height: 270px; */ background-color: var(--card_background); border: 1px solid var(--card_border); display: flex; + flex-direction: column; justify-content: space-between; - /* border-radius: 8px; */ + border-radius: 8px; } #closed-card .left, #closed-card-loading .left, #closed-card .right, #closed-card-loading .right { - padding: 20px 15px; + padding: 15px 15px 0 15px; + /* padding: 20px 15px 0 15px; */ } #closed-card .left, @@ -25,8 +27,10 @@ #closed-card .right, #closed-card-loading .right { - padding-top: 30px; - padding-bottom: 30px; + padding-top: 10px; + padding-bottom: 15px; + /* padding-top: 30px; + padding-bottom: 30px; */ flex: 0.8; display: flex; flex-direction: column; @@ -45,9 +49,6 @@ #closed-card .left h2 { font-size: 20px; font-weight: 600; - /* max-width: 300px; - text-overflow: ellipsis; - white-space: nowrap; */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; @@ -194,11 +195,13 @@ } #closed-card .debate-bar__container { - padding-top: 15px; + padding-top: 10px; + /* padding-top: 15px; */ } #closed-card-loading .right .debate-bar { - margin-top: 15px; + margin-top: 10px; + /* margin-top: 15px; */ } #closed-card-loading .right .debate-bar .loading-skeleton { @@ -208,7 +211,8 @@ #closed-card .right .debate-info, #closed-card-loading .right .debate-info { - padding-top: 20px; + padding-top: 10px; + /* padding-top: 20px; */ display: flex; justify-content: space-between; } @@ -253,7 +257,7 @@ #closed-card .right, #closed-card-loading .right { padding-top: 10px; - padding-bottom: 20px; + /* padding-bottom: 20px; */ } #closed-card .left.flex-unset, @@ -263,10 +267,6 @@ flex: unset; } - /* #closed-card .left h2 { - max-width: 350px; - } */ - #closed-card .left p { font-size: 15px; } @@ -297,15 +297,8 @@ } } -/* @media screen and (max-width: 767px) { - #closed-card .left h2 { - max-width: 400px; - } -} */ - @media screen and (max-width: 480px) { #closed-card .left h2 { - /* max-width: 100%; */ font-size: 18px; } diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx index f8cbca2..11642d3 100644 --- a/client/src/components/card/closed-debate-card.tsx +++ b/client/src/components/card/closed-debate-card.tsx @@ -1,5 +1,5 @@ import "./closed-debate-card.css" -import { useNavigate, Link } from "react-router-dom" +import { useNavigate } from "react-router-dom" import { useNavStore } from "../../store/useNavStore" import DebateBar from "./debate-bar" import { MdModeComment } from "react-icons/md" @@ -20,12 +20,12 @@ const ClosedDebateCard = () => {

navigate('/')}> Sony is the best camera of all time.

-

+ {/*

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt! Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt! Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem.

- View + View */}
@@ -65,7 +65,7 @@ const ClosedDebateLoadingCard = () => {
-
+ {/*
@@ -74,7 +74,7 @@ const ClosedDebateLoadingCard = () => {
-
+
*/}
diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css index 6d78670..941774b 100644 --- a/client/src/components/card/open-debate-card.css +++ b/client/src/components/card/open-debate-card.css @@ -1,10 +1,11 @@ #open-card, #open-card-loading { - min-height: 270px; - padding: 20px 15px; + /* min-height: 270px; */ + padding: 15px; + /* padding: 20px 15px; */ background-color: var(--card_background); border: 1px solid var(--card_border); - /* border-radius: 8px; */ + border-radius: 8px; } #open-card .debate-header, @@ -21,8 +22,6 @@ #open-card .debate-header h2 { font-size: 20px; font-weight: 600; - /* text-overflow: ellipsis; - white-space: nowrap; */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; @@ -97,7 +96,8 @@ #open-card .user-info, #open-card-loading .user-info { width: 70%; - padding: 10px 0 15px 0; + padding: 10px 0; + /* padding: 10px 0 15px 0; */ display: flex; gap: 10px; align-items: center; @@ -185,13 +185,9 @@ @media screen and (max-width: 1536px) { - #open-card, + /* #open-card, #open-card-loading { min-height: auto; - } - - /* #open-card .debate-header h2 { - max-width: 350px; } */ #open-card .debate-body { @@ -213,7 +209,6 @@ } #open-card .debate-header h2 { - /* max-width: 100%; */ font-size: 18px; } diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx index bc8017f..356bfdd 100644 --- a/client/src/components/card/open-debate-card.tsx +++ b/client/src/components/card/open-debate-card.tsx @@ -22,11 +22,11 @@ const OpenDebateCard = () => { Debate
-

+ {/*

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt! Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt! Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem. -

+

*/}
handleProfileClick('julieroberts')} />
@@ -60,13 +60,13 @@ const OpenDebateLoadingCard = () => {
-
+ {/*
-
+
*/}
From ed86219c6a0ab5a70bd1d75accfc310a5f16eab6 Mon Sep 17 00:00:00 2001 From: Shubham-Lal Date: Mon, 15 Jul 2024 11:22:15 +0530 Subject: [PATCH 2/2] client: modify debate card ui --- client/src/App.css | 23 ++------- .../components/card/closed-debate-card.css | 50 ++++--------------- .../components/card/closed-debate-card.tsx | 12 ++--- .../src/components/card/open-debate-card.css | 30 +++++------ .../src/components/card/open-debate-card.tsx | 12 +++-- client/src/components/loading/style.css | 2 - client/src/components/modal/auth/index.css | 2 - client/src/components/sidebar/explore.css | 3 -- .../src/components/sidebar/left-sidebar.css | 1 - .../src/components/sidebar/right-sidebar.css | 1 - client/src/globals.css | 5 +- client/src/pages/create-debate/style.css | 4 +- client/src/pages/home/index.tsx | 2 +- client/src/pages/search/style.css | 2 +- 14 files changed, 44 insertions(+), 105 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index 2377420..6c47df1 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -16,23 +16,13 @@ } #right-sidebar { - /* max-height: 100dvh; */ max-height: 100svh; } #main { width: 40%; - /* height: 100dvh; */ height: 100svh; overflow-y: auto; - --dot-bg: var(--body_background); - --dot-color: #4C4E52; - --dot-size: 1px; - --dot-space: 15px; - background: - linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), - linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), - var(--dot-color); border-left: 1px solid var(--explore_input_bg); border-right: 1px solid var(--explore_input_bg); } @@ -70,13 +60,11 @@ padding: 20px; display: flex; flex-direction: column; - gap: 20px; + gap: 30px; user-select: none; } .column-debates { - /* display: grid; - grid-template-columns: repeat(3, 1fr); */ display: block; columns: 3; } @@ -91,11 +79,6 @@ display: block; columns: 2; } - - /* .card-break { - break-inside: avoid; - margin-bottom: 20px; - } */ } @media screen and (max-width: 1024px) { @@ -196,7 +179,7 @@ } .debates { - padding: 10px; - gap: 10px; + padding: 20px 10px; + gap: 20px; } } \ No newline at end of file diff --git a/client/src/components/card/closed-debate-card.css b/client/src/components/card/closed-debate-card.css index 66f16c4..e7ab33b 100644 --- a/client/src/components/card/closed-debate-card.css +++ b/client/src/components/card/closed-debate-card.css @@ -1,25 +1,12 @@ #closed-card, #closed-card-loading { - /* min-height: 270px; */ - background-color: var(--card_background); - border: 1px solid var(--card_border); display: flex; flex-direction: column; justify-content: space-between; - border-radius: 8px; -} - -#closed-card .left, -#closed-card-loading .left, -#closed-card .right, -#closed-card-loading .right { - padding: 15px 15px 0 15px; - /* padding: 20px 15px 0 15px; */ } #closed-card .left, #closed-card-loading .left { - flex: 1.2; display: flex; flex-direction: column; justify-content: center; @@ -28,10 +15,6 @@ #closed-card .right, #closed-card-loading .right { padding-top: 10px; - padding-bottom: 15px; - /* padding-top: 30px; - padding-bottom: 30px; */ - flex: 0.8; display: flex; flex-direction: column; justify-content: center; @@ -40,10 +23,10 @@ #closed-card .divider, #closed-card-loading .divider { - /* margin: 15px 0; - width: 2px; - background: linear-gradient(transparent, var(--card_divider), var(--card_divider), transparent); */ - border-left: 1px solid var(--card_border); + margin-top: 30px; + width: 100%; + height: 0; + border-bottom: 1px solid var(--card_border); } #closed-card .left h2 { @@ -196,12 +179,10 @@ #closed-card .debate-bar__container { padding-top: 10px; - /* padding-top: 15px; */ } #closed-card-loading .right .debate-bar { margin-top: 10px; - /* margin-top: 15px; */ } #closed-card-loading .right .debate-bar .loading-skeleton { @@ -212,7 +193,6 @@ #closed-card .right .debate-info, #closed-card-loading .right .debate-info { padding-top: 10px; - /* padding-top: 20px; */ display: flex; justify-content: space-between; } @@ -244,11 +224,6 @@ flex-direction: column; } - #closed-card .divider, - #closed-card-loading .divider { - display: none; - } - #closed-card .left, #closed-card-loading .left { padding-bottom: 0; @@ -257,14 +232,6 @@ #closed-card .right, #closed-card-loading .right { padding-top: 10px; - /* padding-bottom: 20px; */ - } - - #closed-card .left.flex-unset, - #closed-card-loading .left.flex-unset, - #closed-card .right.flex-unset, - #closed-card-loading .right.flex-unset { - flex: unset; } #closed-card .left p { @@ -289,11 +256,11 @@ } #closed-card .right .debate-info { - padding-top: 15px; + padding-top: 10px; } #closed-card-loading .right .debate-info { - padding-top: 15px; + padding-top: 10px; } } @@ -305,4 +272,9 @@ #closed-card-loading .left .topic .loading-skeleton { height: 23px; } + + #closed-card .divider, + #closed-card-loading .divider { + margin-top: 20px; + } } \ No newline at end of file diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx index 11642d3..a8e79ad 100644 --- a/client/src/components/card/closed-debate-card.tsx +++ b/client/src/components/card/closed-debate-card.tsx @@ -20,14 +20,12 @@ const ClosedDebateCard = () => {

navigate('/')}> Sony is the best camera of all time.

- {/*

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt! Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt! Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem.

- View */}
-
@@ -52,6 +50,7 @@ const ClosedDebateCard = () => {

5 days ago

+
) } @@ -65,18 +64,14 @@ const ClosedDebateLoadingCard = () => {
- {/*
+
-
- -
*/}
-
@@ -98,6 +93,7 @@ const ClosedDebateLoadingCard = () => {
+
) } diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css index 941774b..cbdd418 100644 --- a/client/src/components/card/open-debate-card.css +++ b/client/src/components/card/open-debate-card.css @@ -1,13 +1,3 @@ -#open-card, -#open-card-loading { - /* min-height: 270px; */ - padding: 15px; - /* padding: 20px 15px; */ - background-color: var(--card_background); - border: 1px solid var(--card_border); - border-radius: 8px; -} - #open-card .debate-header, #open-card-loading .debate-header { display: flex; @@ -97,7 +87,6 @@ #open-card-loading .user-info { width: 70%; padding: 10px 0; - /* padding: 10px 0 15px 0; */ display: flex; gap: 10px; align-items: center; @@ -183,13 +172,15 @@ border-radius: 30px; } -@media screen and (max-width: 1536px) { - - /* #open-card, - #open-card-loading { - min-height: auto; - } */ +#open-card .divider, +#open-card-loading .divider { + margin-top: 30px; + width: 100%; + height: 0; + border-bottom: 1px solid var(--card_border); +} +@media screen and (max-width: 1536px) { #open-card .debate-body { font-size: 15px; } @@ -215,4 +206,9 @@ #open-card-loading .debate-header .loading-skeleton:first-child { height: 23px; } + + #open-card .divider, + #open-card-loading .divider { + margin-top: 20px; + } } \ No newline at end of file diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx index 356bfdd..99eb31b 100644 --- a/client/src/components/card/open-debate-card.tsx +++ b/client/src/components/card/open-debate-card.tsx @@ -22,11 +22,11 @@ const OpenDebateCard = () => { Debate
- {/*

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt! Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt! Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem. -

*/} +

handleProfileClick('julieroberts')} />
@@ -47,26 +47,27 @@ const OpenDebateCard = () => {

15 mins ago

+
) } const OpenDebateLoadingCard = () => { const { sidebar } = useNavStore(); - + return (
- {/*
+
-
*/} +
@@ -85,6 +86,7 @@ const OpenDebateLoadingCard = () => {
+
) } diff --git a/client/src/components/loading/style.css b/client/src/components/loading/style.css index 1abaa35..116f565 100644 --- a/client/src/components/loading/style.css +++ b/client/src/components/loading/style.css @@ -14,7 +14,6 @@ } .loading-component { - /* height: calc(100dvh - 40px); */ height: calc(100svh - 40px); display: grid; place-items: center; @@ -47,7 +46,6 @@ @media screen and (max-width: 480px) { .loading-component { - /* height: calc(100dvh - 150px); */ height: calc(100svh - 150px); } } \ No newline at end of file diff --git a/client/src/components/modal/auth/index.css b/client/src/components/modal/auth/index.css index 71b61d3..a2493ec 100644 --- a/client/src/components/modal/auth/index.css +++ b/client/src/components/modal/auth/index.css @@ -4,7 +4,6 @@ top: 0; left: 0; right: 0; - /* height: 100dvh; */ height: 100svh; backdrop-filter: blur(8px); display: flex; @@ -369,7 +368,6 @@ } #auth-modal .form__container .extra-btn { - /* align-items: flex-start; */ gap: 10px; flex-direction: column; } diff --git a/client/src/components/sidebar/explore.css b/client/src/components/sidebar/explore.css index 8db6b42..f425c2e 100644 --- a/client/src/components/sidebar/explore.css +++ b/client/src/components/sidebar/explore.css @@ -59,9 +59,6 @@ } #explore .explore-btns a { - /* padding: 7.5px 20px; - background-color: var(--card_background); - border: 1px solid var(--explore_input_bg); */ padding: 7.5px 15px; background-color: var(--body_background); border-radius: 20px; diff --git a/client/src/components/sidebar/left-sidebar.css b/client/src/components/sidebar/left-sidebar.css index b2daac4..ae228d0 100644 --- a/client/src/components/sidebar/left-sidebar.css +++ b/client/src/components/sidebar/left-sidebar.css @@ -35,7 +35,6 @@ list-style: none; max-width: fit-content; height: 100%; - /* max-height: 100dvh; */ max-height: 100svh; margin: 0 auto; display: flex; diff --git a/client/src/components/sidebar/right-sidebar.css b/client/src/components/sidebar/right-sidebar.css index 8c3089d..abb9d5c 100644 --- a/client/src/components/sidebar/right-sidebar.css +++ b/client/src/components/sidebar/right-sidebar.css @@ -154,7 +154,6 @@ #right-sidebar .expand-menu__background.expand { z-index: 1; - /* height: 100dvh; */ height: 100svh; } diff --git a/client/src/globals.css b/client/src/globals.css index c54091f..2aedb9b 100644 --- a/client/src/globals.css +++ b/client/src/globals.css @@ -58,13 +58,12 @@ --nav-foot__background: #ffffff; --nav_border: #ebebeb; --nav_profile_username: #a6a6a6; - --explore_input_bg: #E8E8E8; + --explore_input_bg: #dee2e6; --explore_input_placeholder: #606060; --card_background: #f4f4f4; --card_color_primary: #111111; --card_color_secondary: #606060; - /* --card_border: #e5e4e2; */ - --card_border: #e8e8e8; + --card_border: #dee2e6; --card_divider: #a0a0a041; --debate_from: #5b5b5b; --debate_by: #000000; diff --git a/client/src/pages/create-debate/style.css b/client/src/pages/create-debate/style.css index 0f4cceb..2704e3b 100644 --- a/client/src/pages/create-debate/style.css +++ b/client/src/pages/create-debate/style.css @@ -47,7 +47,6 @@ top: 0; left: 100%; padding: 20px; - background-color: var(--body_background); width: 100%; height: 100%; display: flex; @@ -69,6 +68,7 @@ #create h1 { font-size: 30px; font-weight: 600; + text-align: center; } #create h2 { @@ -169,7 +169,7 @@ @media screen and (max-width: 480px) { #create-debate { - padding: 10px 0; + padding: 20px 0; height: calc(100svh - 120px - 62px); } diff --git a/client/src/pages/home/index.tsx b/client/src/pages/home/index.tsx index 9eeec47..ac73e39 100644 --- a/client/src/pages/home/index.tsx +++ b/client/src/pages/home/index.tsx @@ -11,7 +11,7 @@ export default function HomePage() { return (
- {(isAuthenticated === AuthStatus.Authenticating || isAuthenticated === AuthStatus.Failed) && ( + {isAuthenticated === AuthStatus.Failed && ( )} diff --git a/client/src/pages/search/style.css b/client/src/pages/search/style.css index 8fe548e..1c54cd4 100644 --- a/client/src/pages/search/style.css +++ b/client/src/pages/search/style.css @@ -53,7 +53,7 @@ @media screen and (max-width: 480px) { #search { - padding: 10px; + padding: 20px 10px; } #search #explore {