aatish/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Redesign vm order page

Browse source
This commit is contained in:
Henry Bravo 2017-06-09 13:55:45 -05:00
parent c69694274f
commit 7485c182c4
10 changed files with 316 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
hosting/static/hosting/css/commons.css
View file

@ -1,9 +1,12 @@
.dashboard-container {
padding-top:70px; padding-bottom: 70px;
width: 90%;
margin: 0 auto;
max-width: 768px;
}
.content-dashboard{
height: 100vh;
min-height: 100vh;
width: 80%;
margin: 0 auto;
max-width: 1120px;

6
hosting/static/hosting/css/owl.carousel.min.css vendored Executable file
View file

@ -0,0 +1,6 @@
/**
* Owl Carousel v2.2.1
* Copyright 2013-2017 David Deutsch
* Licensed under ()
*/
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}

6
hosting/static/hosting/css/owl.theme.default.min.css vendored Executable file
View file

@ -0,0 +1,6 @@
/**
* Owl Carousel v2.2.1
* Copyright 2013-2017 David Deutsch
* Licensed under ()
*/
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

144
hosting/static/hosting/css/virtual-machine.css
View file

@ -58,6 +58,121 @@
padding-top: 4px;
}
/*Create VM Styles*/
.parent-container{
overflow-x: hidden;
overflow-y: hidden;
}
.parent-container ::-webkit-scrollbar {
display: none;
}
.container-os{
overflow: auto;
padding: 0px 0px;
min-width: 300px;
width: auto;
max-width: 800px;
min-height: 150px;
}
.container-os .owl-next{
position: absolute;
right: -12px;
top: 6px;
color: gray !important;
background: transparent !important;
font-size: 54px !important;
}
.container-os .owl-prev{
position: absolute;
left: -12px;
top: 6px;
color: gray !important;
background: transparent !important;
font-size: 54px !important;
}
.container-os .owl-dots{
display: none;
}
.container-os .os-circle{
width: 120px;
height: 120px;
display: flex;
margin: 0 auto;
justify-content: center;
align-items: center;
background: #f7f7f7;
border-radius: 50%;
cursor: pointer;
text-align: center;
min-width: 120px;
border: 4px solid #b9b9b9;
transition: all .1s ease-in;
}
.step-title{
margin-bottom: 25px;
}
.container-os.config .config-box{
width: 115px;
height: 115px;
display: flex;
margin: 0 auto;
flex-direction: column;
justify-content: center;
align-items: center;
background: #f7f7f7;
/* border-radius: 50%; */
cursor: pointer;
text-align: center;
min-width: 115px;
border-radius: 7px;
border: 4px solid #b9b9b9;
transition: all .1s ease-in;
}
.container-os .os-circle.active{
border: 6px solid #2dc32d;
min-width: 135px;
width: 135px;
height: 135px;
}
.container-os .os-circle.active .text{
font-size: 20px;
line-height: 20px;
}
.container-os.config .config-box.active{
border: 6px solid #5cb85c;
min-width: 125px;
width: 125px;
height: 125px;
}
.container-os.config .config-box span{
font-size: 14px;
}
.container-os.config .config-box.active span{
font-size: 16px;
}
.container-os .os-circle .text{
font-size: 16px;
width: 50%;
line-height: 16px;
}
.container-button{
text-align: right;
display: none;
}
.container-button .btn{
font-size: 17px;
width: 150px;
margin-top: 5px;
}
.container-button .price{
font-size: 18px;
}
@media (max-width: 990px) {
.virtual-machine-container .tabs-left {
border-right: 0;
@ -73,6 +188,35 @@
display:block;
}
}
@media (max-width: 768px) {
.container-button{
text-align: center;
}
.step-title{
text-align: center;
}
.container-os .os-circle{
width: 105px;
height: 105px;
min-width: 105px;
}
.container-os .os-circle .text{
font-size: 14px;
line-height: 15px;
}
.container-os .owl-next {
right: 20px;
top: 20px;
font-size: 40px !important;
}
.container-os .owl-prev{
position: absolute;
left: 20px;
top: 20px;
font-size: 40px !important;
}
}
@media (max-width: 420px) {
.btn-create-vm {
float: left !important;

89
hosting/static/hosting/js/createvm.js Normal file
View file

@ -0,0 +1,89 @@
(function($){
"use strict"; // Start of use strict
$(window).load(function(){
});
$(document).ready(function(){
_initOs();
_ifOverflow();
});
$(window).resize(function(){
_ifOverflow();
});
function _initOs(){
$('.os-circle').click(function(event){
$('.os-circle').removeClass('active');
$(this).addClass('active');
var idTemplate = $(this).data('id');
$('input[name=vm_template_id]').val(idTemplate);
});
$('.config-box').click(function(event){
$('.config-box').removeClass('active');
$(this).addClass('active');
var idConfig = $(this).data('id');
var price = $(this).data('price');
$('input[name=configuration]').val(idConfig);
$('.container-button').fadeIn();
$('#priceValue').text(price);
});
$('.owl-carousel').owlCarousel({
items:4,
nav: true,
margin:30,
responsiveClass:true,
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
responsive:{
0:{
items:1,
nav:true
},
600:{
items:2,
nav:true
},
768:{
items:3,
nav:true
},
990:{
items:4,
nav:true
}
}
});
}
function _ifOverflow(){
var dcContainer= document.getElementById('dcContainer');
var containerOs= document.getElementById('containerOs');
console.log('d-c', dcContainer.offsetWidth-20);
console.log('d-os', containerOs.scrollWidth);
if(dcContainer.offsetWidth-20 < containerOs.scrollWidth){
console.log('oooVerrflowwww');
}
}
})(jQuery);

7
hosting/static/hosting/js/vendor/owl.carousel.min.js vendored Executable file
View file

File diff suppressed because one or more lines are too long

46
hosting/templates/hosting/base_short.html
View file

@ -29,6 +29,8 @@
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="{% static 'hosting/css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'hosting/css/owl.theme.default.min.css' %}">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
@ -126,55 +128,20 @@
<!-- Footer -->
{% if request.user.is_authenticated %}
<footer class="navbar-fixed-bottom">
<footer class="footer-vm">
<div class="container">
<<<<<<< HEAD
<p class="copyright text-muted small">Copyright &copy; ungleich GmbH {% now "Y" %}. All Rights Reserved</p>
=======
<div class="row">
<div class="col-lg-12 hidden-xs">
<ul class="list-inline">
<li>
<a href="#">{% trans "Home"%}</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="{% url 'hosting:virtual_machines' %}">
{% trans "My Virtual Machines"%}
</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="{% url 'hosting:orders' %}">
{% trans "My Orders"%}
</a>
</li>
<li>&sdot;</li>
<li>
<li>
<a href="{% url 'hosting:ssh_keys' %}">
{% trans "Keys"%}
</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="{% url 'hosting:notifications' %}">
{% trans "Notifications "%}
</a>
</li>
</ul>
<div class="col-lg-12">
<p class="copyright text-muted small">Copyright &copy; ungleich GmbH {% now "Y" %}. All Rights Reserved</p>
</div>
</div>
>>>>>>> f4997f041ca9496bf9a63706726a20d0a31d1c28
</div>
</footer>
{% endif %}
<!-- jQuery -->
<script src="{% static 'hosting/js/jquery.js' %}"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>
<script src="{% static 'hosting/js/vendor/owl.carousel.min.js'%}"></script>
<!-- Copy Clipboard -->
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
@ -185,6 +152,9 @@
<!-- Virtual Machine Detail Javascript -->
<script src="{% static 'hosting/js/virtual_machine_detail.js' %}"></script>
<!-- Create Virtual Machine Javascript -->
<script src="{% static 'hosting/js/createvm.js' %}"></script>
<!-- Init JavaScript -->
<script src="{% static 'hosting/js/initial.js' %}"></script>

56
hosting/templates/hosting/create_virtual_machine.html
View file

@ -2,9 +2,9 @@
{% load staticfiles bootstrap3 i18n %}
{% block content %}
<div>
<div class="container dashboard-container">
<div class="dashboard-container" >
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="col-md-12">
<br/>
{% if messages %}
@ -16,10 +16,53 @@
{% endif %}
</div>
{% if not error %}
<h3><i class="fa fa-server fa-separate" aria-hidden="true"></i> {% trans "New Virtual Machine"%} </h3>
<div class="dashboard-title">
<h3>{% trans "New Virtual Machine"%} </h3>
<hr/>
</div>
<form method="POST" action="">
{% csrf_token %}
<div class="step-title">
<h4>{% trans "Step 1. Select VM Template:" %} </h4>
</div>
<div class="parent-container">
<div class="container-os owl-carousel owl-theme" id="containerOs">
{% for template in templates %}
<div class="os-circle" data-id="{{template.id}}">
<span class="text" >{{template.name}}</span>
</div>
{% endfor %}
</div>
<input type="hidden" name="vm_template_id">
</div>
<div class="step-title">
<h4>{% trans "Step2. Select VM Configuration" %}</h4>
</div>
<div class="parent-container">
<div class="container-os config owl-carousel owl-theme">
{% for config in configuration_options %}
<div class="config-box" data-id="{{config.id}}" data-price="{{config.price|floatformat}}">
<span>CORE: {{config.cpu|floatformat}}</span>
<span>RAM: {{config.memory|floatformat}} GB</span>
<span>SSD: {{config.disk_size|floatformat}} GB</span>
</div>
{% endfor %}
</div>
<input type="hidden" name="configuration">
</div>
<div class="container-button">
<div class="price">
<span class="label-price">{% trans "Price " %}<span id="priceValue">0</span>{% trans "CHF/Month" %}</span>
</div>
<button class="btn btn-success" >{% trans "Start VM"%} </button>
</div>
</form>
<!-- <form method="POST" action="">
{% csrf_token %}
<div class="form-group">
{% trans "Select VM Template:" %}
<select name="vm_template_id">
@ -29,7 +72,7 @@
</select>
</div>
<div class="form-group">
{% trans "Select VM Configuration:" %}
<select name="configuration">
{% for config in configuration_options %}
<option value="{{config.id}}">
@ -44,11 +87,8 @@
<div class="form-group">
<button class="btn btn-success" >{% trans "Start VM"%} </button>
</div>
</form>
</form> -->
{% endif %}
</div>
</div>
</div>

2
hosting/templates/hosting/notifications.html
View file

@ -4,7 +4,7 @@
<div>
<div class="virtual-machine-container dashboard-container ">
<div class="row">
<div class="col-md-9 col-md-offset-2">
<div class="col-xs-12">
<div class="col-sm-12">
<h3><i class="fa fa-bell fa-separate" aria-hidden="true"></i>{% trans "Notifications"%} </h3>
<hr/>

2
hosting/templates/hosting/virtual_machines.html
View file

@ -4,7 +4,7 @@
<div>
<div class="dashboard-container">
<div class="row">
<div class="col-xs-12 col-lg-8 col-lg-offset-2 container-table">
<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">