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"> <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">&euro;/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>

31
static/css/main.css
View File

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