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