Skip to content

Commit

Permalink
style: visual improvements on settings page
Browse files Browse the repository at this point in the history
  • Loading branch information
@4gray
4gray committed Nov 20, 2024
1 parent 94ef51d commit 737d4be
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 65 deletions.
139 changes: 75 additions & 64 deletions src/app/settings/settings.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
</button>
</div>
</div>
<mat-divider></mat-divider>
<mat-divider />
</ng-container>
<div class="row">
<div class="column">
Expand All @@ -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>
</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>
<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>
@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="vlcPlayerPath">{{
'SETTINGS.VLC_PLAYER_PATH' | translate
}}</mat-label>
<input
matInput
type="text"
id="vlcPlayerPath"
formControlName="vlcPlayerPath"
/>
</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>
}
<mat-divider />
<div class="row">
<div class="column">
{{ 'SETTINGS.LANGUAGE' | translate }}
Expand All @@ -159,7 +165,7 @@
</mat-form-field>
</div>
</div>
<mat-divider></mat-divider>
<mat-divider />
<div class="row">
<div class="column">
{{ 'SETTINGS.THEME' | translate }}
Expand All @@ -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 }}
Expand All @@ -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 }}
Expand All @@ -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>
</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>
@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>
<mat-divider></mat-divider>
}
<mat-divider />
<div class="row">
<div class="column">
{{ 'SETTINGS.VERSION' | translate }}
Expand All @@ -246,7 +257,7 @@
{{ updateMessage }}
</div>
</div>
<mat-divider></mat-divider>
<mat-divider />
<div class="row">
<div class="column">
{{ 'SETTINGS.IMPORT_EXPORT_DATA' | translate }}
Expand Down Expand Up @@ -307,7 +318,7 @@
}}</a>
</div>

<mat-divider></mat-divider>
<mat-divider />
<div class="action-buttons" align="end">
<button
mat-button
Expand Down
2 changes: 1 addition & 1 deletion src/app/settings/settings.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ button {

.settings-container {
overflow: auto;
height: calc(100vh - 140px);
height: calc(100vh - 100px);
}

.row {
Expand Down

0 comments on commit 737d4be

Please sign in to comment.