fixed a nav glitch

dmd-web-and-mobile · Nov 17, 2016 · d3ea8eb · d3ea8eb
1 parent 539d236
commit d3ea8eb
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 46 deletions.
diff --git a/app/root/_nav.kit b/app/root/_nav.kit
@@ -12,14 +12,13 @@
     <ul class="tabs tabs-transparent row">
       <li class="tab col s4"><a ng-class="{active: page.id==='food'}" ng-click="go('/food')">Food</a></li>
       <li class="tab col s7"><a ng-class="{active: page.id==='cat'}" ng-click="go('/categories')">Categories</a></li>
-      <li class="tab col s4"><a ng-class="{active: page.id==='login'}" ng-click="go('/login')">Login</a></li>
       <li class="tab col s4"><a ng-class="{active: page.id==='news'}" ng-click="go('/news')">News</a></li>
       <li class="tab col s7"><a ng-class="{active: page.id==='comps'}" ng-click="go('/competitions')">Competitions</a></li>
     </ul>
 
     <!-- Sign in/up Buttons -->
-    <a class="waves-effect waves-light btn blue">Sign in</a>
-    <a class="waves-effect waves-light btn">Sign out</a>
+    <a ng-click="go('/login')" class="waves-effect waves-light btn blue">Sign in</a>
+    <a ng-click="go('/login')" class="waves-effect waves-light btn">Sign out</a>
   </div>
 
 </div>

diff --git a/app/root/root.styl b/app/root/root.styl
@@ -46,35 +46,17 @@ Table of Contents:
     margin-right: 1em
     &.blue {margin-left: 1em}
 
-  .profile-btn
-    position: fixed
-    top: .5em
-    right: @top
-    border-radius: 100px // tap target
-    img
-      border-radius: 100px
-      width: 5.7em
-
   .tabs
     height: auto
+    min-width: 27em // adjust this to make the white bar work
     .tab
-      // min-width: 80px // temporary
       height: navh
       line-height: navh
     .indicator
       background-color: white
       top: 0
       height: 5px
 
-  &:not(.signedIn) a.profile-btn { display: none }
-  &.signedIn
-    a.btn
-      display: none
-    .tabs
-      min-width: 35em // used to be width: 23.5em
-      position: relative
-      right: 7em
-
 // Footer
 footer
   display: flex

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -64,18 +64,9 @@ ul.tabs .tab a:hover {
 .nav-main a.btn.blue {
   margin-left: 1em;
 }
-.nav-main .profile-btn {
-  position: fixed;
-  top: 0.5em;
-  right: 0.5em;
-  border-radius: 100px;
-}
-.nav-main .profile-btn img {
-  border-radius: 100px;
-  width: 5.7em;
-}
 .nav-main .tabs {
   height: auto;
+  min-width: 27em;
 }
 .nav-main .tabs .tab {
   height: 4.5em;
@@ -86,17 +77,6 @@ ul.tabs .tab a:hover {
   top: 0;
   height: 5px;
 }
-.nav-main:not(.signedIn) a.profile-btn {
-  display: none;
-}
-.nav-main.signedIn a.btn {
-  display: none;
-}
-.nav-main.signedIn .tabs {
-  min-width: 35em;
-  position: relative;
-  right: 7em;
-}
 footer {
   display: flex;
   align-items: center;

diff --git a/index.html b/index.html
@@ -44,14 +44,13 @@ <h4 class="logo">F2E</h4>
     <ul class="tabs tabs-transparent row">
       <li class="tab col s4"><a ng-class="{active: page.id==='food'}" ng-click="go('/food')">Food</a></li>
       <li class="tab col s7"><a ng-class="{active: page.id==='cat'}" ng-click="go('/categories')">Categories</a></li>
-      <li class="tab col s4"><a ng-class="{active: page.id==='login'}" ng-click="go('/login')">Login</a></li>
       <li class="tab col s4"><a ng-class="{active: page.id==='news'}" ng-click="go('/news')">News</a></li>
       <li class="tab col s7"><a ng-class="{active: page.id==='comps'}" ng-click="go('/competitions')">Competitions</a></li>
     </ul>
 
     <!-- Sign in/up Buttons -->
-    <a class="waves-effect waves-light btn blue">Sign in</a>
-    <a class="waves-effect waves-light btn">Sign out</a>
+    <a ng-click="go('/login')" class="waves-effect waves-light btn blue">Sign in</a>
+    <a ng-click="go('/login')" class="waves-effect waves-light btn">Sign out</a>
   </div>
 
 </div>