diff options
Diffstat (limited to 'ui/src/app/app.component.html')
| -rw-r--r-- | ui/src/app/app.component.html | 43 |
1 files changed, 33 insertions, 10 deletions
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html index 2ec41dd..20a78b4 100644 --- a/ui/src/app/app.component.html +++ b/ui/src/app/app.component.html @@ -16,17 +16,40 @@ <main role="main" class="container"> <form #f="ngForm"> - <div class="input-group add-url-box"> - <input type="text" class="form-control" placeholder="Video or playlist URL" name="addUrl" [(ngModel)]="addUrl" [disabled]="addInProgress || downloads.loading"> - <div class="input-group-append"> - <select class="custom-select" name="quality" [(ngModel)]="quality" [disabled]="addInProgress || downloads.loading"> - <option *ngFor="let q of qualities" [ngValue]="q.id">{{ q.text }}</option> - </select> + <div class="container add-url-box"> + <div class="row"> + <div class="col add-url-component input-group"> + <input type="text" class="form-control" placeholder="Video or playlist URL" name="addUrl" [(ngModel)]="addUrl" [disabled]="addInProgress || downloads.loading"> + </div> + </div> + <div class="row"> + <div class="col-md-5 add-url-component"> + <div class="input-group"> + <div class="input-group-prepend"> + <span class="input-group-text">Video quality</span> + </div> + <select class="custom-select" name="quality" [(ngModel)]="quality" (change)="qualityChanged()" [disabled]="addInProgress || downloads.loading"> + <option *ngFor="let q of qualities" [ngValue]="q.id">{{ q.text }}</option> + </select> + </div> + </div> + <div class="col-md-4 add-url-component"> + <div class="input-group"> + <div class="input-group-prepend"> + <span class="input-group-text">Format</span> + </div> + <select class="custom-select" name="format" [(ngModel)]="format" (change)="formatChanged()" [disabled]="addInProgress || downloads.loading"> + <option *ngFor="let f of formats" [ngValue]="f.id">{{ f.text }}</option> + </select> + </div> + </div> + <div class="col-md-3 add-url-component"> + <button class="btn btn-primary add-url" type="submit" (click)="addDownload()" [disabled]="addInProgress || downloads.loading"> + <span class="spinner-border spinner-border-sm" role="status" id="add-spinner" *ngIf="addInProgress"></span> + {{ addInProgress ? "Adding..." : "Add" }} + </button> + </div> </div> - <button class="btn btn-primary add-url" type="submit" (click)="addDownload()" [disabled]="addInProgress || downloads.loading"> - <span class="spinner-border spinner-border-sm" role="status" id="add-spinner" *ngIf="addInProgress"></span> - {{ addInProgress ? "Adding..." : "Add" }} - </button> </div> </form> |