Improvements to styles on smaller screens

Used smaller margins, padding and fonts to better fit content on the Home, Projects and Contact screens. Also fixed crossfade animation between screens.
2019-02-20 19:11:42 -05:00
parent 6043beb1bb
commit cbd113cc35
12 changed files with 171 additions and 60 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1536,6 +1536,7 @@
      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
      "dev": true,
+      "optional": true,
      "requires": {
        "delegates": "^1.0.0",
        "readable-stream": "^2.0.6"
@@ -2744,7 +2745,8 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true
+      "dev": true,
+      "optional": true
    },
    "constants-browserify": {
      "version": "1.0.0",
@@ -3140,7 +3142,8 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true
+      "dev": true,
+      "optional": true
    },
    "depd": {
      "version": "1.1.2",
@@ -4196,7 +4199,8 @@
        "ansi-regex": {
          "version": "2.1.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
@@ -4217,12 +4221,14 @@
        "balanced-match": {
          "version": "1.0.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@@ -4237,17 +4243,20 @@
        "code-point-at": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
@@ -4364,7 +4373,8 @@
        "inherits": {
          "version": "2.0.3",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "ini": {
          "version": "1.3.5",
@@ -4376,6 +4386,7 @@
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@@ -4390,6 +4401,7 @@
          "version": "3.0.4",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@@ -4397,12 +4409,14 @@
        "minimist": {
          "version": "0.0.8",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "minipass": {
          "version": "2.2.4",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.1",
            "yallist": "^3.0.0"
@@ -4421,6 +4435,7 @@
          "version": "0.5.1",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@@ -4501,7 +4516,8 @@
        "number-is-nan": {
          "version": "1.0.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
@@ -4513,6 +4529,7 @@
          "version": "1.4.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@@ -4598,7 +4615,8 @@
        "safe-buffer": {
          "version": "5.1.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@@ -4634,6 +4652,7 @@
          "version": "1.0.2",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@@ -4653,6 +4672,7 @@
          "version": "3.0.1",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@@ -4696,12 +4716,14 @@
        "wrappy": {
          "version": "1.0.2",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "yallist": {
          "version": "3.0.2",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        }
      }
    },
@@ -4710,6 +4732,7 @@
      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
      "dev": true,
+      "optional": true,
      "requires": {
        "graceful-fs": "^4.1.2",
        "inherits": "~2.0.0",
@@ -4722,6 +4745,7 @@
      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
      "dev": true,
+      "optional": true,
      "requires": {
        "aproba": "^1.0.3",
        "console-control-strings": "^1.0.0",
@@ -4759,7 +4783,8 @@
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true
+      "dev": true,
+      "optional": true
    },
    "get-stream": {
      "version": "3.0.0",
@@ -5006,7 +5031,8 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true
+      "dev": true,
+      "optional": true
    },
    "has-value": {
      "version": "1.0.0",
@@ -5753,7 +5779,8 @@
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true
+      "dev": true,
+      "optional": true
    },
    "is-windows": {
      "version": "1.0.2",
@@ -6363,6 +6390,7 @@
      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
      "dev": true,
+      "optional": true,
      "requires": {
        "graceful-fs": "^4.1.2",
        "parse-json": "^2.2.0",
@@ -6375,7 +6403,8 @@
          "version": "2.3.0",
          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
        }
      }
    },
@@ -6671,7 +6700,8 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true
+      "dev": true,
+      "optional": true
    },
    "map-visit": {
      "version": "1.0.0",
@@ -7299,6 +7329,7 @@
      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
      "dev": true,
+      "optional": true,
      "requires": {
        "are-we-there-yet": "~1.1.2",
        "console-control-strings": "~1.1.0",
@@ -8465,6 +8496,7 @@
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
      "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
      "dev": true,
+      "optional": true,
      "requires": {
        "load-json-file": "^1.0.0",
        "normalize-package-data": "^2.3.2",
@@ -8476,6 +8508,7 @@
          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
          "dev": true,
+          "optional": true,
          "requires": {
            "graceful-fs": "^4.1.2",
            "pify": "^2.0.0",
@@ -8486,7 +8519,8 @@
          "version": "2.3.0",
          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
        }
      }
    },
@@ -8495,6 +8529,7 @@
      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
      "dev": true,
+      "optional": true,
      "requires": {
        "find-up": "^1.0.0",
        "read-pkg": "^1.0.0"
@@ -8505,6 +8540,7 @@
          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
          "dev": true,
+          "optional": true,
          "requires": {
            "path-exists": "^2.0.0",
            "pinkie-promise": "^2.0.0"
@@ -8515,6 +8551,7 @@
          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
          "dev": true,
+          "optional": true,
          "requires": {
            "pinkie-promise": "^2.0.0"
          }
@@ -9789,6 +9826,7 @@
      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
      "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
      "dev": true,
+      "optional": true,
      "requires": {
        "is-utf8": "^0.2.0"
      }
@@ -11145,6 +11183,7 @@
      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
      "dev": true,
+      "optional": true,
      "requires": {
        "string-width": "^1.0.2 || 2"
      }
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,6 @@
 <div style="text-align:center">
  <app-toolbar></app-toolbar>
 </div>
-<main [@routerTransition]="getState(o)">
+<main [@routerTransition]="o.isActivated ? o.activatedRoute : ''">
  <router-outlet #o="outlet"></router-outlet>
 </main>
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,31 +1,40 @@
 import {Component} from '@angular/core';
-import {RouterOutlet} from "@angular/router";
-import {animate, query, style, transition, trigger} from "@angular/animations";
+import {RouterOutlet} from '@angular/router';
+import {animate, query, style, transition, trigger} from '@angular/animations';

 export const routerTransition = trigger('routerTransition', [
-  // The '* => *' will trigger the animation to change between any two states
-  transition('* => *', [
-    // The query function has three params.
-    // First is the event, so this will apply on entering or when the element is added to the DOM.
-    // Second is a list of styles or animations to apply.
-    // Third we add a config object with optional set to true, this is to signal
-    // angular that the animation may not apply as it may or may not be in the DOM.
-    query(
-      ':enter',
-      [style({opacity: 0})],
-      {optional: true}
-    ),
-    query(
-      ':leave',
-      // here we apply a style and use the animate function to apply the style over 0.3 seconds
-      [style({opacity: 1}), animate('0.3s', style({opacity: 0}))],
-      {optional: true}
-    ),
-    query(
-      ':enter',
-      [style({opacity: 0}), animate('0.3s', style({opacity: 1}))],
-      {optional: true}
-    )
+  transition('* <=> *', [
+    // Initial state of new route
+    query(':enter',
+      style({
+        position: 'fixed',
+        width: '100%',
+        // transform: 'translateX(-100%)'
+        opacity: 0
+      }),
+      {optional: true}),
+
+    // move page off screen right on leave
+    query(':leave',
+      animate('300ms ease-in-out',
+        style({
+          position: 'fixed',
+          width: '100%',
+          // transform: 'translateX(100%)'
+          opacity: 0
+        })
+      ),
+      {optional: true}),
+
+    // move page in screen from left to right
+    query(':enter',
+      animate('300ms ease-in-out',
+        style({
+          opacity: 1,
+          // transform: 'translateX(0%)'
+        })
+      ),
+      {optional: true}),
  ])
 ]);

@@ -38,7 +47,7 @@ export const routerTransition = trigger('routerTransition', [
 export class AppComponent {

  getState(outlet: RouterOutlet) {
-    return outlet.activatedRouteData.state
+    return outlet.activatedRouteData.state;
  }
 }

--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,15 +2,15 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';

 import {AppComponent} from './app.component';
-import {MatSidenavModule, MatToolbarModule} from "@angular/material";
+import {MatSidenavModule, MatToolbarModule} from '@angular/material';
 import {ToolbarComponent} from './toolbar/toolbar.component';
-import {RouterModule, Routes} from "@angular/router";
+import {RouterModule, Routes} from '@angular/router';
 import {ResumeComponent} from './resume/resume.component';
 import {ContactComponent} from './contact/contact.component';
 import {HomeComponent} from './home/home.component';
 import {ProjectsComponent} from './projects/projects.component';
-import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
-import { ProjectKeywordPipe } from './project-keyword.pipe';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {ProjectKeywordPipe} from './project-keyword.pipe';

 const appRoutes: Routes = [
  {path: 'resume', component: ResumeComponent, data: {state: 'resume'}},
@@ -31,7 +31,7 @@ const appRoutes: Routes = [
    ProjectKeywordPipe,
  ],
  imports: [
-    RouterModule.forRoot(appRoutes),
+    RouterModule.forRoot(appRoutes, {useHash: true}),
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
@@ -41,5 +41,6 @@ const appRoutes: Routes = [
  providers: [],
  bootstrap: [AppComponent]
 })
+
 export class AppModule {
 }
--- a/src/app/contact/contact.component.css
+++ b/src/app/contact/contact.component.css
@@ -24,3 +24,28 @@
  color: #0FA0CE;
  cursor: pointer;
 }
+
+@media (max-width: 768px) {
+  .icon-layout {
+    padding: .1em;
+    margin: .5em .25em .5em .25em
+  }
+
+  .subtitle {
+    margin: 1em .5em;
+  }
+}
+
+@media (max-width: 425px) {
+  .icon-layout {
+    font-size: 14px;
+  }
+
+  h2 {
+    font-size: 24px;
+  }
+
+  .subtitle {
+    margin: 1em .5em;
+  }
+}
--- a/src/app/contact/contact.component.html
+++ b/src/app/contact/contact.component.html
@@ -5,17 +5,17 @@

    <div style="display: flex; justify-content: center; width: 100%">
      <div class="icon-layout" (click)="linkedInClicked()">
-        <img src="../../assets/linked-in.png" class="icon">
+        <img src="../../assets/linked-in.png" class="icon" alt="LinkedIn">
        <span class="icon-text">LinkedIn</span>
      </div>

      <div class="icon-layout" (click)="githubClicked()">
-        <img src="../../assets/github.png" class="icon">
+        <img src="../../assets/github.png" class="icon" alt="Github">
        <span class="icon-text">GitHub</span>
      </div>

      <div class="icon-layout" (click)="emailClicked()">
-        <img src="../../assets/gmail.png" class="icon">
+        <img src="../../assets/gmail.png" class="icon" alt="GMail">
        <span class="icon-text">Email</span>
      </div>
    </div>
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
@@ -19,3 +19,24 @@
 .overlay-text {
  color: white;
 }
+
+.headshot {
+  width: 27%;
+  margin: 2em 0 1em 0
+}
+
+@media (max-width: 768px) {
+  .headshot {
+    width: 40%;
+  }
+
+  .overlay-text {
+    font-size: 32px;
+  }
+}
+
+@media (max-width: 425px) {
+  .overlay-text {
+    font-size: 24px;
+  }
+}
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,10 +1,10 @@
 <div class="home-container">
  <div class="overlay" style="position: absolute;">
-    <img src="../../assets/CubeSpace.jpg" class="image">
+    <img src="../../assets/CubeSpace.jpg" class="image" alt="background">
  </div>
  <div class="center-column" style="height: 100%">
    <div style="width: 100%; margin: 0 auto; position: absolute">
-      <img src="../../assets/cameron-headshot.jpg" style="width: 27%; margin: 2em 0 1em 0">
+      <img src="../../assets/cameron-headshot.jpg" class="headshot" alt="headshot photo">
      <h1 class="overlay-text">Cameron Cordes</h1>
      <p
        class="thin-subtitle" style="color: white;">
--- a/src/app/projects/projects.component.css
+++ b/src/app/projects/projects.component.css
@@ -5,7 +5,13 @@

@media (max-width: 768px) {
  .project-item {
-    width: 75%;
+    width: 90%;
+    font-size: 14px;
+  }
+
+  img {
+    max-width: 40%;
+    margin: 0 0 1em 0;
  }
 }

--- a/src/app/projects/projects.component.html
+++ b/src/app/projects/projects.component.html
@@ -1,7 +1,7 @@
 <div class="center-column">
  <div class="project-item" *ngFor="let project of projects">
    <h4>{{project.title}}</h4>
-    <img src={{project.imgLocation}} width="50%">
+    <img src={{project.imgLocation}} width="50%" alt="{{project.title}} icon">
    <p class="subtitle" style="margin: 0">{{project.applicationType}}</p>
    <p class="thin-subtitle" [innerHTML]="project.description | projectKeyword"></p>
  </div>
--- a/src/app/toolbar/toolbar.component.css
+++ b/src/app/toolbar/toolbar.component.css
@@ -12,3 +12,9 @@ span:hover {
  color: #1DAEDD;
  cursor: pointer;
 }
+
+@media (max-width: 425px) {
+  span {
+    font-size: 14px;
+  }
+}
--- a/src/styles.css
+++ b/src/styles.css
@@ -20,7 +20,7 @@ h1, h2, h3, p, span {
  margin: 1em auto;
 }

-@media (min-width: 480px) and (max-width: 768px) {
+@media (max-width: 768px) {
  .body-text {
    font-size: 14px;
    width: 80%;
@@ -37,9 +37,13 @@ h1, h2, h3, p, span {
  .subtitle {
    font-size: 14px;
  }
+
+  h4 {
+    font-size: 22px;
+  }
 }

-@media (min-width: 768px){
+@media (min-width: 768px) {
  .body-text {
    font-size: 16px;
  }