style: Responsive layout

The app layout should be developed with mobile-first in mind. Make sure to upgrade all the existing components to follow this guideline. closes #4
andreasonny83 · May 20, 2017 · 3589b58 · 3589b58
1 parent 6640d36
commit 3589b58
Show file tree

Hide file tree

Showing 19 changed files with 202 additions and 247 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -17,3 +17,13 @@
   padding-top: 80px;
   box-sizing: border-box;
 }
+
+.app-content.tall {
+  padding-top: 112px;
+}
+
+@media (min-width: 601px) {
+  .app-content.tall {
+    padding-top: 128px;
+  }
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -5,7 +5,9 @@
                     [floating]="floatingClass"
                     [version]="version"></app-main-toolbar>
 
-  <div class="app-content" (scroll)="onScroll($event)">
+  <div class="app-content"
+       [class.tall]="tall"
+       (scroll)="onScroll($event)">
     <router-outlet></router-outlet>
   </div>
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { environment } from '../environments/environment';
+import { Router } from '@angular/router';
 import {
   trigger,
   state,
@@ -27,6 +28,17 @@ export class AppComponent implements OnInit {
   public title: string;
   public floatingClass: boolean;
   public version: number;
+  public tall: boolean;
+
+  constructor(
+    private route: Router,
+  ) {
+    route.events.subscribe((url: any) => {
+      const page: string = url.urlAfterRedirects;
+
+      this.tall = page !== '/dashboard' && page !== '/login';
+    });
+  }
 
   ngOnInit() {
     this.version = environment.version;

diff --git a/src/app/board-page/board-page.component.css b/src/app/board-page/board-page.component.css
diff --git a/src/app/board-page/board-page.component.html b/src/app/board-page/board-page.component.html
@@ -1,44 +1,52 @@
 <div class="block-xxl">
   <h3 class="board-name">{{ boardName }}</h3>
 
-  <div class="item-list-container notes-board">
-    <div class="item-list notes-column"
-         *ngFor="let column of columns | async">
-      <div class="cards-column-title">
+  <div class="item-list-container">
+    <div class="item-list"
+         *ngFor="let column of columns | async; let columnID = index">
+      <div class="item-list__title">
         <span>{{ column.title }}</span>
         <md-icon>{{ cardEmoticon(column.title) }}</md-icon>
       </div>
 
       <md-card [style.background]="column.color"
                *ngFor="let item of column.items | keyobject; let i = index"
-               class="pinned-note color-{{i%2}}">
+               class="note pinned-note mat-elevation-z2">
         <img class="edit-icon"
              (click)="editItem(item)"
              src="../../assets/images/marker.png"
-             alt="">
-        <span>{{item.value.val}}</span>
-        <p class="note-author">{{item.value.author}}</p>
+             alt="edit note">
+
+       <md-card-content>
+          <span>{{item.value.val}}</span>
+        </md-card-content>
+
+        <md-card-footer>
+          <p class="note-author">- {{item.value.author}}</p>
+        </md-card-footer>
       </md-card>
 
       <md-card [style.background]="column.color"
-               class="unpinned-note">
+               (mouseenter)="elevateCard(columnID)"
+               (mouseleave)="removeElevation(columnID)"
+               class="note unpinned-note mat-elevation-z10"
+               [class.mat-elevation-z18]="isElevated(columnID)">
         <form (ngSubmit)="pushItem(newItem, column)"
               class="form">
 
           <md-input-container class="full-width">
             <textarea mdInput
                       #newItem
+                      class="new-item"
                       placeholder="Write your feedback"
-                      mdTextareaAutosize>
-            </textarea>
+                      mdTextareaAutosize></textarea>
           </md-input-container>
 
           <button md-button
                   type="submit"
                   name="new-item"
                   class="pin-me-btn">
-            <span class="pin-me-text">Pin me</span>
-
+            Pin me
             <img class="pin-icon"
                  src="../../assets/images/pushpin.png"
                  alt="Pin me">
@@ -49,41 +57,39 @@ <h3 class="board-name">{{ boardName }}</h3>
     </div>
   </div>
 
-  <div class="item-list-container">
-    <md-card>
-      <md-card-title>
-        Invite more collaborators to this board:
-      </md-card-title>
+  <md-card class="invite-collaborators">
+    <md-card-title>
+      Invite more collaborators to this board:
+    </md-card-title>
 
-      <md-card-content>
-        <form [formGroup]="collaboratorsForm"
-              (ngSubmit)="inviteCollaborator()"
-              class="form"
-              novalidate>
-          <md-input-container class="full-width">
-            <input mdInput
-                   placeholder="Board name"
-                   type="email"
-                   name="collaborator"
-                   formControlName="collaborator">
-          </md-input-container>
+    <md-card-content>
+      <form [formGroup]="collaboratorsForm"
+            (ngSubmit)="inviteCollaborator()"
+            class="form"
+            novalidate>
+        <md-input-container class="full-width">
+          <input mdInput
+                 placeholder="Board name"
+                 type="email"
+                 name="collaborator"
+                 formControlName="collaborator">
+        </md-input-container>
 
-          <md-card-actions align="end">
-            <button md-raised-button
-                    type="submit"
-                    name="new-board"
-                    [disabled]="!collaboratorsForm.valid || sendingInvite"
-                    color="accent">
-              <span>Invite</span>
-              <md-spinner color="primary"
-                          strokeWidth="8"
-                          *ngIf="sendingInvite"
-                          class="loading-spinner"></md-spinner>
-            </button>
-          </md-card-actions>
-        </form>
-      </md-card-content>
-    </md-card>
-  </div>
+        <md-card-actions align="end">
+          <button md-raised-button
+                  type="submit"
+                  name="new-board"
+                  [disabled]="!collaboratorsForm.valid || sendingInvite"
+                  color="accent">
+            <span>Invite</span>
+            <md-spinner color="primary"
+                        strokeWidth="8"
+                        *ngIf="sendingInvite"
+                        class="loading-spinner"></md-spinner>
+          </button>
+        </md-card-actions>
+      </form>
+    </md-card-content>
+  </md-card>
 
 </div>