style: visual improvements on settings page

This commit is contained in:
4gray committed 2024-11-20 22:44:51 +01:00
1 parent 94ef51d0ff
commit 737d4be387
2 files changed
+76 -65

No files matched your search

+75 -64
View File
@@ -66,7 +66,7 @@
</button>
</div>
</div>
<mat-divider></mat-divider>
<mat-divider />
</ng-container>
<div class="row">
<div class="column">
@@ -92,47 +92,53 @@
</mat-form-field>
</div>
</div>
<mat-divider></mat-divider>
<div class="row" *ngIf="settingsForm.value.player === 'mpv'">
<div class="column">
{{ 'SETTINGS.MPV_PLAYER_PATH_LABEL' | translate }}
<p>{{ 'SETTINGS.MPV_PLAYER_PATH_DESCRIPTION' | translate }}</p>
@if (settingsForm.value.player === 'mpv') {
<div class="row">
<div class="column">
{{ 'SETTINGS.MPV_PLAYER_PATH_LABEL' | translate }}
<p>
{{ 'SETTINGS.MPV_PLAYER_PATH_DESCRIPTION' | translate }}
</p>
</div>
<div class="column">
<mat-form-field appearance="outline">
<mat-label for="mpvPlayerPath">{{
'SETTINGS.MPV_PLAYER_PATH' | translate
}}</mat-label>
<input
matInput
type="text"
id="mpvPlayerPath"
formControlName="mpvPlayerPath"
/>
</mat-form-field>
</div>
</div>
<div class="column">
<mat-form-field appearance="outline">
<mat-label for="mpvPlayerPath">{{
'SETTINGS.MPV_PLAYER_PATH' | translate
}}</mat-label>
<input
matInput
type="text"
id="mpvPlayerPath"
formControlName="mpvPlayerPath"
/>
</mat-form-field>
}
@if (settingsForm.value.player === 'vlc') {
<div class="row">
<div class="column">
{{ 'SETTINGS.VLC_PLAYER_PATH_LABEL' | translate }}
<p>
{{ 'SETTINGS.VLC_PLAYER_PATH_DESCRIPTION' | translate }}
</p>
</div>
<div class="column">
<mat-form-field appearance="outline">
<mat-label for="vlcPlayerPath">{{
'SETTINGS.VLC_PLAYER_PATH' | translate
}}</mat-label>
<input
matInput
type="text"
id="vlcPlayerPath"
formControlName="vlcPlayerPath"
/>
</mat-form-field>
</div>
</div>
<mat-divider></mat-divider>
</div>
<div class="row" *ngIf="settingsForm.value.player === 'vlc'">
<div class="column">
{{ 'SETTINGS.VLC_PLAYER_PATH_LABEL' | translate }}
<p>{{ 'SETTINGS.VLC_PLAYER_PATH_DESCRIPTION' | translate }}</p>
</div>
<div class="column">
<mat-form-field appearance="outline">
<mat-label for="vlcPlayerPath">{{
'SETTINGS.VLC_PLAYER_PATH' | translate
}}</mat-label>
<input
matInput
type="text"
id="vlcPlayerPath"
formControlName="vlcPlayerPath"
/>
</mat-form-field>
</div>
<mat-divider></mat-divider>
</div>
}
<mat-divider />
<div class="row">
<div class="column">
{{ 'SETTINGS.LANGUAGE' | translate }}
@@ -159,7 +165,7 @@
</mat-form-field>
</div>
</div>
<mat-divider></mat-divider>
<mat-divider />
<div class="row">
<div class="column">
{{ 'SETTINGS.THEME' | translate }}
@@ -186,7 +192,7 @@
</mat-form-field>
</div>
</div>
<mat-divider></mat-divider>
<mat-divider />
<div class="row">
<div class="column">
{{ 'SETTINGS.SHOW_CAPTIONS' | translate }}
@@ -200,7 +206,7 @@
</div>
</div>
@if (isPwa || isElectron) {
<mat-divider></mat-divider>
<mat-divider />
<div class="row">
<div class="column">
{{ 'SETTINGS.REMOTE_CONTROL' | translate }}
@@ -216,26 +222,31 @@
</div>
</div>
}
<mat-divider></mat-divider>
<div class="row" *ngIf="settingsForm.value.remoteControl === true">
<div class="column">
{{ 'SETTINGS.REMOTE_CONTROL_PORT' | translate }}
<p>
{{ 'SETTINGS.REMOTE_CONTROL_PORT_DESCRIPTION' | translate }}
</p>
@if (settingsForm.value.remoteControl === true) {
<mat-divider />
<div class="row">
<div class="column">
{{ 'SETTINGS.REMOTE_CONTROL_PORT' | translate }}
<p>
{{
'SETTINGS.REMOTE_CONTROL_PORT_DESCRIPTION'
| translate
}}
</p>
</div>
<div class="column" style="margin-right: 10px">
<mat-form-field appearance="outline" class="full-width">
<input
matInput
type="text"
id="remoteControlPort"
formControlName="remoteControlPort"
/>
</mat-form-field>
</div>
</div>
<div class="column" style="margin-right: 10px">
<mat-form-field appearance="outline" class="full-width">
<input
matInput
type="text"
id="remoteControlPort"
formControlName="remoteControlPort"
/>
</mat-form-field>
</div>
</div>
<mat-divider></mat-divider>
}
<mat-divider />
<div class="row">
<div class="column">
{{ 'SETTINGS.VERSION' | translate }}
@@ -246,7 +257,7 @@
{{ updateMessage }}
</div>
</div>
<mat-divider></mat-divider>
<mat-divider />
<div class="row">
<div class="column">
{{ 'SETTINGS.IMPORT_EXPORT_DATA' | translate }}
@@ -307,7 +318,7 @@
}}</a>
</div>
<mat-divider></mat-divider>
<mat-divider />
<div class="action-buttons" align="end">
<button
mat-button
+1 -1
View File
@@ -5,7 +5,7 @@ button {
.settings-container {
overflow: auto;
height: calc(100vh - 140px);
height: calc(100vh - 100px);
}
.row {