Revision 775d43ea
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html | ||
|---|---|---|
| 25 | 25 |
|
| 26 | 26 |
<h2>Kpal original designs</h2> |
| 27 | 27 |
<ul> |
| 28 |
<li><a href="vm_list.html">VMs list page</a> (kpal original design)</li> |
|
| 29 |
<li><a href="vm_details.html">VM details page</a> (kpal original design)</li> |
|
| 30 |
<li><a href="vm_create_a.html">Create new machine</a> (kpal original design)</li> |
|
| 31 |
<li><a href="network_list.html">Networks list page</a> (kpal original design)</li> |
|
| 32 |
<li><a href="network_details.html">Network details page</a> (kpal original design) |
|
| 33 |
<li><a href="network_create.html">Create new network</a></li> |
|
| 34 |
|
|
| 35 |
</ul> |
|
| 28 |
<li><a href="vm_list.html">VMs list page</a></li> |
|
| 29 |
<li><a href="vm_details.html">VM details page</a></li> |
|
| 30 |
<li><a href="network_list.html">Networks list page</a></li> |
|
| 31 |
<li><a href="network_details.html">Network details page</a> |
|
| 32 |
<li><a href="pithos_list.html">Pithos</a></li> |
|
| 33 |
</ul> |
|
| 36 | 34 |
<!-- |
| 37 | 35 |
<h2>Kpal designs with our suggestions</h2> |
| 38 | 36 |
<ul> |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js | ||
|---|---|---|
| 388 | 388 |
$(this).find('span').addClass('current');
|
| 389 | 389 |
$('.items-list').removeClass('small-block-grid-2 large-block-grid-3');
|
| 390 | 390 |
$('.items-list').addClass('list-view');
|
| 391 |
}) |
|
| 391 |
});
|
|
| 392 | 392 |
|
| 393 | 393 |
$('.view-type .grid').click(function(e){
|
| 394 | 394 |
e.preventDefault(); |
| ... | ... | |
| 396 | 396 |
$(this).find('span').addClass('current');
|
| 397 | 397 |
$('.items-list').addClass('small-block-grid-2 large-block-grid-3');
|
| 398 | 398 |
$('.items-list').removeClass('list-view');
|
| 399 |
}); |
|
| 400 |
|
|
| 401 |
// set filter visible |
|
| 402 |
$('.filter-menu .filter').click(function(e) {
|
|
| 403 |
e.preventDefault(); |
|
| 404 |
var self = this; |
|
| 405 |
$(self).parents('.filter-menu').toggleClass('current');
|
|
| 406 |
// $(self).siblings('.options').stop().slideToggle(400, function() {
|
|
| 407 |
// if($(self).s) |
|
| 408 |
// }); |
|
| 399 | 409 |
}) |
| 400 | 410 |
}) |
| 401 | 411 |
|
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_list.html | ||
|---|---|---|
| 142 | 142 |
|
| 143 | 143 |
|
| 144 | 144 |
<section class="actions-bar clearfix"> |
| 145 |
<div class="row"> |
|
| 146 |
<div class="new-btn"> |
|
| 147 |
<a data-overlay-id="#network-wizard" href="#"><span>+</span> NEW NETWORK </a></div> |
|
| 148 |
<div class="main-actions"> |
|
| 149 |
<ul> |
|
| 150 |
<li class="running" ><a href="">Reboot</a></li> |
|
| 151 |
<li class="running"><a href="">Shutdown</a></li> |
|
| 152 |
<li class="both"><a href="">Destroy</a></li> |
|
| 153 |
<li class="stopped"><a href="">Start</a></li> |
|
| 154 |
<!-- in case we want an action always activated |
|
| 155 |
<li class="pernament"><a href="" class="active">Action</a></li> --> |
|
| 156 |
</ul> |
|
| 157 |
</div> |
|
| 145 |
<h2>Network Overview</h2> |
|
| 146 |
<div id="search-utility" class="search"> |
|
| 147 |
<span class="snf-search"></span> |
|
| 148 |
<form> |
|
| 149 |
<input class="snf-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search"> |
|
| 150 |
</form> |
|
| 158 | 151 |
</div> |
| 159 |
<div class="border-dashed"></div> |
|
| 152 |
<div class="filter-menu"> |
|
| 153 |
<a class="filter" href="">Filter</a> |
|
| 154 |
<ul class="options"> |
|
| 155 |
<li><a href=""> set an option</a></li> |
|
| 156 |
<li><a href=""> set an option</a></li> |
|
| 157 |
<li><a href=""> set an option</a></li> |
|
| 158 |
<li><a href=""> set an option</a></li> |
|
| 159 |
</ul> |
|
| 160 |
</div> |
|
| 161 |
<div class="view-type"> |
|
| 162 |
<a href="" class="list"><span class="snf-list"></span></a> |
|
| 163 |
<a href="" class="grid"><span class="snf-layout current"></span></a> |
|
| 164 |
</div> |
|
| 160 | 165 |
</section> |
| 161 | 166 |
<section class="main row"> |
| 162 | 167 |
<div class="networks entities"> |
| 163 | 168 |
<ul class="items-list small-block-grid-2 large-block-grid-3 sortable"> |
| 164 | 169 |
<li data-order="0"> |
| 170 |
<div class="add-new"><a data-overlay-id="#network-wizard" href="#">NEW<br>NETWORK</a></div> |
|
| 171 |
</li> |
|
| 172 |
<li data-order="1"> |
|
| 165 | 173 |
<div class="container"> |
| 166 | 174 |
<div class="img-wrap"> |
| 167 | 175 |
<div class="img running"> |
| ... | ... | |
| 177 | 185 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
| 178 | 186 |
</div> |
| 179 | 187 |
</li> |
| 180 |
<li data-order="1">
|
|
| 188 |
<li data-order="2">
|
|
| 181 | 189 |
<div class="container"> |
| 182 | 190 |
<div class="img-wrap"> |
| 183 | 191 |
<div class="img running"> |
| ... | ... | |
| 193 | 201 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
| 194 | 202 |
</div> |
| 195 | 203 |
</li> |
| 196 |
<li data-order="2">
|
|
| 204 |
<li data-order="3">
|
|
| 197 | 205 |
<div class="container"> |
| 198 | 206 |
<div class="img-wrap"> |
| 199 | 207 |
<div class="img running"> |
| ... | ... | |
| 209 | 217 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
| 210 | 218 |
</div> |
| 211 | 219 |
</li> |
| 212 |
<li data-order="3"> |
|
| 213 |
<div class="add-new"><a data-overlay-id="#network-wizard" href="#">NEW<br>NETWORK</a></div> |
|
| 214 |
</li> |
|
| 215 | 220 |
</ul> |
| 216 | 221 |
</div> |
| 217 | 222 |
</section> |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/pithos_list.html | ||
|---|---|---|
| 58 | 58 |
<div class="row"> |
| 59 | 59 |
<div class="new-btn"><a href="" data-overlay-id="#uploader">UPLOAD FILE</a></div> |
| 60 | 60 |
<div class="main-actions"> |
| 61 |
<ul> |
|
| 62 |
<li class="permanent" ><a href="">Action</a></li> |
|
| 63 |
<!-- in case we want an action always activated |
|
| 64 |
<li class="pernament"><a href="" class="active">Action</a></li> --> |
|
| 65 |
</ul> |
|
| 66 | 61 |
</div> |
| 67 | 62 |
</div> |
| 68 | 63 |
<div class="border-dashed"></div> |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss | ||
|---|---|---|
| 275 | 275 |
height:$header-height; |
| 276 | 276 |
line-height:$header-height; |
| 277 | 277 |
padding:0 $header-padding-horizontal; |
| 278 |
border-bottom:1px solid $primary-color; |
|
| 279 | 278 |
background:white; |
| 280 | 279 |
z-index:100; |
| 281 | 280 |
.icons-nav {
|
| ... | ... | |
| 323 | 322 |
/* Actions Bar ----------------------------------------------- */ |
| 324 | 323 |
|
| 325 | 324 |
.actions-bar {
|
| 325 |
border-bottom: 1px solid $primary-color; |
|
| 326 |
padding-bottom: 44px; |
|
| 327 |
h2 {
|
|
| 328 |
position: absolute; |
|
| 329 |
left: 15px; |
|
| 330 |
top: 11px; |
|
| 331 |
color: $primary-color; |
|
| 332 |
font-size: 0.9em; |
|
| 333 |
font-weight: normal; |
|
| 334 |
line-height: 2em; |
|
| 335 |
} |
|
| 336 |
.filter-menu {
|
|
| 337 |
position: absolute; |
|
| 338 |
right: 29px; |
|
| 339 |
font-size: 0.9em; |
|
| 340 |
width: 120px; |
|
| 341 |
.filter {
|
|
| 342 |
padding: 0 9px 4px; |
|
| 343 |
line-height: 34px |
|
| 344 |
} |
|
| 345 |
.options {
|
|
| 346 |
display: none; |
|
| 347 |
position: absolute; |
|
| 348 |
left: -33px; |
|
| 349 |
top: 37px; |
|
| 350 |
width: 120px; |
|
| 351 |
list-style-type: none; |
|
| 352 |
padding: 3px 15px; |
|
| 353 |
text-align: left; |
|
| 354 |
margin:0; |
|
| 355 |
} |
|
| 356 |
&.current {
|
|
| 357 |
.filter {
|
|
| 358 |
border: 1px solid lighten($primary-color,10%); |
|
| 359 |
display: inline-block; |
|
| 360 |
line-height: 32px; |
|
| 361 |
} |
|
| 362 |
.options {
|
|
| 363 |
background-color: lighten($primary-color,10%); |
|
| 364 |
display: inline-block; |
|
| 365 |
a {
|
|
| 366 |
color: white; |
|
| 367 |
} |
|
| 368 |
} |
|
| 369 |
} |
|
| 370 |
|
|
| 371 |
|
|
| 372 |
} |
|
| 326 | 373 |
position:fixed; |
| 327 | 374 |
left:0; |
| 328 | 375 |
top:$header-height; |
| ... | ... | |
| 332 | 379 |
height:$bar-height; |
| 333 | 380 |
line-height:$bar-height; |
| 334 | 381 |
background:white; |
| 335 |
.border-dashed {
|
|
| 336 |
background-image: url("../images/border-dashes.png");
|
|
| 337 |
background-repeat: repeat-x; |
|
| 338 |
height: 4px; |
|
| 339 |
position: relative; |
|
| 340 |
top: -3px; |
|
| 341 |
} |
|
| 382 |
|
|
| 342 | 383 |
.row {
|
| 343 | 384 |
position: relative; |
| 344 | 385 |
height: $bar-height; |
| 345 | 386 |
} |
| 346 |
ul {
|
|
| 347 |
margin:0; |
|
| 348 |
li {
|
|
| 349 |
list-style: none outside none; |
|
| 350 |
display: inline-block; |
|
| 351 |
line-height: $bar-height; |
|
| 352 |
a {
|
|
| 353 |
display: block; |
|
| 354 |
color:lighten($primary-color,30%); |
|
| 355 |
width:100%; |
|
| 356 |
padding:0 20px; |
|
| 357 |
border:1px solid transparent; |
|
| 358 |
&.active {
|
|
| 359 |
color:$primary-color; |
|
| 360 |
&:hover {
|
|
| 361 |
color:$secondary-color; |
|
| 362 |
cursor: pointer; |
|
| 363 |
} |
|
| 364 |
} |
|
| 365 |
&:hover {
|
|
| 366 |
cursor:default; |
|
| 367 |
} |
|
| 368 |
|
|
| 369 |
} |
|
| 370 |
} |
|
| 371 |
} |
|
| 372 | 387 |
|
| 373 | 388 |
#sb-search {
|
| 374 | 389 |
height: 50px; |
| 375 | 390 |
position: absolute; |
| 376 |
right: 75px;
|
|
| 391 |
right: 105px;
|
|
| 377 | 392 |
top: -10px; |
| 378 | 393 |
.sb-icon-search {
|
| 379 | 394 |
background-color: white; |
| 380 | 395 |
color: $primary-color; |
| 381 | 396 |
top: -4px; |
| 382 |
font-size: 18px;
|
|
| 397 |
font-size: 0.8em;
|
|
| 383 | 398 |
width:40px; |
| 384 | 399 |
&:hover {
|
| 385 | 400 |
color: $secondary-color; |
| ... | ... | |
| 406 | 421 |
} |
| 407 | 422 |
} |
| 408 | 423 |
|
| 424 |
#search-utility {
|
|
| 425 |
position: absolute; |
|
| 426 |
display: inline-block; |
|
| 427 |
width: 220px; |
|
| 428 |
height: 2em; |
|
| 429 |
right:118px; |
|
| 430 |
background-color: lighten($primary-color,35%); |
|
| 431 |
padding-bottom: 35px; |
|
| 432 |
.snf-search {
|
|
| 433 |
position: relative; |
|
| 434 |
right: -10px; |
|
| 435 |
color: $primary-color; |
|
| 436 |
} |
|
| 437 |
form {
|
|
| 438 |
display: inline-block; |
|
| 439 |
width: 200px; |
|
| 440 |
input {
|
|
| 441 |
display: inline-block; |
|
| 442 |
border: transparent; |
|
| 443 |
background-color: transparent; |
|
| 444 |
color: $primary-color; |
|
| 445 |
height: 1.8em; |
|
| 446 |
padding-top: 0.3em; |
|
| 447 |
padding-bottom: 0.3em; |
|
| 448 |
// line-height: 1.2em; |
|
| 449 |
width: 184px; |
|
| 450 |
font-size: 0.9em; |
|
| 451 |
box-shadow: none; |
|
| 452 |
margin-bottom: 0; |
|
| 453 |
} |
|
| 454 |
} |
|
| 455 |
} |
|
| 456 |
|
|
| 409 | 457 |
.view-type {
|
| 410 | 458 |
display:inline-block; |
| 411 | 459 |
position: absolute; |
| ... | ... | |
| 415 | 463 |
color: $secondary-color; |
| 416 | 464 |
} |
| 417 | 465 |
.snf-list {
|
| 418 |
margin-right: 4px;
|
|
| 419 |
font-size: 24px;
|
|
| 420 |
line-height: 50px; |
|
| 421 |
vertical-align: middle;
|
|
| 466 |
margin-right: 6px;
|
|
| 467 |
font-size: 1em;
|
|
| 468 |
// line-height: 50px;
|
|
| 469 |
vertical-align: bottom;
|
|
| 422 | 470 |
} |
| 423 | 471 |
.snf-layout {
|
| 424 |
font-size: 25px;
|
|
| 425 |
line-height: 50px; |
|
| 426 |
vertical-align: middle;
|
|
| 472 |
font-size: 1.1em;
|
|
| 473 |
// line-height: 50px;
|
|
| 474 |
vertical-align: bottom;
|
|
| 427 | 475 |
} |
| 428 | 476 |
|
| 429 | 477 |
} |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_overlays.scss | ||
|---|---|---|
| 157 | 157 |
color:white; |
| 158 | 158 |
.top {
|
| 159 | 159 |
background:$overlay-color-top; |
| 160 |
height:$bar-height+$bar-submenu-height;
|
|
| 160 |
height:90px; // numbers height+menus height-10px
|
|
| 161 | 161 |
position:fixed; |
| 162 | 162 |
left:0; |
| 163 | 163 |
right:0; |
| ... | ... | |
| 171 | 171 |
padding:0 $header-padding-horizontal |
| 172 | 172 |
|
| 173 | 173 |
} |
| 174 |
height:$bar-height;
|
|
| 175 |
line-height:$bar-height;
|
|
| 174 |
height: 50px;
|
|
| 175 |
line-height: 50px;
|
|
| 176 | 176 |
background:$overlay-darker-color; |
| 177 | 177 |
} |
| 178 | 178 |
.menus {
|
| ... | ... | |
| 214 | 214 |
text-align: right; |
| 215 | 215 |
list-style:none outside none; |
| 216 | 216 |
margin:0; |
| 217 |
height: $bar-height;
|
|
| 218 |
line-height: $bar-height;
|
|
| 217 |
height: 50px;
|
|
| 218 |
line-height: 50px;
|
|
| 219 | 219 |
font-size:emCalc(9px); |
| 220 | 220 |
padding-right:120px; |
| 221 | 221 |
color:$secondary-color; |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss | ||
|---|---|---|
| 67 | 67 |
// $global-rounded: 1000px; |
| 68 | 68 |
|
| 69 | 69 |
// header settings |
| 70 |
$header-height:80px;
|
|
| 70 |
$header-height:60px;
|
|
| 71 | 71 |
$header-height-responsive:120px; |
| 72 | 72 |
$header-padding-vertical:20px; |
| 73 | 73 |
$header-padding-horizontal:15px; |
| ... | ... | |
| 76 | 76 |
$icons-nav-margin-horizontal :5px; |
| 77 | 77 |
|
| 78 | 78 |
// bar options |
| 79 |
$bar-height:50px;
|
|
| 79 |
$bar-height:36px;
|
|
| 80 | 80 |
$bar-submenu-height:40px; |
| 81 | 81 |
|
| 82 | 82 |
// button options |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css | ||
|---|---|---|
| 7057 | 7057 |
|
| 7058 | 7058 |
/* line 236, ../sass/_common.scss */ |
| 7059 | 7059 |
body {
|
| 7060 |
padding-top: 130px;
|
|
| 7060 |
padding-top: 96px;
|
|
| 7061 | 7061 |
} |
| 7062 | 7062 |
|
| 7063 | 7063 |
/* line 240, ../sass/_common.scss */ |
| ... | ... | |
| 7100 | 7100 |
left: 0; |
| 7101 | 7101 |
right: 0; |
| 7102 | 7102 |
width: 100%; |
| 7103 |
height: 80px;
|
|
| 7104 |
line-height: 80px;
|
|
| 7103 |
height: 60px;
|
|
| 7104 |
line-height: 60px;
|
|
| 7105 | 7105 |
padding: 0 15px; |
| 7106 |
border-bottom: 1px solid #919194; |
|
| 7107 | 7106 |
background: white; |
| 7108 | 7107 |
z-index: 100; |
| 7109 | 7108 |
} |
| 7110 |
/* line 281, ../sass/_common.scss */
|
|
| 7109 |
/* line 280, ../sass/_common.scss */
|
|
| 7111 | 7110 |
.header .icons-nav {
|
| 7112 | 7111 |
position: absolute; |
| 7113 | 7112 |
left: 10px; |
| 7114 |
height: 80px;
|
|
| 7115 |
line-height: 80px;
|
|
| 7113 |
height: 60px;
|
|
| 7114 |
line-height: 60px;
|
|
| 7116 | 7115 |
top: 0; |
| 7117 | 7116 |
} |
| 7118 |
/* line 287, ../sass/_common.scss */
|
|
| 7117 |
/* line 286, ../sass/_common.scss */
|
|
| 7119 | 7118 |
.header .icons-nav li {
|
| 7120 |
line-height: 80px;
|
|
| 7119 |
line-height: 60px;
|
|
| 7121 | 7120 |
} |
| 7122 |
/* line 291, ../sass/_common.scss */
|
|
| 7121 |
/* line 290, ../sass/_common.scss */
|
|
| 7123 | 7122 |
.header .logo {
|
| 7124 | 7123 |
text-align: center; |
| 7125 | 7124 |
} |
| 7126 |
/* line 293, ../sass/_common.scss */
|
|
| 7125 |
/* line 292, ../sass/_common.scss */
|
|
| 7127 | 7126 |
.header .logo a {
|
| 7128 | 7127 |
position: relative; |
| 7129 | 7128 |
top: -5px; |
| 7130 | 7129 |
} |
| 7131 |
/* line 296, ../sass/_common.scss */
|
|
| 7130 |
/* line 295, ../sass/_common.scss */
|
|
| 7132 | 7131 |
.header .logo a:focus {
|
| 7133 | 7132 |
border: 1px solid #30c79e; |
| 7134 | 7133 |
padding: 10px; |
| 7135 | 7134 |
} |
| 7136 |
/* line 301, ../sass/_common.scss */
|
|
| 7135 |
/* line 300, ../sass/_common.scss */
|
|
| 7137 | 7136 |
.header .logo img {
|
| 7138 | 7137 |
max-height: 30px; |
| 7139 | 7138 |
} |
| 7140 |
/* line 304, ../sass/_common.scss */
|
|
| 7139 |
/* line 303, ../sass/_common.scss */
|
|
| 7141 | 7140 |
.header .logo h2 {
|
| 7142 | 7141 |
display: none; |
| 7143 | 7142 |
margin: 0; |
| ... | ... | |
| 7145 | 7144 |
color: #919194; |
| 7146 | 7145 |
font-weight: normal; |
| 7147 | 7146 |
} |
| 7148 |
/* line 312, ../sass/_common.scss */
|
|
| 7147 |
/* line 311, ../sass/_common.scss */
|
|
| 7149 | 7148 |
.header .login {
|
| 7150 | 7149 |
position: absolute; |
| 7151 | 7150 |
top: 0; |
| 7152 | 7151 |
right: 15px; |
| 7153 |
height: 80px;
|
|
| 7154 |
line-height: 80px;
|
|
| 7152 |
height: 60px;
|
|
| 7153 |
line-height: 60px;
|
|
| 7155 | 7154 |
font-size: 1.625em; |
| 7156 | 7155 |
} |
| 7157 | 7156 |
|
| 7158 | 7157 |
/* Actions Bar ----------------------------------------------- */ |
| 7159 |
/* line 325, ../sass/_common.scss */
|
|
| 7158 |
/* line 324, ../sass/_common.scss */
|
|
| 7160 | 7159 |
.actions-bar {
|
| 7160 |
border-bottom: 1px solid #919194; |
|
| 7161 |
padding-bottom: 44px; |
|
| 7161 | 7162 |
position: fixed; |
| 7162 | 7163 |
left: 0; |
| 7163 |
top: 80px;
|
|
| 7164 |
top: 60px;
|
|
| 7164 | 7165 |
width: 100%; |
| 7165 | 7166 |
z-index: 15; |
| 7166 | 7167 |
text-align: center; |
| 7167 |
height: 50px;
|
|
| 7168 |
line-height: 50px;
|
|
| 7168 |
height: 36px;
|
|
| 7169 |
line-height: 36px;
|
|
| 7169 | 7170 |
background: white; |
| 7170 | 7171 |
} |
| 7171 |
/* line 335, ../sass/_common.scss */ |
|
| 7172 |
.actions-bar .border-dashed {
|
|
| 7173 |
background-image: url("../images/border-dashes.png");
|
|
| 7174 |
background-repeat: repeat-x; |
|
| 7175 |
height: 4px; |
|
| 7176 |
position: relative; |
|
| 7177 |
top: -3px; |
|
| 7172 |
/* line 327, ../sass/_common.scss */ |
|
| 7173 |
.actions-bar h2 {
|
|
| 7174 |
position: absolute; |
|
| 7175 |
left: 15px; |
|
| 7176 |
top: 11px; |
|
| 7177 |
color: #919194; |
|
| 7178 |
font-size: 0.9em; |
|
| 7179 |
font-weight: normal; |
|
| 7180 |
line-height: 2em; |
|
| 7178 | 7181 |
} |
| 7179 |
/* line 342, ../sass/_common.scss */ |
|
| 7180 |
.actions-bar .row {
|
|
| 7181 |
position: relative; |
|
| 7182 |
height: 50px; |
|
| 7182 |
/* line 336, ../sass/_common.scss */ |
|
| 7183 |
.actions-bar .filter-menu {
|
|
| 7184 |
position: absolute; |
|
| 7185 |
right: 29px; |
|
| 7186 |
font-size: 0.9em; |
|
| 7187 |
width: 120px; |
|
| 7183 | 7188 |
} |
| 7184 |
/* line 346, ../sass/_common.scss */ |
|
| 7185 |
.actions-bar ul {
|
|
| 7189 |
/* line 341, ../sass/_common.scss */ |
|
| 7190 |
.actions-bar .filter-menu .filter {
|
|
| 7191 |
padding: 0 9px 4px; |
|
| 7192 |
line-height: 34px; |
|
| 7193 |
} |
|
| 7194 |
/* line 345, ../sass/_common.scss */ |
|
| 7195 |
.actions-bar .filter-menu .options {
|
|
| 7196 |
display: none; |
|
| 7197 |
position: absolute; |
|
| 7198 |
left: -33px; |
|
| 7199 |
top: 37px; |
|
| 7200 |
width: 120px; |
|
| 7201 |
list-style-type: none; |
|
| 7202 |
padding: 3px 15px; |
|
| 7203 |
text-align: left; |
|
| 7186 | 7204 |
margin: 0; |
| 7187 | 7205 |
} |
| 7188 |
/* line 348, ../sass/_common.scss */
|
|
| 7189 |
.actions-bar ul li {
|
|
| 7190 |
list-style: none outside none;
|
|
| 7206 |
/* line 357, ../sass/_common.scss */
|
|
| 7207 |
.actions-bar .filter-menu.current .filter {
|
|
| 7208 |
border: 1px solid #ababad;
|
|
| 7191 | 7209 |
display: inline-block; |
| 7192 |
line-height: 50px; |
|
| 7193 |
} |
|
| 7194 |
/* line 352, ../sass/_common.scss */ |
|
| 7195 |
.actions-bar ul li a {
|
|
| 7196 |
display: block; |
|
| 7197 |
color: #dfdfdf; |
|
| 7198 |
width: 100%; |
|
| 7199 |
padding: 0 20px; |
|
| 7200 |
border: 1px solid transparent; |
|
| 7210 |
line-height: 32px; |
|
| 7201 | 7211 |
} |
| 7202 |
/* line 358, ../sass/_common.scss */ |
|
| 7203 |
.actions-bar ul li a.active, .actions-bar ul .items-list li .container:hover a.check, .items-list .actions-bar ul li .container:hover a.check {
|
|
| 7204 |
color: #919194; |
|
| 7205 |
} |
|
| 7206 |
/* line 360, ../sass/_common.scss */ |
|
| 7207 |
.actions-bar ul li a.active:hover, .actions-bar ul .items-list li .container:hover a.check:hover, .items-list .actions-bar ul li .container:hover a.check:hover {
|
|
| 7208 |
color: #30c79e; |
|
| 7209 |
cursor: pointer; |
|
| 7212 |
/* line 362, ../sass/_common.scss */ |
|
| 7213 |
.actions-bar .filter-menu.current .options {
|
|
| 7214 |
background-color: #ababad; |
|
| 7215 |
display: inline-block; |
|
| 7210 | 7216 |
} |
| 7211 | 7217 |
/* line 365, ../sass/_common.scss */ |
| 7212 |
.actions-bar ul li a:hover {
|
|
| 7213 |
cursor: default; |
|
| 7218 |
.actions-bar .filter-menu.current .options a {
|
|
| 7219 |
color: white; |
|
| 7220 |
} |
|
| 7221 |
/* line 383, ../sass/_common.scss */ |
|
| 7222 |
.actions-bar .row {
|
|
| 7223 |
position: relative; |
|
| 7224 |
height: 36px; |
|
| 7214 | 7225 |
} |
| 7215 |
/* line 373, ../sass/_common.scss */
|
|
| 7226 |
/* line 388, ../sass/_common.scss */
|
|
| 7216 | 7227 |
.actions-bar #sb-search {
|
| 7217 | 7228 |
height: 50px; |
| 7218 | 7229 |
position: absolute; |
| 7219 |
right: 75px;
|
|
| 7230 |
right: 105px;
|
|
| 7220 | 7231 |
top: -10px; |
| 7221 | 7232 |
} |
| 7222 |
/* line 378, ../sass/_common.scss */
|
|
| 7233 |
/* line 393, ../sass/_common.scss */
|
|
| 7223 | 7234 |
.actions-bar #sb-search .sb-icon-search {
|
| 7224 | 7235 |
background-color: white; |
| 7225 | 7236 |
color: #919194; |
| 7226 | 7237 |
top: -4px; |
| 7227 |
font-size: 18px;
|
|
| 7238 |
font-size: 0.8em;
|
|
| 7228 | 7239 |
width: 40px; |
| 7229 | 7240 |
} |
| 7230 |
/* line 384, ../sass/_common.scss */
|
|
| 7241 |
/* line 399, ../sass/_common.scss */
|
|
| 7231 | 7242 |
.actions-bar #sb-search .sb-icon-search:hover {
|
| 7232 | 7243 |
color: #30c79e; |
| 7233 | 7244 |
} |
| 7234 |
/* line 388, ../sass/_common.scss */
|
|
| 7245 |
/* line 403, ../sass/_common.scss */
|
|
| 7235 | 7246 |
.actions-bar #sb-search .sb-search-input {
|
| 7236 | 7247 |
background: transparent; |
| 7237 | 7248 |
border: 0 none; |
| ... | ... | |
| 7240 | 7251 |
margin: 0; |
| 7241 | 7252 |
height: 52px; |
| 7242 | 7253 |
} |
| 7243 |
/* line 395, ../sass/_common.scss */
|
|
| 7254 |
/* line 410, ../sass/_common.scss */
|
|
| 7244 | 7255 |
.actions-bar #sb-search .sb-search-input:focus {
|
| 7245 | 7256 |
outline: 0 none; |
| 7246 | 7257 |
border: 0 none; |
| ... | ... | |
| 7264 | 7275 |
.actions-bar #sb-search .sb-search-input::-webkit-input-placeholder {
|
| 7265 | 7276 |
color: #30c79e; |
| 7266 | 7277 |
} |
| 7267 |
/* line 404, ../sass/_common.scss */
|
|
| 7278 |
/* line 419, ../sass/_common.scss */
|
|
| 7268 | 7279 |
.actions-bar #sb-search .sb-search-submit {
|
| 7269 | 7280 |
width: 40px; |
| 7270 | 7281 |
} |
| 7271 |
/* line 409, ../sass/_common.scss */ |
|
| 7282 |
/* line 424, ../sass/_common.scss */ |
|
| 7283 |
.actions-bar #search-utility {
|
|
| 7284 |
position: absolute; |
|
| 7285 |
display: inline-block; |
|
| 7286 |
width: 220px; |
|
| 7287 |
height: 2em; |
|
| 7288 |
right: 118px; |
|
| 7289 |
background-color: #ebebec; |
|
| 7290 |
padding-bottom: 35px; |
|
| 7291 |
} |
|
| 7292 |
/* line 432, ../sass/_common.scss */ |
|
| 7293 |
.actions-bar #search-utility .snf-search {
|
|
| 7294 |
position: relative; |
|
| 7295 |
right: -10px; |
|
| 7296 |
color: #919194; |
|
| 7297 |
} |
|
| 7298 |
/* line 437, ../sass/_common.scss */ |
|
| 7299 |
.actions-bar #search-utility form {
|
|
| 7300 |
display: inline-block; |
|
| 7301 |
width: 200px; |
|
| 7302 |
} |
|
| 7303 |
/* line 440, ../sass/_common.scss */ |
|
| 7304 |
.actions-bar #search-utility form input {
|
|
| 7305 |
display: inline-block; |
|
| 7306 |
border: transparent; |
|
| 7307 |
background-color: transparent; |
|
| 7308 |
color: #919194; |
|
| 7309 |
height: 1.8em; |
|
| 7310 |
padding-top: 0.3em; |
|
| 7311 |
padding-bottom: 0.3em; |
|
| 7312 |
width: 184px; |
|
| 7313 |
font-size: 0.9em; |
|
| 7314 |
box-shadow: none; |
|
| 7315 |
margin-bottom: 0; |
|
| 7316 |
} |
|
| 7317 |
/* line 457, ../sass/_common.scss */ |
|
| 7272 | 7318 |
.actions-bar .view-type {
|
| 7273 | 7319 |
display: inline-block; |
| 7274 | 7320 |
position: absolute; |
| 7275 | 7321 |
right: 15px; |
| 7276 | 7322 |
top: 0px; |
| 7277 | 7323 |
} |
| 7278 |
/* line 414, ../sass/_common.scss */
|
|
| 7324 |
/* line 462, ../sass/_common.scss */
|
|
| 7279 | 7325 |
.actions-bar .view-type .current {
|
| 7280 | 7326 |
color: #30c79e; |
| 7281 | 7327 |
} |
| 7282 |
/* line 417, ../sass/_common.scss */
|
|
| 7328 |
/* line 465, ../sass/_common.scss */
|
|
| 7283 | 7329 |
.actions-bar .view-type .snf-list {
|
| 7284 |
margin-right: 4px; |
|
| 7285 |
font-size: 24px; |
|
| 7286 |
line-height: 50px; |
|
| 7287 |
vertical-align: middle; |
|
| 7330 |
margin-right: 6px; |
|
| 7331 |
font-size: 1em; |
|
| 7332 |
vertical-align: bottom; |
|
| 7288 | 7333 |
} |
| 7289 |
/* line 423, ../sass/_common.scss */
|
|
| 7334 |
/* line 471, ../sass/_common.scss */
|
|
| 7290 | 7335 |
.actions-bar .view-type .snf-layout {
|
| 7291 |
font-size: 25px; |
|
| 7292 |
line-height: 50px; |
|
| 7293 |
vertical-align: middle; |
|
| 7336 |
font-size: 1.1em; |
|
| 7337 |
vertical-align: bottom; |
|
| 7294 | 7338 |
} |
| 7295 | 7339 |
|
| 7296 |
/* line 431, ../sass/_common.scss */
|
|
| 7340 |
/* line 479, ../sass/_common.scss */
|
|
| 7297 | 7341 |
.new-btn {
|
| 7298 | 7342 |
position: absolute; |
| 7299 | 7343 |
left: 15px; |
| 7300 | 7344 |
bottom: 0; |
| 7301 |
height: 50px;
|
|
| 7345 |
height: 36px;
|
|
| 7302 | 7346 |
} |
| 7303 |
/* line 438, ../sass/_common.scss */
|
|
| 7347 |
/* line 486, ../sass/_common.scss */
|
|
| 7304 | 7348 |
.new-btn a span {
|
| 7305 | 7349 |
font-size: 1.25em; |
| 7306 | 7350 |
} |
| 7307 | 7351 |
|
| 7308 | 7352 |
/* Icons Navigation ----------------------------------------------- */ |
| 7309 |
/* line 446, ../sass/_common.scss */
|
|
| 7353 |
/* line 494, ../sass/_common.scss */
|
|
| 7310 | 7354 |
.icons-nav {
|
| 7311 | 7355 |
margin: 0; |
| 7312 | 7356 |
padding: 0; |
| 7313 | 7357 |
} |
| 7314 |
/* line 448, ../sass/_common.scss */
|
|
| 7358 |
/* line 496, ../sass/_common.scss */
|
|
| 7315 | 7359 |
.icons-nav li {
|
| 7316 | 7360 |
display: inline-block; |
| 7317 | 7361 |
margin: 0 5px; |
| ... | ... | |
| 7322 | 7366 |
text-align: center; |
| 7323 | 7367 |
overflow: hidden; |
| 7324 | 7368 |
} |
| 7325 |
/* line 457, ../sass/_common.scss */
|
|
| 7369 |
/* line 505, ../sass/_common.scss */
|
|
| 7326 | 7370 |
.icons-nav li a {
|
| 7327 | 7371 |
color: #1a1a1a; |
| 7328 | 7372 |
} |
| 7329 |
/* line 459, ../sass/_common.scss */
|
|
| 7373 |
/* line 507, ../sass/_common.scss */
|
|
| 7330 | 7374 |
.icons-nav li a:hover, .icons-nav li a.current {
|
| 7331 | 7375 |
color: #30c79e; |
| 7332 | 7376 |
} |
| 7333 | 7377 |
|
| 7334 | 7378 |
/* Top info ----------------------------------------------- */ |
| 7335 |
/* line 472, ../sass/_common.scss */
|
|
| 7379 |
/* line 520, ../sass/_common.scss */
|
|
| 7336 | 7380 |
.top-info {
|
| 7337 | 7381 |
padding: 50px 100px; |
| 7338 | 7382 |
position: relative; |
| 7339 | 7383 |
z-index: 10; |
| 7340 | 7384 |
display: none; |
| 7341 | 7385 |
} |
| 7342 |
/* line 477, ../sass/_common.scss */
|
|
| 7386 |
/* line 525, ../sass/_common.scss */
|
|
| 7343 | 7387 |
.top-info .close {
|
| 7344 | 7388 |
position: absolute; |
| 7345 | 7389 |
right: 15px; |
| ... | ... | |
| 7352 | 7396 |
overflow: hidden; |
| 7353 | 7397 |
} |
| 7354 | 7398 |
|
| 7355 |
/* line 486, ../sass/_common.scss */
|
|
| 7399 |
/* line 534, ../sass/_common.scss */
|
|
| 7356 | 7400 |
.info.error {
|
| 7357 | 7401 |
background: #ff5c58; |
| 7358 | 7402 |
color: #fff; |
| 7359 | 7403 |
} |
| 7360 | 7404 |
|
| 7361 |
/* line 492, ../sass/_common.scss */
|
|
| 7405 |
/* line 540, ../sass/_common.scss */
|
|
| 7362 | 7406 |
.info.alert {
|
| 7363 | 7407 |
background: #30c79e; |
| 7364 | 7408 |
color: #fff; |
| 7365 | 7409 |
} |
| 7366 | 7410 |
|
| 7367 |
/* line 497, ../sass/_common.scss */
|
|
| 7411 |
/* line 545, ../sass/_common.scss */
|
|
| 7368 | 7412 |
.info.warning {
|
| 7369 | 7413 |
background: #919194; |
| 7370 | 7414 |
color: #fff; |
| 7371 | 7415 |
} |
| 7372 | 7416 |
|
| 7373 |
/* line 502, ../sass/_common.scss */
|
|
| 7417 |
/* line 550, ../sass/_common.scss */
|
|
| 7374 | 7418 |
.info.success {
|
| 7375 | 7419 |
background: #00a551; |
| 7376 | 7420 |
color: #fff; |
| 7377 | 7421 |
} |
| 7378 | 7422 |
|
| 7379 |
/* line 507, ../sass/_common.scss */
|
|
| 7423 |
/* line 555, ../sass/_common.scss */
|
|
| 7380 | 7424 |
.border-bottom-style1 {
|
| 7381 | 7425 |
padding-bottom: 20px; |
| 7382 | 7426 |
margin-bottom: 20px; |
| ... | ... | |
| 7384 | 7428 |
} |
| 7385 | 7429 |
|
| 7386 | 7430 |
/* Progress Bar ----------------------------------------------- */ |
| 7387 |
/* line 516, ../sass/_common.scss */
|
|
| 7431 |
/* line 564, ../sass/_common.scss */
|
|
| 7388 | 7432 |
.progress-bar {
|
| 7389 | 7433 |
position: fixed; |
| 7390 | 7434 |
bottom: 0; |
| ... | ... | |
| 7395 | 7439 |
padding: 20px 0 20px 310px; |
| 7396 | 7440 |
color: #919194; |
| 7397 | 7441 |
} |
| 7398 |
/* line 525, ../sass/_common.scss */
|
|
| 7442 |
/* line 573, ../sass/_common.scss */
|
|
| 7399 | 7443 |
.progress-bar span.counter {
|
| 7400 | 7444 |
display: inline-block; |
| 7401 | 7445 |
margin-right: 20px; |
| 7402 | 7446 |
float: left; |
| 7403 | 7447 |
} |
| 7404 |
/* line 530, ../sass/_common.scss */
|
|
| 7448 |
/* line 578, ../sass/_common.scss */
|
|
| 7405 | 7449 |
.progress-bar div.progress-wrap {
|
| 7406 | 7450 |
display: inline-block; |
| 7407 | 7451 |
float: left; |
| 7408 | 7452 |
width: 40%; |
| 7409 | 7453 |
margin-right: 60px; |
| 7410 | 7454 |
} |
| 7411 |
/* line 535, ../sass/_common.scss */
|
|
| 7455 |
/* line 583, ../sass/_common.scss */
|
|
| 7412 | 7456 |
.progress-bar div.progress-wrap .progress {
|
| 7413 | 7457 |
position: relative; |
| 7414 | 7458 |
top: 2px; |
| 7415 | 7459 |
} |
| 7416 |
/* line 540, ../sass/_common.scss */
|
|
| 7460 |
/* line 588, ../sass/_common.scss */
|
|
| 7417 | 7461 |
.progress-bar span.more {
|
| 7418 | 7462 |
display: inline-block; |
| 7419 | 7463 |
} |
| 7420 | 7464 |
|
| 7421 | 7465 |
/* Responive ------------------------------------------------ */ |
| 7422 | 7466 |
@media only screen and (max-width: 768px) {
|
| 7423 |
/* line 551, ../sass/_common.scss */
|
|
| 7467 |
/* line 599, ../sass/_common.scss */
|
|
| 7424 | 7468 |
body {
|
| 7425 | 7469 |
padding-top: 0; |
| 7426 | 7470 |
} |
| 7427 | 7471 |
|
| 7428 |
/* line 554, ../sass/_common.scss */
|
|
| 7472 |
/* line 602, ../sass/_common.scss */
|
|
| 7429 | 7473 |
.header, .actions-bar {
|
| 7430 | 7474 |
position: static; |
| 7431 | 7475 |
z-index: auto; |
| 7432 | 7476 |
} |
| 7433 | 7477 |
|
| 7434 |
/* line 558, ../sass/_common.scss */
|
|
| 7478 |
/* line 606, ../sass/_common.scss */
|
|
| 7435 | 7479 |
.actions-bar {
|
| 7436 |
top: 160px;
|
|
| 7480 |
top: 120px;
|
|
| 7437 | 7481 |
} |
| 7438 | 7482 |
|
| 7439 |
/* line 561, ../sass/_common.scss */
|
|
| 7483 |
/* line 609, ../sass/_common.scss */
|
|
| 7440 | 7484 |
.header {
|
| 7441 | 7485 |
height: 120px; |
| 7442 | 7486 |
line-height: 50px; |
| 7443 | 7487 |
} |
| 7444 |
/* line 564, ../sass/_common.scss */
|
|
| 7488 |
/* line 612, ../sass/_common.scss */
|
|
| 7445 | 7489 |
.header .icons-nav {
|
| 7446 | 7490 |
position: static; |
| 7447 | 7491 |
} |
| ... | ... | |
| 8394 | 8438 |
position: absolute; |
| 8395 | 8439 |
left: 0; |
| 8396 | 8440 |
right: 0; |
| 8397 |
top: -50px;
|
|
| 8441 |
top: -36px;
|
|
| 8398 | 8442 |
width: 100%; |
| 8399 | 8443 |
height: 100%; |
| 8400 | 8444 |
background: #485057; |
| ... | ... | |
| 8526 | 8570 |
left: 0; |
| 8527 | 8571 |
right: 0; |
| 8528 | 8572 |
bottom: auto; |
| 8529 |
top: 80px;
|
|
| 8573 |
top: 60px;
|
|
| 8530 | 8574 |
width: 100%; |
| 8531 | 8575 |
z-index: 40; |
| 8532 | 8576 |
} |
| ... | ... | |
| 8655 | 8699 |
} |
| 8656 | 8700 |
/* line 272, ../sass/_overlays.scss */ |
| 8657 | 8701 |
.wizard .middle {
|
| 8658 |
padding-top: 90px;
|
|
| 8702 |
padding-top: 76px;
|
|
| 8659 | 8703 |
} |
| 8660 | 8704 |
/* line 274, ../sass/_overlays.scss */ |
| 8661 | 8705 |
.wizard .middle .steps {
|
| ... | ... | |
| 9203 | 9247 |
} |
| 9204 | 9248 |
/* line 772, ../sass/_overlays.scss */ |
| 9205 | 9249 |
.wizard .bottom .row {
|
| 9206 |
height: 50px;
|
|
| 9207 |
line-height: 50px;
|
|
| 9250 |
height: 36px;
|
|
| 9251 |
line-height: 36px;
|
|
| 9208 | 9252 |
} |
| 9209 | 9253 |
/* line 776, ../sass/_overlays.scss */ |
| 9210 | 9254 |
.wizard .bottom .nav {
|
| 9211 |
height: 50px;
|
|
| 9212 |
line-height: 50px;
|
|
| 9255 |
height: 36px;
|
|
| 9256 |
line-height: 36px;
|
|
| 9213 | 9257 |
color: white; |
| 9214 | 9258 |
display: inline-block; |
| 9215 | 9259 |
position: relative; |
| 9216 | 9260 |
font-size: 0.75em; |
| 9217 |
top: 10px;
|
|
| 9261 |
top: 3px;
|
|
| 9218 | 9262 |
width: 100px; |
| 9219 | 9263 |
} |
| 9220 | 9264 |
/* line 786, ../sass/_overlays.scss */ |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html | ||
|---|---|---|
| 670 | 670 |
</div> |
| 671 | 671 |
|
| 672 | 672 |
<section class="actions-bar clearfix"> |
| 673 |
<div class="row"> |
|
| 674 |
<div class="new-btn"><a href="" data-overlay-id="#vm-wizard"><span>+</span> NEW MACHINE </a></div> |
|
| 675 |
<div class="main-actions"> |
|
| 676 |
<ul> |
|
| 677 |
<li class="running" ><a href="" data-overlay-id="#overlay1">Reboot</a></li> |
|
| 678 |
<li class="running"><a href="" data-overlay-id="#overlay1">Shutdown</a></li> |
|
| 679 |
<li class="both"><a href="">Destroy</a></li> |
|
| 680 |
<li class="stopped"><a href="">Start</a></li> |
|
| 681 |
<!-- in case we want an action always activated |
|
| 682 |
<li class="pernament"><a href="" class="active">Action</a></li> --> |
|
| 673 |
<h2>Virtual Machine Overview</h2> |
|
| 674 |
<div id="search-utility" class="search"> |
|
| 675 |
<span class="snf-search"></span> |
|
| 676 |
<form> |
|
| 677 |
<input class="snf-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search"> |
|
| 678 |
</form> |
|
| 679 |
</div> |
|
| 680 |
<div class="filter-menu"> |
|
| 681 |
<a class="filter" href="">Filter</a> |
|
| 682 |
<ul class="options"> |
|
| 683 |
<li><a href=""> set an option</a></li> |
|
| 684 |
<li><a href=""> set an option</a></li> |
|
| 685 |
<li><a href=""> set an option</a></li> |
|
| 686 |
<li><a href=""> set an option</a></li> |
|
| 683 | 687 |
</ul> |
| 684 | 688 |
</div> |
| 685 |
<div id="sb-search" class="sb-search"> |
|
| 686 |
<form> |
|
| 687 |
<input class="sb-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search"> |
|
| 688 |
<input class="sb-search-submit" type="submit" value=""> |
|
| 689 |
<span class="sb-icon-search snf-search"></span> |
|
| 690 |
</form> |
|
| 691 |
</div> |
|
| 692 |
<div class="view-type"> |
|
| 689 |
<div class="view-type"> |
|
| 693 | 690 |
<a href="" class="list"><span class="snf-list"></span></a> |
| 694 | 691 |
<a href="" class="grid"><span class="snf-layout current"></span></a> |
| 695 |
</div> |
|
| 696 |
</div> |
|
| 697 |
<div class="border-dashed"></div> |
|
| 692 |
</div> |
|
| 698 | 693 |
</section> |
| 699 | 694 |
<section class="main row"> |
| 700 | 695 |
<div class="vms entities"> |
| 701 | 696 |
<ul class="items-list small-block-grid-2 large-block-grid-3 sortable"> |
| 702 | 697 |
<li data-order="0"> |
| 703 |
<div class="container"> |
|
| 704 |
<div class="img-wrap"> |
|
| 705 |
<div class="img running"> |
|
| 706 |
<span class="snf-PC_fill" data-reveal-id="vm-connect"></span> |
|
| 707 |
<span class="os" data-reveal-id="vm-connect">unknown</span> |
|
| 708 |
</div> |
|
| 709 |
</div> |
|
| 710 |
<p class="visible-info"> |
|
| 711 |
<span class="title"> |
|
| 712 |
<a href="vm_details.html"><em>vm name 1 really large name</em></a> |
|
| 713 |
</span> |
|
| 714 |
</p> |
|
| 715 |
<div class="tags"> |
|
| 716 |
<a href="" data-tooltip class="has-tip tag1" title="Server"> </a> |
|
| 717 |
<a href="" data-tooltip class="has-tip tag2" title="Experiment"> </a> |
|
| 718 |
</div> |
|
| 719 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
|
| 720 |
</div> |
|
| 698 |
<div class="add-new"><a href="vm_create_a.html" data-overlay-id="#vm-wizard">NEW<br>MACHINE</a></div> |
|
| 721 | 699 |
</li> |
| 722 | 700 |
<li data-order="1"> |
| 723 | 701 |
<div class="container"> |
| ... | ... | |
| 801 | 779 |
</li> |
| 802 | 780 |
|
| 803 | 781 |
<li data-order="5"> |
| 804 |
<div class="add-new"><a href="vm_create_a.html" data-overlay-id="#vm-wizard">NEW<br>MACHINE</a></div> |
|
| 782 |
<div class="container"> |
|
| 783 |
<div class="img-wrap"> |
|
| 784 |
<div class="img running"> |
|
| 785 |
<span class="snf-PC_fill" data-reveal-id="vm-connect"></span> |
|
| 786 |
<span class="os" data-reveal-id="vm-connect">unknown</span> |
|
| 787 |
</div> |
|
| 788 |
</div> |
|
| 789 |
<p class="visible-info"> |
|
| 790 |
<span class="title"> |
|
| 791 |
<a href="vm_details.html"><em>vm name 1 really large name</em></a> |
|
| 792 |
</span> |
|
| 793 |
</p> |
|
| 794 |
<div class="tags"> |
|
| 795 |
<a href="" data-tooltip class="has-tip tag1" title="Server"> </a> |
|
| 796 |
<a href="" data-tooltip class="has-tip tag2" title="Experiment"> </a> |
|
| 797 |
</div> |
|
| 798 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
|
| 799 |
</div> |
|
| 805 | 800 |
</li> |
| 806 | 801 |
|
| 807 | 802 |
</ul> |
| ... | ... | |
| 810 | 805 |
</div> |
| 811 | 806 |
|
| 812 | 807 |
<div id="vm-connect" class="reveal-modal medium"> |
| 813 |
<p>A direct connection to this machine can be established using the <a href="http://en.wikipedia.org/wiki/Secure_Shell" title="">​SSH Protocol</a>. To do so open a terminal and type the following at the prompt to connect to your machine:</p>
|
|
| 808 |
<p>A direct connection to this machine can be established using the<a href="http://en.wikipedia.org/wiki/Secure_Shell" title=""> SSH Protocol</a>. To do so open a terminal and type the following at the prompt to connect to your machine:</p>
|
|
| 814 | 809 |
<p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p> |
| 815 | 810 |
|
| 816 | 811 |
<p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p> |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list_test_header.html | ||
|---|---|---|
| 1 |
|
|
| 2 |
<!DOCTYPE html> |
|
| 3 |
<!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]--> |
|
| 4 |
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> |
|
| 5 |
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> |
|
| 6 |
|
|
| 7 |
<head> |
|
| 8 |
<meta charset="utf-8" /> |
|
| 9 |
<meta name="viewport" content="width=device-width" /> |
|
| 10 |
<title>Synnefo | VM list</title> |
|
| 11 |
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'> |
|
| 12 |
<link rel="stylesheet" href="stylesheets/normalize.css" /> |
|
| 13 |
<link rel="stylesheet" href="stylesheets/app.css" /> |
|
| 14 |
<link rel="stylesheet" href="stylesheets/farbtastic.css" /> |
|
| 15 |
<link rel="stylesheet" href="stylesheets/font_custom.css" /> |
|
| 16 |
<link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" /> |
|
| 17 |
<link rel="stylesheet" href="stylesheets/magnific-popup.css" /> |
|
| 18 |
<link rel="stylesheet" href="stylesheets/ExpandingSearchBar/component.css" /> |
|
| 19 |
|
|
| 20 |
<script src="javascripts/vendor/custom.modernizr.js"></script> |
|
| 21 |
</head> |
|
| 22 |
<body> |
|
| 23 |
<header class="header"> |
|
| 24 |
<nav> |
|
| 25 |
<ul class="icons-nav"> |
|
| 26 |
<li><a href="vm_list.html" data-tooltip class="has-tip current" title="Machines"><span class="snf-PC_fill"></span></a></li> |
|
| 27 |
<li><a href="network_list.html" data-tooltip class="has-tip" title="Networks"><span class="snf-network"></span></a></li> |
|
| 28 |
<li><a href="" data-tooltip class="has-tip" title="Disks"><span class="snf-HDD"></span></a></li> |
|
| 29 |
<li><a href="pithos_list.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li> |
|
| 30 |
</ul> |
|
| 31 |
</nav> |
|
| 32 |
<div class="login"> |
|
| 33 |
<a href=""><span class="snf-lock_open"></span></a> |
|
| 34 |
</div> |
|
| 35 |
<div class="logo"> |
|
| 36 |
<a href="index.html"><img src="images/logo_01.png" alt="software logo"></a> |
|
| 37 |
</div> |
|
| 38 |
</header> |
|
| 39 |
<div class="overlay-wrapper"> |
|
| 40 |
<div class="overlay-area"> |
|
| 41 |
<div id="overlay1" class="overlay-div"> |
|
| 42 |
<a href="" class="close"><span class="snf-close"></span></a> |
|
| 43 |
<p>Are you sure you want to reboot your machine?</p> |
|
| 44 |
<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p> |
|
| 45 |
</div> |
|
| 46 |
<div id="overlay2" class="overlay-div"> |
|
| 47 |
<a href="" class="close"><span class="snf-close"></span></a> |
|
| 48 |
<p>Are you sure you want to shutdown your machine?</p> |
|
| 49 |
<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p> |
|
| 50 |
</div> |
|
| 51 |
<div id="vm-wizard" class="overlay-div wizard"> |
|
| 52 |
<div class="top"> |
|
| 53 |
<div class="numbers"> |
|
| 54 |
<div class="row"> |
|
| 55 |
<a href="" class="close"><span class="snf-close"></span></a> |
|
| 56 |
<ul class="nums"> |
|
| 57 |
<li class="current preselected"> |
|
| 58 |
<em><span>1</span></em> |
|
| 59 |
<p><strong>Select an OS</strong> Choose your preferred image</p> |
|
| 60 |
</li> |
|
| 61 |
<li> |
|
| 62 |
<em><span>2</span></em> |
|
| 63 |
<p><strong>Select CPUs, RAM and Disk Size </strong> |
|
| 64 |
Available options are filtered based on the selected image</p> |
|
| 65 |
</li> |
|
| 66 |
<li> |
|
| 67 |
<em><span>3</span></em> |
|
| 68 |
<p><strong>Virtual machine custom options</strong> |
|
| 69 |
Virtual machine custom options</p> |
|
| 70 |
</li> |
|
| 71 |
<li> |
|
| 72 |
<em><span>4</span></em> |
|
| 73 |
<p><strong>Confirm your settings</strong> |
|
| 74 |
Confirm that the options you have selected are correct</p> |
|
| 75 |
</li> |
|
| 76 |
</ul> |
|
| 77 |
</div> |
|
| 78 |
</div> |
|
| 79 |
<div class="row menus"> |
|
| 80 |
<nav class="sub-menu" data-step=1> |
|
| 81 |
<ul> |
|
| 82 |
<li><a href="" class="current preselected el2 firstfocus-1" data-img-type="system-images">System</a></li> |
|
| 83 |
<li><a href="" data-img-type="my-images">My images</a></li> |
|
| 84 |
<li><a href="" data-img-type="shared-images">Shared with me</a></li> |
|
| 85 |
<li><a href="" data-next="el1" data-img-type="public-images">Public</a></li> |
|
| 86 |
</ul> |
|
| 87 |
</nav> |
|
| 88 |
<nav class="sub-menu" data-step=2> |
|
| 89 |
<ul> |
|
| 90 |
<li><a href="" class="current preselected el4 firstfocus-2" data-size="small">Small</a></li> |
|
| 91 |
<li><a href="" data-size="medium">Medium</a></li> |
|
| 92 |
<li><a href="" data-size="large" data-next="el5">Large</a></li> |
|
| 93 |
</ul> |
|
| 94 |
</nav> |
|
| 95 |
</div> |
|
| 96 |
</div> |
|
| 97 |
<div class="middle"> |
|
| 98 |
<div class="steps"> |
|
| 99 |
<div class="step step-1 current preselected" id="step-1" data-step="1"> |
|
| 100 |
<ul class="os"> |
|
| 101 |
<li class="current preselected system-images"> |
|
| 102 |
<div class="row"> |
|
| 103 |
<div class="img-col"><img src="images/os-kubuntu.png" alt=""></div> |
|
| 104 |
<a href="" class="name-col el1">Kubuntu</a> |
|
| 105 |
<div class="size-col">3.13 GB</div> |
|
| 106 |
<div class="btn-col"><a href="">details</a></div> |
|
| 107 |
</div> |
|
| 108 |
<div class="details"> |
|
| 109 |
<div class="row"> |
|
| 110 |
<h3>Image metadata</h3> |
|
| 111 |
<dl> |
|
| 112 |
<dt>Owner</dt> |
|
| 113 |
<dd>system</dd> |
|
| 114 |
<dt>OS</dt> |
|
| 115 |
<dd>Kubuntu</dd> |
|
| 116 |
<dt>Kernel</dt> |
|
| 117 |
<dd>4.8.2</dd> |
|
| 118 |
<dt>Size</dt> |
|
| 119 |
<dd>2.51GB</dd> |
|
| 120 |
<dt>Users</dt> |
|
| 121 |
<dd>user</dd> |
|
| 122 |
<dt>Root partition</dt> |
|
| 123 |
<dd>1</dd> |
|
| 124 |
</dl> |
|
| 125 |
</div> |
|
| 126 |
</div> |
|
| 127 |
</li> |
|
| 128 |
<li class="public-images"> |
|
| 129 |
<div class="row"> |
|
| 130 |
<div class="img-col"><img src="images/os-kubuntu.png" alt=""></div> |
|
| 131 |
<a href="" class="name-col">Kubuntu LTS</a> |
|
| 132 |
<div class="size-col">10GB</div> |
|
| 133 |
<div class="btn-col"><a href="">details</a></div> |
|
| 134 |
</div> |
|
| 135 |
<div class="details"> |
|
| 136 |
<div class="row"> |
|
| 137 |
<h3>Image metadata</h3> |
|
| 138 |
<dl> |
|
| 139 |
<dt>Owner</dt> |
|
| 140 |
<dd>system</dd> |
|
| 141 |
<dt>OS</dt> |
|
| 142 |
<dd>Kubuntu</dd> |
|
| 143 |
<dt>Kernel</dt> |
|
| 144 |
<dd>4.8.2</dd> |
|
| 145 |
<dt>Size</dt> |
|
| 146 |
<dd>2.51GB</dd> |
|
| 147 |
<dt>Users</dt> |
|
| 148 |
<dd>user</dd> |
|
| 149 |
<dt>Root partition</dt> |
|
| 150 |
<dd>1</dd> |
|
| 151 |
</dl> |
|
| 152 |
</div> |
|
| 153 |
</div> |
|
| 154 |
</li> |
|
| 155 |
<li class="public-images"> |
|
| 156 |
<div class="row"> |
|
| 157 |
<div class="img-col"><img src="images/os-fedora.png" alt=""></div> |
|
| 158 |
<a href="" class="name-col">Fedora</a> |
|
| 159 |
<div class="size-col">10GB</div> |
|
| 160 |
<div class="btn-col"><a href="">details</a></div> |
|
| 161 |
</div> |
|
| 162 |
<div class="details"> |
|
| 163 |
<div class="row"> |
|
| 164 |
<h3>Image metadata</h3> |
|
| 165 |
<dl> |
|
| 166 |
<dt>Owner</dt> |
|
| 167 |
<dd>system</dd> |
|
| 168 |
<dt>OS</dt> |
|
| 169 |
<dd>Kubuntu</dd> |
|
| 170 |
<dt>Kernel</dt> |
|
| 171 |
<dd>4.8.2</dd> |
|
| 172 |
<dt>Size</dt> |
|
| 173 |
<dd>2.51GB</dd> |
|
| 174 |
<dt>Users</dt> |
|
| 175 |
<dd>user</dd> |
|
| 176 |
<dt>Root partition</dt> |
|
| 177 |
<dd>1</dd> |
|
| 178 |
</dl> |
|
| 179 |
</div> |
|
| 180 |
</div> |
|
| 181 |
</li> |
|
| 182 |
<li class="shared-images"> |
|
| 183 |
<div class="row"> |
|
| 184 |
<div class="img-col"><img src="images/os-fedora.png" alt=""></div> |
|
| 185 |
<a href="" class="name-col">Fedora</a> |
|
| 186 |
<div class="size-col">3.67 GB</div> |
|
| 187 |
<div class="btn-col"><a href="">details</a></div> |
|
| 188 |
</div> |
|
| 189 |
<div class="details"> |
|
| 190 |
<div class="row"> |
|
| 191 |
<h3>Image metadata</h3> |
|
| 192 |
<dl> |
|
| 193 |
<dt>Owner</dt> |
|
| 194 |
<dd>system</dd> |
|
| 195 |
<dt>OS</dt> |
|
| 196 |
<dd>Kubuntu</dd> |
|
| 197 |
<dt>Kernel</dt> |
|
| 198 |
<dd>4.8.2</dd> |
|
| 199 |
<dt>Size</dt> |
|
| 200 |
<dd>2.51GB</dd> |
|
| 201 |
<dt>Users</dt> |
|
| 202 |
<dd>user</dd> |
|
| 203 |
<dt>Root partition</dt> |
|
| 204 |
<dd>1</dd> |
|
| 205 |
</dl> |
|
| 206 |
</div> |
|
| 207 |
</div> |
|
| 208 |
</li> |
|
| 209 |
<li class="my-images"> |
|
| 210 |
<div class="row"> |
|
| 211 |
<div class="img-col"><img src="images/os-windows.png" alt=""></div> |
|
| 212 |
<a href="" class="name-col">Windows Server 2012</a> |
|
| 213 |
<div class="size-col">13.66 GB</div> |
|
| 214 |
<div class="btn-col"><a href="">details</a></div> |
|
| 215 |
</div> |
|
| 216 |
<div class="details"> |
|
| 217 |
<div class="row"> |
|
| 218 |
<h3>Image metadata</h3> |
|
| 219 |
<dl> |
|
| 220 |
<dt>Owner</dt> |
|
| 221 |
<dd>system</dd> |
|
| 222 |
<dt>OS</dt> |
|
| 223 |
<dd>Kubuntu</dd> |
|
| 224 |
<dt>Kernel</dt> |
|
| 225 |
<dd>4.8.2</dd> |
|
| 226 |
<dt>Size</dt> |
|
| 227 |
<dd>2.51GB</dd> |
|
| 228 |
<dt>Users</dt> |
|
| 229 |
<dd>user</dd> |
|
| 230 |
<dt>Root partition</dt> |
|
| 231 |
<dd>1</dd> |
|
| 232 |
</dl> |
|
| 233 |
</div> |
|
| 234 |
</div> |
|
| 235 |
</li> |
|
| 236 |
<li class="system-images"> |
|
| 237 |
<div class="row"> |
|
| 238 |
<div class="img-col"><img src="images/os-windows.png" alt=""></div> |
|
| 239 |
<a href="" class="name-col">Windows Server 2012</a> |
|
| 240 |
<div class="size-col">13.66 GB</div> |
|
| 241 |
<div class="btn-col"><a href="">details</a></div> |
|
| 242 |
</div> |
|
| 243 |
<div class="details"> |
|
| 244 |
<div class="row"> |
|
| 245 |
<h3>Image metadata</h3> |
|
| 246 |
<dl> |
|
| 247 |
<dt>Owner</dt> |
|
| 248 |
<dd>system</dd> |
|
| 249 |
<dt>OS</dt> |
|
| 250 |
<dd>Kubuntu</dd> |
|
| 251 |
<dt>Kernel</dt> |
|
| 252 |
<dd>4.8.2</dd> |
|
| 253 |
<dt>Size</dt> |
|
| 254 |
<dd>2.51GB</dd> |
|
| 255 |
<dt>Users</dt> |
|
| 256 |
<dd>user</dd> |
|
| 257 |
<dt>Root partition</dt> |
|
| 258 |
<dd>1</dd> |
|
| 259 |
</dl> |
|
| 260 |
</div> |
|
| 261 |
</div> |
|
| 262 |
</li> |
|
| 263 |
<li class="system-images"> |
|
| 264 |
<div class="row"> |
|
| 265 |
<div class="img-col"><img src="images/os-windows.png" alt=""></div> |
|
| 266 |
<a href="" class="name-col">Windows Server 2008</a> |
|
| 267 |
<div class="size-col">10.79 GB</div> |
|
| 268 |
<div class="btn-col"><a href="" data-next="el3">details</a></div> |
|
| 269 |
</div> |
|
| 270 |
<div class="details"> |
|
| 271 |
<div class="row"> |
|
| 272 |
<h3>Image metadata</h3> |
|
| 273 |
<dl> |
|
| 274 |
<dt>Owner</dt> |
|
| 275 |
<dd>system</dd> |
|
| 276 |
<dt>OS</dt> |
|
| 277 |
<dd>Kubuntu</dd> |
|
| 278 |
<dt>Kernel</dt> |
|
| 279 |
<dd>4.8.2</dd> |
|
| 280 |
<dt>Size</dt> |
|
| 281 |
<dd>2.51GB</dd> |
|
| 282 |
<dt>Users</dt> |
|
| 283 |
<dd>user</dd> |
|
| 284 |
<dt>Root partition</dt> |
|
| 285 |
<dd>1</dd> |
|
| 286 |
</dl> |
|
| 287 |
</div> |
|
| 288 |
</div> |
|
| 289 |
</li> |
|
| 290 |
|
|
| 291 |
</ul> |
|
| 292 |
</div> |
|
| 293 |
<div class="step step-2" id="step-2" data-step=2> |
|
| 294 |
<div class="row"> |
|
| 295 |
<form class="custom"> |
|
| 296 |
<select class="medium"> |
|
| 297 |
<option class="el5">Assign to project</option> |
|
| 298 |
<option>Project 2</option> |
|
| 299 |
<option>Project 3</option> |
|
| 300 |
</select> |
|
| 301 |
</form> |
|
| 302 |
<ul class="flavor"> |
|
| 303 |
<li> |
|
| 304 |
<div class="title"> |
|
| 305 |
<span class="snf-cpu icon"></span> |
|
| 306 |
<h2> |
|
| 307 |
CPU<span> (x cores)</span> |
|
| 308 |
<em>Choose number of CPU cores</em> |
|
| 309 |
</h2> |
|
| 310 |
<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p> |
|
| 311 |
</div> |
|
| 312 |
<div class="options-bar"> |
|
| 313 |
<div class="bar"> |
|
| 314 |
<div class="wrap"> |
|
| 315 |
<div class="container"> |
|
| 316 |
<!-- width percentages do not correspond to actual mesurements --> |
|
| 317 |
<div class="total" style="width:60%"> |
|
| 318 |
<div class="current" style="width:30%"></div> |
|
| 319 |
<span>60%</span> |
|
| 320 |
</div> |
|
| 321 |
</div> |
|
| 322 |
</div> |
|
| 323 |
</div> |
|
| 324 |
<ul class="options with-flavor"> |
|
| 325 |
<li><a href="" class="small current preselected " data-help="help text for 1">1</a></li> |
|
| 326 |
<li><a href="" class="medium" data-help="help text for 2">2</a></li> |
|
| 327 |
<li><a href="" class="large disabled" data-help="help text for 3">3</a></li> |
|
| 328 |
<li><a href="" class="disabled" data-help="help text for 4">4</a></li> |
|
| 329 |
</ul> |
|
| 330 |
</div> |
|
| 331 |
</li> |
|
| 332 |
<li> |
|
| 333 |
<div class="title"> |
|
| 334 |
<span class="snf-ram icon"></span> |
|
| 335 |
<h2> |
|
| 336 |
Memory Size |
|
| 337 |
<span> (MB)</span> |
|
| 338 |
<em>Choose memory size</em> |
|
| 339 |
</h2> |
|
| 340 |
<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p> |
|
| 341 |
</div> |
|
| 342 |
<div class="options-bar"> |
|
| 343 |
<div class="bar"> |
|
| 344 |
<div class="wrap"> |
|
| 345 |
<div class="container"> |
|
| 346 |
<!-- width percentages do not correspond to actual mesurements --> |
|
| 347 |
<div class="total" style="width:60%"> |
|
| 348 |
<div class="current" style="width:30%"></div> |
|
| 349 |
<span>60%</span> |
|
| 350 |
</div> |
|
| 351 |
</div> |
|
| 352 |
</div> |
|
| 353 |
</div> |
|
| 354 |
<ul class="options with-flavor"> |
|
| 355 |
<li><a href="" class="small current preselected">1024</a></li> |
|
| 356 |
<li><a href="" class="medium">2048</a></li> |
|
| 357 |
<li><a href="" class="large">4096</a></li> |
|
| 358 |
</ul> |
|
| 359 |
</div> |
|
| 360 |
</li> |
|
| 361 |
<li> |
|
| 362 |
<div class="title"> |
|
| 363 |
<span class="snf-HDD icon"></span> |
|
| 364 |
<h2> |
|
| 365 |
Disk Size<span> (GB)</span> |
|
| 366 |
<em>Choose disk size</em> |
|
| 367 |
</h2> |
|
| 368 |
<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p> |
|
| 369 |
</div> |
|
| 370 |
<div class="options-bar"> |
|
| 371 |
<div class="bar"> |
|
| 372 |
<div class="wrap"> |
|
| 373 |
<div class="container"> |
|
| 374 |
<!-- width percentages do not correspond to actual mesurements --> |
|
| 375 |
<div class="total" style="width:40%"> |
|
| 376 |
<div class="current" style="width:80%"></div> |
|
| 377 |
<span>40%</span> |
|
| 378 |
</div> |
|
| 379 |
</div> |
|
| 380 |
</div> |
|
| 381 |
</div> |
|
| 382 |
<ul class="options with-flavor"> |
|
| 383 |
<li><a href="" class="small current preselected">10</a></li> |
|
| 384 |
<li><a href="" class="medium">20</a></li> |
|
| 385 |
<li><a href="" class="large">30</a></li> |
|
| 386 |
<li><a href="">40</a></li> |
|
| 387 |
</ul> |
|
| 388 |
</div> |
|
| 389 |
</li> |
|
| 390 |
<li> |
|
| 391 |
<div class="title"> |
|
| 392 |
<span class="snf-HDD icon"></span> |
|
| 393 |
<h2> |
|
| 394 |
Storage |
|
| 395 |
<em>Select storage type</em> |
|
| 396 |
</h2> |
|
| 397 |
<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p> |
|
| 398 |
</div> |
|
| 399 |
<div class="options-bar"> |
|
| 400 |
<div class="bar"> |
|
| 401 |
<div class="wrap disabled-progress-bar"> |
|
| 402 |
<div class="container"> |
|
| 403 |
<!-- width percentages do not correspond to actual mesurements --> |
|
| 404 |
<div class="total" style="width:100%"> |
|
| 405 |
<div class="current" style="width:0%"></div> |
|
| 406 |
<span></span> |
|
| 407 |
</div> |
|
| 408 |
</div> |
|
| 409 |
</div> |
|
| 410 |
</div> |
|
| 411 |
<ul class="options vm-storage-selection"> |
|
| 412 |
<li><a href="" class="current preselected">DRBD</a></li> |
|
| 413 |
<li><a href="" data-next="el3">Archipelago</a></li> |
|
| 414 |
</ul> |
|
| 415 |
</div> |
|
| 416 |
</li> |
|
| 417 |
</ul> |
|
| 418 |
</div> |
|
| 419 |
</div> |
|
| 420 |
<div class="step step-3" id="step-3" data-step=3> |
|
| 421 |
<div class="advanced-conf-step"> |
|
| 422 |
<div class="adv-main row"> |
|
| 423 |
<div class="vm-name"> |
|
| 424 |
<h2>Machine name</h2> |
|
| 425 |
<span class="input"> |
|
| 426 |
<input type="text" placeholder="My Ubuntu Server" class="el7"> |
|
| 427 |
</span> |
|
| 428 |
</div> |
|
| 429 |
<div class="expand-btn"> |
|
| 430 |
<a class="expand-arrow" href=""> |
|
| 431 |
Advanced Configuration |
|
| 432 |
<span class="snf-arrow-down preselected"></span> |
|
| 433 |
</a> |
|
| 434 |
</div> |
|
| 435 |
</div> |
|
| 436 |
<div class="advanced-conf-options"> |
|
| 437 |
<div class="ssh-keys-area area"> |
|
| 438 |
<div class="row"> |
|
| 439 |
<h2>Public SSH keys</h2> |
|
| 440 |
<p>Your account contains the following SSH public keys. Select one or more to activate in your new machine. You will then be able to ssh with the corresponding private key without a password."</p> |
|
| 441 |
<ul> |
|
| 442 |
<li class="with-checkbox"> |
|
| 443 |
<h3>My public key long name one </h3> |
|
| 444 |
<a href="" class="check"> |
|
| 445 |
<span class="snf-checkbox-unchecked"></span> |
|
| 446 |
</a> |
|
| 447 |
</li> |
|
| 448 |
<li class="with-checkbox"> |
|
| 449 |
<h3>Other public key </h3> |
|
| 450 |
<a href="" class="check"> |
|
| 451 |
<span class="snf-checkbox-unchecked"></span> |
|
| 452 |
</a> |
|
| 453 |
</li> |
|
Also available in: Unified diff