made summaries page bottom nav-tab separate buttons

scify · Feb 9, 2018 · 8cd398d · 8cd398d
1 parent 02a03c7
commit 8cd398d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 32 deletions.
diff --git a/src/pages/summary/summary.html b/src/pages/summary/summary.html
@@ -53,14 +53,16 @@
         </ion-col>
       </ion-row>
     </ion-grid>
-    <div id="summaries-navigator">
-      <div id="nav-to-previous">
-        <a href="javascript:void(0)" (click)="swipeActivity({direction: 4})"><ion-icon name="arrow-back"></ion-icon> {{"Previous" | translate}}</a>
-      </div>
-      <div id="nav-to-next">
-        <a href="javascript:void(0)" (click)="swipeActivity({direction: 2})">{{"Next" | translate}} <ion-icon name="arrow-forward"></ion-icon></a>
-      </div>
-    </div>
+    <ion-grid id="summaries-navigator" padding>
+      <ion-row>
+        <ion-col>
+          <a id="nav-to-previous" href="javascript:void(0)" (click)="swipeActivity({direction: 4})"><ion-icon name="arrow-back"></ion-icon> {{"Previous" | translate}}</a>
+        </ion-col>
+        <ion-col>
+          <a id="nav-to-next" href="javascript:void(0)" (click)="swipeActivity({direction: 2})">{{"Next" | translate}} <ion-icon name="arrow-forward"></ion-icon></a>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
   </div>
 
 </ion-content>
diff --git a/src/pages/summary/summary.scss b/src/pages/summary/summary.scss
@@ -83,24 +83,21 @@ page-summary {
   }
 
   #summaries-navigator {
-    position: relative;
-    bottom: 0;
-    display: table;
-    width: 100%;
-    height: 50px;
     padding: 10px;
+    margin-bottom: 25px;
     #nav-to-previous {
-      text-align: left;
-      display: table-cell;
-      vertical-align: middle;
+      text-align: center;
+      display: block;
     }
     #nav-to-next {
-      text-align: right;
-      display: table-cell;
-      vertical-align: middle;
+      text-align: center;
+      display: block;
     }
     a {
+      padding: 15px 10px;
       text-decoration: none;
+      max-width: 150px;
+      margin: 0 auto;
     }
   }
 }

diff --git a/src/theme/dark.scss b/src/theme/dark.scss
@@ -45,8 +45,8 @@ ion-nav.dark-theme {
       color: lightgray;
     }
     #summaries-navigator {
-      background-color: $dark-gray;
       a {
+        background-color: $dark-gray;
         color: $white;
       }
     }

diff --git a/src/theme/light.scss b/src/theme/light.scss
@@ -4,21 +4,11 @@ $almost-white: rgb(248, 248, 248);
 ion-nav.light-theme {
   page-summary {
     #summaries-navigator {
-      background-color: $almost-white;
       a {
+        border: 1px solid $dark-gray;
+        background-color: $almost-white;
         color: $dark-gray;
       }
-      &:before {
-        left: 0;
-        top: -5px;
-        background-position: left 0 bottom -2px;
-        position: absolute;
-        width: 100%;
-        height: 5px;
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);
-        background-repeat: repeat-x;
-        content: "";
-      }
     }
   }
 }