fix header options for mobile (#1186)

* #1178 show header bar on mobile and tablet

* #1178 add all options to burger icon on the right

demo-shell-ng2/app/app.component.css

@@ -4,6 +4,12 @@
     }
 }
 
+@media screen and (max-width: 1024px) {
+    .mdl-layout__header {
+         display: block;
+    }
+}
+
 .mdl-layout-title {
     font-size: 17px;
 }
@@ -15,3 +21,7 @@
 .mdl-button-padding {
     padding-left: 20px;
 }
+
+.hide {
+    display: none !important;
+}

demo-shell-ng2/app/app.component.html

@@ -1,82 +1,74 @@
 <!-- Always shows a header, even in smaller screens. -->
 <div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-    <div *ngIf="!isLoginPage()">
+    <header class="mdl-layout__header main_header_adf" [ngClass]="{hide: isLoginPage()}">
-        <header class="mdl-layout__header">
+        <div class="mdl-button-padding mdl-layout__header-row">
-            <div class="mdl-button-padding mdl-layout__header-row">
 
+            <!-- User Info -->
+            <ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
+            </ng2-alfresco-userinfo>
 
-                <ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
+            <!-- Title -->
-                </ng2-alfresco-userinfo>
+            <span class="mdl-layout-title">Demo Application</span>
+            <!-- Add spacer, to align navigation to the right -->
+            <div class="mdl-layout-spacer"></div>
 
+            <!-- Search bar -->
+            <search-bar (expand)="onToggleSearch($event)"></search-bar>
 
-                <!-- Title -->
+            <!-- Navigation. We hide it in small screens. -->
-                <span class="mdl-layout-title">Demo Application</span>
+            <nav class="mdl-navigation mdl-layout--large-screen-only">
-                <!-- Add spacer, to align navigation to the right -->
+                <a class="mdl-navigation__link" data-automation-id="files" href=""
-                <div class="mdl-layout-spacer"></div>
+                   routerLink="/files">DocumentList</a>
-
+                <a class="mdl-navigation__link" data-automation-id="datatable" href="" routerLink="/datatable">DataTable</a>
-                <!-- Search bar -->
+                <a class="mdl-navigation__link" data-automation-id="uploader" href="" routerLink="/uploader">Uploader</a>
-                <search-bar (expand)="onToggleSearch($event)"></search-bar>
+                <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Activiti</a>
-
+                <a class="mdl-navigation__link" data-automation-id="webscript" href="" routerLink="/webscript">Webscript</a>
-                <!-- Navigation. We hide it in small screens. -->
+                <a class="mdl-navigation__link" data-automation-id="tag" href="" routerLink="/tag">Tag</a>
-                <nav class="mdl-navigation mdl-layout--large-screen-only">
+                <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
-                    <a class="mdl-navigation__link" data-automation-id="files" href=""
+                <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
-                       routerLink="/files">DocumentList</a>
-                    <a class="mdl-navigation__link" data-automation-id="datatable" href="" routerLink="/datatable">DataTable</a>
-                    <a class="mdl-navigation__link" data-automation-id="uploader" href="" routerLink="/uploader">Uploader</a>
-                    <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Activiti</a>
-                    <a class="mdl-navigation__link" data-automation-id="webscript" href="" routerLink="/webscript">Webscript</a>
-                    <a class="mdl-navigation__link" data-automation-id="tag" href="" routerLink="/tag">Tag</a>
-                    <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
-                    <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
-                </nav>
-
-                <!-- Right aligned menu below button -->
-                <button id="demo-menu-lower-right" data-automation-id="right-action-menu"
-                        class="mdl-button mdl-js-button mdl-button--icon">
-                    <i class="material-icons">more_vert</i>
-                </button>
-
-                <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
-                    for="demo-menu-lower-right">
-                    <li class="mdl-menu__item" (click)="changeLanguage('en')">
-                        <span class="flag-icon flag-icon-gb"></span>
-                        <label tabindex="0"> English</label>
-                    </li>
-                    <li class="mdl-menu__item" (click)="changeLanguage('gr')">
-                        <span class="flag-icon flag-icon-gr"></span>
-                        <label tabindex="0"> Greek</label>
-                    </li>
-                    <li class="mdl-menu__item" (click)="changeLanguage('it')">
-                        <span class="flag-icon flag-icon-it"></span>
-                        <label tabindex="0"> Italian</label>
-                    </li>
-                    <a class="mdl-menu__item" routerLink="/about">
-                        <label tabindex="0">About</label>
-                    </a>
-                    <a *ngIf="!isLoggedIn()" class="mdl-menu__item" routerLink="/login">
-                        <label tabindex="0">Login</label>
-                    </a>
-                    <li *ngIf="isLoggedIn()" class="mdl-menu__item" (click)="onLogout($event)">
-                        <label tabindex="0">Logout</label>
-                    </li>
-                </ul>
-            </div>
-        </header>
-        <div class="mdl-layout__drawer">
-            <span class="mdl-layout-title">Components List</span>
-            <nav class="mdl-navigation">
-                <a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList Demo</a>
-                <a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable
-                    Demo</a>
-                <a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader Demo</a>
-                <a class="mdl-navigation__link" href="" routerLink="/login" (click)="hideDrawer()">Login Demo</a>
-                <a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Activiti
-                    Components Demo</a>
-                <a class="mdl-navigation__link" href="" routerLink="/webscript" (click)="hideDrawer()">Webscript</a>
-                <a class="mdl-navigation__link" href="" routerLink="/tag" (click)="hideDrawer()">Tag</a>
-                <a class="mdl-navigation__link" href="" routerLink="/settings" (click)="hideDrawer()">Settings</a>
             </nav>
+
+            <!-- Right aligned menu below button -->
+            <button id="demo-menu-lower-right" data-automation-id="right-action-menu"
+                    class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons">more_vert</i>
+            </button>
+
         </div>
+    </header>
+
+    <div class="mdl-layout__drawer">
+        <nav class="mdl-navigation">
+            <a class="mdl-navigation__link" (click)="onLogout($event)">
+                <label tabindex="0">Logout</label>
+            </a>
+        </nav>
+        <span class="mdl-layout-title">Languages</span>
+        <nav class="mdl-navigation">
+            <a class="mdl-navigation__link" (click)="changeLanguage('en')">
+                <span class="flag-icon flag-icon-gb"></span>
+                <label tabindex="0"> English</label>
+            </a>
+            <a class="mdl-navigation__link" (click)="changeLanguage('gr')">
+                <span class="flag-icon flag-icon-gr"></span>
+                <label tabindex="0"> Greek</label>
+            </a>
+            <a class="mdl-navigation__link" (click)="changeLanguage('it')">
+                <span class="flag-icon flag-icon-it"></span>
+                <label tabindex="0"> Italian</label>
+            </a>
+        </nav>
+        <span class="mdl-layout-title">Components</span>
+        <nav class="mdl-navigation">
+            <a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList</a>
+            <a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable</a>
+            <a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader</a>
+            <a class="mdl-navigation__link" href="" routerLink="/login" (click)="hideDrawer()">Login</a>
+            <a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Activiti</a>
+            <a class="mdl-navigation__link" href="" routerLink="/webscript" (click)="hideDrawer()">Webscript</a>
+            <a class="mdl-navigation__link" href="" routerLink="/tag" (click)="hideDrawer()">Tag</a>
+            <a class="mdl-navigation__link" href="" routerLink="/settings" (click)="hideDrawer()">Settings</a>
+        </nav>
     </div>
     <main class="mdl-layout__content">
         <div class="page-content">

demo-shell-ng2/app/app.component.ts

@@ -74,10 +74,12 @@ export class AppComponent {
             .subscribe(
                 () => {
                     this.router.navigate(['/login']);
+                    this.hideDrawer();
                 },
                 ($event: any) => {
                     if ($event && $event.response && $event.response.status === 401) {
                         this.router.navigate(['/login']);
+                        this.hideDrawer();
                     } else {
                         console.error('An unknown error occurred while logging out', $event);
                     }
@@ -97,6 +99,7 @@ export class AppComponent {
 
     changeLanguage(lang: string) {
         this.translate.use(lang);
+        this.hideDrawer();
     }
 
     hideDrawer() {

demo-shell-ng2/index.html

@@ -58,6 +58,12 @@
     <script>
         System.import('app').catch(function(err){ console.error(err); });
     </script>
+    <style>
+        .main_header_adf .mdl-layout__drawer-button {
+            right: 0 !important;
+            left: initial !important;
+        }
+    </style>
 </head>
 <!-- 3. Display the application -->
 <body>