This is a combination of 4 commits. CSS improvements for list of simulations.

added placeholder text

working on layout, WIP

wip

css imrpovements

src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.html

@@ -29,7 +29,7 @@
     "
   >
     <nb-card-body class="single-sim">
-      <span>
+      <span class="text-name">
         {{ simulation.name }}
         <nb-icon
           [icon]="
@@ -53,7 +53,7 @@
         >
         </nb-icon>
       </span>
-      <span class="subtitle-2 text-description">{{
+      <span class="text-description">{{
         simulation.description
       }}</span>
       <button
@@ -65,17 +65,14 @@
       >
         selected
       </button>
-      <span
-        class="subtitle-2 text-hint"
-        [@socketStatusAnimation]="simulation.animationState"
-        (@socketStatusAnimation.done)="onAnimationEventDone($event, i)"
-        (@socketStatusAnimation.start)="onAnimationEventStart($event, i)"
-      ></span>
       <ng-template #elseBlock>
         <button nbButton status="primary" (click)="onSelect(simulation)">
           select
         </button>
       </ng-template>
+      <span class="text-duration">
+        1 day simulation
+      </span>
     </nb-card-body>
   </nb-card>
 </section>

src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.scss

@@ -100,20 +100,22 @@
       align-items: center;
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
-      span {
-        margin-right: 15px;
+      span.text-name {
         min-width: 280px;
-      }
-      span.text-hint {
-        min-width: 210px;
+        margin-right: 15px;
       }
       span.text-description {
         min-width: 220px;
+        margin-right: 15px;
       }
       button {
         margin-right: 15px;
         min-width: 112px;
       }
+      span.text-duration {
+        min-width: 220px;
+        flex-grow: 1;
+      }
     }
     span.text-hint,
     span.text-description {
@@ -153,6 +155,35 @@
   }
 }
 
+@media screen and (max-width: 1000px) {
+  .nb-card {
+    margin-top: 0.75rem !important;
+    .single-sim {
+      display: flex;
+      flex-wrap: wrap;
+      > * {
+        margin-bottom: 0.25rem;
+      }
+      span {
+        width: 100%;
+      }
+      span.text-name {
+        margin-right: 0px;
+      }
+      span.text-description {
+        margin-right: 0px;
+      }
+      button {
+        margin-right: 0px;
+      }
+      button {
+        order: 4;
+        width: 100%;
+      }
+    }
+  }
+}
+
 .icon {
   margin-left: 0.25em;
   margin-right: 0.3em;