updated auth and feed mobile view

bounswe · Nov 14, 2023 · db61157 · db61157
1 parent 9304fc3
commit db61157
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 57 deletions.
diff --git a/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css b/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css
@@ -1,55 +1,16 @@
-.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;
   font-size: 24px;
   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
@@ -26,9 +26,7 @@ const menuData = [
 const MobileMenuItem = ({ pageKey, Icon, label, navigate, to, theme }) => {
   return (
     <div key={pageKey} className={styles.menuItem} onClick={() => navigate(to)}>
-      {Icon && (
-        <Icon width={30} height={30} />
-      )}
+      {Icon && <Icon width={30} height={30} />}
       {label || pageKey}
     </div>
   );
@@ -44,11 +42,13 @@ const MobileMenu = () => {
 
   return (
     <>
-      {!menuActive && (
+      {!menuActive ? (
         <MenuOutlined
           className={styles.mobileMenuButton}
           onClick={toggleMenu}
         />
+      ) : (
+        <div className={styles.mobileMenuButton}></div>
       )}
       {menuActive && (
         <div className={styles.wrapper} onClick={() => setMenuActive(false)}>

diff --git 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 ;
+
+  }
+
 }
diff --git 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 }) {
         <div className={styles.actionButtons}>
           <div className={styles.buttonWrapper}>
             <button className={styles.commentButton}>
-              <CommentIcon /> Comments
+              <CommentIcon /> <p className={styles.buttonText}>Comments</p>
             </button>
             <span className={styles.commentCount}>
               {`${PollData.comments.length} comment${
@@ -90,13 +90,14 @@ function PollCard({ PollData }) {
 
           <div className={styles.buttonWrapper}>
             <button className={styles.shareButton}>
-              <ShareIcon /> Share
+              <ShareIcon /> <p className={styles.buttonText}>Share</p>
             </button>
           </div>
           <div className={styles.buttonWrapper}>
             <button className={styles.reportButton}>
               <ReportIcon />
-              Report
+              <p className={styles.buttonText}>Report</p>
+
             </button>
           </div>
         </div>

diff --git 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
@@ -85,4 +85,10 @@
 .messageStyle {
   color: var(--neutral-100);
   color: var(--warning-600)
+}
+@media (max-width: 768px) {
+  .imageStyle{
+    display: none;
+  }
+
 }
diff --git 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%;
- }
+ }
+
+ @media (max-width: 768px) {
+    .imageContainerStyle{
+      display: none;
+    }
+
+  }
diff --git 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;
+}
 }
diff --git a/prediction-polls/frontend/src/Pages/Feed/index.jsx b/prediction-polls/frontend/src/Pages/Feed/index.jsx
@@ -16,7 +16,8 @@ function Feed() {
           <PollCard PollData={poll} key={index}/>
         ))
       }</div>
-      <PointsButton points={pointData.points}/>
+     <div className={styles.pointsButton}>
+      <PointsButton points={pointData.points}/></div> 
     </div>
   );
 }