AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX Pass 5 (#3128)

Browse source 
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joe Milazzo 2024-08-24 19:23:57 -05:00 • committed by GitHub
parent dbc4f35107
commit c93af3e56f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
126 changed files with 1989 additions and 2877 deletions
Download patch file Download diff file Expand all files Collapse all files

5
UI/Web/src/app/settings/_components/setting-button/setting-button.component.html
View file

@ -1,12 +1,7 @@
<ng-container *transloco="let t;">
<div class="container-fluid">
<ng-content></ng-content>
@if (subtitle) {
<div class="description text-muted" [innerHTML]="subtitle | safeHtml"></div>
}

6
UI/Web/src/app/settings/_components/setting-item/setting-item.component.html
View file

@ -1,7 +1,7 @@
<ng-container *transloco="let t;">
<div class="container-fluid">
<div class="row g-0">
<div class="col-11">
<div class="col-10">
<h6 class="section-title">
@if(labelId) {
<label class="reset-label" [for]="labelId">{{title}}</label>
@ -13,9 +13,9 @@
}
</h6>
</div>
<div class="col-1">
<div class="col-2 text-end align-self-end justify-content-end">
@if (showEdit) {
<button class="btn btn-text btn-sm" (click)="toggleEditMode()" [disabled]="!canEdit">
<button type="button" class="btn btn-text btn-sm" (click)="toggleEditMode()" [disabled]="!canEdit">
{{isEditMode ? t('common.close') : (editLabel || t('common.edit'))}}
</button>
}

6
UI/Web/src/app/settings/_components/setting-title/setting-title.component.html
View file

@ -1,15 +1,15 @@
<ng-container *transloco="let t;">
<div class="container-fluid">
<div class="row g-0 mb-2">
<div class="col-11">
<div class="col-10">
<h6 class="section-title" [id]="id || title">{{title}}
@if (titleExtraRef) {
<ng-container [ngTemplateOutlet]="titleExtraRef"></ng-container>
}
</h6>
</div>
<div class="col-1">
<button class="btn btn-text btn-sm" (click)="toggleViewMode()" [disabled]="!canEdit">{{isEditMode ? t('common.close') : t('common.edit')}}</button>
<div class="col-2 text-end align-self-end justify-content-end">
<button type="button" class="btn btn-text btn-sm" (click)="toggleViewMode()" [disabled]="!canEdit">{{isEditMode ? t('common.close') : t('common.edit')}}</button>
</div>
</div>
</div>

28
UI/Web/src/app/settings/_components/settings/settings.component.html
View file

@ -34,7 +34,7 @@
@defer (when fragment === SettingsTabId.Users; prefetch on idle) {
@if (fragment === SettingsTabId.Users) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-manage-users></app-manage-users>
</div>
}
@ -42,7 +42,7 @@
@defer (when fragment === SettingsTabId.Libraries; prefetch on idle) {
@if (fragment === SettingsTabId.Libraries) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-manage-library></app-manage-library>
</div>
}
@ -50,7 +50,7 @@
@defer (when fragment === SettingsTabId.MediaIssues; prefetch on idle) {
@if (fragment === SettingsTabId.MediaIssues) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-manage-media-issues></app-manage-media-issues>
</div>
}
@ -58,7 +58,7 @@
@defer (when fragment === SettingsTabId.System; prefetch on idle) {
@if (fragment === SettingsTabId.System) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-manage-system></app-manage-system>
</div>
}
@ -66,7 +66,7 @@
@defer (when fragment === SettingsTabId.Statistics; prefetch on idle) {
@if (fragment === SettingsTabId.Statistics) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-server-stats></app-server-stats>
</div>
}
@ -74,7 +74,7 @@
@defer (when fragment === SettingsTabId.Tasks; prefetch on idle) {
@if (fragment === SettingsTabId.Tasks) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-manage-tasks-settings></app-manage-tasks-settings>
</div>
}
@ -82,7 +82,7 @@
@defer (when fragment === SettingsTabId.KavitaPlus; prefetch on idle) {
@if (fragment === SettingsTabId.KavitaPlus) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-manage-kavitaplus></app-manage-kavitaplus>
</div>
}
@ -114,7 +114,7 @@
@defer (when fragment === SettingsTabId.Customize; prefetch on idle) {
@if (fragment === SettingsTabId.Customize) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-manage-customization></app-manage-customization>
</div>
}
@ -130,7 +130,7 @@
@defer (when fragment === SettingsTabId.Theme; prefetch on idle) {
@if (fragment === SettingsTabId.Theme) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-theme-manager></app-theme-manager>
</div>
}
@ -138,7 +138,7 @@
@defer (when fragment === SettingsTabId.Devices; prefetch on idle) {
@if (fragment === SettingsTabId.Devices) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-manage-devices></app-manage-devices>
</div>
}
@ -146,7 +146,7 @@
@defer (when fragment === SettingsTabId.UserStats; prefetch on idle) {
@if (fragment === SettingsTabId.UserStats) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-user-stats></app-user-stats>
</div>
}
@ -154,7 +154,7 @@
@defer (when fragment === SettingsTabId.CBLImport; prefetch on idle) {
@if (fragment === SettingsTabId.CBLImport) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-import-cbl></app-import-cbl>
</div>
}
@ -162,7 +162,7 @@
@defer (when fragment === SettingsTabId.Scrobbling; prefetch on idle) {
@if(hasActiveLicense && fragment === SettingsTabId.Scrobbling) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-manage-scrobling></app-manage-scrobling>
</div>
}
@ -170,7 +170,7 @@
@defer (when fragment === SettingsTabId.MALStackImport; prefetch on idle) {
@if(hasActiveLicense && fragment === SettingsTabId.MALStackImport) {
<div class="col-md-12">
<div class="scale col-md-12">
<app-import-mal-collection></app-import-mal-collection>
</div>
}

6
UI/Web/src/app/settings/_components/settings/settings.component.scss
View file

@ -2,3 +2,9 @@ h2 {
color: white;
font-weight: bold;
}
::ng-deep .content-wrapper:not(.closed) {
.scale {
width: calc(100dvw - 200px) !important;
}
}