Revision 6902f72e
| b/ui/static/main.css | ||
|---|---|---|
| 732 | 732 |
margin-left: -20px; |
| 733 | 733 |
} |
| 734 | 734 |
|
| 735 |
#machinesview_wrapper.list {
|
|
| 736 |
margin-left: -20px; |
|
| 737 |
} |
|
| 738 |
|
|
| 739 |
#machinesview_wrapper {
|
|
| 740 |
min-height: 270px; |
|
| 741 |
} |
|
| 742 |
|
|
| 735 | 743 |
#emptymachineslist {
|
| 736 |
display:none; |
|
| 737 |
color: #A0A0A0; |
|
| 738 |
margin-top:100px; |
|
| 744 |
display:none; |
|
| 745 |
color: #A0A0A0; |
|
| 746 |
background-image: url(/static/emptydegradebg.png); |
|
| 747 |
width: 400px; |
|
| 748 |
margin-top: 40px; |
|
| 749 |
padding: 5px; |
|
| 750 |
padding-left: 10px; |
|
| 751 |
margin-left: -10px; |
|
| 752 |
} |
|
| 753 |
|
|
| 754 |
#welcomeheader {
|
|
| 755 |
color:white; |
|
| 756 |
} |
|
| 757 |
|
|
| 758 |
.welcomebody {
|
|
| 759 |
color:black; |
|
| 760 |
font-size:80%; |
|
| 761 |
} |
|
| 762 |
|
|
| 763 |
.welcomebody a {
|
|
| 764 |
color:black; |
|
| 739 | 765 |
} |
| 740 | 766 |
|
| 767 |
.welcomefooter {
|
|
| 768 |
color:black; |
|
| 769 |
font-size:60%; |
|
| 770 |
} |
|
| 771 |
|
|
| 772 |
.welcomefooter a {
|
|
| 773 |
color:black; |
|
| 774 |
} |
|
| 775 |
|
|
| 776 |
.emptycreatecontainer {
|
|
| 777 |
margin-left: 430px !important; |
|
| 778 |
position: absolute; |
|
| 779 |
margin-top: 40px; |
|
| 780 |
width: 180px; |
|
| 781 |
background-color: #CCCCCC; |
|
| 782 |
padding: 5px; |
|
| 783 |
padding-left: 10px; |
|
| 784 |
} |
|
| 785 |
|
|
| 786 |
.emptycreate {
|
|
| 787 |
margin-left: 0px !important; |
|
| 788 |
margin-bottom: 5px !important; |
|
| 789 |
margin-right: 10px !important; |
|
| 790 |
} |
|
| 791 |
|
|
| 792 |
#createbody {
|
|
| 793 |
display:none; |
|
| 794 |
font-size: 80%; |
|
| 795 |
} |
|
| 741 | 796 |
|
| 742 | 797 |
div.list label img {
|
| 743 | 798 |
margin: 5px 5px -3px 0; |
| b/ui/static/synnefo.js | ||
|---|---|---|
| 653 | 653 |
|
| 654 | 654 |
return false; |
| 655 | 655 |
} |
| 656 |
|
|
| 657 |
// show the welcome screen |
|
| 658 |
function showWelcome() {
|
|
| 659 |
$("#emptymachineslist").fadeIn("slow");
|
|
| 660 |
$("#createbody").fadeIn("slow");
|
|
| 661 |
$("#createcontainer").addClass('emptycreatecontainer')
|
|
| 662 |
$("#create").addClass('emptycreate')
|
|
| 663 |
$("#view-select").fadeOut("fast");
|
|
| 664 |
} |
|
| 665 |
|
|
| 666 |
// hide the welcome screen |
|
| 667 |
function hideWelcome() {
|
|
| 668 |
$("#emptymachineslist").fadeOut("fast");
|
|
| 669 |
$("#createbody").fadeOut("fast");
|
|
| 670 |
$("#createcontainer").removeClass('emptycreatecontainer')
|
|
| 671 |
$("#create").removeClass('emptycreate')
|
|
| 672 |
$("#view-select").fadeIn("fast");
|
|
| 673 |
} |
|
| 674 |
|
|
| b/ui/templates/list.html | ||
|---|---|---|
| 1 | 1 |
{% load i18n %}
|
| 2 | 2 |
|
| 3 |
<div id="machinesview" class="list"> |
|
| 3 |
<div id="machinesview_wrapper" class="list">
|
|
| 4 | 4 |
<div id="spinner"></div> |
| 5 | 5 |
<div class="actions"> |
| 6 | 6 |
<a id="action-start">Start</a> |
| ... | ... | |
| 247 | 247 |
$("div.list table.list-machines").show();
|
| 248 | 248 |
$("div.list div.actions").show();
|
| 249 | 249 |
} |
| 250 |
|
|
| 251 |
// show message in case user has no servers! |
|
| 252 |
if (servers.length == 0) {
|
|
| 253 |
showWelcome() |
|
| 254 |
$("#machinesview_wrapper").fadeOut("fast")
|
|
| 255 |
} else {
|
|
| 256 |
hideWelcome() |
|
| 257 |
$("#machinesview_wrapper").fadeIn("fast")
|
|
| 258 |
} |
|
| 250 | 259 |
|
| 251 | 260 |
// set confirm box position |
| 252 | 261 |
if (window.innerHeight - 200 < $('#machinesview').height())
|
| b/ui/templates/machines.html | ||
|---|---|---|
| 3 | 3 |
<div id="machines" class="separator"></div> |
| 4 | 4 |
|
| 5 | 5 |
<!-- the create button --> |
| 6 |
<a id="create" rel="#wizard" href="#">{% trans "Create New +" %}</a>
|
|
| 6 |
<div id="createcontainer"> |
|
| 7 |
<span id="createbody">Start by creating a new virtual machine:</span><br /> |
|
| 8 |
<a id="create" rel="#wizard" href="#">{% trans "Create New +" %}</a>
|
|
| 9 |
</div> |
|
| 7 | 10 |
|
| 8 | 11 |
<!-- changing between standard/list view --> |
| 9 | 12 |
<div id="view-select"> |
| ... | ... | |
| 12 | 15 |
<a id="list" href="/machines/list">=</a> |
| 13 | 16 |
</div> |
| 14 | 17 |
|
| 18 |
<div id="emptymachineslist"><h1 id="welcomeheader">{% trans "Welcome to the ocean!" %}</h1><br />
|
|
| 19 |
<span class="welcomebody">From this panel you will be able to manage your Virtual Machines (VMs). If you don't know what a VM is: take the <a href="#">tour</a>.</span><br /><br /> |
|
| 20 |
<span class="welcomebody">The panel is currently empty, because you don't have any VMs yet. You can start by creating your new VM by clicking the blue button on the right. The wizard will guide you through the hole process.</span><br /><br /> |
|
| 21 |
<span class="welcomefooter">For more information or text, click <a href="#">here</a>.</span> |
|
| 22 |
</div> |
|
| 23 |
|
|
| 15 | 24 |
<!-- the form --> |
| 16 | 25 |
<form action="#"> |
| 17 | 26 |
<!-- scrollable root element --> |
| b/ui/templates/standard.html | ||
|---|---|---|
| 2 | 2 |
|
| 3 | 3 |
<!-- the standard view --> |
| 4 | 4 |
<div id="machinesview" class="standard"> |
| 5 |
<div id="emptymachineslist">{% trans "You have no virtual machines! Press Create New to create some!" %}</div>
|
|
| 5 |
<div id="emptymachineslist"><h1 id="welcomeheader">{% trans "Welcome to the ocean!" %}</h1><br />
|
|
| 6 |
<span class="welcomebody">From this panel you will be able to manage your Virtual Machines (VMs). If you don't know what a VM is: take the <a href="#">tour</a>.</span><br /><br /> |
|
| 7 |
<span class="welcomebody">The panel is currently empty, because you don't have any VMs yet. You can start by creating your new VM by clicking the blue button on the right. The wizard will guide you through the hole process.</span><br /><br /> |
|
| 8 |
<span class="welcomefooter">For more information or text, click <a href="#">here</a>.</span> |
|
| 9 |
</div> |
|
| 6 | 10 |
<div id="spinner"></div> |
| 7 | 11 |
<div class="machine" id="machine-template" style="display:none"> |
| 8 | 12 |
<div class="actions"> |
| ... | ... | |
| 240 | 244 |
} else {
|
| 241 | 245 |
$("#mini.separator").fadeOut("slow");
|
| 242 | 246 |
} |
| 247 |
|
|
| 243 | 248 |
// show message in case user has no servers! |
| 244 | 249 |
if (servers.length == 0) {
|
| 245 |
$("#emptymachineslist").fadeIn("slow");
|
|
| 246 |
} |
|
| 250 |
showWelcome() |
|
| 251 |
} else {
|
|
| 252 |
hideWelcome() |
|
| 253 |
} |
|
| 247 | 254 |
|
| 248 | 255 |
// set confirm box position |
| 249 | 256 |
if (window.innerHeight - 220 < $('#machinesview').height())
|
Also available in: Unified diff