MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Finish mobile menu and user menu in mobile

This commit is contained in:
Konstantinos Triantafyllou 2022-11-30 17:49:38 +02:00
parent 49efb05026
commit 095e3340c0
5 changed files with 61 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
login/userMini.component.ts
View File

@ -9,10 +9,10 @@ import {UserManagementService} from "../services/user-management.service";
@Component({
selector: 'user-mini',
template: `
<ul *ngIf="!mobileView" class="uk-navbar-nav">
<li class="uk-parent">
<a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
<ng-container *ngIf="loggedIn">
<ul class="uk-navbar-nav">
<li>
<a *ngIf="!loggedIn && !mobileView" (click)="logIn()">Sign in</a>
<ng-container *ngIf="loggedIn && !mobileView">
<a class="login uk-icon">
<svg height="60" width="60">
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
@ -37,25 +37,48 @@ import {UserManagementService} from "../services/user-management.service";
</ul>
</div>
</ng-container>
</li>
</ul>
<ul *ngIf="mobileView" class="uk-nav uk-nav-primary uk-list uk-margin-top uk-nav-parent-icon" uk-nav>
<li [class.uk-parent]="loggedIn">
<a *ngIf="loggedIn">
{{user.fullname.toString()}}
<a *ngIf="!loggedIn && mobileView" (click)="logIn()">
<icon name="login" ratio="1.5" [flex]="true"></icon>
</a>
<a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
<ul *ngIf="loggedIn" class="uk-nav-sub">
<ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
<a *ngIf="item.route" [routerLink]="item.route" (click)="closeCanvas()">{{item.title}}</a>
<a *ngIf="!item.route && item.url" (click)="closeCanvas()" [href]="item.url" [class.custom-external]="item.target != '_self'"
[target]="item.target">{{item.title}}</a>
</li>
</ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
<li><a (click)="logOut()">Log out</a></li>
</ul>
<a *ngIf="loggedIn && mobileView" href="#account" class="login uk-icon" uk-toggle>
<svg height="30" width="30">
<circle cx="15" cy="15" r="15" stroke-width="2"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".35em" font-size="14">
{{firstLetters ? firstLetters : 'AN'}}
</text>
</svg>
</a>
<div *ngIf="loggedIn" id="account" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true">
<div class="uk-offcanvas-bar uk-padding-remove-horizontal">
<button class="uk-offcanvas-close uk-icon uk-close">
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
</button>
<div class="uk-padding uk-flex uk-flex-middle">
<div class="login">
<svg height="60" width="60" style="max-width: 60px; height: 60px;">
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="16">
{{firstLetters ? firstLetters : 'AN'}}
</text>
</svg>
</div>
<h5 class="uk-margin-small-left uk-margin-remove-bottom uk-margin-remove-top uk-text-truncate">
{{user.fullname}}
</h5>
</div>
<ul class="uk-nav uk-nav-primary uk-list uk-margin-top uk-nav-parent-icon" uk-nav>
<ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
<a *ngIf="item.route" [routerLink]="item.route" (click)="closeCanvas()">{{item.title}}</a>
<a *ngIf="!item.route && item.url" (click)="closeCanvas()" [href]="item.url" [class.custom-external]="item.target != '_self'"
[target]="item.target">{{item.title}}</a>
</li>
</ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
<li><a (click)="logOut()">Log out</a></li>
</ul>
</div>
</div>
</li>
</ul>
`

3
login/userMiniModule.module.ts
View File

@ -4,10 +4,11 @@ import { FormsModule } from '@angular/forms';
import { RouterModule } from "@angular/router";
import {UserMiniComponent} from "./userMini.component";
import {IconsModule} from "../utils/icons/icons.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule
CommonModule, FormsModule, RouterModule, IconsModule
],
declarations: [
UserMiniComponent

27
sharedComponents/navigationBar.component.html
View File

@ -1,5 +1,5 @@
<div *ngIf="showMenu && activeHeader">
<div class="uk-hidden@l">
<div class="uk-hidden@m">
<nav class="uk-navbar-container uk-navbar" uk-navbar="delay-hide: 400">
<div
*ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && activeHeader.badge">
@ -8,7 +8,7 @@
alt="BETA" style="height: 60px; width: 60px;">
</div>
<div *ngIf="!onlyTop || userMenu" class="uk-navbar-left">
<a *ngIf="!offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="" style="z-index:1000;">
<a class="uk-navbar-toggle" href="#tm-mobile" uk-toggle>
<div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
<span class="visually-hidden">toggle menu</span>
</a>
@ -17,12 +17,14 @@
<ng-container *ngTemplateOutlet="header_template; context: {mobile: true}"></ng-container>
</div>
<div *ngIf="!onlyTop || userMenu" class="uk-navbar-right">
<a *ngIf="offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="">
<div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
</a>
<ng-container *ngIf="userMenu">
<user-mini [user]="user" mobileView=true (closeCanvasEmitter)="closeCanvas(canvas)"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl
[logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini>
</ng-container>
</div>
</nav>
<div #canvas id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+(offCanvasFlip + ';'):'') + 'overlay: true'"
<div #canvas id="tm-mobile" [attr.uk-offcanvas]="'overlay: true'"
class="uk-offcanvas">
<div class="uk-offcanvas-bar uk-padding-remove-horizontal">
<button class="uk-offcanvas-close uk-icon uk-close">
@ -138,18 +140,13 @@
</li>
</ng-container>
</ng-container>
<ng-content select="[extra-s]"></ng-content>
</ng-container>
</ul>
<ng-container *ngIf="userMenu">
<user-mini [user]="user" mobileView=true (closeCanvasEmitter)="closeCanvas(canvas)"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl
[logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini>
<ng-content select="[extra-s]"></ng-content>
</ng-container>
</div>
</div>
</div>
<div id="main-menu" class="uk-visible@l">
<div id="main-menu" class="uk-visible@m">
<div *ngIf="activeHeader" [class.uk-light]='activeHeader.darkBg'>
<div class="uk-navbar-container" uk-sticky="media@m">
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && activeHeader.badge">
@ -180,7 +177,9 @@
<user-mini *ngIf="userMenu" [user]="user"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain></user-mini>
<ng-content select="[extra-m]"></ng-content>
<div class="uk-visible@l">
<ng-content select="[extra-m]"></ng-content>
</div>
</div>
<ng-template #mainMenu>
<ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">

1
sharedComponents/navigationBar.component.ts
View File

@ -48,7 +48,6 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
@Input() searchRoute: string = '/search/find';
@Input() searchPlaceHolder: string = 'Search for research results';
@Input() showLogo: boolean = true;
@Input() offCanvasFlip: boolean = false;
replaceHeader: boolean = false;
public activeHeader: Header;
keyword: string = '';

3
sharedComponents/tabs/slider-tabs.component.ts
View File

@ -40,8 +40,7 @@ declare var UIkit;
</div>
<a *ngIf="position === 'horizontal'" class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span
uk-icon="chevron-left"></span></a>
<a *ngIf="position === 'horizontal'" class="uk-position-center-right uk-blur-background"
uk-slider-item="next"><span
<a *ngIf="position === 'horizontal'" class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span
uk-icon="chevron-right"></span></a>
</div>
`,