diff --git a/hosting/static/hosting/css/dashboard.css b/hosting/static/hosting/css/dashboard.css index 82332e23..7a80e162 100644 --- a/hosting/static/hosting/css/dashboard.css +++ b/hosting/static/hosting/css/dashboard.css @@ -18,4 +18,60 @@ background: url(../../datacenterlight/img/pattern.jpg) no-repeat center center; background-size: cover; z-index: -2; +} + +.hosting-dashboard .dashboard-container-head { + color: #fff; + margin-bottom: 25px; +} + +.hosting-dashboard-item { + background: #e9ebee; + box-shadow: 1px 3px 3px rgba(0,0,0,0.5); + padding: 25px; + color: rgba(124, 139, 175, 0.7); + font-size: 19px; +} +.hosting-dashboard-item:hover, +.hosting-dashboard-item:focus, +.hosting-dashboard-item:active { + text-decoration: none; + color: #7c8baf; + background: #fff; +} + +.hosting-dashboard-item h2 { + margin: 0; + font-size: 19px; + padding-bottom: 10px; + border-bottom: 2px solid #acb5cf; + margin-bottom: 25px; +} + +.hosting-dashboard-image { + height: 100px; + fill: #8b9bb7; + display: flex; + align-items: center; +} +.hosting-dashboard-image img, +.hosting-dashboard-image svg { + width: 100%; + height: 100%; + max-height: 65px; +} +.hosting-dashboard-image img { + opacity: 0.2; +} + +@media (min-width: 768px) { + .hosting-dashboard-content { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + .hosting-dashboard-item { + width: 32%; + margin-bottom: 15px; + } } \ No newline at end of file diff --git a/hosting/static/hosting/img/connected.svg b/hosting/static/hosting/img/connected.svg new file mode 100644 index 00000000..fa3875dc --- /dev/null +++ b/hosting/static/hosting/img/connected.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/hosting/static/hosting/img/plusVM.svg b/hosting/static/hosting/img/plusVM.svg index c6c49316..2c1bb8f8 100644 --- a/hosting/static/hosting/img/plusVM.svg +++ b/hosting/static/hosting/img/plusVM.svg @@ -4,10 +4,10 @@ +VM Created with Sketch. - - - - + + + + diff --git a/hosting/static/hosting/img/settings.svg b/hosting/static/hosting/img/settings.svg new file mode 100644 index 00000000..61dc8613 --- /dev/null +++ b/hosting/static/hosting/img/settings.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/hosting/static/hosting/js/initial.js b/hosting/static/hosting/js/initial.js index da2887c6..de36db7c 100644 --- a/hosting/static/hosting/js/initial.js +++ b/hosting/static/hosting/js/initial.js @@ -13,4 +13,41 @@ $( document ).ready(function() { }, 1000); }); + /* + * Replace all SVG images with inline SVG + */ + $('.svg-img').each(function(){ + console.log('asa') + var $img = $(this); + var imgID = $img.attr('id'); + var imgClass = $img.attr('class'); + var imgURL = $img.attr('src'); + + jQuery.get(imgURL, function(data) { + // Get the SVG tag, ignore the rest + var $svg = jQuery(data).find('svg'); + + // Add replaced image's ID to the new SVG + if(typeof imgID !== 'undefined') { + $svg = $svg.attr('id', imgID); + } + // Add replaced image's classes to the new SVG + if(typeof imgClass !== 'undefined') { + $svg = $svg.attr('class', imgClass+' replaced-svg'); + } + + // Remove any invalid XML tags as per http://validator.w3.org + $svg = $svg.removeAttr('xmlns:a'); + + // Check if the viewport is set, if the viewport is not set the SVG wont't scale. + if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) { + $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width')) + } + + // Replace image with new SVG + $img.replaceWith($svg); + + }, 'xml'); + + }); }); \ No newline at end of file diff --git a/hosting/templates/hosting/dashboard.html b/hosting/templates/hosting/dashboard.html index 4c06f19b..562b3671 100644 --- a/hosting/templates/hosting/dashboard.html +++ b/hosting/templates/hosting/dashboard.html @@ -4,7 +4,47 @@ {% block content %}
- +
+

{% trans "My Dashboard" %}

+
+
+ +

{% trans "Create VM" %}

+
+ +
+ + +

{% trans "My VMs" %}

+
+ +
+ + +

{% trans "My SSH Keys" %}

+
+ +
+ + +

{% trans "My Bills" %}

+
+ +
+ + +

{% trans "My Settings" %}

+
+ +
+ + +

{% trans "Support / Contact" %}

+
+ +
+ +
{%endblock%}