css style updates

Author: codediodeio

database.rules.json

@@ -8,7 +8,12 @@
     },
    "items": {
       ".write": "auth != null"
+    },
+    "users": {
+      ".write": "auth != null"
     }
 
+
+
   }
 }

src/app/items/item-detail/item-detail.component.html

@@ -1,18 +1,18 @@
-<div class="card-header">
-  <p class="card-header-title">{{ item.title || 'missing title' }}</p>
-</div>
+<h3 [ngClass]="{ 'strike-out': !item.active }">
+  {{ item.title || 'missing title' }}
+</h3>
 
 
 <div class="card-content">
 
-  Active: {{ item.active }}<br>
+  Task Active?: {{ item.active }}<br>
   {{ item.timeStamp | date: 'medium' }}
 
 </div>
 
 <div class="card-footer">
   <span class="button is-small is-info card-footer-item" (click)='updateTimeStamp()'>Update Timestamp</span>
   <span class="button is-small is-success card-footer-item" *ngIf='item.active' (click)='updateActive(false)'>Mark Complete</span>
-  <span class="button is-small is-primary card-footer-item" *ngIf='!item.active' (click)='updateActive(true)'>Mark Active</span>
+  <span class="button is-small is-warning card-footer-item" *ngIf='!item.active' (click)='updateActive(true)'>Mark Incomplete</span>
   <span class="button is-small is-danger card-footer-item" (click)='deleteItem()'>Delete</span>
 </div>

src/app/items/item-detail/item-detail.component.scss

@@ -0,0 +1,2 @@
+.button { border-radius: 0; margin: 10px 5px; }
+.strike-out { text-decoration: line-through; color: darkred; }

src/app/items/item-form/item-form.component.html

@@ -12,7 +12,7 @@ <h3>New Task Form</h3>
     </div>
 
 
-    <button class="button" (click)='createItem()' [disabled]="!title.valid">Create</button>
+    <button class="button is-primary" (click)='createItem()' [disabled]="!title.valid">Create</button>
 
 
 <ng-template #valid>

src/app/items/items-list/items-list.component.html

@@ -1,5 +1,7 @@
 <h1>Items</h1>
 
+<p>This page is a demo of a very basic todo list in Angular, using the Firebase Realtime DB on the backend.</p>
+
 <div *ngFor="let item of items | async" class="card">
   <item-detail [item]='item'></item-detail>
 </div>

src/app/items/items-list/items-list.component.scss

@@ -0,0 +1 @@
+.card { margin-bottom: 10px; padding: 10px; }

src/app/ui/top-nav/top-nav.component.html

@@ -1,32 +1,4 @@
-<!-- <nav class="navbar  navbar-light">
-    <button (click)="toggleCollapse()" class="navbar-toggler navbar-toggler-right" type="button">
-      <span [hidden]="collapse=='open'" class="fa fa-bars fa-lg"></span>
-      <span [hidden]="collapse=='closed'" class="fa fa-times fa-lg"></span>
-   </button>
-
-  <a class="navbar-brand" routerLink="/">
-    <img src="assets/images/angularfirebase.png" width="30px" /> FireStarter
-  </a>
-
-
-    <div class="collapse show"  [@collapse]="collapse">
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/login">Login</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/items">Items (Realtime DB Example)</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/uploads">Uploads (File Upload Example)</a>
-        </li>
-      </ul>
-    </div>
-  </nav> -->
-
-
-
-  <nav class="nav">
+<nav class="nav">
   <div class="nav-left">
     <a class="nav-item" routerLink="/">
       <img src="assets/images/angularfirebase.png" width="30px" alt="Firestarter Angular4 Demo App"/> FireStarter
@@ -39,6 +11,11 @@
         <i class="fa fa-github"></i>
       </span>
     </a>
+    <a class="nav-item" href="https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA">
+      <span class="icon">
+        <i class="fa fa-youtube"></i>
+      </span>
+    </a>
     <a class="nav-item" href="https://twitter.com/angularfirebase">
       <span class="icon">
         <i class="fa fa-twitter"></i>

src/app/ui/top-nav/top-nav.component.scss

@@ -0,0 +1,5 @@
+nav {
+  box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
+  margin-bottom: 25px;
+  padding: 0 3vw;
+}

src/styles/firestarter.scss

@@ -1,9 +1,14 @@
 @import 'variables';
+@import url('https://fonts.googleapis.com/css?family=Roboto');
 
 
 
 ///// Content
 
+body {
+  font-family: 'Roboto', sans-serif;
+}
+
 
 .footer {
   // flex: 1;
@@ -26,6 +31,9 @@
 
 ///// Social Buttons
 
+.input {
+  margin-bottom: 5px;
+}
 
 .btn-social {
   color: #fff;