xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

Improving top menu responsiveness. Fixing search bar position and collapse #587

Browse Source
This commit is contained in:
Patrik J. Braun 2023-03-01 23:06:42 +01:00
parent 15433b7c57
commit 117d9e3093
2 changed files with 50 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/frontend/app/ui/frame/frame.component.css
View File

@ -6,24 +6,7 @@ nav {
margin-bottom: 20px;
}
ng2-slim-loading-bar {
/* display: block; */
z-index: 999999;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.container {
width: 100%;
}
.admin-link {
padding-bottom: 0;
padding-left: 0;
font-size: 18px;
}
.divider-vertical:first-child {
display: none;
@ -39,35 +22,11 @@ ng2-slim-loading-bar {
border-left-color: #3d3d3d;
}
@media (max-width: 767px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
.navbar-text {
margin-left: 0;
}
}
@media (min-width: 767px) {
.navbar-text {
margin-left: 0;
}
}
.navbar-badge {
border-radius: 1rem !important;
margin-left: -10px;
}
app-language {
display: block;
}
.navbar-expand .navbar-nav .nav-link {
padding-right: 1.0rem;
padding-left: 1.0rem;
}
a.dropdown-item, button.dropdown-item, div.dropdown-item {

79
src/frontend/app/ui/frame/frame.component.html
View File

@ -1,29 +1,13 @@
<ngx-loading-bar [includeSpinner]="false" color="#337ab7" height="3px"></ngx-loading-bar>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" [routerLink]="['/gallery']"
[queryParams]="queryService.getParams()">
<img src="assets/icon_inv.png" width="30" height="30" class="d-inline-block align-top" alt="">
<strong class="d-none d-lg-inline-block">{{title}}</strong>
</a>
<div class="d-md-none flex-nowrap ">
<ul class="navbar-nav flex-row ">
<li class="nav-item w-100" *ngIf="showSearch">
<app-gallery-search></app-gallery-search>
</li>
<li class="nav-item" *ngIf="showShare">
<app-gallery-share></app-gallery-share>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation" (click)="collapsed = !collapsed">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navbarCollapse" [collapse]="collapsed">
<ul class="navbar-nav mb-0 me-2 text-lg-start">
<ul class="navbar-nav mb-0 me-2 text-lg-start d-none d-md-flex">
<ng-container *ngFor="let link of navbarLinks">
<li class="nav-item" *ngIf="link.type === NavigationLinkTypes.albums && isAlbumsAvailable()">
<a class="nav-link" [routerLink]="['/albums']" [class.active]="isLinkActive('/albums')" i18n>Albums</a>
@ -47,14 +31,16 @@
</ul>
<div class="text-lg-end w-100">
<ul class="navbar-nav">
<li class="flex-grow-1"></li>
<ng-content select="[navbar]"></ng-content>
<li class="nav-item w-100 d-none d-md-block" *ngIf="showSearch">
<li class="nav-item w-100" *ngIf="showSearch">
<app-gallery-search></app-gallery-search>
</li>
<li class="nav-item d-none d-md-block" *ngIf="showShare">
<li class="nav-item" *ngIf="showShare">
<app-gallery-share></app-gallery-share>
</li>
<li class="nav-item divider-vertical">
<li class="nav-item divider-vertical d-xl-block d-none"
*ngIf="authenticationRequired && user.value && showShare">
</li>
<ng-container *ngIf="authenticationRequired && user.value">
<li class="nav-item me-2 ms-2 navbar-text d-xl-block d-none">
@ -87,17 +73,52 @@
class="dropdown-menu dropdown-menu-right"
role="menu" aria-labelledby="button-alignment">
<li role="menuitem" class="text-center d-xl-none">
<app-language class="navbar-btn" [isDark]="false"></app-language>
<li role="menuitem" class="d-xl-none">
<div style="white-space: nowrap;" class="dropdown-item">
<ng-container *ngIf="authenticationRequired && user.value && false">
<span class="oi oi-person"></span>{{user.value.name}}
</ng-container>
<app-language class="navbar-btn d-inline-block" [isDark]="false"></app-language>
</div>
</li>
<ng-container *ngIf="authenticationRequired && user.value">
<li role="menuitem" class="d-xl-none">
<div style="white-space: nowrap;" class="dropdown-item">
<span class="oi oi-person"></span>
{{user.value.name}}
</div>
<hr class="d-xl-none"/>
<ng-container *ngFor="let link of navbarLinks">
<li class="nav-item d-md-none"
*ngIf="link.type === NavigationLinkTypes.albums && isAlbumsAvailable()">
<a class="dropdown-item" [routerLink]="['/albums']" [class.active]="isLinkActive('/albums')">
<span class="oi oi-grid-two-up"></span>
<ng-container i18n>Albums</ng-container>
</a>
</li>
<li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.faces && isFacesAvailable()">
<a class="dropdown-item" [routerLink]="['/faces']" [class.active]="isLinkActive('/faces')">
<span class="oi oi-people"></span>
<ng-container i18n>Faces</ng-container>
</a>
</li>
<li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.gallery">
<a class="dropdown-item"
[routerLink]="['/gallery']"
[queryParams]="queryService.getParams()" [class.active]="isLinkActive('/gallery')">
<span class="oi oi-image"></span>
<ng-container i18n>Gallery</ng-container>
</a>
</li>
<li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.url">
<a class="dropdown-item" [href]="link.url" [class.active]="isLinkActive(link.url)">
<span class="oi oi-external-link"></span>
{{link.name}}
</a>
</li>
<li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.search">
<a class="dropdown-item" [routerLink]="['/search', link.SearchQuery | json]"
[class.active]="isSearchActive(link.SearchQuery)">
<span class="oi oi-link-intact"></span>
{{link.name}}
</a>
</li>
</ng-container>
<hr class="d-md-none"/>
<ng-content select="[navbar-menu]"></ng-content>
<li role="menuitem" *ngIf="isAdmin()">