feat(app): responsive layout enhancements

tomastrajan · Jan 2, 2018 · 68338ad · 68338ad
1 parent bd9341d
commit 68338ad
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,7 +1,10 @@
 <mat-toolbar color="primary">
- <span class="title" routerLink=""><span>HF</span> HAKAFAKA</span>
+ <span class="title" routerLink="">
+ <span class="logo">HF</span> <span class="title-long">HAKAFAKA</span>
+ </span>
  <span class="spacer"></span>
  <button mat-button
+ class="nav-button"
  *ngFor="let item of menu"
  [routerLink]="item.path"
  routerLinkActive="active">

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,3 +1,5 @@
+@import 'styles-responsive';
+
 :host {
  height: 100%;
  display: flex;
@@ -12,11 +14,19 @@
  outline: 0;
  cursor: pointer;
 
- span {
+ .logo {
  padding: 10px 18px 10px 15px;
  letter-spacing: -5px;
  margin: 0 10px 0 0;
  }
+
+ .title-long {
+ display: none;
+
+ @include for-size($size-tablet-landscape-up) {
+ display: inline;
+ }
+ }
  }
 
  .spacer {
@@ -28,6 +38,14 @@
  margin: 0 0 0 10px;
  }
 
+ .nav-button {
+ display: none;
+
+ @include for-size($size-tablet-landscape-up) {
+ display: block;
+ }
+ }
+
  mat-progress-bar {
  position: absolute;
  top: 64px;

diff --git a/src/app/app.component.scss-theme.scss b/src/app/app.component.scss-theme.scss
@@ -12,7 +12,7 @@
  }
 
  .title {
- span {
+ .logo {
  border: 2px solid mat-color($primary, default-contrast);
  }
  }