diff --git a/hosting/locale/de/LC_MESSAGES/django.po b/hosting/locale/de/LC_MESSAGES/django.po
index 39bc4adc..3cc30292 100644
--- a/hosting/locale/de/LC_MESSAGES/django.po
+++ b/hosting/locale/de/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\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"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\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"
msgstr "Virtuelle Maschinen"
-msgid "Create VM"
-msgstr "Neue VM"
-
-msgid "ID"
+msgid "To create a new virtual machine, click \"Create VM\""
msgstr ""
-msgid "Ipv4"
-msgstr "IPv4"
+msgid "CREATE VM"
+msgstr "NEUE VM"
-msgid "Ipv6"
-msgstr "IPv6"
+msgid "Page"
+msgstr ""
+
+msgid "of"
+msgstr ""
msgid "login"
msgstr "einloggen"
@@ -482,6 +482,12 @@ msgid ""
"contact Data Center Light Support."
msgstr ""
+#~ msgid "Ipv4"
+#~ msgstr "IPv4"
+
+#~ msgid "Ipv6"
+#~ msgstr "IPv6"
+
#~ msgid "Close"
#~ msgstr "Schliessen"
diff --git a/hosting/static/hosting/css/commons.css b/hosting/static/hosting/css/commons.css
index 156e1974..1ebae4b4 100644
--- a/hosting/static/hosting/css/commons.css
+++ b/hosting/static/hosting/css/commons.css
@@ -162,29 +162,75 @@
/* ========= */
@media(min-width: 320px) {
- .modal:before {
- content: '';
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- margin-right: -4px;
- }
- }
+ .modal:before {
+ content: '';
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+ margin-right: -4px;
+ }
+}
- @media (min-width: 768px) {
- .modal-dialog {
+@media (min-width: 768px) {
+ .modal-dialog {
/* width: 520px; */
- margin: 15px auto;
- }
- }
+ margin: 15px auto;
+ }
+}
- .modal {
- text-align: center;
- }
+.modal {
+ text-align: center;
+}
- .modal-dialog {
- display: inline-block;
- text-align: left;
- vertical-align: middle;
- }
+.modal-dialog {
+ display: inline-block;
+ text-align: left;
+ 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%);
+}
\ No newline at end of file
diff --git a/hosting/static/hosting/css/virtual-machine.css b/hosting/static/hosting/css/virtual-machine.css
index e043879d..420a9452 100644
--- a/hosting/static/hosting/css/virtual-machine.css
+++ b/hosting/static/hosting/css/virtual-machine.css
@@ -66,8 +66,8 @@
overflow-x: hidden;
overflow-y: hidden;
}
-.parent-container ::-webkit-scrollbar {
- display: none;
+.parent-container ::-webkit-scrollbar {
+ display: none;
}
.container-os{
overflow: auto;
@@ -225,6 +225,159 @@
}
@media (max-width: 420px) {
.btn-create-vm {
- 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;
+ }
}
\ No newline at end of file
diff --git a/hosting/static/hosting/img/copy.svg b/hosting/static/hosting/img/copy.svg
new file mode 100644
index 00000000..c30b5922
--- /dev/null
+++ b/hosting/static/hosting/img/copy.svg
@@ -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>
\ No newline at end of file
diff --git a/hosting/static/hosting/img/vm.svg b/hosting/static/hosting/img/vm.svg
new file mode 100644
index 00000000..376e7d0a
--- /dev/null
+++ b/hosting/static/hosting/img/vm.svg
@@ -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>
\ No newline at end of file
diff --git a/hosting/templates/hosting/user_keys.html b/hosting/templates/hosting/user_keys.html
index b66a1f6f..fd93b66f 100644
--- a/hosting/templates/hosting/user_keys.html
+++ b/hosting/templates/hosting/user_keys.html
@@ -77,7 +77,7 @@
</button>
</div>
<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>
<div class="modal-footer">
</div>
diff --git a/hosting/templates/hosting/virtual_machines.html b/hosting/templates/hosting/virtual_machines.html
index c149be41..f7461abe 100644
--- a/hosting/templates/hosting/virtual_machines.html
+++ b/hosting/templates/hosting/virtual_machines.html
@@ -1,89 +1,77 @@
{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 i18n %}
{% block content %}
-<div>
- <div class="dashboard-container">
- <div class="row">
- <div class="col-xs-12 container-table">
- <table class="table borderless table-hover">
- <h3 class="pull-left"><i class="fa fa-server fa-separate" aria-hidden="true"></i> {% trans "Virtual Machines"%}</h3>
- <div class="col-md-12">
- <br/>
- {% if messages %}
- <div class="alert alert-warning">
- {% for message in messages %}
- <span>{{ message }}</span>
- {% endfor %}
- </div>
- {% endif %}
+<div class="dashboard-container">
+ <div class="dashboard-container-head">
+ <h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/vm.svg' %}" class="un-icon"> {% trans "Virtual Machines" %}</h3>
+ {% if messages %}
+ <div class="alert alert-warning">
+ {% for message in messages %}
+ <span>{{ message }}</span>
+ {% endfor %}
+ </div>
+ {% endif %}
+ {% if not error %}
+ <div class="dashboard-subtitle">
+ <p>{% trans 'To create a new virtual machine, click "Create VM"' %}</p>
+ <div class="text-right">
+ <a class="btn btn-vm" href="{% url 'hosting:create_virtual_machine' %}"><span class="css-plus"></span> <span>{% trans "CREATE VM" %}</span></a>
</div>
- {% if not error %}
- <p class="pull-right btn-create-vm">
- <a class="btn btn-success" href="{% url 'hosting:create_virtual_machine' %}" >{% trans "Create VM"%} </a>
- </p>
- <br/>
+ </div>
+ {% endif %}
+ </div>
- <thead>
- <tr>
- <th>{% trans "ID"%}</th>
- <th>{% trans "Ipv4"%}</th>
- <th>{% trans "Ipv6"%}</th>
- <th>{% trans "Status"%}</th>
- <th></th>
- </tr>
- </thead>
- <tbody>
- {% for vm in vms %}
- <tr>
- <td scope="row">{{vm.vm_id}}</td>
- {% if vm.ipv6 %}
- <td>{{vm.ipv4}}</td>
-
- <td>{{vm.ipv6}}</td>
+ {% if not error %}
+ <table class="table table-switch">
+ <thead>
+ <tr>
+ <th>ID</th>
+ <th>IPv4</th>
+ <th>IPv6</th>
+ <th>{% trans "Status" %}</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for vm in vms %}
+ <tr>
+ <td data-header="ID">{{vm.vm_id}}</td>
+ {% if vm.ipv6 %}
+ <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 %}
+ </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 vm.state == 'ACTIVE' %}
- <span class="h3 label label-success"><strong> {{vm.state}}</strong></span>
- {% elif vm.state == 'FAILED' %}
- <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>
+ {% if is_paginated %}
+ <div class="pagination">
+ <span class="page-links">
+ {% if page_obj.has_previous %}
+ <a href="{{request.path}}?page={{ page_obj.previous_page_number }}">{% trans "previous" %}</a>
{% endif %}
- </table>
-
- {% if is_paginated %}
- <div class="pagination">
- <span class="page-links">
- {% if page_obj.has_previous %}
- <a href="{{request.path}}?page={{ page_obj.previous_page_number }}">{% trans "previous"%}</a>
- {% endif %}
- <span class="page-current">
- 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>
-
+ <span class="page-current">
+ {% trans "Page" %} {{ page_obj.number }} {% trans "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>
-
{%endblock%}