Merge branch 'ui/responsive-accounts-page' into 'master'

Fixed responsive issue in My Account Page

Closes #22

See merge request SUSE-UIUX/eos-user-story!135

Author: scures

src/assets/scss/components/navigation.scss

@@ -11,3 +11,13 @@
     height: 25px;
   }
 }
+
+@media only screen and (max-width: 768px) {
+  .nav-header {
+    flex-direction: column;
+  }
+
+  .navbar-content {
+    margin-top: 20px;
+  }
+}

src/assets/scss/components/notifications.scss

@@ -6,3 +6,10 @@
 .notifications-options {
   padding: 4px 8px;
 }
+
+@media only screen and (max-width: 768px) {
+  .notifications-dropdown {
+    max-height: 512px;
+    width: 195px;
+  }
+}

src/assets/scss/components/userProfile.scss

@@ -50,9 +50,9 @@
     }
 
     &-details {
+      align-items: center;
       display: flex;
       flex-direction: column;
-      padding: 0 64px;
       width: auto;
     }
   }
@@ -89,6 +89,18 @@
       }
     }
   }
+
+  @media only screen and (max-width: 768px) {
+    ul {
+      flex-direction: column;
+
+      li {
+        &:first-child {
+          padding-left: $eos-m;
+        }
+      }
+    }
+  }
 }
 
 .user-profile-settings {
@@ -100,6 +112,10 @@
 
     li {
       padding: $eos-s 0;
+
+      &:first-child {
+        padding-left: 0;
+      }
     }
   }
 }

src/components/Navigation.js

@@ -47,7 +47,7 @@ const Navigation = (props) => {
       <Link className='link' to='/'>
         <img className='logo' src={eosIcon} alt='' />
       </Link>
-      <nav>
+      <nav className='navbar-content'>
         {state.auth && (
           <Link className='btn btn-default' to='/newStory'>
             + New Story