maintenance page make-up

open-template-hub · Sep 4, 2021 · 91a24e7 · 91a24e7
1 parent 74bd505
commit 91a24e7
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 45 deletions.
diff --git a/src/app/page/raw-landing-layout/maintenance/maintenance.component.html b/src/app/page/raw-landing-layout/maintenance/maintenance.component.html
@@ -1,14 +1,11 @@
 <div class="raw-landing-raw-content-page">
-  <div class="hero">
+  <div class="hero maintenance-content">
     <div class="brand-logo-wrapper hero-content">
-      <div class="bounce-stage">
-        <img [src]="brand.brandLogo" alt="logo" class="bounce brand-logo" height="100"/>
+      <div>
+        <img [src]="brand.brandLogoBroken" alt="logo" class="brand-logo" height="150"/>
       </div>
-      <h2>Under maintenance 🚧</h2>
-    </div>
-    <h6>Please check again later</h6>
-    <div class="section-submit">
-      <app-button1 (click)="router.navigate(['/'])" [text]="'HOME'"></app-button1>
+      <h1>Under maintenance</h1>
     </div>
+    <h3>Please check again later</h3>
   </div>
 </div>
diff --git a/src/app/page/raw-landing-layout/maintenance/maintenance.component.scss b/src/app/page/raw-landing-layout/maintenance/maintenance.component.scss
@@ -1 +1,3 @@
-/* Intentionally blank */
+.maintenance-content h3{
+  color: var(--brand-color);
+}
diff --git a/src/app/page/raw-landing-layout/maintenance/maintenance.component.ts b/src/app/page/raw-landing-layout/maintenance/maintenance.component.ts
@@ -10,7 +10,7 @@ import { ThemeService } from '../../../service/theme/theme.service';
 export class MaintenanceComponent {
 
   brand = {
-    brandLogo: '',
+    brandLogoBroken: '',
   };
 
   constructor(

diff --git a/src/app/service/theme/theme.service.ts b/src/app/service/theme/theme.service.ts
@@ -19,7 +19,8 @@ export class ThemeService {
   private sideNavClosedSubject: BehaviorSubject<string>;
 
   public brand = {
-    brandLogo: ''
+    brandLogo: '',
+    brandLogoBroken: ''
   };
 
   private maxAspectRatioMedia;
@@ -73,6 +74,7 @@ export class ThemeService {
     this.sideNavClosedSubject = new BehaviorSubject<string>( sideNavClosedStorageItem );
     this.sideNavClosed = this.sideNavClosedSubject.asObservable();
     this.brand.brandLogo = './assets/logo/brand-logo.png';
+    this.brand.brandLogoBroken = './assets/logo/brand-logo-broken.png';
 
     if ( version ) {
       this.appVersion = version;

diff --git a/src/assets/logo/brand-logo-broken.png b/src/assets/logo/brand-logo-broken.png
diff --git a/src/styles/other/animation.scss b/src/styles/other/animation.scss
@@ -43,13 +43,6 @@
   }
 }
 
-.bounce-stage {
-  border-bottom: 3px solid var(--lighter);
-  display: flex;
-  justify-content: center;
-  width: 20%;
-}
-
 .bounce {
   animation-duration: 2s;
   animation-iteration-count: infinite;

diff --git a/src/styles/other/page.scss b/src/styles/other/page.scss
@@ -19,15 +19,6 @@
   justify-content: center;
 }
 
-.hero .quote {
-  margin-top: 4em;
-  padding: 0 10%;
-}
-
-.hero .author {
-  color: var(--brand-color);
-}
-
 .layers {
   width: 100%;
   overflow: hidden;
@@ -71,16 +62,7 @@
   }
 
   .hero .brand-logo {
-    height: 75px;
-  }
-
-  .hero .quote {
-    margin-top: 2.5em;
-    font-size: 1em;
-  }
-
-  .hero .author {
-    font-size: 0.7em;
+    height: 100px;
   }
 
   .landing-title {
@@ -106,14 +88,6 @@
 }
 
 @media only screen and (min-width: 1000px) {
-  .hero .quote {
-    font-size: 0.9em;
-  }
-
-  .hero .author {
-    font-size: 0.8em;
-  }
-
   .landing-title {
     padding-top: 125px;
     padding-bottom: 90px;