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

setting segments separation

Browse source 
clear separation between setting segments by adding a background
This commit is contained in:
Christopher 2025-05-11 22:22:24 -06:00
parent 45c029a50d
commit 4a3fd8a089
12 changed files with 1466 additions and 1361 deletions
Download patch file Download diff file Expand all files Collapse all files

4
UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html
View file

@ -10,7 +10,8 @@
<form [formGroup]="settingsForm">
<p class="alert alert-warning">{{t('setting-description')}} {{t('test-warning')}}</p>
<div class="row g-0 mt-2">
<div class="section">
<div class="row g-0">
@if (settingsForm.get('hostName'); as formControl) {
<app-setting-item [title]="t('host-name-label')" [subtitle]="t('host-name-tooltip')" [control]="formControl">
<ng-template #view>
@ -150,6 +151,7 @@
</app-setting-switch>
}
</div>
</div>
</form>
</ng-container>

4
UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.html
View file

@ -9,8 +9,9 @@
</div>
</div>
<div class="section">
<ng-container>
<div class="row g-0 mt-2">
<div class="row g-0">
@if(settingsForm.get('encodeMediaAs'); as formControl) {
<app-setting-item [title]="t('encode-as-label')" [subtitle]="t('encode-as-tooltip')">
<ng-template #view>
@ -63,6 +64,7 @@
</div>
</ng-container>
</div>
</form>

9
UI/Web/src/app/admin/manage-settings/manage-settings.component.html
View file

@ -10,7 +10,7 @@
<strong>{{t('notice')}}</strong> {{t('restart-required')}}
</div>
<div class="section">
<h4>{{t('networking-settings-title')}}</h4>
<ng-container>
<div class="row g-0 mt-4 mb-4">
@ -99,11 +99,12 @@
</app-setting-item>
}
</div>
</ng-container>
</div>
<div class="setting-section-break"></div>
<div class="section">
<h4>{{t('system-settings-title')}}</h4>
<ng-container>
<div class="row g-0 mt-4 mb-4">
@ -254,11 +255,12 @@
</app-setting-switch>
}
</div>
</ng-container>
</div>
<div class="setting-section-break"></div>
<div class="section">
<h4>{{t('customization-settings-title')}}</h4>
<ng-container>
<div class="row g-0 mt-4 mb-4">
@ -315,6 +317,7 @@
}
</div>
</ng-container>
</div>
</form>
</ng-container>

5
UI/Web/src/app/admin/manage-system/manage-system.component.html
View file

@ -1,5 +1,6 @@
<ng-container *transloco="let t; read: 'manage-system'">
@if (serverInfo) {
<div class="section">
<div class="mb-3">
<h3>{{t('title')}}</h3>
@ -27,10 +28,12 @@
</div>
</div>
</div>
</div>
<div class="setting-section-break"></div>
}
<div class="section">
<div class="mb-3">
<h3>{{t('more-info-title')}}</h3>
<div class="row">
@ -62,7 +65,7 @@
<div class="col"><a href="https://github.com/Kareadita/Kavita/discussions/2529" target="_blank" rel="noopener noreferrer">https://github.com/Kareadita/Kavita/discussions/</a><br/></div>
</div>
</div>
</div>
<div class="setting-section-break"></div>
<div class="mb-3">

7
UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.html
View file

@ -1,7 +1,7 @@
<ng-container *transloco="let t; read: 'manage-tasks-settings'">
@if (serverSettings) {
<form [formGroup]="settingsForm">
<div class="section">
<h4>{{t('title')}}</h4>
<ng-container>
<div class="row g-0 mt-4 mb-4">
@ -134,9 +134,11 @@
}
</div>
</ng-container>
</div>
<div class="setting-section-break"></div>
<div class="section">
<h4>{{t('adhoc-tasks-title')}}</h4>
@for(task of adhocTasks; track task.name; let idx = $index) {
@ -146,9 +148,11 @@
</app-setting-button>
</div>
}
</div>
<div class="setting-section-break"></div>
<div class="section">
<h4>{{t('recurring-tasks-title')}}</h4>
<ngx-datatable
class="bootstrap"
@ -187,6 +191,7 @@
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</form>
}
</ng-container>

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

@ -19,8 +19,34 @@ h2 {
}
}
:host ::ng-deep {
.main-container {
.container-fluid {
> div {
padding-right: unset;
.section {
background: var(--side-nav-bg-color);
border-radius: 5px;
padding: 0.9rem;
}
}
}
}
}
@media (max-width: theme.$grid-breakpoints-lg) {
:host ::ng-deep {
.main-container {
padding: 0 0 0 25px;
.container-fluid {
padding: unset;
> div {
padding-right: calc(var(--bs-gutter-x) * 0.5);
}
}
}
}
::ng-deep .content-wrapper:not(.closed) {
.scale {
width: 100% !important;
@ -28,3 +54,17 @@ h2 {
}
}
}
@media (max-width: theme.$grid-breakpoints-md) {
:host ::ng-deep {
.main-container {
padding: 0 0 0 14px;
.container-fluid {
padding: unset;
> div {
padding-right: unset;
}
}
}
}
}

44
UI/Web/src/app/statistics/_components/server-stats/server-stats.component.html
View file

@ -1,7 +1,8 @@
<ng-container *transloco="let t; read:'server-stats'">
<div class="row g-0 mt-4 mb-3 d-flex justify-content-around" *ngIf="stats$ | async as stats">
<div class="section">
<div class="row g-0 d-flex justify-content-around" *ngIf="stats$ | async as stats">
<ng-container>
<div class="col-auto mb-2">
<div class="col-auto">
<app-icon-and-title [label]="t('total-series-label')" [clickable]="false" fontClasses="fa-solid fa-book-open" [title]="t('total-series-tooltip', {count: stats.seriesCount | number})">
{{t('series-count', {num: stats.seriesCount | number})}}
</app-icon-and-title>
@ -10,7 +11,7 @@
</ng-container>
<ng-container >
<div class="col-auto mb-2">
<div class="col-auto">
<app-icon-and-title [label]="t('total-volumes-label')" [clickable]="false" fontClasses="fas fa-book" [title]="t('total-volumes-tooltip', {count: stats.volumeCount | number})">
{{t('volume-count', {num: stats.volumeCount | number})}}
</app-icon-and-title>
@ -19,7 +20,7 @@
</ng-container>
<ng-container>
<div class="col-auto mb-2">
<div class="col-auto">
<app-icon-and-title [label]="t('total-files-label')" [clickable]="false" fontClasses="fa-regular fa-file" [title]="t('total-files-tooltip', {count: stats.totalFiles | number})">
{{t('file-count', {num: stats.totalFiles | number})}}
</app-icon-and-title>
@ -28,7 +29,7 @@
</ng-container>
<ng-container>
<div class="col-auto mb-2">
<div class="col-auto">
<app-icon-and-title [label]="t('total-size-label')" [clickable]="false" fontClasses="fa-solid fa-scale-unbalanced" [title]="t('total-size-label')">
{{stats.totalSize | bytes}}
</app-icon-and-title>
@ -37,7 +38,7 @@
</ng-container>
<ng-container>
<div class="col-auto mb-2">
<div class="col-auto">
<app-icon-and-title [label]="t('total-genres-label')" [clickable]="true" fontClasses="fa-solid fa-tags" [title]="t('total-genres-tooltip', {count: stats.totalGenres | number})" (click)="openGenreList();$event.stopPropagation();">
{{t('genre-count', {num: stats.totalGenres | compactNumber})}}
</app-icon-and-title>
@ -46,7 +47,7 @@
</ng-container>
<ng-container>
<div class="col-auto mb-2">
<div class="col-auto">
<app-icon-and-title [label]="t('total-tags-label')" [clickable]="true" fontClasses="fa-solid fa-tags" [title]="t('total-tags-tooltip', {count: stats.totalTags | number})" (click)="openTagList();$event.stopPropagation();">
{{t('tag-count', {num: stats.totalTags | compactNumber})}}
</app-icon-and-title>
@ -55,7 +56,7 @@
</ng-container>
<ng-container>
<div class="col-auto mb-2">
<div class="col-auto">
<app-icon-and-title [label]="t('total-people-label')" [clickable]="true" fontClasses="fa-solid fa-user-tag" [title]="t('total-people-tooltip', {count: stats.totalPeople | number})" (click)="openPeopleList();$event.stopPropagation();">
{{t('people-count', {num: stats.totalPeople | compactNumber})}}
</app-icon-and-title>
@ -64,14 +65,18 @@
</ng-container>
<ng-container>
<div class="col-auto mb-2">
<div class="col-auto">
<app-icon-and-title [label]="t('total-read-time-label')" [clickable]="false" fontClasses="fas fa-eye" [title]="t('total-read-time-tooltip', {count: stats.totalReadingTime | number})">
{{stats.totalReadingTime | timeDuration}}
</app-icon-and-title>
</div>
</ng-container>
</div>
</div>
<div class="setting-section-break"></div>
<div class="section">
<div class="grid row g-0 pt-2 pb-2 d-flex justify-content-around">
<div class="col-auto">
<app-stat-list [data$]="releaseYears$" [title]="t('release-years-title')" [label]="t('series')"></app-stat-list>
@ -90,24 +95,45 @@
<app-stat-list [data$]="recentlyRead$" [title]="t('recently-read-title')" [image]="seriesImage" [handleClick]="openSeries"></app-stat-list>
</div>
</div>
</div>
<div class="setting-section-break"></div>
<div class="section">
<div class="row g-0 pt-2 pb-2">
<app-top-readers></app-top-readers>
</div>
</div>
<div class="setting-section-break"></div>
<div class="section">
<div class="row g-0 pt-4 pb-2">
<app-file-breakdown-stats></app-file-breakdown-stats>
</div>
</div>
<div class="setting-section-break"></div>
<div class="section">
<div class="row g-0 pt-4 pb-2">
<app-publication-status-stats></app-publication-status-stats>
</div>
</div>
<div class="setting-section-break"></div>
<div class="section">
<div class="row g-0 pt-4 pb-2">
<app-reading-activity [isAdmin]="true"></app-reading-activity>
</div>
</div>
<div class="setting-section-break"></div>
<div class="section">
<div class="row g-0 pt-4 pb-2">
<app-day-breakdown></app-day-breakdown>
</div>
</div>
</ng-container>

2
UI/Web/src/app/statistics/_components/user-stats-info-cards/user-stats-info-cards.component.html
View file

@ -1,5 +1,5 @@
<ng-container *transloco="let t; read:'user-stats-info-cards'">
<div class="row g-0 mt-4 mb-3 d-flex justify-content-around">
<div class="row g-0 d-flex justify-content-around">
<ng-container>
<div class="col-auto mb-2">
<app-icon-and-title [label]="t('total-pages-read-label')" [clickable]="true" fontClasses="fa-regular fa-file-lines"

15
UI/Web/src/app/statistics/_components/user-stats/user-stats.component.html
View file

@ -1,24 +1,37 @@
<ng-container *transloco="let t; read:'user-stats'">
<div class="vstack gap-3" *ngIf="userId">
<div class="section">
<div class="row g-0 d-flex justify-content-around">
<ng-container *ngIf="userStats$ | async as userStats">
<app-user-stats-info-cards [totalPagesRead]="userStats.totalPagesRead" [totalWordsRead]="userStats.totalWordsRead" [timeSpentReading]="userStats.timeSpentReading"
[chaptersRead]="userStats.chaptersRead" [lastActive]="userStats.lastActive" [avgHoursPerWeekSpentReading]="userStats.avgHoursPerWeekSpentReading"></app-user-stats-info-cards>
</ng-container>
</div>
</div>
<div class="setting-section-break"></div>
<div class="section">
<div class="row g-0 fixed-row">
<app-reading-activity [userId]="userId" [isAdmin]="(accountService.isAdmin$ | async) || false" [individualUserMode]="true"></app-reading-activity>
</div>
</div>
<div class="setting-section-break"></div>
<div class="section">
<div class="row g-0 fixed-row">
<app-day-breakdown [userId]="userId"></app-day-breakdown>
</div>
</div>
<div class="setting-section-break"></div>
<div class="section">
<div class="row g-0 fixed-row">
<app-stat-list [data$]="percentageRead$" [label]="t('read-percentage')" [title]="t('library-read-progress-title')"></app-stat-list>
</div>
</div>
</div>

3
UI/Web/src/app/user-settings/manage-devices/manage-devices.component.html
View file

@ -7,7 +7,7 @@
</div>
<p>{{t('description')}}</p>
<div class="section">
<ngx-datatable
class="bootstrap"
[rows]="devices"
@ -61,4 +61,5 @@
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</ng-container>

9
UI/Web/src/app/user-settings/manage-opds/manage-opds.component.html
View file

@ -5,15 +5,18 @@
<p>{{t('clients-opds-description')}}</p>
<div class="section">
<app-api-key [hideData]="true" [title]="t('clients-api-key-label')" [tooltipText]="t('clients-api-key-tooltip')" [showRefresh]="true"></app-api-key>
</div>
@if (opdsEnabled && opdsUrl) {
<div class="mt-4">
<div class="setting-section-break"></div>
<div class="section">
<div>
<app-api-key [title]="t('clients-opds-url-label')" [tooltipText]="t('clients-opds-url-tooltip') + ' ' + opdsUrlLink" [hideData]="true" [showRefresh]="false"
[transform]="makeUrl"></app-api-key>
</div>
</div>
}
</ng-container>

19
UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.html
View file

@ -5,6 +5,7 @@
@if (user) {
<form [formGroup]="settingsForm">
<div class="section">
<h4>{{t('global-settings-title')}}</h4>
<ng-container>
@ -84,11 +85,12 @@
</app-setting-switch>
</div>
</ng-container>
</div>
<div class="setting-section-break"></div>
@if (licenseService.hasValidLicense$ | async) {
<div class="section">
<h4 id="kavitaplus-heading" class="mt-3">{{t('kavitaplus-settings-title')}}</h4>
<div class="row g-0 mt-4 mb-4">
@ -115,11 +117,11 @@
</app-setting-switch>
}
</div>
<div class="setting-section-break"></div>
</div>
}
<h4 id="image-reader-heading" class="mt-3">{{t('image-reader-settings-title')}}</h4>
<div class="section">
<h4 id="image-reader-heading">{{t('image-reader-settings-title')}}</h4>
<ng-container>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('reading-direction-label')" [subtitle]="t('reading-direction-tooltip')">
@ -278,10 +280,12 @@
</app-setting-switch>
</div>
</ng-container>
</div>
<div class="setting-section-break"></div>
<h4 id="book-reader-heading" class="mt-3">{{t('book-reader-settings-title')}}</h4>
<div class="section">
<h4 id="book-reader-heading">{{t('book-reader-settings-title')}}</h4>
<ng-container>
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('tap-to-paginate-label')" [subtitle]="t('tap-to-paginate-tooltip')">
@ -439,10 +443,12 @@
</app-setting-item>
</div>
</ng-container>
</div>
<div class="setting-section-break"></div>
<h4 id="pdf-reader-heading" class="mt-3">{{t('pdf-reader-settings-title')}}</h4>
<div class="section">
<h4 id="pdf-reader-heading">{{t('pdf-reader-settings-title')}}</h4>
<ng-container>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('pdf-spread-mode-label')" [subtitle]="t('pdf-spread-mode-tooltip')">
@ -492,6 +498,7 @@
</app-setting-item>
</div>
</ng-container>
</div>
</form>
}