Merge pull request #202 from TAMULib/sprint10-157-conditional-mega-me…

…nu-mobile-view Sprint10 157 conditional mega menu mobile view
TAMULib · Sep 9, 2020 · 6b2a6c9 · 6b2a6c9
2 parents 1800d8d + fc535fe
commit 6b2a6c9
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, Directive, ElementRef, EventEmitter, Injector, Input, OnInit, Output, ViewChild, HostBinding } from '@angular/core';
+import { AfterContentInit, Directive, ElementRef, EventEmitter, HostBinding, Injector, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as JSON5 from 'json5';
 import { fromEvent, Observable } from 'rxjs';
@@ -9,8 +9,7 @@ import { WvrAnimationService } from '../core/wvr-animation.service';
 // tslint:disable-next-line:directive-class-suffix
 export abstract class WvrBaseComponent implements AfterContentInit, OnInit {
 
-  @HostBinding('class.wvr-bootstrap')
-  wvrBootstrap = true;
+  @HostBinding('class.wvr-bootstrap') wvrBootstrap = true;
 
   private _animationSettings: any = {};
   @Input() set animate(value: string) {
@@ -47,10 +46,15 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit {
 
   protected readonly _eRef: ElementRef;
 
+  @HostBinding('class.wvr-hidden') private get _hiddenInMobile(): boolean {
+    return this.isMobileLayout && this.hiddenInMobile;
+  }
+
+  @Input() hiddenInMobile = false;
+
   @Output() protected readonly animationEventTrigger = new EventEmitter<Event>();
 
   constructor(injector: Injector) {
-
     this._animationService = injector.get(WvrAnimationService);
     this._domSanitizer = injector.get(DomSanitizer);
     this._eRef = injector.get(ElementRef);

diff --git a/src/index.html b/src/index.html
@@ -24,7 +24,7 @@
 </head>
 
 <body>
-  <wvr-header>
+  <wvr-header hidden-in-mobile="true">
     <wvr-nav-list top-navigation>
       <wvr-nav-li>
         <wvr-dropdown
@@ -121,7 +121,7 @@
         <wvr-text value="Action 1"></wvr-text>
       </wvr-nav-li>
     </wvr-nav-list>
-    <wvr-nav-list bottom-navigation>
+    <wvr-nav-list bottom-navigation hidden-in-mobile="true">
       <wvr-nav-li href="#1" id="1">
         <wvr-text value="Example 1" text-color="black"></wvr-text>
       </wvr-nav-li>
@@ -167,13 +167,13 @@
   </wvr-header>
   <br />
 
-  <wvr-it-works animate="{animationTrigger: 'fadeToggle'}" animate-id="elem1"></wvr-it-works>
+  <wvr-it-works animate="{animationTrigger: 'fadeToggle'}" animate-id="elem1" hidden-in-mobile="true"></wvr-it-works>
 
   <div class="container index-container">
     <wvr-text value="Dropdown with Buttons" text-decoration="underline"></wvr-text><br />
-    <wvr-dropdown btn-type="primary" pacement="right">
+    <wvr-dropdown btn-type="primary" hidden-in-mobile="true">
       <wvr-dropdown-btn>
-        <wvr-text value="Primary Dropdown"></wvr-text>
+        <wvr-text value="Primary Dropdown Hidden in Mobile"></wvr-text>
       </wvr-dropdown-btn>
       <wvr-dropdown-menu>
         <wvr-dropdown-menu-item>
@@ -371,7 +371,7 @@
 
   <div class="container index-container">
     <wvr-text value="Button List" text-decoration="underline"></wvr-text><br />
-    <wvr-button btn-class="primary" btn-size="large">
+    <wvr-button btn-class="primary" btn-size="large" hidden-in-mobile="true">
       <wvr-text value="Large Size Primary Button"></wvr-text>
     </wvr-button>
     <wvr-button btn-class="secondary" btn-size="small">
@@ -441,8 +441,8 @@
 
   <div class="container index-container">
     <wvr-text value="Outline Button List" text-decoration="underline"></wvr-text><br />
-    <wvr-button btn-class="outline-primary" wvr-btn-type="button">
-      <wvr-text value="Outline Primary"></wvr-text>
+    <wvr-button btn-class="outline-primary" wvr-btn-type="button" hidden-in-mobile="true">
+      <wvr-text value="Outline Primary (Hidden in MV)"></wvr-text>
     </wvr-button>
     <wvr-button btn-class="outline-secondary" wvr-btn-type="button">
       <wvr-text value="Outline Secondary"></wvr-text>
@@ -470,13 +470,13 @@
   <div class="container index-container">
     <wvr-text value="Weaver Icon List" text-decoration="underline"></wvr-text><br />
     <wvr-icon set="custom" name="weaver-w"></wvr-icon>
-    <wvr-icon set="custom" name="weaver-w" color="#500000" size="64px"></wvr-icon>
+    <wvr-icon set="custom" name="weaver-w" color="#500000" size="64px" hidden-in-mobile="true"></wvr-icon>
     <wvr-button btn-class="primary" wvr-btn-type="button" animate="{click: 'rotateToggle'}">
       <wvr-icon set="custom" name="weaver-w" color="#500000"></wvr-icon>
       <wvr-text value="Icon Btn"></wvr-text>
     </wvr-button>
-    <wvr-button btn-class="info" wvr-btn-type="button" animate="{click: 'animationTrigger'}" animate-target="elem1">
-      <wvr-text value="Icon Btn"></wvr-text>
+    <wvr-button btn-class="info" wvr-btn-type="button" animate="{click: 'animationTrigger'}" animate-target="elem1" hidden-in-mobile="true">
+      <wvr-text value="Icon Btn to Be Hidden in Mobile View"></wvr-text>
       <wvr-icon set="feather" name="chevron-right" color="#500000" animate="{animationTrigger: 'rotateToggle'}" animate-id="elem1"></wvr-icon>
     </wvr-button>
   </div>
@@ -486,7 +486,7 @@
     <wvr-text value="Weaver List Component" text-decoration="underline"></wvr-text><br /><br />
 
     <wvr-text value="Unordered List" text-decoration="underline"></wvr-text><br />
-    <wvr-list list-type="unordered">
+    <wvr-list list-type="unordered" hidden-in-mobile="true">
       <wvr-list-item>
         <wvr-text value="Item 1"></wvr-text>
       </wvr-list-item>
@@ -607,7 +607,7 @@
     <br /><br />
 
     <wvr-text value="Group List - Custom Content" text-decoration="underline"></wvr-text><br />
-    <wvr-list list-type="group-custom-content">
+    <wvr-list list-type="group-custom-content" hidden-in-mobile="true">
       <wvr-list-item
           custom-content-item-heading="Custom Content Item Heading"
           cusom-content-heading-small-text="Custom Content Heading Small Text"
@@ -634,7 +634,7 @@
 
     <wvr-text value="Expanding / Collapsing List" text-decoration="underline"></wvr-text><br /><br />
 
-    <wvr-list list-type="unstyled">
+    <wvr-list list-type="unstyled" hidden-in-mobile="true">
       <wvr-list-item>
         <wvr-button btn-class="link" animate="{click: 'animationTrigger'}" animate-target="list2">
           <wvr-text value="Item One"></wvr-text>
@@ -674,7 +674,7 @@
 
   </div>
 
-  <wvr-footer>
+  <wvr-footer hidden-in-mobile="true">
     <wvr-nav-list aligned="CENTER">
       <wvr-nav-li>
         <wvr-text value="Action 1"></wvr-text>

diff --git a/src/styles.scss b/src/styles.scss
@@ -3,3 +3,7 @@
 .wvr-bootstrap {
   @import "~bootstrap/scss/bootstrap";
 }
+
+.wvr-hidden {
+  display: none;
+}