Merge pull request #15 from dasch-swiss/wip/edit

Fix styles
dasch-swiss · Nov 7, 2023 · 26b9f72 · 26b9f72
2 parents 4d7caa6 + 9294bc9
commit 26b9f72
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 48 deletions.
diff --git a/src/app/edit/date-value/date-value.component.ts b/src/app/edit/date-value/date-value.component.ts
@@ -310,9 +310,9 @@ export class DateValue {
   ],
   styles: [
       '.datecontainer {padding-top: 1.5rem;}',
-      '.calsel {width: 120px; padding-left: 2px; padding-right: 2px;}',
+      '.calsel {padding-left: 2px; padding-right: 2px;}',
       '.rangesel {width: 80px; padding-left: 2px; padding-right: 2px;}',
-      '.yearsel {width: 80px; padding-left: 2px; padding-right: 2px;}',
+      '.yearsel {width: 100px; padding-left: 2px; padding-right: 2px;}',
       '.erasel {width: 80px; padding-left: 2px; padding-right: 2px;}',
   ]
 })

diff --git a/src/app/edit/edit-book/edit-book.component.ts b/src/app/edit/edit-book/edit-book.component.ts
@@ -108,6 +108,22 @@ class BookIds {
         </button>
         <br/>
 
+        <mat-form-field [style.width.px]=400>
+          <input matInput
+                 class="full-width"
+                 placeholder="Prefix title"
+                 formControlName="prefixTitle"
+                 (input)="_handleInput('prefixTitle')">
+        </mat-form-field>
+        <button *ngIf="valIds.prefixTitle.changed" mat-mini-fab (click)="_handleUndo('prefixTitle')">
+          <mat-icon color="warn">cached</mat-icon>
+        </button>
+        <button *ngIf="valIds.prefixTitle.id !== undefined" mat-mini-fab (click)="_handleDelete('prefixTitle')">
+          <mat-icon *ngIf="!valIds.prefixTitle.toBeDeleted">delete</mat-icon>
+          <mat-icon *ngIf="valIds.prefixTitle.toBeDeleted" color="warn">delete</mat-icon>
+        </button>
+        <br/>
+
         <mat-form-field [style.width.px]=400>
           <input matInput required
                  class="full-width"
@@ -281,22 +297,6 @@ class BookIds {
         </button>
         <br/>
 
-        <mat-form-field [style.width.px]=400>
-          <input matInput
-                 class="full-width"
-                 placeholder="Prefix title"
-                 formControlName="prefixTitle"
-                 (input)="_handleInput('prefixTitle')">
-        </mat-form-field>
-        <button *ngIf="valIds.prefixTitle.changed" mat-mini-fab (click)="_handleUndo('prefixTitle')">
-          <mat-icon color="warn">cached</mat-icon>
-        </button>
-        <button *ngIf="valIds.prefixTitle.id !== undefined" mat-mini-fab (click)="_handleDelete('prefixTitle')">
-          <mat-icon *ngIf="!valIds.prefixTitle.toBeDeleted">delete</mat-icon>
-          <mat-icon *ngIf="valIds.prefixTitle.toBeDeleted" color="warn">delete</mat-icon>
-        </button>
-        <br/>
-
         <mat-form-field appearance="fill"  [style.width.px]=600>
           <mat-label>Publication date</mat-label>
           <app-knora-date-value matInput
@@ -518,6 +518,7 @@ class BookIds {
     </div>
   `,
   styles: [
+    'mat-card { margin: 2rem; padding: 1rem;}',
     '.maxw { min-width: 500px; max-width: 1000px; }',
     '.wide { width: 100%; }',
     '.ck-editor__editable_inline { min-height: 500px; }',

diff --git a/src/app/edit/edit-company/edit-company.component.ts b/src/app/edit/edit-company/edit-company.component.ts
@@ -1,15 +1,13 @@
 import {Component, Input, OnInit, Optional, Self} from '@angular/core';
 import {
-  ControlValueAccessor,
   UntypedFormArray,
   UntypedFormBuilder,
-  FormControl,
   UntypedFormGroup,
   NgControl,
   Validators
 } from '@angular/forms';
 import {ActivatedRoute} from '@angular/router';
-import {combineLatest, concat, forkJoin, Observable} from "rxjs";
+import {combineLatest, concat, Observable} from "rxjs";
 import {CompanyData, KnoraService} from '../../services/knora.service';
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {Location} from '@angular/common';
@@ -197,6 +195,7 @@ class CompanyIds {
     </div>
   `,
   styles: [
+    'mat-card { margin: 2rem; padding: 1rem;}',
     '.maxw { min-width: 500px; max-width: 1000px; }',
     '.wide { width: 100%; }',
     '.ck-editor__editable_inline { min-height: 500px; }',

diff --git a/src/app/edit/edit-lexia/edit-lexia.component.ts b/src/app/edit/edit-lexia/edit-lexia.component.ts
@@ -1,16 +1,14 @@
 import {Component, Input, OnInit, Optional, Self} from '@angular/core';
 import {
-  ControlValueAccessor,
   UntypedFormArray,
   UntypedFormBuilder,
-  FormControl,
   UntypedFormGroup,
   NgControl,
   Validators
 } from '@angular/forms';
 import {ActivatedRoute} from '@angular/router';
-import {combineLatest, concat, forkJoin, Observable} from 'rxjs';
-import {CompanyData, KnoraService, LexiaData, ListPropertyData, OptionType} from "../../services/knora.service";
+import {combineLatest, concat, Observable} from 'rxjs';
+import {KnoraService, LexiaData, ListPropertyData, OptionType} from "../../services/knora.service";
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {Location} from '@angular/common';
 import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
@@ -209,6 +207,7 @@ class LexiaIds {
   </div>
   `,
   styles: [
+    'mat-card { margin: 2rem; padding: 1rem;}',
     '.maxw { min-width: 500px; max-width: 1000px; }',
     '.wide { width: 100%; }',
     '.ck-editor__editable_inline { min-height: 500px; }',

diff --git a/src/app/edit/edit-passage/edit-passage.component.ts b/src/app/edit/edit-passage/edit-passage.component.ts
@@ -1,19 +1,15 @@
 import {Component, Input, OnInit, Optional, Self} from '@angular/core';
 import {
-  ControlValueAccessor,
   UntypedFormArray,
   UntypedFormBuilder,
-  FormControl,
   UntypedFormGroup,
   NgControl,
   Validators
 } from '@angular/forms';
 import {ActivatedRoute} from '@angular/router';
-import {combineLatest, concat, forkJoin, Observable} from 'rxjs';
+import {combineLatest, concat, Observable} from 'rxjs';
 import {
-  CompanyData,
   KnoraService,
-  LexiaData,
   ListPropertyData,
   OptionType,
   PassageData
@@ -485,7 +481,8 @@ class PassageIds {
     </div>
   `,
   styles: [
-      '.maxw { min-width: 500px; max-width: 1000px; }',
+    'mat-card { margin: 2rem; padding: 1rem;}',
+    '.maxw { min-width: 500px; max-width: 1000px; }',
     '.wide { width: 100%; }',
     '.ck-editor__editable_inline { min-height: 500px; }',
     '.full-width { width: 100%; }',

diff --git a/src/app/edit/edit-person/edit-person.component.ts b/src/app/edit/edit-person/edit-person.component.ts
@@ -1,14 +1,14 @@
 import {Component, Input, OnInit, Optional, Self} from '@angular/core';
 import {UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, NgControl, Validators} from '@angular/forms';
-import {CompanyData, KnoraService, ListPropertyData, OptionType, PersonData} from '../../services/knora.service';
+import {KnoraService, ListPropertyData, OptionType, PersonData} from '../../services/knora.service';
 import {ActivatedRoute} from '@angular/router';
 import {Location} from '@angular/common';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {DateAdapter} from '@angular/material/core';
-import {combineLatest, concat, forkJoin, Observable, of} from 'rxjs';
+import {combineLatest, concat, Observable} from 'rxjs';
 import {ConfirmationComponent, ConfirmationResult} from '../confirmation/confirmation.component';
-import {DateValue, DateValueComponent} from '../date-value/date-value.component';
+import {DateValue} from '../date-value/date-value.component';
 import {toArray} from "rxjs/operators";
 
 interface ValInfo {
@@ -250,6 +250,7 @@ class PersonIds {
     </div>
   `,
   styles: [
+    'mat-card { margin: 2rem; padding: 1rem;}',
     '.maxw { min-width: 500px; max-width: 1000px; }',
   ]
 })

diff --git a/src/app/edit/edit-venue/edit-venue.component.ts b/src/app/edit/edit-venue/edit-venue.component.ts
@@ -1,20 +1,16 @@
 import {Component, Input, OnInit, Optional, Self} from '@angular/core';
 import {
-  ControlValueAccessor,
   UntypedFormArray,
   UntypedFormBuilder,
-  FormControl,
   UntypedFormGroup,
   NgControl,
   Validators
 } from '@angular/forms';
 import {ActivatedRoute} from '@angular/router';
-import {combineLatest, forkJoin, concat, Observable} from 'rxjs';
+import {combineLatest, concat, Observable} from 'rxjs';
 import {toArray} from 'rxjs/operators';
 import {
-  CompanyData,
   KnoraService,
-  LexiaData,
   ListPropertyData,
   OptionType,
   VenueData
@@ -169,6 +165,7 @@ class VenueIds {
     </div>
   `,
   styles: [
+    'mat-card { margin: 2rem; padding: 1rem;}',
     '.maxw { min-width: 500px; max-width: 1000px; }',
     '.wide { width: 100%; }',
     '.ck-editor__editable_inline { min-height: 500px; }',

diff --git a/src/app/edit/edit.component.ts b/src/app/edit/edit.component.ts
@@ -1,14 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import {KnoraService} from '../services/knora.service';
-import {
-  ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  NgControl,
-  Validators
-} from '@angular/forms';
 import {Router} from '@angular/router';
 
 @Component({
@@ -196,6 +187,8 @@ import {Router} from '@angular/router';
     </div>
   `,
   styles: [
+      '.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); grid-gap: 1rem; margin: 2rem;}',
+      'mat-card { padding: 1rem;}'
   ]
 })
 export class EditComponent implements OnInit {