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

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

@ -25,17 +25,21 @@
<fieldset class="configuration"> <fieldset class="configuration">
<legend>Instance Configuration</legend> <legend>Instance Configuration</legend>
<div class="configurations__container">
{% for config in configurations %} {% for config in configurations %}
<label for="{{ config.name }}"> <label for="{{ config.name }}">
<div class="configuration__container"> <div class="configuration__container">
<h3 class="configuration__name">{{ config.name }}</h3> <h2 class="configuration__name">{{ config.name }}</h2>
<ul>
<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.cpu }} vCPU</li>
<li class="configuration__spec">{{ config.ram }} GB RAM</li> <li class="configuration__spec">{{ config.ram }} GB RAM</li>
<li class="configuration__spec">{{ config.storage }} GB Storage</li> <li class="configuration__spec">{{ config.storage }} GB Storage</li>
</ul> </ul>
<input <input
required required
class="configuration__option"
type="radio" type="radio"
id="{{ config.name }}" id="{{ config.name }}"
name="configuration" name="configuration"
@ -44,6 +48,7 @@
</div> </div>
</label> </label>
{% endfor %} {% 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>

29
static/css/main.css
View File

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