Improve layout. Goals first.

OxfordHCC · Mar 4, 2020 · 1e2e794 · 1e2e794
1 parent 0f63e8e
commit 1e2e794
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 12 deletions.
diff --git a/src/app/goals/goals.page.html b/src/app/goals/goals.page.html
@@ -1,19 +1,23 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Digital Habits: Goals
+      Goals
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">Digital Habits: Goals</ion-title>
+      <ion-title size="large">Goals</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <p *ngIf="!data.getGoals() || data.getGoals().length == 0">Nothing added yet. Choose some goals from the 'tips' tab.</p>
+  <div id="container" *ngIf="!data.getGoals() || data.getGoals().length == 0">
+    <strong>Nothing goals yet.</strong>
+    <p>Choose some from the <a [routerLink]="'/tabs/tips'">'Tips' tab</a>.</p>
+  </div>
+
   <ion-card *ngFor="let goal of data.getGoals(); let i = index" [attr.data-index]="i">
     <ion-card-header>
       <ion-card-subtitle>

diff --git a/src/app/goals/goals.page.scss b/src/app/goals/goals.page.scss
@@ -1,3 +1,31 @@
 ion-content ion-toolbar {
   --background: translucent;
-}
+}
+
+#container {
+  text-align: center;
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+#container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+#container p {
+  font-size: 16px;
+  line-height: 22px;
+
+  color: #8c8c8c;
+
+  margin: 0;
+}
+
+#container a {
+  text-decoration: none;
+}
diff --git a/src/app/tabs/tabs-routing.module.ts b/src/app/tabs/tabs-routing.module.ts
@@ -29,14 +29,14 @@ const routes: Routes = [
       },
       {
         path: '',
-        redirectTo: '/tabs/tips',
+        redirectTo: '/tabs/goals',
         pathMatch: 'full'
       }
     ]
   },
   {
     path: '',
-    redirectTo: '/tabs/tips',
+    redirectTo: '/tabs/goals',
     pathMatch: 'full'
   }
 ];

diff --git a/src/app/tabs/tabs.page.html b/src/app/tabs/tabs.page.html
@@ -1,16 +1,17 @@
 <ion-tabs>
 
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="tips">
-      <ion-icon name="information"></ion-icon>
-      <ion-label>Tips</ion-label>
-    </ion-tab-button>
 
     <ion-tab-button tab="goals">
       <ion-icon name="locate"></ion-icon>
       <ion-label>Goals</ion-label>
     </ion-tab-button>
 
+    <ion-tab-button tab="tips">
+      <ion-icon name="information"></ion-icon>
+      <ion-label>Tips</ion-label>
+    </ion-tab-button>
+
   </ion-tab-bar>
 
 </ion-tabs>
diff --git a/src/app/tips/tips.page.html b/src/app/tips/tips.page.html
@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Digital Habits: Tips
+      Tips
     </ion-title>
   </ion-toolbar>
 </ion-header>
@@ -14,7 +14,7 @@
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">
-        Digital Habits: Tips
+        Tips
       </ion-title>
     </ion-toolbar>
   </ion-header>