danvics/metube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Polish hasharr integration layout for readability.

Browse source 
Reflow the hasharr settings into a two-row arrangement with aligned controls, grouped actions/status messaging, and a cleaner profile result block to improve scanability.

Made-with: Cursor
This commit is contained in:
KennyG 2026-04-01 14:57:15 -04:00
parent 36740b00d9
commit 14e83c5cf3
2 changed files with 49 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
ui/src/app/app.html
View file

@ -428,19 +428,19 @@
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<hr class="my-3"> <hr class="my-3">
<div class="row g-3 mb-3"> <div class="row g-3 mb-3 hasharr-integration">
<div class="col-12"> <div class="col-12">
<div class="action-group-label">Hasharr Integration</div> <div class="action-group-label">Hasharr Integration</div>
</div> </div>
<div class="col-md-3"> <div class="col-12 col-md-3 d-flex align-items-center">
<div class="form-check form-switch mt-2"> <div class="form-check form-switch mb-0">
<input class="form-check-input" type="checkbox" role="switch" id="hasharrEnabled" <input class="form-check-input" type="checkbox" role="switch" id="hasharrEnabled"
name="hasharrEnabled" [(ngModel)]="hasharrEnabled" name="hasharrEnabled" [(ngModel)]="hasharrEnabled"
[disabled]="addInProgress || downloads.loading"> [disabled]="addInProgress || downloads.loading">
<label class="form-check-label" for="hasharrEnabled">Enabled</label> <label class="form-check-label" for="hasharrEnabled">Enabled</label>
</div> </div>
</div> </div>
<div class="col-md-5"> <div class="col-12 col-md-5">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Hasharr URL</span> <span class="input-group-text">Hasharr URL</span>
<input type="text" <input type="text"
@ -451,7 +451,7 @@
[disabled]="addInProgress || downloads.loading"> [disabled]="addInProgress || downloads.loading">
</div> </div>
</div> </div>
<div class="col-md-2"> <div class="col-6 col-md-2">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Service ID</span> <span class="input-group-text">Service ID</span>
<input type="number" <input type="number"
@ -462,7 +462,7 @@
[disabled]="addInProgress || downloads.loading"> [disabled]="addInProgress || downloads.loading">
</div> </div>
</div> </div>
<div class="col-md-2"> <div class="col-6 col-md-2">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Timeout</span> <span class="input-group-text">Timeout</span>
<input type="number" <input type="number"
@ -473,25 +473,29 @@
[disabled]="addInProgress || downloads.loading"> [disabled]="addInProgress || downloads.loading">
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12 col-md-7">
<div class="hasharr-action-row">
<button type="button" class="btn btn-secondary" (click)="saveHasharrSettings()"> <button type="button" class="btn btn-secondary" (click)="saveHasharrSettings()">
Save Hasharr Settings Save Hasharr Settings
</button> </button>
<button type="button" class="btn btn-outline-secondary ms-2" (click)="testHasharrService()"> <button type="button" class="btn btn-outline-secondary" (click)="testHasharrService()">
Test Service Test Service
</button> </button>
</div>
</div>
<div class="col-12 col-md-5">
<div class="hasharr-status-block">
@if (hasharrSettingsStatus) { @if (hasharrSettingsStatus) {
<span class="ms-3 text-muted">{{ hasharrSettingsStatus }}</span> <small class="text-muted d-block">{{ hasharrSettingsStatus }}</small>
} }
</div>
@if (hasharrTestStatus) { @if (hasharrTestStatus) {
<div class="col-12"> <small class="text-muted d-block">{{ hasharrTestStatus }}</small>
<small class="text-muted">{{ hasharrTestStatus }}</small>
</div>
} }
</div>
</div>
@if (hasharrTestProfile) { @if (hasharrTestProfile) {
<div class="col-12"> <div class="col-12">
<div class="small text-muted"> <div class="small text-muted hasharr-profile-result">
<div><strong>Profile Name:</strong> {{ hasharrTestProfile['name'] }}</div> <div><strong>Profile Name:</strong> {{ hasharrTestProfile['name'] }}</div>
<div><strong>Enabled:</strong> {{ hasharrTestProfile['enabled'] }}</div> <div><strong>Enabled:</strong> {{ hasharrTestProfile['enabled'] }}</div>
<div><strong>Apply Actions:</strong> {{ hasharrTestProfile['applyActions'] }}</div> <div><strong>Apply Actions:</strong> {{ hasharrTestProfile['applyActions'] }}</div>

23
ui/src/app/app.sass
View file

@ -196,3 +196,26 @@ main
&.active &.active
color: var(--bs-success-text-emphasis) color: var(--bs-success-text-emphasis)
.hasharr-integration
.input-group
margin-bottom: 0
.hasharr-action-row
display: flex
flex-wrap: wrap
gap: 0.5rem
.hasharr-status-block
min-height: 2.5rem
display: flex
flex-direction: column
justify-content: center
text-align: left
.hasharr-profile-result
margin-top: 0.25rem
padding: 0.5rem 0.75rem
border: 1px solid var(--bs-border-color)
border-radius: 0.375rem
background: var(--bs-tertiary-bg)