diff --git a/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.html b/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.html index 61932767cb64a78e55ae7e0fa313301af6e151a5..46aa5812dd9cb9f916aad3d1d118282886e5fd74 100644 --- a/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.html +++ b/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> diff --git a/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.scss b/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.scss index 94921191dab37f1b6e86e07de4982388c79ca1ba..60062906448dfc47f23e2da9b127143ae91121f7 100644 --- a/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.scss +++ b/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;