Hostea
/
dashboard
2
2
Fork 1
Code Issues 11 Pull Requests Projects Releases Wiki Activity

feat: change instance configuration display styling

wip-payments
Aravinth Manivannan 2022-06-17 23:44:05 +05:30
parent d15eb7ae3d
commit 67d657e8fd
Signed by: realaravinth
GPG Key ID: AD9F0F08E855ED88
2 changed files with 53 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
dash/templates/dash/instances/new/index.html
View File

@ -25,25 +25,30 @@
<fieldset class="configuration">
<legend>Instance Configuration</legend>
{% for config in configurations %}
<label for="{{ config.name }}">
<div class="configuration__container">
<h3 class="configuration__name">{{ config.name }}</h3>
<ul>
<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
type="radio"
id="{{ config.name }}"
name="configuration"
value="{{ config.name }}"
/>
</div>
</label>
{% endfor %}
<div class="configurations__container">
{% for config in configurations %}
<label for="{{ config.name }}">
<div class="configuration__container">
<h2 class="configuration__name">{{ config.name }}</h2>
<p class="configuration__rent">{{ config.rent }}<span class="configuration__rent--unit">&euro;/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"
value="{{ config.name }}"
/>
</div>
</label>
{% endfor %}
</div>
</fieldset>
<div class="form__action-container">
<button class="form__submit" type="submit">Create Instance</button>

31
static/css/main.css
View File

@ -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;