Fix style issue in lists (#92)

* style(list): Fix style issue in list item form * fix(list): Disable button if form is not valid * fix(list): Fix styling bug
dasch-swiss · Sep 30, 2019 · 58b9855 · 58b9855
1 parent 6f2e474
commit 58b9855
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/src/app/project/list/list-item-form/list-item-form.component.html b/src/app/project/list/list-item-form/list-item-form.component.html
@@ -8,7 +8,7 @@
     <kui-string-literal-input class="list-item-label" [placeholder]="placeholder" [value]="[]"
                               (dataChanged)="handleData($event)" [language]="language" (enter)="submitData()">
     </kui-string-literal-input>
-    <button *ngIf="!loading" mat-icon-button matSuffix [disabled]="!labels && labels?.length === 0" class="add-node-btn"
+    <button *ngIf="!loading" mat-icon-button matSuffix [disabled]="!labels && !labels?.length" class="add-node-btn"
             (click)="submitData()">
         <mat-icon>
             add

diff --git a/src/app/project/list/list-item-form/list-item-form.component.scss b/src/app/project/list/list-item-form/list-item-form.component.scss
@@ -18,5 +18,7 @@
 }
 
 .new-list-item {
+  display: inline-flex;
   margin: 8px 0 0 40px;
+  width: 640px;
 }
diff --git a/src/app/project/list/list-item/list-item.component.html b/src/app/project/list/list-item/list-item.component.html
@@ -2,7 +2,7 @@
     <div class="list-node" *ngFor="let node of list; let first = first; let last = last;">
 
         <!-- button to expand / close node -->
-        <button type="button" mat-icon-button (click)="toggleChildren(node.id)">
+        <button type="button" mat-icon-button (click)="toggleChildren(node.id)" class="">
             <mat-icon class="mat-icon-rtl-mirror">
                 {{showChildren(node.id) ? 'expand_more' : 'chevron_right'}}
             </mat-icon>
@@ -32,8 +32,9 @@
         </div>
 
         <!-- form to append new item to parent node -->
-        <app-list-item-form class="append-child-node" *ngIf="last" [parentIri]="parentIri" [projectIri]="projectIri"
-                            [projectcode]="projectcode" [language]="language" (refreshParent)="updateView($event)">
+        <app-list-item-form class="list-node append-child-node" *ngIf="last" [parentIri]="parentIri"
+                            [projectIri]="projectIri" [projectcode]="projectcode" [language]="language"
+                            (refreshParent)="updateView($event)">
         </app-list-item-form>
 
     </div>

diff --git a/src/app/project/list/list-item/list-item.component.scss b/src/app/project/list/list-item/list-item.component.scss
@@ -2,8 +2,13 @@
   margin: 12px 0 6px 0;
   display: flex;
   flex-wrap: wrap;
+  width: 640px;
 }
 
 .child-node {
   margin-left: 24px;
 }
+
+.append-child-node {
+  margin-top: 0;
+}