dropdown menu hover ui make-up

open-template-hub · Sep 7, 2021 · 4fad0ee · 4fad0ee
1 parent 764107b
commit 4fad0ee
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 57 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -22,8 +22,6 @@ export class AppComponent {
           pageName: item.url
         };
 
-        console.log( item.url );
-
         this.googleTagManagerService.pushTag( googleTagManagerTag );
       }
     } );

diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.html b/src/app/component/common/dropdown-menu/dropdown-menu.component.html
@@ -11,8 +11,8 @@
     </div>
 
     <div class="section-column-wrapper" [style]="'min-width: ' + (330 * calculatedColumns) + 'px;'">
-      <div class="section-column" *ngFor="let productLine of productLines; last as isLastColumn"
-           [class.section-column-right-border]="true"
+      <div class="section-column" *ngFor="let productLine of productLines; last as isLastColumn; index as i"
+           [class.section-column-right-border]="!(i == calculatedColumns - 1 || isLastColumn)"
            [class]="productLine.color ? productLine.color + '-theme' : ''"
            [style]="'max-height: ' + ((80  + (150 * calculatedRows)) + 1) + 'px;'">
         <div *ngIf="productLine.name" class="section-header">
@@ -25,7 +25,8 @@ <h4>
           </p>
         </div>
 
-        <a *ngFor="let product of productLine.products; last as isLast; first as isFirst" class="dropdown-item"
+        <a *ngFor="let product of productLine.products; last as isLast; first as isFirst"
+           class="dropdown-item"
            [class]="product.color ? product.color + '-theme' : ''"
            [routerLink]="URLS.product" [queryParams]="{productLineName: productLine.key, productName: product.key}"
            (click)="closeDropDownInternal()">

diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.scss b/src/app/component/common/dropdown-menu/dropdown-menu.component.scss
@@ -37,6 +37,14 @@
   display: flex;
   cursor: pointer;
   align-items: center;
+
+  -webkit-top-right-radius: 6px;
+  -moz-top-right-radius: 6px;
+  border-top-right-radius: 6px;
+
+  -webkit-bottom-left-radius: 4px;
+  -moz-bottom-left-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 
 .dropdown-item-logo {
@@ -163,7 +171,17 @@
 
 @media (hover: hover) {
   .dropdown-item:hover {
-    background-color: var(--brand-color-lighter-5);
+    transition: .4s all ease-in-out;
+    background-color: var(--brand-color-lighter-8);
+  }
+
+  .dropdown-item:hover img {
+    transition: .2s all ease-in-out;
+    transform: scale(1.2);
+  }
+
+  .dropdown-item:hover .dropdown-item-content > * {
+    color: var(--brand-color-darker-7);
   }
 }
 

diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.ts b/src/app/component/common/dropdown-menu/dropdown-menu.component.ts
@@ -44,7 +44,7 @@ export class DropdownMenuComponent {
     if ( this.isDropdownOpen && window.innerWidth > 999 ) {
       let wantedColumns = this.minimumColumns;
 
-      while ( wantedColumns * 330 > window.innerWidth - 255 ) {
+      while ( wantedColumns * 330 > window.innerWidth - 240 ) {
         wantedColumns = wantedColumns - 2;
       }
 

diff --git a/src/app/component/nav/common/footer/footer.component.html b/src/app/component/nav/common/footer/footer.component.html
@@ -69,6 +69,6 @@ <h2>Open Template Hub <span class="copyright">&#169; 2021</span></h2>
         </i>
       </app-ext-link>
     </div>
-    <div class="footer-version">{{' v-' + appVersion}}</div>
+    <div class="footer-version">{{' v-' + appVersion + ( environment.identity !== 'production' ? '-' + environment.identity : '')}}</div>
   </div>
 </div>
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,55 +1,35 @@
 <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()
-      "
-    >
+    <a (click)="dropdownMenuProducts.toggleDropdown(); dropdownMenuServices.closeDropdown()">
       <app-dropdown-menu
-        #dropdownMenuProducts
-        [productLines]="PRODUCT_LINES"
-        [minimumColumns]="4"
-      >
+          #dropdownMenuProducts
+          [productLines]="PRODUCT_LINES"
+          [minimumColumns]="4">
         <span>Products</span>
         <i aria-hidden="true" class="material-icons">{{
           dropdownMenuProducts.isDropdownOpen ? "expand_less" : "expand_more"
-        }}</i>
+          }}</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>
   </div>
   <div class="right-item-wrapper">
-    <a
-      class="contact"
-      routerLink="{{ URLS.maintenance }}"
-      (click)="
-        dropdownMenuProducts.closeDropdown();
-        dropdownMenuServices.closeDropdown()
-      "
-    >
+    <a class="contact"
+       routerLink="{{ URLS.maintenance }}"
+       (click)="dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()">
       <span> Contact Us </span>
     </a>
   </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
@@ -42,7 +42,8 @@ app-dropdown-menu i {
 }
 
 .top-nav .right-item-wrapper {
-  margin-right: 4em;
+  margin-right: 1em;
+  margin-left: auto;
   margin-top: 0.5em;
 }
 

diff --git a/src/app/page/raw-landing-layout/raw-landing-layout.component.html b/src/app/page/raw-landing-layout/raw-landing-layout.component.html
@@ -1,7 +1,3 @@
-<a *ngIf="environment.identity !== 'production'" [attr.data-ribbon]="environment.identity | titlecase"
-   [class]="environment.identity ? environment.identity + ' ribbon ribbon-top fixed' : ''"
-   [href]="environmentCommon.website.github.url + '/' + environmentCommon.oth.social.github + '/company-profile-ui-template'"
-   target="_blank" rel="noreferrer" title="Identity"></a>
 <div>
   <div class="raw-landing-layout-page">
     <div class="header">

diff --git a/src/app/page/splash-layout/external/external.component.html b/src/app/page/splash-layout/external/external.component.html
@@ -11,7 +11,7 @@
     </p>
     <br />
     <p>
-      {{ 'Will be redirected to: ' }}<br/><a class="inline-a green-theme">{{ href }}</a>
+      {{ 'Will be redirected to: ' }}<br/><a class="inline-a green-theme" (click)="redirect()">{{ href }}</a>
     </p>
   </div>
   <div class="external-component-button-wrapper">

diff --git a/src/environments/version.ts b/src/environments/version.ts
@@ -1 +1 @@
-export const version = '2.6.0';
+export const version = '2.6.1';
diff --git a/src/index.html b/src/index.html
@@ -13,10 +13,10 @@
   <link href="https://fonts.googleapis.com/css2?family=Ramabhadra&amp;display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
-  <link href="assets/favicons/apple-touch-icon.png?v=2_6_0" rel="apple-touch-icon">
-  <link href="assets/favicons/favicon.png?v=2_6_0" rel="shortcut icon" type="image/png">
-  <link href="assets/favicons/site.webmanifest?v=2_6_0" rel="manifest">
-  <link href="assets/favicons/safari-pinned-tab.svg?v=2_6_0" rel="mask-icon" color="#43b043">
+  <link href="assets/favicons/apple-touch-icon.png?v=2_6_1" rel="apple-touch-icon">
+  <link href="assets/favicons/favicon.png?v=2_6_1" rel="shortcut icon" type="image/png">
+  <link href="assets/favicons/site.webmanifest?v=2_6_1" rel="manifest">
+  <link href="assets/favicons/safari-pinned-tab.svg?v=2_6_1" rel="mask-icon" color="#43b043">
 
   <meta content="assets/favicons/browserconfig.xml" name="msapplication-config">
   <meta content="#43b043" name="msapplication-TileColor">

diff --git a/src/styles/other/util.scss b/src/styles/other/util.scss
@@ -6,9 +6,9 @@
 
 .rounded-box {
   -webkit-bottom-left-radius: 12px;
-  -webkit-top-right-radius: 3px;
+  -webkit-top-right-radius: 6px;
   -moz-bottom-left-radius: 12px;
-  -moz-top-right-radius: 3px;
+  -moz-top-right-radius: 6px;
   border-bottom-left-radius: 12px;
   border-top-right-radius: 6px;
 }