Mobile and Tab Responsive Profile Page

Author: lazycipher

src/user/profile/profile-feed.js

@@ -143,7 +143,7 @@ class ProfileFeed extends Component {
         <div className="feed-posts">
           <div className="categories">
             <div className="tab__container">
-              <span className="nav__tab container">
+              <div className="nav__tab container">
                 <ul className="nav__list__container">
                   <li
                     className={
@@ -190,7 +190,7 @@ class ProfileFeed extends Component {
                     Read Me
                   </li>
                 </ul>
-              </span>
+              </div>
             </div>
           </div>
         </div>

src/user/profile/profile-feed.scss

@@ -124,6 +124,11 @@
           margin-top: 5px;
           line-height: 21px;
           color: #000000;
+          p {
+            img {
+              max-width: 100%;
+            }
+          }
         }
 
         .cardTag {
@@ -138,3 +143,42 @@
     }
   }
 }
+
+@media (min-width: 320px) and (max-width: 1024px){
+  .postsContainer {
+    width: 100%;
+    margin: 0;
+    .gridContainer {
+      grid-template-columns: repeat(1, 1fr);
+      margin: 0.5vh 2.5vw;
+      .postItem {
+        margin: 0;
+      }
+    }
+  }
+  .feed-posts {
+    width: 100%;
+    .categories {
+      overflow: hidden;
+      max-width: 100vw;
+      margin: 0 1vw;
+      .tab__container {
+        .nav__tab {
+          .nav__list__container {
+            border: none;
+            overflow-x: scroll;
+            .nav__single__tab {
+              font-size: small;
+              width: 100%;
+              margin: 0;
+              padding: 0;
+            } 
+          }
+          .nav__list__container::-webkit-scrollbar {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

src/user/profile/profile.js

@@ -13,6 +13,7 @@ import {
 import { getAllPinnedPosts } from "../../actions/postAction";
 import { getOrgProfile } from "../../actions/orgAction";
 import ProfileFeed from "./profile-feed";
+import { Desktop } from '../../utils/breakpoints';
 
 class Profile extends Component {
   constructor(props) {
@@ -82,40 +83,37 @@ class Profile extends Component {
       pinnedPosts,
     } = this.state;
     return (
-      <div className="profile">
-        <div
-          className="navigation"
-          style={{
-            background: "#f5f5f5",
-          }}
-        >
-          <Navigation profile={this.state.profile}></Navigation>
-        </div>
-        <div className="news">
-          <div className="notify-user">
-            <UserInfo userProfile={userProfile} />
-            <Portfolio />
-          </div>
-          <div className="two">
-            <div className="posts-profile">
-              {/* <PinPosts 
-                all={all} 
-                userProjects={userProjects} 
-                userEvents={userEvents} 
-                userPosts={userPosts}
-                pinnedPosts={pinnedPosts}
-              /> */}
-              <ProfileFeed
-                all={all}
-                userProjects={userProjects}
-                userEvents={userEvents}
-                userPosts={userPosts}
-                pinnedPosts={pinnedPosts}
-              />
+      <>
+        <Navigation profile={this.state.profile}></Navigation>
+        <div className="profile">
+          <div className="news">
+            <div className="notify-user">
+              <UserInfo userProfile={userProfile} />
+              <Desktop>
+                <Portfolio />
+              </Desktop>
+            </div>
+            <div className="two">
+              <div className="posts-profile">
+                {/* <PinPosts 
+                  all={all} 
+                  userProjects={userProjects} 
+                  userEvents={userEvents} 
+                  userPosts={userPosts}
+                  pinnedPosts={pinnedPosts}
+                /> */}
+                <ProfileFeed
+                  all={all}
+                  userProjects={userProjects}
+                  userEvents={userEvents}
+                  userPosts={userPosts}
+                  pinnedPosts={pinnedPosts}
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 }

src/user/profile/profile.scss

@@ -3,15 +3,6 @@
   min-height: 100vh;
   height: auto;
   font-family: Muli, sans-serif;
-  .navigation {
-    flex: 0.5;
-    border-right: solid 1px #dfe9f1;
-    position: fixed;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    overflow-y: scroll;
-  }
   h2 {
     font-size: 22px;
     font-weight: 650;
@@ -60,3 +51,28 @@
 .navigation::-webkit-scrollbar {
   display: none;
 }
+
+@media (min-width: 320px) and (max-width: 1024px){
+  .profile {
+    margin: 0;
+    .news {
+      margin-left: 0;
+      width: 100vw;
+      .notify-user {
+        display: flex;
+        justify-content: center;
+        padding: 0;
+        padding-top: 2.5vh;
+        margin: 2.5vh 2.5vw;
+        .user-detail {
+          width: 100%;
+        }
+      }
+    }
+  }
+  .two {
+    .posts-profile {
+      max-width: 100vw;
+    }
+  }
+}

src/user/profile/user-info/user-info.scss

@@ -125,3 +125,26 @@
   }
 }
 
+
+@media (min-width: 320px) and (max-width: 1024px){
+  .user-detail {
+    padding: 5px;
+    .user-image {
+      text-align: center;
+      margin: 0;
+      .edit-option {
+        .useredit {
+          border-radius: 100px;
+          font-size: 14px;
+        }
+      }
+      .user-pic {
+        display: inline-block;
+        .userpic {
+          width: 120px;
+          height: 120px;
+        }
+      }
+    }
+  }
+}