Merge pull request #450 from tiwariav/task/3695/vm_list_design

task/3695 new design for hosting/my-virtual-machines
This commit is contained in:
Arvind Tiwari 2017-08-20 03:00:52 +05:30 committed by GitHub
commit fb82ef6018
7 changed files with 320 additions and 113 deletions

View file

@ -8,7 +8,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: PACKAGE VERSION\n" "Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \n" "Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2017-08-11 01:16+0530\n" "POT-Creation-Date: 2017-08-16 04:19+0530\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n" "Language-Team: LANGUAGE <LL@li.org>\n"
@ -435,17 +435,17 @@ msgstr "Sind Sie sicher, dass Sie ihre virtuelle Maschine beenden wollen "
msgid "Virtual Machines" msgid "Virtual Machines"
msgstr "Virtuelle Maschinen" msgstr "Virtuelle Maschinen"
msgid "Create VM" msgid "To create a new virtual machine, click \"Create VM\""
msgstr "Neue VM"
msgid "ID"
msgstr "" msgstr ""
msgid "Ipv4" msgid "CREATE VM"
msgstr "IPv4" msgstr "NEUE VM"
msgid "Ipv6" msgid "Page"
msgstr "IPv6" msgstr ""
msgid "of"
msgstr ""
msgid "login" msgid "login"
msgstr "einloggen" msgstr "einloggen"
@ -482,6 +482,12 @@ msgid ""
"contact Data Center Light Support." "contact Data Center Light Support."
msgstr "" msgstr ""
#~ msgid "Ipv4"
#~ msgstr "IPv4"
#~ msgid "Ipv6"
#~ msgstr "IPv6"
#~ msgid "Close" #~ msgid "Close"
#~ msgstr "Schliessen" #~ msgstr "Schliessen"

View file

@ -162,29 +162,75 @@
/* ========= */ /* ========= */
@media(min-width: 320px) { @media(min-width: 320px) {
.modal:before { .modal:before {
content: ''; content: '';
display: inline-block; display: inline-block;
height: 100%; height: 100%;
vertical-align: middle; vertical-align: middle;
margin-right: -4px; margin-right: -4px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.modal-dialog { .modal-dialog {
/* width: 520px; */ /* width: 520px; */
margin: 15px auto; margin: 15px auto;
} }
} }
.modal { .modal {
text-align: center; text-align: center;
} }
.modal-dialog { .modal-dialog {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
} }
.un-icon {
width: 15px;
height: 15px;
opacity: 0.5;
margin-top: -1px;
}
.css-plus {
position: relative;
width: 16px;
height: 20px;
display: inline-block;
vertical-align: middle;
/* top: -1px; */
}
.css-plus + span {
vertical-align: middle;
}
.css-plus:before {
content: '';
width: 10px;
height: 2px;
background: #f6f7f9;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.css-plus:after {
content: '';
width: 2px;
height: 10px;
background: #f6f7f9;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

View file

@ -228,3 +228,156 @@
float: left !important; float: left !important;
} }
} }
/* New styles */
.dashboard-container-head {
padding: 0 8px;
}
.dashboard-title-thin {
font-weight: 300;
font-size: 32px;
}
.dashboard-title-thin .un-icon {
height: 34px;
margin-right: 5px;
margin-top: -1px;
width: 20px;
}
.dashboard-subtitle {
font-weight: 300;
margin-bottom: 25px;
}
.btn-vm {
background: #1596DA;
color: #fff;
font-weight: 400;
letter-spacing: 0.8px;
border-radius: 3px;
padding-bottom: 7px;
border: 2px solid #1596DA;
}
.btn-vm:hover, .btn-vm:focus {
color: #1596DA;
background: #fff;
}
.btn-vm:hover .css-plus:after,
.btn-vm:focus .css-plus:after,
.btn-vm:hover .css-plus:before,
.btn-vm:focus .css-plus:before {
background: #1596DA;
}
.btn-vm-detail {
background: #3770CC;
color: #fff;
font-weight: 400;
letter-spacing: 0.6px;
font-size: 14px;
border-radius: 3px;
border: 2px solid #3770CC;
padding: 4px 20px;
/* padding-bottom: 7px; */
}
.btn-vm-detail:hover, .btn-vm-detail:focus {
background: #fff;
color: #3770CC;
}
.vm-status, .vm-status-active, .vm-status-failed {
font-weight: 600;
}
.vm-status-active {
color: #4A90E2;
}
.vm-status-failed {
color: #eb4d5c;
}
@media (min-width:768px) {
.dashboard-subtitle {
display: flex;
justify-content: space-between;
font-size: 16px;
}
}
@media (max-width:767px) {
.dashboard-title-thin {
font-size: 22px;
}
.dashboard-title-thin .un-icon {
height: 20px;
width: 18px;
margin-top: -3px;
}
.dashboard-subtitle p {
width: 200px;
}
}
.table-switch {
color: #555;
}
.table-switch > tbody > tr > td {
padding: 12px 8px;
}
@media (min-width: 768px) {
.table-switch > tbody > tr > td:nth-child(1) {
padding-right: 45px;
}
.table-switch > tbody > tr:last-child > td {
border-bottom: 1px solid #ddd;
}
}
.table-switch .un-icon {
margin-left: 5px;
}
@media (max-width:767px) {
.dashboard-subtitle {
margin-bottom: 15px;
}
.table-switch .un-icon {
float: right;
margin-top: 0;
}
.table-switch thead {
display: none;
}
.table-switch tbody tr {
display: block;
position: relative;
border-top: 1px solid #ddd;
/* margin-top: 15px; */
padding-top: 5px;
padding-bottom: 15px;
}
.table-switch tbody tr:last-child {
border-bottom: 1px solid #ddd;
}
.table-switch tbody tr td {
display: block;
padding-top: 28px;
padding-bottom: 6px;
position: relative;
border: 0;
}
.table-switch td:before {
content: attr(data-header);
font-weight: 600;
position: absolute;
top: 5px;
}
.table-switch .last-td {
position: absolute;
bottom: 20px;
right: 0;
}
}

View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><path d="M691,160.8V10H269.5C206.3,72.6,143.1,135.2,80,197.8v641.4h227.9V990H920V160.8H691z M269.5,64.4v134.4H133.1C178.5,154,224,109.2,269.5,64.4z M307.9,801.2H117.5V236.8h190.5V47.9h344.5v112.9h-154c-63.5,62.9-127,125.9-190.5,188.8V801.2z M499.5,215.2v134.5H363.1v-1c45.1-44.5,90.2-89,135.3-133.5L499.5,215.2z M881.5,952h-535V386.6H538V198.8h343.5V952z"/></g>
</svg>

After

Width:  |  Height:  |  Size: 846 B

View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><path d="M724.6,224.4c0,28.2,22.9,51,51,51s51-22.9,51-51c0-28.2-22.9-51-51-51S724.6,196.2,724.6,224.4z M724.6,551c0,28.2,22.9,51,51,51s51-22.9,51-51c0-28.2-22.9-51-51-51S724.6,522.9,724.6,551L724.6,551z M10,683.7c0,45.1,36.5,81.7,81.7,81.7h347.1v56.4c-10,6.7-18.6,15.3-25.3,25.3l-250.3,0c-28.2,0-51,22.9-51,51s22.9,51,51,51h250.3c16.5,24.7,44.5,40.8,76.4,40.8c31.8,0,59.8-16.1,76.4-40.8h270.7c28.2,0,51-22.9,51-51s-22.9-51-51-51H566.2c-6.7-10-15.3-18.6-25.3-25.3v-56.3h367.5c45.1,0,81.7-36.5,81.7-81.7V91.7c0-45.1-36.5-81.7-81.7-81.7H91.7C46.5,10,10,46.5,10,91.7L10,683.7L10,683.7z M157,112.1h686c24.9,0,44.9,20,44.9,44.9v134.7c0,24.9-20,44.9-44.9,44.9H157c-24.9,0-44.9-20-44.9-44.9V157C112.1,132.1,132.1,112.1,157,112.1L157,112.1L157,112.1z M157,438.7h686c24.9,0,44.9,20,44.9,44.9v134.7c0,24.9-20,44.9-44.9,44.9H157c-24.9,0-44.9-20-44.9-44.9V483.7C112.1,458.8,132.1,438.7,157,438.7L157,438.7L157,438.7z"/></g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -77,7 +77,7 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<h4 class="modal-title" id="ModalLabel_Public_Key">{% trans "Public SSH key" %}</h4> <h4 class="modal-title" id="ModalLabel_Public_Key">{% trans "Public SSH Key" %}</h4>
<p class="key_contain" style="margin-top: 10px;">{{ user_key.public_key }}</p> <p class="key_contain" style="margin-top: 10px;">{{ user_key.public_key }}</p>
<div class="modal-footer"> <div class="modal-footer">
</div> </div>

View file

@ -1,89 +1,77 @@
{% extends "hosting/base_short.html" %} {% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 i18n %} {% load staticfiles bootstrap3 i18n %}
{% block content %} {% block content %}
<div> <div class="dashboard-container">
<div class="dashboard-container"> <div class="dashboard-container-head">
<div class="row"> <h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/vm.svg' %}" class="un-icon"> {% trans "Virtual Machines" %}</h3>
<div class="col-xs-12 container-table"> {% if messages %}
<table class="table borderless table-hover"> <div class="alert alert-warning">
<h3 class="pull-left"><i class="fa fa-server fa-separate" aria-hidden="true"></i> {% trans "Virtual Machines"%}</h3> {% for message in messages %}
<div class="col-md-12"> <span>{{ message }}</span>
<br/> {% endfor %}
{% if messages %} </div>
<div class="alert alert-warning"> {% endif %}
{% for message in messages %} {% if not error %}
<span>{{ message }}</span> <div class="dashboard-subtitle">
{% endfor %} <p>{% trans 'To create a new virtual machine, click "Create VM"' %}</p>
</div> <div class="text-right">
{% endif %} <a class="btn btn-vm" href="{% url 'hosting:create_virtual_machine' %}"><span class="css-plus"></span> <span>{% trans "CREATE VM" %}</span></a>
</div> </div>
{% if not error %} </div>
<p class="pull-right btn-create-vm"> {% endif %}
<a class="btn btn-success" href="{% url 'hosting:create_virtual_machine' %}" >{% trans "Create VM"%} </a> </div>
</p>
<br/>
<thead> {% if not error %}
<tr> <table class="table table-switch">
<th>{% trans "ID"%}</th> <thead>
<th>{% trans "Ipv4"%}</th> <tr>
<th>{% trans "Ipv6"%}</th> <th>ID</th>
<th>{% trans "Status"%}</th> <th>IPv4</th>
<th></th> <th>IPv6</th>
</tr> <th>{% trans "Status" %}</th>
</thead> <th></th>
<tbody> </tr>
{% for vm in vms %} </thead>
<tr> <tbody>
<td scope="row">{{vm.vm_id}}</td> {% for vm in vms %}
{% if vm.ipv6 %} <tr>
<td>{{vm.ipv4}}</td> <td data-header="ID">{{vm.vm_id}}</td>
{% if vm.ipv6 %}
<td>{{vm.ipv6}}</td> <td data-header="IPv4">{{vm.ipv4}}</td>
<td data-header="IPv6">{{vm.ipv6}}</td>
{% endif %}
<td data-header="{% trans 'Status' %}">
{% if vm.state == 'ACTIVE' %}
<span class="vm-status-active"><strong>{{vm.state|title}}</strong></span>
{% elif vm.state == 'FAILED' %}
<span class="vm-status-failed"><strong>{{vm.state|title}}</strong></span>
{% else %}
<span class="vm-status"><strong>{{vm.state|title}}</strong></span>
{% endif %} {% endif %}
</td>
<td class="text-right last-td">
<a class="btn btn-vm-detail" href="{% url 'hosting:virtual_machines' vm.vm_id %}">{% trans "View Detail" %}</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
<td> {% if is_paginated %}
<div class="pagination">
{% if vm.state == 'ACTIVE' %} <span class="page-links">
<span class="h3 label label-success"><strong> {{vm.state}}</strong></span> {% if page_obj.has_previous %}
{% elif vm.state == 'FAILED' %} <a href="{{request.path}}?page={{ page_obj.previous_page_number }}">{% trans "previous" %}</a>
<span class="h3 label label-danger"><strong>{{vm.state}}</strong></span>
{% else %}
<span class="h3 label label-warning"><strong>{{vm.state}}</strong></span>
{% endif %}
</td>
<td>
<button type="button" class="btn btn-default"><a
href="{% url 'hosting:virtual_machines' vm.vm_id %}">{% trans "View Detail"%}</a></button>
</td>
</tr>
{% endfor %}
</tbody>
{% endif %} {% endif %}
</table> <span class="page-current">
{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}.
{% if is_paginated %} </span>
<div class="pagination"> {% if page_obj.has_next %}
<span class="page-links"> <a href="{{request.path}}?page={{ page_obj.next_page_number }}">{% trans "next" %}</a>
{% if page_obj.has_previous %} {% endif %}
<a href="{{request.path}}?page={{ page_obj.previous_page_number }}">{% trans "previous"%}</a> </span>
{% endif %} </div>
<span class="page-current"> {% endif %}
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
<a href="{{request.path}}?page={{ page_obj.next_page_number }}">{% trans "next"%}</a>
{% endif %}
</span>
</div>
{% endif %}
</div>
</div>
</div>
</div> </div>
{%endblock%} {%endblock%}