updated timeline mobile view

nj-coder · nj-coder · commit daa0fea14f18 · 2019-12-01T14:28:48.000+11:00
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,2 +1 @@
 <router-outlet></router-outlet>
-<app-footer></app-footer>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -3,12 +3,10 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { FooterComponent } from './components/footer/footer.component';
-
 
 @NgModule({
   declarations: [
-    AppComponent, FooterComponent
+    AppComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss
@@ -1,6 +1,6 @@
 .footer {
   padding: 1em;
-  background: #2e2e2e;
+  background: #021017;
 
   .get-template {
     font-size: 12px;
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -68,5 +68,6 @@
     <home-timeline></home-timeline>
   </div>
 
-
 </div>
+
+<app-footer></app-footer>
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss
@@ -159,8 +159,9 @@
   }
 
   .content-wrapper {
-    width: 800px;
+    max-width: 800px;
     margin: 0 auto;
+    padding: 0 2em;
 
     .intro {
       text-align: center;
diff --git a/src/app/pages/home/home.module.ts b/src/app/pages/home/home.module.ts
@@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { HomeComponent } from './home.component';
 import { TimelineComponent } from './timeline/timeline.component';
+import { FooterComponent } from 'src/app/components/footer/footer.component';
 
 const routes: Routes = [
   {
@@ -14,7 +15,7 @@ const routes: Routes = [
 
 
 @NgModule({
-  declarations: [HomeComponent, TimelineComponent], 
+  declarations: [HomeComponent, TimelineComponent, FooterComponent], 
   imports: [
     RouterModule.forChild(routes),
     CommonModule
diff --git a/src/app/pages/home/timeline/timeline.component.scss b/src/app/pages/home/timeline/timeline.component.scss
@@ -1,3 +1,5 @@
+$primary-breakpoint: 800px;
+
 .timeline {
   margin: 4em auto;
   position: relative;
@@ -10,8 +12,14 @@
     width: 1px;
     height: calc(100% - 2em);
     background: var(--app-grey);
+
+    @media only screen and (max-width: $primary-breakpoint) {
+      left: calc(90% + 2em);
+    }
   }
 
+
+
   .timeline-item-wrapper {
     margin-bottom: 1em;
 
@@ -135,23 +143,31 @@
 
       }
 
-      &:nth-child(even) {
-        margin-left: auto;
+      @media only screen and (max-width: $primary-breakpoint) {
+        max-width: calc(90%);
+        margin-bottom: 4em;
+      }
 
-        .side-el {
-          right: auto;
-          left: -50px;
+      @media only screen and (min-width: $primary-breakpoint) {
 
-          .arrow {
-            order: 1;
+        &:nth-child(even) {
+          margin-left: auto;
+
+          .side-el {
             right: auto;
-            left: -10px;
-            clip-path: polygon(0 50%, 100% 0, 100% 100%);
-          }
+            left: -50px;
 
-          .circle {
-            margin-left: 0;
-            margin-right: 0.5em;
+            .arrow {
+              order: 1;
+              right: auto;
+              left: -10px;
+              clip-path: polygon(0 50%, 100% 0, 100% 100%);
+            }
+
+            .circle {
+              margin-left: 0;
+              margin-right: 0.5em;
+            }
           }
         }
       }

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`	`1`	`<router-outlet></router-outlet>`
`2`		`-<app-footer></app-footer>`
Original file line number	Diff line number	Diff line change
`@@ -159,8 +159,9 @@`
`159`	`159`	`}`
`160`	`160`
`161`	`161`	`.content-wrapper {`
`162`		`- width: 800px;`
	`162`	`+ max-width: 800px;`
`163`	`163`	`margin: 0 auto;`
	`164`	`+ padding: 0 2em;`
`164`	`165`
`165`	`166`	`.intro {`
`166`	`167`	`text-align: center;`