diff --git a/client/src/App.css b/client/src/App.css
index 25f9ac6..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,18 @@
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;
+}
+
+.card-break {
+ break-inside: avoid;
+ margin-bottom: 20px;
}
@media screen and (max-width: 1880px) {
@@ -84,11 +79,6 @@
display: block;
columns: 2;
}
-
- .card-break {
- break-inside: avoid;
- margin-bottom: 20px;
- }
}
@media screen and (max-width: 1024px) {
@@ -189,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 9b2b6ed..e7ab33b 100644
--- a/client/src/components/card/closed-debate-card.css
+++ b/client/src/components/card/closed-debate-card.css
@@ -1,23 +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: 20px 15px;
}
#closed-card .left,
#closed-card-loading .left {
- flex: 1.2;
display: flex;
flex-direction: column;
justify-content: center;
@@ -25,9 +14,7 @@
#closed-card .right,
#closed-card-loading .right {
- padding-top: 30px;
- padding-bottom: 30px;
- flex: 0.8;
+ padding-top: 10px;
display: flex;
flex-direction: column;
justify-content: center;
@@ -36,18 +23,15 @@
#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 {
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 +178,11 @@
}
#closed-card .debate-bar__container {
- padding-top: 15px;
+ padding-top: 10px;
}
#closed-card-loading .right .debate-bar {
- margin-top: 15px;
+ margin-top: 10px;
}
#closed-card-loading .right .debate-bar .loading-skeleton {
@@ -208,7 +192,7 @@
#closed-card .right .debate-info,
#closed-card-loading .right .debate-info {
- padding-top: 20px;
+ padding-top: 10px;
display: flex;
justify-content: space-between;
}
@@ -240,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;
@@ -253,20 +232,8 @@
#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 h2 {
- max-width: 350px;
- } */
-
#closed-card .left p {
font-size: 15px;
}
@@ -289,27 +256,25 @@
}
#closed-card .right .debate-info {
- padding-top: 15px;
+ padding-top: 10px;
}
#closed-card-loading .right .debate-info {
- padding-top: 15px;
+ padding-top: 10px;
}
}
-/* @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;
}
#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 f8cbca2..a8e79ad 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"
@@ -25,9 +25,7 @@ const ClosedDebateCard = () => {
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
+
)
}
@@ -72,11 +71,7 @@ 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 6d78670..cbdd418 100644
--- a/client/src/components/card/open-debate-card.css
+++ b/client/src/components/card/open-debate-card.css
@@ -1,12 +1,3 @@
-#open-card,
-#open-card-loading {
- min-height: 270px;
- 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;
@@ -21,8 +12,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 +86,7 @@
#open-card .user-info,
#open-card-loading .user-info {
width: 70%;
- padding: 10px 0 15px 0;
+ padding: 10px 0;
display: flex;
gap: 10px;
align-items: center;
@@ -183,17 +172,15 @@
border-radius: 30px;
}
-@media screen and (max-width: 1536px) {
-
- #open-card,
- #open-card-loading {
- min-height: auto;
- }
-
- /* #open-card .debate-header h2 {
- max-width: 350px;
- } */
+#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;
}
@@ -213,11 +200,15 @@
}
#open-card .debate-header h2 {
- /* max-width: 100%; */
font-size: 18px;
}
#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 bc8017f..99eb31b 100644
--- a/client/src/components/card/open-debate-card.tsx
+++ b/client/src/components/card/open-debate-card.tsx
@@ -47,13 +47,14 @@ 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 {