self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-02-09 13:46:56 +02:00
Code Issues Releases Activity

Improving navbar responsiveness: right buttons and title collapse on smaller screens #587

Browse Source
This commit is contained in:
Patrik J. Braun 2023-02-27 23:49:12 +01:00
parent a3f7f200a9
commit 42f29ba6ad
5 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,11 +70,11 @@ app-language {
}
a.dropdown-item, button.dropdown-item {
a.dropdown-item, button.dropdown-item, div.dropdown-item {
padding: 0.3rem 1.0rem 0.3rem 0.8rem;
}
a.dropdown-item span, button.dropdown-item span {
a.dropdown-item span, button.dropdown-item span, div.dropdown-item span {
padding-right: 0.8rem;
}

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

@ -1,10 +1,10 @@
<ngx-loading-bar [includeSpinner]="false" color="#337ab7" height="3px"></ngx-loading-bar>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<nav class="navbar navbar-expand-md 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>{{title}}</strong>
<strong class="d-none d-lg-inline-block">{{title}}</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav"
@ -12,7 +12,7 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navbarCollapse" [collapse]="collapsed">
<ul class="navbar-nav me-auto mb-2 mb-md-0 text-lg-start">
<ul class="navbar-nav mb-0 text-lg-start">
<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>
@ -20,7 +20,7 @@
<li class="nav-item" *ngIf="link.type === NavigationLinkTypes.faces && isFacesAvailable()">
<a class="nav-link" [routerLink]="['/faces']" [class.active]="isLinkActive('/faces')" i18n>Faces</a>
</li>
<li class="nav-item" *ngIf="link.type === NavigationLinkTypes.gallery">
<li class="nav-item" *ngIf="link.type === NavigationLinkTypes.gallery">
<a class="nav-link"
[routerLink]="['/gallery']"
[queryParams]="queryService.getParams()" [class.active]="isLinkActive('/gallery')" i18n>Gallery</a>
@ -29,34 +29,36 @@
<a class="nav-link" [href]="link.url" [class.active]="isLinkActive(link.url)">{{link.name}}</a>
</li>
<li class="nav-item" *ngIf="link.type === NavigationLinkTypes.search">
<a class="nav-link" [routerLink]="['/search', link.SearchQuery | json]" [class.active]="isSearchActive(link.SearchQuery)">{{link.name}}</a>
<a class="nav-link" [routerLink]="['/search', link.SearchQuery | json]"
[class.active]="isSearchActive(link.SearchQuery)">{{link.name}}</a>
</li>
</ng-container>
</ul>
<div class="text-lg-end">
<div class="text-lg-end w-100">
<ul class="navbar-nav">
<ng-content select="[navbar]"></ng-content>
<li class="nav-item divider-vertical">
</li>
<ng-container *ngIf="authenticationRequired && user.value">
<li class="nav-item me-2 ms-2 navbar-text">
<li class="nav-item me-2 ms-2 navbar-text d-xl-block d-none">
<span style="white-space: nowrap;">
<span class="oi oi-person"></span> {{user.value.name}}
</span>
</li>
<li class="nav-item divider-vertical">
<li class="nav-item divider-vertical d-xl-block d-none">
</li>
</ng-container>
<li class="nav-item">
<li class="nav-item d-xl-block d-none">
<span>
<app-language class="navbar-btn" [isDark]="true"></app-language>
</span>
</li>
<li class="nav-item divider-vertical">
<li class="nav-item divider-vertical d-xl-block d-none">
</li>
<li class="nav-item dropdown ">
<li class="nav-item dropdown">
<div class="btn-group" dropdown placement="bottom"
[insideClick]="true"
*ngIf="isAdmin() || authenticationRequired">
<button id="button-alignment" dropdownToggle
type="button" class="btn btn-dark dropdown-toggle"
@ -68,6 +70,19 @@
<ul id="dropdown-alignment" *dropdownMenu
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>
<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>
</li>
</ng-container>
<ng-content select="[navbar-menu]"></ng-content>
<li role="menuitem" *ngIf="isAdmin()">
<a class="dropdown-item" [routerLink]="['/duplicates']">

2
src/frontend/app/ui/gallery/gallery.component.html
View File

@ -12,7 +12,7 @@
:{{("0" + countDown.second).slice(-2)}}
</span>
</li>
<li class="nav-item" *ngIf="showSearchBar">
<li class="nav-item w-100" *ngIf="showSearchBar">
<app-gallery-search></app-gallery-search>
</li>
<li class="nav-item" *ngIf="showShare">

4
src/frontend/app/ui/gallery/search/search.gallery.component.css
View File

@ -4,12 +4,12 @@ form {
@media screen and ( min-width: 1200px) {
.search-field {
width: 400px;
max-width: 400px;
}
}
@media screen and ( min-width: 1400px) {
.search-field {
width: 500px;
max-width: 500px;
}
}

2
src/frontend/app/ui/gallery/search/search.gallery.component.html
View File

@ -1,5 +1,5 @@
<form class="navbar-form" role="search" #SearchForm="ngForm">
<div class="input-group flex-nowrap">
<div class="input-group flex-nowrap" style="place-content: flex-end">
<app-gallery-search-field-base [(ngModel)]="rawSearchText"
(ngModelChange)="validateRawSearchText()"