Revision ea3cb4e4
b/ui/static/main.css | ||
---|---|---|
139 | 139 |
cursor:pointer; |
140 | 140 |
display:block; |
141 | 141 |
padding: .7em 1em; |
142 |
margin-top: 1em; |
|
143 | 142 |
width: 8em; |
144 | 143 |
font-weight: bold; |
145 | 144 |
text-decoration: none; |
... | ... | |
153 | 152 |
|
154 | 153 |
div#header { |
155 | 154 |
height:152px; |
155 |
margin-left: -2em; |
|
156 | 156 |
} |
157 | 157 |
|
158 | 158 |
div#wrapper { |
159 |
width: 990px;
|
|
159 |
width: 800px;
|
|
160 | 160 |
margin: 0 auto; |
161 | 161 |
} |
162 | 162 |
|
... | ... | |
184 | 184 |
|
185 | 185 |
div#about { |
186 | 186 |
color: white; |
187 |
padding: .9em 5em;
|
|
187 |
padding: .5em 0;
|
|
188 | 188 |
font-size:.7em; |
189 | 189 |
float: right; |
190 |
width: 63%; |
|
191 | 190 |
} |
192 | 191 |
|
193 | 192 |
/* tooltip styling. by default the element to be styled is .tooltip */ |
... | ... | |
474 | 473 |
|
475 | 474 |
.instance { |
476 | 475 |
clear: both; |
477 |
margin: 1em 0; |
|
478 |
padding: 1em 2em 1em 1em; |
|
476 |
padding: .7em 1em .7em 1em; |
|
479 | 477 |
width: 70%; |
480 | 478 |
border: 1px dashed transparent; |
481 | 479 |
color: #666; |
... | ... | |
501 | 499 |
.actions { |
502 | 500 |
float: right; |
503 | 501 |
width: 15%; |
504 |
margin: -1.5em -9em 0 0;
|
|
502 |
margin-right: -7em;
|
|
505 | 503 |
height: 70px; |
506 | 504 |
} |
507 | 505 |
|
... | ... | |
572 | 570 |
color: transparent; |
573 | 571 |
font-weight: normal; |
574 | 572 |
margin-left: 2em; |
575 |
padding-left: 2em;
|
|
573 |
padding-left: 1.5em;
|
|
576 | 574 |
text-align: left; |
577 | 575 |
} |
578 | 576 |
|
... | ... | |
592 | 590 |
background-image: url(/static/pencil.png); |
593 | 591 |
} |
594 | 592 |
|
593 |
.terminated { |
|
594 |
opacity: .8; |
|
595 |
} |
|
596 |
|
|
595 | 597 |
#ubuntu { |
596 | 598 |
height:50px; |
597 | 599 |
background: url(../static/ubuntu.png) no-repeat 0 0; |
... | ... | |
659 | 661 |
margin-top: 1em; |
660 | 662 |
} |
661 | 663 |
|
662 |
div.active { |
|
663 |
border-bottom: 1em solid #2C597E; |
|
664 |
height: 200px; |
|
665 |
} |
|
666 |
|
|
667 | 664 |
div.active, div.stopped { |
668 | 665 |
margin-left: -1em; |
669 | 666 |
width: 70%; |
670 | 667 |
padding: 1em; |
668 |
height: 200px; |
|
671 | 669 |
margin-top: 1em; |
672 | 670 |
} |
673 | 671 |
|
... | ... | |
736 | 734 |
} |
737 | 735 |
|
738 | 736 |
div.inactive div.state { |
739 |
margin-right: 2.5em;
|
|
737 |
margin-right: 1.5em;
|
|
740 | 738 |
} |
741 | 739 |
|
742 | 740 |
div.inactive { |
... | ... | |
746 | 744 |
div.list div.actions { |
747 | 745 |
clear: left; |
748 | 746 |
float: right; |
749 |
margin-right: 4em; |
|
750 |
margin-top: 1em; |
|
747 |
margin-right: 2em; |
|
748 |
margin-top: 2em; |
|
749 |
width: 150px; |
|
751 | 750 |
text-align: right; |
752 | 751 |
} |
753 | 752 |
|
... | ... | |
785 | 784 |
color: #F49C1A; |
786 | 785 |
} |
787 | 786 |
|
787 |
img.os { |
|
788 |
z-index: 1; |
|
789 |
margin-left: -40px; |
|
790 |
margin-top: 45px; |
|
791 |
opacity: .9; |
|
792 |
} |
|
793 |
|
|
794 |
div#user { |
|
795 |
float:right; |
|
796 |
color: white; |
|
797 |
font-size: 9pt; |
|
798 |
margin-top: 6px; |
|
799 |
margin-left: 9px; |
|
800 |
} |
|
801 |
|
|
802 |
div#user a { |
|
803 |
color: #a0a0a0; |
|
804 |
text-decoration: none; |
|
805 |
} |
|
806 |
|
b/ui/templates/home.html | ||
---|---|---|
4 | 4 |
<title>{{ project }}</title> |
5 | 5 |
<!-- include the Tools --> |
6 | 6 |
<script src="static/jquery.tools.min.js"></script> |
7 |
<link rel="stylesheet" type="text/css" href="static/alt-main.css"/>
|
|
7 |
<link rel="stylesheet" type="text/css" href="static/main.css"/> |
|
8 | 8 |
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' /> |
9 | 9 |
|
10 | 10 |
</head> |
... | ... | |
21 | 21 |
</div> |
22 | 22 |
<!-- tabs --> |
23 | 23 |
<ul class="css-tabs"> |
24 |
<li><a href="alt-instances" title="manage your virtual machines" id="instances">instances</a></li>
|
|
24 |
<li><a href="instances" title="manage your virtual machines" id="instances">instances</a></li> |
|
25 | 25 |
<li><a href="disks" title="manage your storage volumes" id="disks">disks</a></li> |
26 | 26 |
<li><a href="images" title="manage boot images" id="images">images</a></li> |
27 | 27 |
<li><a href="networks" title="configure networking" id="networks">networks</a></li> |
b/ui/templates/instances.html | ||
---|---|---|
20 | 20 |
<div class="uptime">24 days uptime</div> |
21 | 21 |
</div> |
22 | 22 |
<img src="static/server.png" /> |
23 |
<img class="os" src={{ node.thumb }} /> |
|
24 |
<a href="#" class="name"> |
|
25 |
<h3><span>{{ node.name }}</span><span class="rename">rename</span></h3> |
|
26 |
</a> |
|
27 |
<a href="#" class="ip"> |
|
28 |
<h5><span>{{ node.public_ip }}</span><span class="configure">configure networking</span></h5> |
|
29 |
</a> |
|
30 |
<a href="#" class="storage"> |
|
31 |
<h5>34GB of total storage in 3 volumes <span class="configure">configure storage</span></h5> |
|
32 |
</a> |
|
33 |
</div> |
|
34 |
</div> |
|
35 |
{% endif %} |
|
36 |
{% endfor %} |
|
37 |
</div> |
|
38 |
<div class="seperator"></div> |
|
39 |
<div class="terminated"> |
|
40 |
{% for node in nodes %} |
|
41 |
{% if node.state == '0' %} |
|
42 |
<div class="instance terminated"> |
|
43 |
<div class="actions"> |
|
44 |
<a href="#" class="action">start</a> |
|
45 |
<a href="#" class="action">destroy</a> |
|
46 |
<a href="#" class="more">more …</a> |
|
47 |
</div> |
|
48 |
<div class="state"> |
|
49 |
<div>Stopped</div> |
|
50 |
<div class="indicator" /> |
|
51 |
<div class="indicator" /> |
|
52 |
<div class="indicator" /> |
|
53 |
<div class="indicator" /> |
|
54 |
</div> |
|
55 |
<img src="static/server.png" /> |
|
56 |
<img class="os" src={{ node.thumb }} /> |
|
23 | 57 |
<a href="#" class="name"> |
24 | 58 |
<h3><span>{{ node.name }}</span><span class="rename">rename</span></h3> |
25 | 59 |
</a> |
Also available in: Unified diff