my stories and profile

Author: AsavariA

src/assets/scss/components/dropdown.scss

@@ -93,8 +93,8 @@
   opacity: 0.08;
 }
 
-@media only screen and (max-width: 281px) {
+@media only screen and (max-width: 500px) {
   .dropdown-container {
-    padding: 0px 6px;
+    padding: 0px;
   }
 }

src/assets/scss/components/editableLabel.scss

@@ -1,6 +1,7 @@
 .editable-label {
   align-items: center;
   display: flex;
+  justify-content: center;
 
   button {
     background-color: transparent;
@@ -18,4 +19,26 @@
       visibility: visible;
     }
   }
+
+  @media only screen and (max-width: 768px) {
+    h2 {
+      margin: 0.5rem 0;
+    }
+
+    p {
+      margin: 0.5rem 0;
+    }
+
+    button.editable-label-edit-btn {
+      display: none;
+    }
+  
+    &:hover {
+      button {
+        cursor: pointer;
+        display: block;
+      }
+    }
+
+  }
 }

src/assets/scss/components/modal.scss

@@ -54,3 +54,4 @@
     transform: scale(1.2);
   }
 }
+

src/assets/scss/components/navigation.scss

@@ -12,12 +12,8 @@
   }
 }
 
-// @media only screen and (max-width: 768px) {
-//   .nav-header {
-//     flex-direction: column;
-//   }
-
-//   .navbar-content {
-//     margin-top: 20px;
-//   }
-// }
+@media only screen and (max-width: 768px) {
+  .nav-header {
+    padding: 22px 10px 0;
+  }
+}

src/assets/scss/components/roadmap.scss

@@ -41,6 +41,10 @@
   }
 }
 
+.rdmap {
+  margin: 10px 0;
+}
+
 .roadmap-one {
   .btn-tabs {
 
@@ -89,4 +93,26 @@
       margin: 0.8rem 0;
     }
   }
+
+  // .roadmap-one {
+  //   flex-direction: column;
+
+  .btn-tabs {
+    margin: 0.5rem;
+    width: 200px;
+  }
+
+  // }
+}
+
+@media (max-width: 600px) {
+  .roadmap-one {
+    flex-direction: column;
+  }
+
+  .btn-tabs {
+    margin: 0.3rem 0;
+    text-align: left;
+    width: 100%;
+  }
 }

src/assets/scss/components/userProfile.scss

@@ -1,3 +1,8 @@
+.user-profile-wrapper {
+  align-items: center;
+  justify-content: center;
+}
+
 .user-profile {
   align-items: center;
   display: flex;
@@ -70,9 +75,9 @@
     }
 
     &-details {
-      align-items: center;
       display: flex;
       flex-direction: column;
+      padding: 0;
       width: auto;
     }
   }
@@ -93,8 +98,7 @@
       font-weight: bold;
       list-style: none;
       padding: $eos-m;
-
-
+      
       &:first-child {
         padding-left: 0;
       }
@@ -125,7 +129,6 @@
 
 .user-profile-settings {
   @extend .user-profile-extra;
-
   ul {
     flex-direction: column;
     width: 25%;
@@ -138,4 +141,11 @@
       }
     }
   }
+
+  @media only screen and (max-width: 768px) {
+    ul {
+      padding: 1rem;
+      width: 100%;
+    }
+  }
 }

src/assets/scss/layout/avatar.scss

@@ -8,9 +8,9 @@
   }
 }
 
-// @media (max-width: 500px) {
-//   .avatar {
-//     height: 3.5em !important;
-//     width: 3em !important;
-//   }
-// }
+@media (max-width: 500px) {
+  .user-avatar .avatar {
+    height: 3.5em;
+    width: 3em;
+  }
+}

src/assets/scss/layout/layout.scss

@@ -11,7 +11,7 @@ body {
 }
 
 .eos-icons {
-  margin-right: 0;
+  margin-right: 12px;
   pointer-events: none;
   vertical-align: middle;
 }

src/pages/MyProfile.js

@@ -56,7 +56,7 @@ const MyProfile = () => {
       ) : (
         <div className='body-content'>
           <div className='body-wrapper'>
-            <div className='flex flex-row'>
+            <div className='flex flex-row user-profile-wrapper'>
               <div className='flex flex-column'>
                 <UserProfile
                   user={Object.assign(user, { id: userId })}

src/pages/Profile.js

@@ -187,7 +187,7 @@ const Profile = (props) => {
                     itemList={Lists.sortByList}
                   />
                 </div>
-                <div className='flex flex-row flex-space-between'>
+                <div className='flex flex-row flex-space-between rdmap'>
                   {Lists.stateList &&
                     Lists.stateList.map((state, key) => {
                       return (