feat: change instance configuration display styling
parent
d15eb7ae3d
commit
67d657e8fd
|
@ -25,17 +25,21 @@
|
|||
|
||||
<fieldset class="configuration">
|
||||
<legend>Instance Configuration</legend>
|
||||
<div class="configurations__container">
|
||||
{% for config in configurations %}
|
||||
<label for="{{ config.name }}">
|
||||
<div class="configuration__container">
|
||||
<h3 class="configuration__name">{{ config.name }}</h3>
|
||||
<ul>
|
||||
<h2 class="configuration__name">{{ config.name }}</h2>
|
||||
|
||||
<p class="configuration__rent">{{ config.rent }}<span class="configuration__rent--unit">€/month</span></p>
|
||||
<ul class="configuration__spec-list">
|
||||
<li class="configuration__spec">{{ config.cpu }} vCPU</li>
|
||||
<li class="configuration__spec">{{ config.ram }} GB RAM</li>
|
||||
<li class="configuration__spec">{{ config.storage }} GB Storage</li>
|
||||
</ul>
|
||||
<input
|
||||
required
|
||||
class="configuration__option"
|
||||
type="radio"
|
||||
id="{{ config.name }}"
|
||||
name="configuration"
|
||||
|
@ -44,6 +48,7 @@
|
|||
</div>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="form__action-container">
|
||||
<button class="form__submit" type="submit">Create Instance</button>
|
||||
|
|
|
@ -534,7 +534,7 @@ footer {
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: calc(-63px + 100vh);
|
||||
flex:2;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
/* dash forms starts */
|
||||
|
@ -551,9 +551,17 @@ fieldset {
|
|||
border: none;
|
||||
}
|
||||
|
||||
.configurations__container {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
}
|
||||
|
||||
.configuration__container {
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
/*
|
||||
padding-left: 0;
|
||||
*/
|
||||
margin: 10px 20px;
|
||||
margin-left: 0;
|
||||
border: 1px solid rgb(211, 211, 211);
|
||||
|
@ -562,13 +570,32 @@ fieldset {
|
|||
}
|
||||
|
||||
.configuration__name {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.configuration__spec-list {
|
||||
list-style: "✓ " outside none;
|
||||
}
|
||||
|
||||
.configuration__spec {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.configuration__rent {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.configuration__rent--unit {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.configuration__option {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
.form__label {
|
||||
margin: 5px 0;
|
||||
|
|
Loading…
Reference in New Issue