no items message for ciphers

src/app/vault/ciphers.component.html

@@ -6,8 +6,9 @@
     </div>
 </div>
 <div class="content">
-    <div class="list">
-        <a *ngFor="let c of ciphers | searchCiphers: searchText" appStopClick (click)="cipherClicked(c)"
+    <ng-container *ngIf="(ciphers | searchCiphers: searchText) as searchedCiphers">
+        <div class="list" *ngIf="searchedCiphers.length > 0">
+            <a *ngFor="let c of searchedCiphers" appStopClick (click)="cipherClicked(c)"
                href="#" title="{{'viewItem' | i18n}}" [ngClass]="{'active': c.id === activeCipherId}">
                 <app-vault-icon [cipher]="c"></app-vault-icon>
                 <span class="text">
@@ -20,6 +21,11 @@
                 <span class="detail">{{c.subTitle}}</span>
             </a>
         </div>
+        <div *ngIf="searchedCiphers.length === 0" class="no-items">
+            <p>{{'noItemsInList' | i18n}}</p>
+            <button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
+        </div>
+    </ng-container>
 </div>
 <div class="footer">
     <button appBlurClick (click)="addCipher()" class="block primary" title="{{'addItem' | i18n}}">

src/locales/en/messages.json

@@ -442,5 +442,8 @@
   },
   "itemInformation": {
     "message": "Item Information"
+  },
+  "noItemsInList": {
+    "message": "There are no items to list."
   }
 }

src/scss/base.scss

@@ -31,6 +31,10 @@ img {
 a {
     color: $brand-primary;
     text-decoration: none;
+
+    &:hover, &:focus {
+        color: darken($brand-primary, 6%);
+    }
 }
 
 input, select, textarea, button {

src/scss/buttons.scss

@@ -39,4 +39,9 @@
         display: block;
         width: 100%;
     }
+
+    &.link {
+        border: none !important;
+        background: none !important;
+    }
 }

src/scss/misc.scss

@@ -8,6 +8,10 @@
     color: $text-muted !important;
 }
 
+.text-center {
+    text-align: center;
+}
+
 [hidden] {
     display: none !important;
 }
@@ -95,3 +99,4 @@
         margin-top: 10px;
     }
 }
+

src/scss/vault.scss

@@ -11,6 +11,10 @@
         max-width: 250px;
         border-right: 1px solid $border-color-dark;
 
+        .inner-content {
+            padding-bottom: 0 !important;
+        }
+
         h2 {
             color: $gray-light;
             text-transform: uppercase;
@@ -102,6 +106,16 @@
         min-width: 200px;
         max-width: 350px;
         border-right: 1px solid $border-color-dark;
+
+        .no-items {
+            display: flex;
+            height: 100%;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 0 10px;
+        }
     }
 
     #details {
@@ -191,6 +205,7 @@
         flex: 1 1 auto;
         position: relative;
         overflow: auto;
+        height: 100%;
     }
 
     .footer {