diff --git a/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css b/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css index 44e66bc1..66d4d38a 100644 --- a/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css +++ b/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css @@ -1,46 +1,4 @@ -.mobileMenu { - width: 80vw; - height: 100vh; - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: stretch; - padding-top: 20px; - background-color: var(--primary-50); - justify-content: space-between; - overflow: auto; -} -.wrapper { - position: fixed; - width: 100vw; - height: 100vh; - overflow: hidden; -} -.menuItem { - padding: 20px; - display: flex; - justify-content: flex-start; - align-items: center; - gap: 20px; - background-color: var(--primary-50); - color: var(--neutral-900); - cursor: pointer; - border-bottom: 1px solid var(--neutral-300); -} - -.menuItem:last-child { - border-bottom: none; -} - -.logo { - width: 100%; - flex-shrink: 0; - display: flex; - justify-content: center; - align-items: center; - pointer-events: none; -} .mobileMenuButton { display: none; @@ -48,8 +6,11 @@ color: var(--neutral-900); cursor: pointer; } +.wrapper { + display: none; +} -@media (max-width: 640px) { +@media (max-width: 768px) { .mobileMenuButton { justify-content: flex-start; height: 50px; @@ -60,8 +21,52 @@ cursor: pointer; padding-left: 10px; } -} -.point { + .mobileMenu { + width: 80vw; + height: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: stretch; + padding-top: 20px; + background-color: var(--primary-50); + justify-content: space-between; + } + .wrapper { + flex-grow: 1; + position: fixed; + width: 100vw; + height: 100%; + z-index: 3; + display: flex; + align-items: stretch; + } + + .menuItem { + padding: 20px; + display: flex; + justify-content: flex-start; + align-items: center; + gap: 20px; + background-color: var(--primary-50); + color: var(--neutral-900); + cursor: pointer; + border-bottom: 1px solid var(--neutral-300); + } + + .menuItem:last-child { + border-bottom: none; + } + + .logo { + width: 100%; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + .point { display: flex; justify-content: center; gap: 20px; @@ -73,3 +78,5 @@ font-size: 20px; font-weight: 700; } +} + diff --git a/prediction-polls/frontend/src/Components/MobileMenu/index.jsx b/prediction-polls/frontend/src/Components/MobileMenu/index.jsx index e7e67b1e..902c7f3b 100644 --- a/prediction-polls/frontend/src/Components/MobileMenu/index.jsx +++ b/prediction-polls/frontend/src/Components/MobileMenu/index.jsx @@ -26,9 +26,7 @@ const menuData = [ const MobileMenuItem = ({ pageKey, Icon, label, navigate, to, theme }) => { return (
navigate(to)}> - {Icon && ( - - )} + {Icon && } {label || pageKey}
); @@ -44,11 +42,13 @@ const MobileMenu = () => { return ( <> - {!menuActive && ( + {!menuActive ? ( + ) : ( +
)} {menuActive && (
setMenuActive(false)}> diff --git a/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css b/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css index 99b0aea0..9362480a 100644 --- a/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css +++ b/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css @@ -163,4 +163,26 @@ a{ text-decoration: none; +} + +.buttonText{ + margin: 0px; +} + +@media (max-width:769px){ + .buttonText{ + display: none; + } + .commentButton, +.shareButton, +.reportButton { + padding: 12px; +} +} +@media (max-width:1025px){ + .card{ + padding: 25px 15px ; + + } + } \ No newline at end of file diff --git a/prediction-polls/frontend/src/Components/PollCard/index.jsx b/prediction-polls/frontend/src/Components/PollCard/index.jsx index 9542531d..43e9e40a 100644 --- a/prediction-polls/frontend/src/Components/PollCard/index.jsx +++ b/prediction-polls/frontend/src/Components/PollCard/index.jsx @@ -79,7 +79,7 @@ function PollCard({ PollData }) {
{`${PollData.comments.length} comment${ @@ -90,13 +90,14 @@ function PollCard({ PollData }) {
diff --git a/prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css b/prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css index 6885b0a8..f4875e15 100644 --- a/prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css +++ b/prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css @@ -58,7 +58,7 @@ border: none; } -@media (max-width: 640px) { +@media (max-width: 768px) { .sidebar { display: none; } diff --git a/prediction-polls/frontend/src/Pages/Auth/SignIn/SignIn.module.css b/prediction-polls/frontend/src/Pages/Auth/SignIn/SignIn.module.css index e85184fe..29ef13b4 100644 --- a/prediction-polls/frontend/src/Pages/Auth/SignIn/SignIn.module.css +++ b/prediction-polls/frontend/src/Pages/Auth/SignIn/SignIn.module.css @@ -85,4 +85,10 @@ .messageStyle { color: var(--neutral-100); color: var(--warning-600) +} +@media (max-width: 768px) { + .imageStyle{ + display: none; + } + } \ No newline at end of file diff --git a/prediction-polls/frontend/src/Pages/Auth/SignUp/SignUp.module.css b/prediction-polls/frontend/src/Pages/Auth/SignUp/SignUp.module.css index 09ea98bc..3c4d04c7 100644 --- a/prediction-polls/frontend/src/Pages/Auth/SignUp/SignUp.module.css +++ b/prediction-polls/frontend/src/Pages/Auth/SignUp/SignUp.module.css @@ -58,6 +58,7 @@ display: flex; flex-direction: column; align-items: center; + justify-content: center } .logoStyle { @@ -67,4 +68,11 @@ margin-bottom: 20px; max-width: 80%; max-height: 80%; - } \ No newline at end of file + } + + @media (max-width: 768px) { + .imageContainerStyle{ + display: none; + } + + } \ No newline at end of file diff --git a/prediction-polls/frontend/src/Pages/Feed/Feed.module.css b/prediction-polls/frontend/src/Pages/Feed/Feed.module.css index ba3df987..d8e406b8 100644 --- a/prediction-polls/frontend/src/Pages/Feed/Feed.module.css +++ b/prediction-polls/frontend/src/Pages/Feed/Feed.module.css @@ -2,16 +2,31 @@ display: flex; background-color: var(--neutral-white); width: 100%; + box-sizing: border-box; } -@media (max-width: 640px) { +@media (max-width: 768px) { .page{ flex-direction: column; } + .pointsButton{ + display:none; + } + .pollList{ + display: flex; + flex-direction: column; + width: 100%; + padding: 20px; + justify-content: center; + align-items: center; + } } + +@media (min-width: 769px) { .pollList{ display: flex; flex-direction: column; padding-left: 20px; width: 60%; - margin-top: 30px; + padding-top: 100px; +} } \ No newline at end of file diff --git a/prediction-polls/frontend/src/Pages/Feed/index.jsx b/prediction-polls/frontend/src/Pages/Feed/index.jsx index 5996afc1..97144f71 100644 --- a/prediction-polls/frontend/src/Pages/Feed/index.jsx +++ b/prediction-polls/frontend/src/Pages/Feed/index.jsx @@ -16,7 +16,8 @@ function Feed() { )) }
- +
+
); }