Changed the position of the load and limit widgets [#624]

comixed · Mar 7, 2021 · b8d498f · b8d498f
1 parent 8c3dce1
commit b8d498f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 39 deletions.
diff --git a/comixed-web/src/app/library/components/comic-file-toolbar/comic-file-toolbar.component.html b/comixed-web/src/app/library/components/comic-file-toolbar/comic-file-toolbar.component.html
@@ -1,45 +1,39 @@
 <mat-toolbar>
   <mat-toolbar-row>
     <form [formGroup]="loadFilesForm" class="cx-width-100">
-      <div class="cx-comic-file-toolbar-container">
-        <div class="cx-comic-file-toolbar-growable-content">
-          <mat-form-field class="cx-width-100">
-            <input
-              id="import-directory"
-              class="cx-width-100"
-              matInput
-              formControlName="rootDirectory"
-              [placeholder]="
-                'import-comic-files.placeholder.root-directory' | translate
-              "
-              required
-            />
-            <button
-              id="load-comic-files-button"
-              mat-flat-button
-              color="primary"
-              matSuffix
-              [disabled]="!loadFilesForm.valid"
-              (click)="onLoadFiles()"
-            >
-              <mat-icon>search</mat-icon>
-              <mat-label>{{ "button.load" | translate }}</mat-label>
-            </button>
-          </mat-form-field>
-        </div>
-        <div class="cx-comic-file-toolbar-static-content">
-          <mat-form-field class="cx-width-100">
-            <select matNativeControl formControlName="maximum">
-              <option
-                *ngFor="let option of maximumOptions"
-                [value]="option.value"
-              >
-                {{ option.label | translate }}
-              </option>
-            </select>
-          </mat-form-field>
-        </div>
-      </div>
+      <mat-form-field class="cx-width-75">
+        <input
+          id="import-directory"
+          matInput
+          formControlName="rootDirectory"
+          [placeholder]="
+            'import-comic-files.placeholder.root-directory' | translate
+          "
+          required
+        />
+      </mat-form-field>
+      <mat-form-field class="cx-width-10">
+        <mat-select formControlName="maximum">
+          <mat-option
+            *ngFor="let option of maximumOptions"
+            [value]="option.value"
+          >
+            {{ option.label | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <button
+        id="load-comic-files-button"
+        class="cx-action-button"
+        mat-flat-button
+        color="primary"
+        matSuffix
+        [disabled]="!loadFilesForm.valid"
+        (click)="onLoadFiles()"
+      >
+        <mat-icon>search</mat-icon>
+        <mat-label>{{ "button.load" | translate }}</mat-label>
+      </button>
     </form>
   </mat-toolbar-row>
   <mat-toolbar-row *ngIf="comicFiles.length > 0">

diff --git a/comixed-web/src/styles.scss b/comixed-web/src/styles.scss
@@ -21,6 +21,10 @@ $cx-selected-comic-color: #ffffff;
 
 // component sizes
 
+.cx-width-10 {
+  width: 10%;
+}
+
 .cx-width-20 {
   width: 20%;
 }
@@ -29,6 +33,10 @@ $cx-selected-comic-color: #ffffff;
   width: 50%;
 }
 
+.cx-width-75 {
+  width: 75%;
+}
+
 .cx-width-80 {
   width: 80%;
 }