Remove unnecessary buttons and fix header

open-template-hub · Sep 6, 2021 · 821eb26 · 821eb26
1 parent c1ffd5e
commit 821eb26
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 97 deletions.
diff --git a/src/app/component/nav/common/bottom-nav/bottom-nav.component.html b/src/app/component/nav/common/bottom-nav/bottom-nav.component.html
@@ -3,57 +3,75 @@
 <app-dropdown-menu #dropdownMenuServices [productLines]="SERVICES">
 </app-dropdown-menu>
 <nav class="bottom-nav">
-  <a (click)="closeSettings()"
-     *ngIf="openSettings" href="javascript:void(0)">
+  <a (click)="closeSettings()" *ngIf="openSettings" href="javascript:void(0)">
     <i aria-hidden="true" class="material-icons">arrow_back_ios</i>
-    <span>
-        Back
-    </span>
+    <span> Back </span>
   </a>
-  <a (click)="dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()" *ngIf="!openSettings" routerLink="{{ URLS.root }}">
+  <a
+    (click)="
+      dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()
+    "
+    *ngIf="!openSettings"
+    routerLink="{{ URLS.root }}"
+  >
     <i aria-hidden="true" [class]="'fas fa-home fa-fw'"></i>
-    <span>
-        Home
-    </span>
+    <span> Home </span>
   </a>
-  <a *ngIf="!openSettings" (click)="dropdownMenuProducts.toggleDropdown(); dropdownMenuServices.closeDropdown()">
+  <a
+    *ngIf="!openSettings"
+    (click)="
+      dropdownMenuProducts.toggleDropdown();
+      dropdownMenuServices.closeDropdown()
+    "
+  >
     <i aria-hidden="true" [class]="'fas fa-server fa-fw'"></i>
-    <span>
-        Products
-    </span>
+    <span> Products </span>
   </a>
-  <a *ngIf="!openSettings" (click)="dropdownMenuServices.toggleDropdown(); dropdownMenuProducts.closeDropdown()">
+  <a
+    *ngIf="!openSettings"
+    (click)="
+      dropdownMenuServices.toggleDropdown();
+      dropdownMenuProducts.closeDropdown()
+    "
+  >
     <i aria-hidden="true" [class]="'fas fa-handshake fa-fw'"></i>
-    <span>
-        Services
-    </span>
+    <span> Services </span>
   </a>
-  <a (click)="openSettings = !openSettings"
-     *ngIf="!openSettings" href="javascript:void(0)">
+  <a
+    (click)="openSettings = !openSettings"
+    *ngIf="!openSettings"
+    href="javascript:void(0)"
+  >
     <i aria-hidden="true" class="material-icons">arrow_forward_ios</i>
-    <span>
-        More
-    </span>
-  </a>
-  <a *ngIf="openSettings && !openOtherSettings" routerLink="{{ URLS.pricing }}"
-     (click)="dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()">
-    <i aria-hidden="true" [class]="'fas fa-dollar-sign fa-fw'"></i>
-    <span>
-        Pricing
-    </span>
-  </a>
-  <a class="demo" *ngIf="openSettings && !openOtherSettings" routerLink="{{ URLS.maintenance }}"
-     (click)="dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()">
-    <i aria-hidden="true" [class]="'fas fa-laptop-code fa-fw'"></i>
-    <span>
-        Request for Demo
-    </span>
-  </a>
-  <a *ngIf="openSettings && !openOtherSettings" routerLink="{{ URLS.maintenance }}"
-     (click)="dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()">
+    <span> More </span>
+  </a>
+  <a
+    class="contact"
+    *ngIf="openSettings && !openOtherSettings"
+    routerLink="{{ URLS.maintenance }}"
+    (click)="
+      dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()
+    "
+  >
     <i aria-hidden="true" [class]="'fas fa-address-card fa-fw'"></i>
-    <span>
-        Contact Us
-    </span>
+    <span> Contact Us </span>
+  </a>
+  <a
+    class="non-clickable"
+    *ngIf="openSettings && !openOtherSettings"
+    routerLink="{{ URLS.pricing }}"
+    (click)="
+      dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()
+    "
+  >
+  </a>
+  <a
+    class="non-clickable"
+    *ngIf="openSettings && !openOtherSettings"
+    routerLink="{{ URLS.maintenance }}"
+    (click)="
+      dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()
+    "
+  >
   </a>
 </nav>
diff --git a/src/app/component/nav/common/bottom-nav/bottom-nav.component.scss b/src/app/component/nav/common/bottom-nav/bottom-nav.component.scss
@@ -41,17 +41,17 @@
   font-size: 19px;
 }
 
-.bottom-nav .demo {
+.bottom-nav .contact {
   color: var(--brand-color);
   border-radius: 0;
   border-bottom: var(--brand-color) 1px solid;
 }
 
-.bottom-nav .demo span {
+.bottom-nav .contact span {
   font-size: 0.8em;
 }
 
-.bottom-nav .demo:hover {
+.bottom-nav .contact:hover {
   color: white;
   border-radius: 3px;
   background: var(--brand-color);
@@ -70,11 +70,15 @@
 }
 
 @media (hover: hover) {
-
   .bottom-nav a:hover {
     background: var(--hover);
   }
 
+  .bottom-nav .non-clickable:hover {
+    background: none;
+    cursor: auto;
+  }
+
   .bottom-nav .login:hover {
     color: white;
     background: var(--brand-color);

diff --git a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html
@@ -1,43 +1,57 @@
 <nav class="top-nav rounded-box">
-  <a class="brand" routerLink="{{URLS.root}}"
-     (click)="dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()">
-    <img [src]="brand.brandLogo" alt="logo" class="brand-logo" height="40"/>
+  <a
+    class="brand"
+    routerLink="{{ URLS.root }}"
+    (click)="
+      dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()
+    "
+  >
+    <img [src]="brand.brandLogo" alt="logo" class="brand-logo" height="40" />
     <h2>Open Template Hub</h2>
   </a>
   <div class="left-item-wrapper">
-    <a (click)="dropdownMenuProducts.toggleDropdown(); dropdownMenuServices.closeDropdown()">
-      <app-dropdown-menu #dropdownMenuProducts [productLines]="PRODUCT_LINES" [minimumColumns]="4">
+    <a
+      (click)="
+        dropdownMenuProducts.toggleDropdown();
+        dropdownMenuServices.closeDropdown()
+      "
+    >
+      <app-dropdown-menu
+        #dropdownMenuProducts
+        [productLines]="PRODUCT_LINES"
+        [minimumColumns]="4"
+      >
         <span>Products</span>
-        <i aria-hidden="true"
-           class="material-icons">{{dropdownMenuProducts.isDropdownOpen ? 'expand_less' : 'expand_more'}}</i>
+        <i aria-hidden="true" class="material-icons">{{
+          dropdownMenuProducts.isDropdownOpen ? "expand_less" : "expand_more"
+        }}</i>
       </app-dropdown-menu>
     </a>
-    <a (click)="dropdownMenuServices.toggleDropdown(); dropdownMenuProducts.closeDropdown()">
+    <a
+      (click)="
+        dropdownMenuServices.toggleDropdown();
+        dropdownMenuProducts.closeDropdown()
+      "
+    >
       <app-dropdown-menu #dropdownMenuServices [productLines]="SERVICES">
         <span>Services</span>
-        <i aria-hidden="true"
-           class="material-icons">{{dropdownMenuServices.isDropdownOpen ? 'expand_less' : 'expand_more'}}</i>
+        <i aria-hidden="true" class="material-icons">{{
+          dropdownMenuServices.isDropdownOpen ? "expand_less" : "expand_more"
+        }}</i>
       </app-dropdown-menu>
     </a>
-    <a routerLink="{{URLS.pricing}}"
-       (click)="dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()">
-      <span>
-          Pricing
-      </span>
+  </div>
+  <div class="right-item-wrapper">
+    <a
+      class="contact"
+      routerLink="{{ URLS.maintenance }}"
+      (click)="
+        dropdownMenuProducts.closeDropdown();
+        dropdownMenuServices.closeDropdown()
+      "
+    >
+      <span> Contact Us </span>
     </a>
   </div>
-  <a class="demo" routerLink="{{URLS.maintenance}}"
-     (click)="dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()">
-    <span>
-        Request for Demo
-    </span>
-  </a>
-  <a class="contact-us" routerLink="{{URLS.maintenance}}"
-     (click)="dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()">
-    <span>
-        Contact Us
-    </span>
-  </a>
 </nav>
-<div [class.landing-layout-top-nav-loading]="loading">
-</div>
+<div [class.landing-layout-top-nav-loading]="loading"></div>
diff --git a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.scss b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.scss
@@ -22,21 +22,10 @@
   margin-right: 10px;
 }
 
-.top-nav .demo {
+.top-nav .right-item-wrapper .contact {
   color: var(--brand-color);
   border-radius: 0;
   border-bottom: var(--brand-color) 1px solid;
-  margin-right: 20px;
-}
-
-.top-nav .demo:hover {
-  color: white;
-  border-radius: 3px;
-  background: var(--brand-color);
-}
-
-.top-nav .contact-us {
-  background-color: var(--contrast);
 }
 
 .top-nav .brand > * {
@@ -52,9 +41,14 @@ app-dropdown-menu i {
   margin-right: auto;
 }
 
+.top-nav .right-item-wrapper {
+  margin-right: 4em;
+  margin-top: 0.5em;
+}
+
 .top-nav a i {
   font-size: 24px;
-  margin-left: .05em;
+  margin-left: 0.05em;
 }
 
 @media only screen and (max-width: 999px) {
@@ -70,16 +64,21 @@ app-dropdown-menu i {
 }
 
 @media (hover: hover) {
-
   .top-nav a:first-child:hover {
     background: none;
   }
 
+  .top-nav .right-item-wrapper .contact:hover {
+    color: white;
+    border-radius: 3px;
+    background-color: var(--brand-color);
+  }
+
   .bottom-nav a:hover {
     background: var(--hover);
   }
 
-  .bottom-nav .demo:hover {
+  .bottom-nav .right-item-wrapper .contact:hover {
     color: white;
     background: var(--brand-color);
   }

diff --git a/src/app/page/raw-landing-layout/home/home.component.html b/src/app/page/raw-landing-layout/home/home.component.html
@@ -5,13 +5,6 @@
         <h1>Open Template Hub</h1>
         <h6>Minimizes your effort while building a new software business with our open source GitHub micro server
           templates and responsive web UI + mobile UI templates</h6>
-        <div class="register-wrapper">
-          <a routerLink="{{URLS.maintenance}}">
-            <span>
-              Request for Demo
-            </span>
-          </a>
-        </div>
       </div>
 
       <div class="hero-content-right">