fix: Improve spacing for new data volume config

Adjusts styles so that new data volumes in the "new server" view display their fields correctly.
StatCan · Oct 7, 2020 · 3b8f8df · 3b8f8df
1 parent 80401dd
commit 3b8f8df
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/frontend/src/app/resource-form/form-data-volumes/form-data-volumes.component.html b/frontend/src/app/resource-form/form-data-volumes/form-data-volumes.component.html
@@ -17,7 +17,7 @@ <h3>
     <mat-icon>add</mat-icon>ADD VOLUME
   </button>
 
-  <div *ngFor="let vol of datavols; let i = index" class="volume-wrapper">
+  <div *ngFor="let vol of datavols; let i = index" class="delible-volume">
     <app-volume
       [volume]="vol"
       [notebookName]="parentForm.get('name').value"

diff --git a/frontend/src/app/resource-form/form-data-volumes/form-data-volumes.component.scss b/frontend/src/app/resource-form/form-data-volumes/form-data-volumes.component.scss
@@ -1,17 +1,15 @@
 // Data Volumes with the Delete button
-.volume-wrapper {
+.delible-volume {
   display: flex;
   width: 100%;
 }
 
-.volume-wrapper > app-volume {
-  flex: 1 1 0px;
+.delible-volume > app-volume {
   min-width: initial;
   max-width: 93%;
 }
 
-.volume-wrapper > .del-btn {
-  flex: 1 1 0px;
+.delible-volume > .del-btn {
   margin-top: 0.8rem;
   margin-left: 1.5rem;
   width: 7%;

diff --git a/frontend/src/app/resource-form/volume/volume.component.scss b/frontend/src/app/resource-form/volume/volume.component.scss
@@ -20,12 +20,16 @@
 
 .volume-wrapper {
   display: flex;
-  margin-left: -0.5rem;
-  margin-right: -0.5rem;
 }
 
 .volume-wrapper > * {
   flex: 1 1 0px;
   padding-right: 0.5rem;
   padding-left: 0.5rem;
 }
+.volume-wrapper > *:first-child {
+  padding-left: 0;
+}
+.volume-wrapper > *:last-child {
+  padding-right: 0;
+}