mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
fix header options for mobile (#1186)
* #1178 show header bar on mobile and tablet * #1178 add all options to burger icon on the right
This commit is contained in:
Mario Romano
committed by
Eugenio Romano
Eugenio Romano
parent
7eab89c5ef
commit
d768f84838
@@ -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">
|
||||
<div class="mdl-button-padding mdl-layout__header-row">
|
||||
<header class="mdl-layout__header main_header_adf" [ngClass]="{hide: isLoginPage()}">
|
||||
<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">
|
||||
</ng2-alfresco-userinfo>
|
||||
<!-- Title -->
|
||||
<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 -->
|
||||
<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>
|
||||
|
||||
<!-- Navigation. We hide it in small screens. -->
|
||||
<nav class="mdl-navigation mdl-layout--large-screen-only">
|
||||
<a class="mdl-navigation__link" data-automation-id="files" href=""
|
||||
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>
|
||||
<!-- Navigation. We hide it in small screens. -->
|
||||
<nav class="mdl-navigation mdl-layout--large-screen-only">
|
||||
<a class="mdl-navigation__link" data-automation-id="files" href=""
|
||||
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>
|
||||
|
||||
</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">
|
||||
|
||||
Reference in New Issue
Block a user