Fix Cloud-CV#133: Add navigation menu for mobile users (Cloud-CV#1476)

* Fix#1338 Navigation menu now appears for mobile users * add scss changes in landing.scss * add scss changes in landing.scss iteration 2 * Fix Cloud-CV#1338 add the missing fields in the navigation of Home page * Fix Cloud-CV#1338 add the missing fields in the navigation of Home page
HargovindArora · Nov 17, 2018 · feb786f · feb786f
1 parent a9079ef
commit feb786f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 9 deletions.
diff --git a/frontend/src/css/modules/landing.scss b/frontend/src/css/modules/landing.scss
@@ -107,11 +107,49 @@ section.bg-section {
 /*simple header*/
 
 .sim-header {
-    font-size: 18px;
-    top: 0;
-    left: 0;
-    z-index: 1001;
-    width: 100%;
+  font-size: 18px;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  position: relative;
+  nav {
+      background-color:rgba(255, 255, 255, 0.9);
+      box-shadow: 0 0 0 0 #000;
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding: 0 100px;
+      transition: all 0.1s ease-in-out;
+      a.sim-header-link {
+	  color: #4d4d4d;
+	  font-weight: 400;
+	  transition: all 0.2s ease-in-out;
+          &:hover {
+	    color: #ffaf4b;
+	    background-color: rgba(0, 0, 0, 0);
+	  }
+      }
+      a.light-link {
+	  color: #9ca3be;
+	  transition: all 0.2s ease-in-out;
+          &:hover {
+	  color: #fff;
+          }
+      }
+      a.active {
+	  color: #ffaf4b;
+	  background-color: rgba(0, 0, 0, 0);
+      }
+      nav.grad-shadow-1 {
+	  box-shadow: 0 0 10px #9d9d9d;
+      }
+  }
+}
+@media only screen and (max-width: 992px) {
+  .sim-header nav {
+    padding: 0px 30px;
+  }
 }
 
 .grad-head {

diff --git a/frontend/src/views/web/partials/main-header.html b/frontend/src/views/web/partials/main-header.html
@@ -31,6 +31,9 @@
                 <li ng-if="!isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="auth.login" ui-sref-active="active"><i class="fa fa-sign-in"></i>Log In</a></li>
                 <!-- show after authenticate user -->
                 <li ng-show="isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.dashboard" ui-sref-active="active"><i class="fa fa-thumb-tack"></i>Dashboard</a></li>
+                <li ng-show="isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.challenge-main" ui-sref-active="active"><i class="fa fa-fire"></i>All Challenges</a></li>
+                <li ng-show="isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.teams" ui-sref-active="active"><i class="fa fa-users"></i>Participant Teams</a></li>
+                <li ng-show="isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.challenge-host-teams" ui-sref-active="active"><i class="fa fa-paper-plane"></i>Create Challenge</a></li>
                 <li ng-show="isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.profile" ui-sref-active="active"><i class="fa fa-user"></i>Hi {{header.user.name}}!</a></li>
             </ul>
         </div>

diff --git a/frontend/src/views/web/partials/sim-header.html b/frontend/src/views/web/partials/sim-header.html
@@ -1,7 +1,7 @@
-<div class="sim-header ev-fixed white ">
-    <nav class="transparent ev-z-depth-5">
-        <div class="nav-wrapper padding-sm-lr-header">
-            <a href="#" data-activates="sidebarToggle" class="button-collapse text-med-gray hide-on-med-and-down"><i class="fa fa-bars"></i></a>
+<div class="sim-header padding-lr-header">
+    <nav>
+        <div class="nav-wrapper">
+            <a href="javascript:void(0)" data-activates="mobile-demo" class="button-collapse sim-header-link"><i class="fa fa-bars"></i></a>
             <ul class="left ">
              <li class="text-med-gray"><a class="waves-effect waves-dark dark-link ev-header-overflow dashboard-evailai-logo" ui-sref="home"> <span class="hide-on-small-only"><img src="dist/images/evalai-logo.png"></span></a></li>
                 <!-- <li class="text-med-gray">{{pageTitle}}</li> -->
@@ -14,6 +14,24 @@
                      <div class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" ng-click="logout()">Logout</div>
                 </li>
             </ul>
+      <ul class="side-nav" id="mobile-demo">
+        <li>
+          <div class="userView">
+            <div class="background"></div>
+            <a><span class="white-text name">EvalAI</span></a>
+          </div>
+        </li>
+        <li><a class="waves-effect waves-dark" ui-sref="home" ui-sref-active="active"><i class="fa fa-home"></i>Home</a></li>
+        <li ng-hide="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="auth.signup" ui-sref-active="active"><i class="fa fa-sign-out"></i>Sign Up</a></li>
+        <li ng-hide="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="auth.login" ui-sref-active="active"><i class="fa fa-sign-in"></i>Log In</a></li>
+        <!-- show after authenticate user -->
+        <li ng-show="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="web.dashboard" ui-sref-active="active"><i class="fa fa-thumb-tack"></i>Dashboard</a></li>
+        <li ng-show="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="web.challenge-main" ui-sref-active="active"><i class="fa fa-fire"></i>All Challenges</a></li>
+        <li ng-show="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="web.teams" ui-sref-active="active"><i class="fa fa-users"></i>Participant Teams</a></li>
+        <li ng-show="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="web.challenge-host-teams" ui-sref-active="active"><i class="fa fa-paper-plane"></i>Create Challenge</a></li>
+        <li ng-show="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="auth.signup" ui-sref-active="active"><i class="fa fa-user"></i>Hi {{web.name}}!</a></li>
+      </ul>
+
         </div>
     </nav>
 </div>