Redesign vm order page

This commit is contained in:
Henry Bravo 2017-06-09 13:55:45 -05:00
commit 7485c182c4
10 changed files with 316 additions and 51 deletions

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>

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,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>
<hr/>
<form method="POST" action="">
<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:" %}
@ -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>

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

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