Redesign vm order page

hosting/static/hosting/css/commons.css

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

hosting/static/hosting/css/owl.carousel.min.css

@@ -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%}

hosting/static/hosting/css/owl.theme.default.min.css

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

hosting/static/hosting/css/virtual-machine.css

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

hosting/static/hosting/js/createvm.js

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

hosting/templates/hosting/base_short.html

@@ -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">
+                <div class="col-lg-12">
-                    <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>
                     <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>
 

hosting/templates/hosting/create_virtual_machine.html

@@ -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,9 +16,52 @@
                     {% 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">
-                <hr/>
+                    <h3>{% trans "New Virtual Machine"%} </h3>
-                <form  method="POST" action="">
+                    <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:" %}
@@ -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>
 

hosting/templates/hosting/notifications.html

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

hosting/templates/hosting/virtual_machines.html

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