Skip to content
Snippets Groups Projects
Commit c5ae086e authored by zdenevuk's avatar zdenevuk
Browse files

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

added placeholder text

working on layout, WIP

wip

css imrpovements
parent f07db3c3
Branches
No related tags found
No related merge requests found
......@@ -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>
......
......@@ -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;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment