style: buttons at bottom of modals and icons

moved buttons to the bottom so that the header is not crowded on smaller screens. also added icons to all modal buttons and changed app title
momargoh · Feb 6, 2023 · 9477018 · 9477018
1 parent 138b8ee
commit 9477018
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 19 deletions.
diff --git a/src/app/journal/view-entry/view-entry.page.html b/src/app/journal/view-entry/view-entry.page.html
@@ -1,14 +1,8 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>View Entry</ion-title>
-    <ion-button (click)="close()" slot="start" color="secondary"
-      ><ion-icon name="close-outline"></ion-icon>Close</ion-button
-    >
-    <ion-button (click)="delete()" slot="end" color="danger"
-      ><ion-icon slot="start" name="trash-outline"></ion-icon>Delete</ion-button
-    >
-    <ion-button (click)="update()" slot="end"
-      ><ion-icon name="create-outline"></ion-icon>Edit</ion-button
+    <ion-title
+      ><ion-icon name="document-text-outline"></ion-icon>&nbsp;View
+      Entry</ion-title
     >
   </ion-toolbar>
 </ion-header>
@@ -52,3 +46,16 @@ <h3>{{(entry$|async)?.title}}</h3>
     </ion-item>
   </ion-list>
 </ion-content>
+
+<ion-footer>
+  <ion-button (click)="update()" expand="block"
+    ><ion-icon name="create-outline"></ion-icon>Edit</ion-button
+  >
+  <ion-button (click)="delete()" expand="block" color="danger"
+    ><ion-icon slot="start" name="trash-outline"></ion-icon>Delete</ion-button
+  >
+  <hr />
+  <ion-button (click)="close()" expand="block" color="secondary"
+    ><ion-icon name="close-outline"></ion-icon>Close</ion-button
+  >
+</ion-footer>
diff --git a/src/app/journal/write-entry/write-entry.page.html b/src/app/journal/write-entry/write-entry.page.html
@@ -1,14 +1,8 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>{{mode | titlecase}} Entry</ion-title>
-    <ion-button (click)="cancel()" slot="start" color="secondary"
-      >Cancel</ion-button
-    >
-    <ion-button
-      [disabled]="!entryForm.valid || entryForm.pristine"
-      (click)="save()"
-      slot="end"
-      >Save</ion-button
+    <ion-title
+      ><ion-icon name="create-outline"></ion-icon>&nbsp;{{mode | titlecase}}
+      Entry</ion-title
     >
   </ion-toolbar>
 </ion-header>
@@ -38,3 +32,16 @@
     </ion-list>
   </form>
 </ion-content>
+
+<ion-footer>
+  <ion-button
+    [disabled]="!entryForm.valid || entryForm.pristine"
+    (click)="save()"
+    expand="block"
+    ><ion-icon name="save-outline"></ion-icon>&nbsp;Save</ion-button
+  >
+  <hr />
+  <ion-button (click)="cancel()" color="secondary" expand="block"
+    ><ion-icon name="close-outline"></ion-icon>Cancel</ion-button
+  >
+</ion-footer>
diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Ionic App</title>
+    <title>Diar.io</title>
 
     <base href="/" />