Revision 44110e0e
b/snf-cyclades-app/synnefo/ui/new_ui/ui/Gruntfile.js | ||
---|---|---|
19 | 19 |
tasks: ['concat'] |
20 | 20 |
}, |
21 | 21 |
templates: { |
22 |
files: ['javascripts/templates/*.hbs', 'javascripts/templates/components/*.hbs'], |
|
22 |
files: ['javascripts/templates/*.hbs', 'javascripts/templates/components/*.hbs', 'javascripts/templates/wizardSteps/*.hbs'],
|
|
23 | 23 |
tasks: ['emberTemplates'] |
24 | 24 |
} |
25 | 25 |
}, |
... | ... | |
49 | 49 |
templateBasePath: /javascripts\/templates\// |
50 | 50 |
}, |
51 | 51 |
files: { |
52 |
'javascripts/templates.js': ['javascripts/templates/*.hbs', 'javascripts/templates/components/*.hbs'] |
|
52 |
'javascripts/templates.js': ['javascripts/templates/*.hbs', 'javascripts/templates/components/*.hbs', 'javascripts/templates/wizardSteps/*.hbs']
|
|
53 | 53 |
} |
54 | 54 |
}, |
55 | 55 |
files: 'templates/*', |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/okeanos-ember.js | ||
---|---|---|
441 | 441 |
Synnefo.CreateController = Ember.ObjectController.extend({ |
442 | 442 |
currentStep: undefined, |
443 | 443 |
|
444 |
totalStep: function() { |
|
444 |
totalSteps: function() {
|
|
445 | 445 |
return this.get('stepsContent').length; |
446 | 446 |
}.property(), |
447 | 447 |
|
... | ... | |
454 | 454 |
}.property('currentStep'), |
455 | 455 |
|
456 | 456 |
btnRightLabel: function(){ |
457 |
return (this.get('currentStep') === this.get('totalStep'))?'CREATE':'NEXT'; |
|
457 |
return (this.get('currentStep') === this.get('totalSteps'))?'CREATE':'NEXT';
|
|
458 | 458 |
}.property('currentStep'), |
459 | 459 |
|
460 |
onMove: false, |
|
461 |
directionMove: undefined, |
|
462 |
|
|
460 | 463 |
actions: { |
461 | 464 |
moveNext: function() { |
462 |
var step = this.get('currentStep'); |
|
463 |
|
|
464 |
if(step!== this.get('totalStep')) { |
|
465 |
step++; |
|
466 |
this.set('currentStep', step); |
|
467 |
} |
|
468 |
else { |
|
469 |
this.init(); |
|
470 |
this.get('target').send('closeWizard'); |
|
465 |
if(!this.get('onMove')) { |
|
466 |
var step = this.get('currentStep'); |
|
467 |
if(step=== this.get('totalSteps')) { |
|
468 |
this.init(); |
|
469 |
this.get('target').send('closeWizard'); |
|
470 |
} |
|
471 |
this.set('directionMove', 'next'); |
|
472 |
this.set('onMove', !(this.get('onMove'))); |
|
471 | 473 |
} |
472 | 474 |
}, |
473 | 475 |
moveBack: function() { |
474 |
var step = this.get('currentStep'); |
|
475 |
|
|
476 |
if(step === 1) { |
|
477 |
this.init(); |
|
478 |
this.get('target').send('closeWizard'); |
|
479 |
} |
|
480 |
else { |
|
481 |
step--; |
|
482 |
this.set('currentStep', step); |
|
476 |
if(!this.get('onMove')) { |
|
477 |
var step = this.get('currentStep'); |
|
478 |
if(step === 1) { |
|
479 |
this.init(); |
|
480 |
this.get('target').send('closeWizard'); |
|
481 |
} |
|
482 |
this.set('directionMove', 'prev'); |
|
483 |
this.set('onMove', !(this.get('onMove'))); |
|
483 | 484 |
} |
484 |
} |
|
485 |
},
|
|
485 |
},
|
|
486 |
} |
|
486 | 487 |
|
487 | 488 |
}); |
488 | 489 |
|
489 |
Synnefo.VmsCreateController =Synnefo.CreateController.extend(); |
|
490 |
|
|
491 |
|
|
492 |
|
|
493 |
Synnefo.VmsCreateController = Synnefo.CreateController.extend(); |
|
490 | 494 |
; |
491 | 495 |
/* Views */ |
492 | 496 |
|
497 |
Ember.View.reopen({ |
|
498 |
didInsertElement: function() { |
|
499 |
this.set('elIsInserted', true); |
|
500 |
this._super(); |
|
501 |
}, |
|
502 |
|
|
503 |
willDestroyElement: function() { |
|
504 |
this.set('elIsInserted', false); |
|
505 |
this._super(); |
|
506 |
} |
|
507 |
}); |
|
508 |
|
|
509 |
|
|
493 | 510 |
Synnefo.ApplicationView = Ember.View.extend({ |
494 | 511 |
classNames: ['content'] |
495 | 512 |
}); |
... | ... | |
570 | 587 |
|
571 | 588 |
/* Wizard */ |
572 | 589 |
|
590 |
|
|
573 | 591 |
Synnefo.CollectionView = Ember.CollectionView.extend({ |
574 | 592 |
counter: 0 |
575 | 593 |
}); |
... | ... | |
578 | 596 |
// so when we want to use Synnefo.CollectionItemView, the collection that includes has extend Synnefo.CollectionView |
579 | 597 |
Synnefo.CollectionItemView = Ember.View.extend({ |
580 | 598 |
// classNameBindings: ['isCurrent:current::', 'isFirst:preselected', 'isPast:past::'], |
581 |
index: undefined, |
|
599 |
index: undefined, // index>=1
|
|
582 | 600 |
isCurrent: false, |
583 | 601 |
isFirst: false, |
602 |
isPrev: false, |
|
584 | 603 |
init: function() { |
585 | 604 |
this._super(); |
586 | 605 |
var prevIndex = this.get('parentView').get('counter'); |
... | ... | |
596 | 615 |
}.property('controller.currentStep'), |
597 | 616 |
isPast: function() { |
598 | 617 |
return this.index < this.get('controller').get('currentStep'); |
618 |
}.property('controller.currentStep'), |
|
619 |
isNext: function() { |
|
620 |
return this.index === (this.get('controller').get('currentStep')+1); |
|
621 |
}.property('controller.currentStep'), |
|
622 |
isPrev: function() { |
|
623 |
return this.index === (this.get('controller').get('currentStep')-1); |
|
599 | 624 |
}.property('controller.currentStep') |
600 | 625 |
}); |
601 | 626 |
|
602 | 627 |
|
628 |
Synnefo.WizardStepView = Synnefo.CollectionItemView.extend({ |
|
629 |
classNames: ['step'], |
|
630 |
classNameBindings: ['isFirst:current::', 'isFirst:preselected', 'isNext:next::', 'isPrev:prev::'], |
|
631 |
templateName: function() { |
|
632 |
return 'wizardSteps/step-'+this.get('index'); |
|
633 |
}.property(), |
|
634 |
}); |
|
635 |
|
|
636 |
Synnefo.WizardStepsView = Synnefo.CollectionView.extend({ |
|
637 |
classNames: 'middle', |
|
638 |
content: Synnefo.wizards.vmWizard.stepsContent, |
|
639 |
itemViewClass: Synnefo.WizardStepView, |
|
640 |
move: function() { |
|
641 |
if(this.get('elIsInserted')) { |
|
642 |
var onMove = this.get('controller').get('onMove'); |
|
643 |
if(onMove) { |
|
644 |
var el = this.$(); |
|
645 |
var self = this; |
|
646 |
// I find the current step from the view's property |
|
647 |
// not from dom's class to be sure that there will be no sychronisation problem? |
|
648 |
var direction = this.get('controller').get('directionMove'); |
|
649 |
var viewCurrent = this._childViews.findBy('isCurrent', true); |
|
650 |
var totalSteps = this.get('controller').get('totalSteps') |
|
651 |
|
|
652 |
if(!(direction === 'next' && viewCurrent.get('index') === totalSteps) && !(direction === 'prev' && viewCurrent.get('index') === 1)) { |
|
653 |
var elCurrent = el.find('.current'); |
|
654 |
var elSteps = el.find('.step'); |
|
655 |
var pos = (direction==='next')?(100):(-100); |
|
656 |
var viewToDisplay; |
|
657 |
var elToDisplay |
|
658 |
|
|
659 |
if(direction === 'next') { |
|
660 |
viewToDisplay = this._childViews.findBy('isNext', true); |
|
661 |
elToDisplay = el.find('.next'); |
|
662 |
} |
|
663 |
else { |
|
664 |
viewToDisplay = this._childViews.findBy('isPrev', true); |
|
665 |
elToDisplay = el.find('.prev'); |
|
666 |
} |
|
667 |
|
|
668 |
$('body').css('overflow', 'hidden'); |
|
669 |
|
|
670 |
elToDisplay.css({ |
|
671 |
left: pos.toString()+'%' |
|
672 |
}).addClass('current'); |
|
673 |
|
|
674 |
elToDisplay.css({ |
|
675 |
top: document.body.scrollTop + 'px' |
|
676 |
}); |
|
677 |
|
|
678 |
elSteps.animate({ |
|
679 |
marginLeft: (-pos).toString() + '%' |
|
680 |
},{ |
|
681 |
complete: _.bind(function() { |
|
682 |
elCurrent.removeClass('current'); |
|
683 |
window.scroll(0, 0); |
|
684 |
elToDisplay.css({ |
|
685 |
left: '0', |
|
686 |
top: '0' |
|
687 |
}); |
|
688 |
elSteps.css({ |
|
689 |
marginLeft: '0' |
|
690 |
}); |
|
691 |
$('body').css('overflow', 'visible'); |
|
692 |
|
|
693 |
viewCurrent.set('isCurrent', false); |
|
694 |
viewToDisplay.set('isCurrent', true); |
|
695 |
self.get('controller').set('currentStep',viewToDisplay.get('index')); |
|
696 |
}, this) |
|
697 |
}); |
|
698 |
} |
|
699 |
this.get('controller').set('onMove', false); |
|
700 |
} |
|
701 |
} |
|
702 |
}.observes('controller.onMove'), |
|
703 |
didInsertElement: function() { |
|
704 |
this._super(); |
|
705 |
$('body').addClass('with-overlay'); |
|
706 |
}, |
|
707 |
willDestroyElement: function() { |
|
708 |
this._super(); |
|
709 |
$('body').removeClass('with-overlay'); |
|
710 |
} |
|
711 |
}); |
|
712 |
|
|
713 |
|
|
714 |
|
|
603 | 715 |
Synnefo.WizardHeadersView = Synnefo.CollectionView.extend({ |
604 | 716 |
tagName: 'ul', |
605 | 717 |
classNames:['nums'], |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/okeanos-ember/controllers.js | ||
---|---|---|
115 | 115 |
Synnefo.CreateController = Ember.ObjectController.extend({ |
116 | 116 |
currentStep: undefined, |
117 | 117 |
|
118 |
totalStep: function() { |
|
118 |
totalSteps: function() {
|
|
119 | 119 |
return this.get('stepsContent').length; |
120 | 120 |
}.property(), |
121 | 121 |
|
... | ... | |
128 | 128 |
}.property('currentStep'), |
129 | 129 |
|
130 | 130 |
btnRightLabel: function(){ |
131 |
return (this.get('currentStep') === this.get('totalStep'))?'CREATE':'NEXT'; |
|
131 |
return (this.get('currentStep') === this.get('totalSteps'))?'CREATE':'NEXT';
|
|
132 | 132 |
}.property('currentStep'), |
133 | 133 |
|
134 |
onMove: false, |
|
135 |
directionMove: undefined, |
|
136 |
|
|
134 | 137 |
actions: { |
135 | 138 |
moveNext: function() { |
136 |
var step = this.get('currentStep'); |
|
137 |
|
|
138 |
if(step!== this.get('totalStep')) { |
|
139 |
step++; |
|
140 |
this.set('currentStep', step); |
|
141 |
} |
|
142 |
else { |
|
143 |
this.init(); |
|
144 |
this.get('target').send('closeWizard'); |
|
139 |
if(!this.get('onMove')) { |
|
140 |
var step = this.get('currentStep'); |
|
141 |
if(step=== this.get('totalSteps')) { |
|
142 |
this.init(); |
|
143 |
this.get('target').send('closeWizard'); |
|
144 |
} |
|
145 |
this.set('directionMove', 'next'); |
|
146 |
this.set('onMove', !(this.get('onMove'))); |
|
145 | 147 |
} |
146 | 148 |
}, |
147 | 149 |
moveBack: function() { |
148 |
var step = this.get('currentStep'); |
|
149 |
|
|
150 |
if(step === 1) { |
|
151 |
this.init(); |
|
152 |
this.get('target').send('closeWizard'); |
|
153 |
} |
|
154 |
else { |
|
155 |
step--; |
|
156 |
this.set('currentStep', step); |
|
150 |
if(!this.get('onMove')) { |
|
151 |
var step = this.get('currentStep'); |
|
152 |
if(step === 1) { |
|
153 |
this.init(); |
|
154 |
this.get('target').send('closeWizard'); |
|
155 |
} |
|
156 |
this.set('directionMove', 'prev'); |
|
157 |
this.set('onMove', !(this.get('onMove'))); |
|
157 | 158 |
} |
158 |
} |
|
159 |
},
|
|
159 |
},
|
|
160 |
} |
|
160 | 161 |
|
161 | 162 |
}); |
162 | 163 |
|
163 |
Synnefo.VmsCreateController =Synnefo.CreateController.extend(); |
|
164 |
|
|
165 |
|
|
166 |
|
|
167 |
Synnefo.VmsCreateController = Synnefo.CreateController.extend(); |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/okeanos-ember/views.js | ||
---|---|---|
1 | 1 |
|
2 | 2 |
/* Views */ |
3 | 3 |
|
4 |
Ember.View.reopen({ |
|
5 |
didInsertElement: function() { |
|
6 |
this.set('elIsInserted', true); |
|
7 |
this._super(); |
|
8 |
}, |
|
9 |
|
|
10 |
willDestroyElement: function() { |
|
11 |
this.set('elIsInserted', false); |
|
12 |
this._super(); |
|
13 |
} |
|
14 |
}); |
|
15 |
|
|
16 |
|
|
4 | 17 |
Synnefo.ApplicationView = Ember.View.extend({ |
5 | 18 |
classNames: ['content'] |
6 | 19 |
}); |
... | ... | |
81 | 94 |
|
82 | 95 |
/* Wizard */ |
83 | 96 |
|
97 |
|
|
84 | 98 |
Synnefo.CollectionView = Ember.CollectionView.extend({ |
85 | 99 |
counter: 0 |
86 | 100 |
}); |
... | ... | |
89 | 103 |
// so when we want to use Synnefo.CollectionItemView, the collection that includes has extend Synnefo.CollectionView |
90 | 104 |
Synnefo.CollectionItemView = Ember.View.extend({ |
91 | 105 |
// classNameBindings: ['isCurrent:current::', 'isFirst:preselected', 'isPast:past::'], |
92 |
index: undefined, |
|
106 |
index: undefined, // index>=1
|
|
93 | 107 |
isCurrent: false, |
94 | 108 |
isFirst: false, |
109 |
isPrev: false, |
|
95 | 110 |
init: function() { |
96 | 111 |
this._super(); |
97 | 112 |
var prevIndex = this.get('parentView').get('counter'); |
... | ... | |
107 | 122 |
}.property('controller.currentStep'), |
108 | 123 |
isPast: function() { |
109 | 124 |
return this.index < this.get('controller').get('currentStep'); |
125 |
}.property('controller.currentStep'), |
|
126 |
isNext: function() { |
|
127 |
return this.index === (this.get('controller').get('currentStep')+1); |
|
128 |
}.property('controller.currentStep'), |
|
129 |
isPrev: function() { |
|
130 |
return this.index === (this.get('controller').get('currentStep')-1); |
|
110 | 131 |
}.property('controller.currentStep') |
111 | 132 |
}); |
112 | 133 |
|
113 | 134 |
|
135 |
Synnefo.WizardStepView = Synnefo.CollectionItemView.extend({ |
|
136 |
classNames: ['step'], |
|
137 |
classNameBindings: ['isFirst:current::', 'isFirst:preselected', 'isNext:next::', 'isPrev:prev::'], |
|
138 |
templateName: function() { |
|
139 |
return 'wizardSteps/step-'+this.get('index'); |
|
140 |
}.property(), |
|
141 |
}); |
|
142 |
|
|
143 |
Synnefo.WizardStepsView = Synnefo.CollectionView.extend({ |
|
144 |
classNames: 'middle', |
|
145 |
content: Synnefo.wizards.vmWizard.stepsContent, |
|
146 |
itemViewClass: Synnefo.WizardStepView, |
|
147 |
move: function() { |
|
148 |
if(this.get('elIsInserted')) { |
|
149 |
var onMove = this.get('controller').get('onMove'); |
|
150 |
if(onMove) { |
|
151 |
var el = this.$(); |
|
152 |
var self = this; |
|
153 |
// I find the current step from the view's property |
|
154 |
// not from dom's class to be sure that there will be no sychronisation problem? |
|
155 |
var direction = this.get('controller').get('directionMove'); |
|
156 |
var viewCurrent = this._childViews.findBy('isCurrent', true); |
|
157 |
var totalSteps = this.get('controller').get('totalSteps') |
|
158 |
|
|
159 |
if(!(direction === 'next' && viewCurrent.get('index') === totalSteps) && !(direction === 'prev' && viewCurrent.get('index') === 1)) { |
|
160 |
var elCurrent = el.find('.current'); |
|
161 |
var elSteps = el.find('.step'); |
|
162 |
var pos = (direction==='next')?(100):(-100); |
|
163 |
var viewToDisplay; |
|
164 |
var elToDisplay |
|
165 |
|
|
166 |
if(direction === 'next') { |
|
167 |
viewToDisplay = this._childViews.findBy('isNext', true); |
|
168 |
elToDisplay = el.find('.next'); |
|
169 |
} |
|
170 |
else { |
|
171 |
viewToDisplay = this._childViews.findBy('isPrev', true); |
|
172 |
elToDisplay = el.find('.prev'); |
|
173 |
} |
|
174 |
|
|
175 |
$('body').css('overflow', 'hidden'); |
|
176 |
|
|
177 |
elToDisplay.css({ |
|
178 |
left: pos.toString()+'%' |
|
179 |
}).addClass('current'); |
|
180 |
|
|
181 |
elToDisplay.css({ |
|
182 |
top: document.body.scrollTop + 'px' |
|
183 |
}); |
|
184 |
|
|
185 |
elSteps.animate({ |
|
186 |
marginLeft: (-pos).toString() + '%' |
|
187 |
},{ |
|
188 |
complete: _.bind(function() { |
|
189 |
elCurrent.removeClass('current'); |
|
190 |
window.scroll(0, 0); |
|
191 |
elToDisplay.css({ |
|
192 |
left: '0', |
|
193 |
top: '0' |
|
194 |
}); |
|
195 |
elSteps.css({ |
|
196 |
marginLeft: '0' |
|
197 |
}); |
|
198 |
$('body').css('overflow', 'visible'); |
|
199 |
|
|
200 |
viewCurrent.set('isCurrent', false); |
|
201 |
viewToDisplay.set('isCurrent', true); |
|
202 |
self.get('controller').set('currentStep',viewToDisplay.get('index')); |
|
203 |
}, this) |
|
204 |
}); |
|
205 |
} |
|
206 |
this.get('controller').set('onMove', false); |
|
207 |
} |
|
208 |
} |
|
209 |
}.observes('controller.onMove'), |
|
210 |
didInsertElement: function() { |
|
211 |
this._super(); |
|
212 |
$('body').addClass('with-overlay'); |
|
213 |
}, |
|
214 |
willDestroyElement: function() { |
|
215 |
this._super(); |
|
216 |
$('body').removeClass('with-overlay'); |
|
217 |
} |
|
218 |
}); |
|
219 |
|
|
220 |
|
|
221 |
|
|
114 | 222 |
Synnefo.WizardHeadersView = Synnefo.CollectionView.extend({ |
115 | 223 |
tagName: 'ul', |
116 | 224 |
classNames:['nums'], |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates.js | ||
---|---|---|
275 | 275 |
data.buffer.push(escapeExpression((helper = helpers.collection || (depth0 && depth0.collection),options={hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data},helper ? helper.call(depth0, "Synnefo.WizardHeadersView", options) : helperMissing.call(depth0, "collection", "Synnefo.WizardHeadersView", options)))); |
276 | 276 |
data.buffer.push("\n </div>\n "); |
277 | 277 |
data.buffer.push(escapeExpression((helper = helpers.collection || (depth0 && depth0.collection),options={hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data},helper ? helper.call(depth0, "Synnefo.WizardSubMenusView", options) : helperMissing.call(depth0, "collection", "Synnefo.WizardSubMenusView", options)))); |
278 |
data.buffer.push("\n </div>\n <div class=\"middle\"></div>\n <div class=\"bottom\">\n <div class=\"row\">\n "); |
|
278 |
data.buffer.push("\n </div>\n "); |
|
279 |
data.buffer.push(escapeExpression((helper = helpers.collection || (depth0 && depth0.collection),options={hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data},helper ? helper.call(depth0, "Synnefo.WizardStepsView", options) : helperMissing.call(depth0, "collection", "Synnefo.WizardStepsView", options)))); |
|
280 |
data.buffer.push("\n <div class=\"bottom\">\n <div class=\"row\">\n "); |
|
279 | 281 |
data.buffer.push(escapeExpression(helpers.view.call(depth0, "Synnefo.WizardBtnBackView", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data}))); |
280 | 282 |
data.buffer.push("\n "); |
281 | 283 |
data.buffer.push(escapeExpression(helpers.view.call(depth0, "Synnefo.WizardBtnNextView", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data}))); |
... | ... | |
364 | 366 |
|
365 | 367 |
data.buffer.push("<span></span>"); |
366 | 368 |
|
369 |
}); |
|
370 |
|
|
371 |
Ember.TEMPLATES["wizardSteps/step-1"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data |
|
372 |
/**/) { |
|
373 |
this.compilerInfo = [4,'>= 1.0.0']; |
|
374 |
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {}; |
|
375 |
var buffer = '', stack1; |
|
376 |
|
|
377 |
|
|
378 |
data.buffer.push("<span>"); |
|
379 |
stack1 = helpers._triageMustache.call(depth0, "view.content", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data}); |
|
380 |
if(stack1 || stack1 === 0) { data.buffer.push(stack1); } |
|
381 |
data.buffer.push("</span>\n <ul class=\"os\">\n <li class=\"current preselected system-images\">\n <div class=\"row\">\n <div class=\"img-col\"><img src=\"images/os-kubuntu.png\" alt=\"\"></div>\n <a href=\"\" class=\"name-col el1\">Kubuntu</a>\n <div class=\"size-col\">3.13 GB</div>\n <div class=\"btn-col\"><a href=\"\">details</a></div>\n </div>\n <div class=\"details\">\n <div class=\"row\">\n <h3>Image metadata</h3>\n <dl>\n <dt>Owner</dt>\n <dd>system</dd>\n <dt>OS</dt>\n <dd>Kubuntu</dd>\n <dt>Kernel</dt>\n <dd>4.8.2</dd>\n <dt>Size</dt>\n <dd>2.51GB</dd>\n <dt>Users</dt>\n <dd>user</dd>\n <dt>Root partition</dt>\n <dd>1</dd>\n </dl>\n </div>\n </div>\n </li>\n <li class=\"public-images\">\n <div class=\"row\">\n <div class=\"img-col\"><img src=\"images/os-kubuntu.png\" alt=\"\"></div>\n <a href=\"\" class=\"name-col\">Kubuntu LTS (by Kpal)</a>\n <div class=\"size-col\">10GB</div>\n <div class=\"btn-col\"><a href=\"\">details</a></div>\n </div>\n <div class=\"details\">\n <div class=\"row\">\n <h3>Image metadata</h3>\n <dl>\n <dt>Owner</dt>\n <dd>system</dd>\n <dt>OS</dt>\n <dd>Kubuntu</dd>\n <dt>Kernel</dt>\n <dd>4.8.2</dd>\n <dt>Size</dt>\n <dd>2.51GB</dd>\n <dt>Users</dt>\n <dd>user</dd>\n <dt>Root partition</dt>\n <dd>1</dd>\n </dl>\n </div>\n </div>\n </li>\n <li class=\"public-images\">\n <div class=\"row\">\n <div class=\"img-col\"><img src=\"images/os-fedora.png\" alt=\"\"></div>\n <a href=\"\" class=\"name-col\">Fedora (by Athina)</a>\n <div class=\"size-col\">10GB</div>\n <div class=\"btn-col\"><a href=\"\">details</a></div>\n </div>\n <div class=\"details\">\n <div class=\"row\">\n <h3>Image metadata</h3>\n <dl>\n <dt>Owner</dt>\n <dd>system</dd>\n <dt>OS</dt>\n <dd>Kubuntu</dd>\n <dt>Kernel</dt>\n <dd>4.8.2</dd>\n <dt>Size</dt>\n <dd>2.51GB</dd>\n <dt>Users</dt>\n <dd>user</dd>\n <dt>Root partition</dt>\n <dd>1</dd>\n </dl>\n </div>\n </div>\n </li>\n <li class=\"shared-images\">\n <div class=\"row\">\n <div class=\"img-col\"><img src=\"images/os-fedora.png\" alt=\"\"></div>\n <a href=\"\" class=\"name-col\">Fedora (by Athina)</a>\n <div class=\"size-col\">3.67 GB</div>\n <div class=\"btn-col\"><a href=\"\">details</a></div>\n </div>\n <div class=\"details\">\n <div class=\"row\">\n <h3>Image metadata</h3>\n <dl>\n <dt>Owner</dt>\n <dd>system</dd>\n <dt>OS</dt>\n <dd>Kubuntu</dd>\n <dt>Kernel</dt>\n <dd>4.8.2</dd>\n <dt>Size</dt>\n <dd>2.51GB</dd>\n <dt>Users</dt>\n <dd>user</dd>\n <dt>Root partition</dt>\n <dd>1</dd>\n </dl>\n </div>\n </div>\n </li>\n <li class=\"my-images\">\n <div class=\"row\">\n <div class=\"img-col\"><img src=\"images/os-windows.png\" alt=\"\"></div>\n <a href=\"\" class=\"name-col\">Windows Server 2012</a>\n <div class=\"size-col\">13.66 GB</div>\n <div class=\"btn-col\"><a href=\"\">details</a></div>\n </div>\n <div class=\"details\">\n <div class=\"row\">\n <h3>Image metadata</h3>\n <dl>\n <dt>Owner</dt>\n <dd>system</dd>\n <dt>OS</dt>\n <dd>Kubuntu</dd>\n <dt>Kernel</dt>\n <dd>4.8.2</dd>\n <dt>Size</dt>\n <dd>2.51GB</dd>\n <dt>Users</dt>\n <dd>user</dd>\n <dt>Root partition</dt>\n <dd>1</dd>\n </dl>\n </div>\n </div>\n </li>\n <li class=\"system-images\">\n <div class=\"row\">\n <div class=\"img-col\"><img src=\"images/os-windows.png\" alt=\"\"></div>\n <a href=\"\" class=\"name-col\">Windows Server 2012</a>\n <div class=\"size-col\">13.66 GB</div>\n <div class=\"btn-col\"><a href=\"\">details</a></div>\n </div>\n <div class=\"details\">\n <div class=\"row\">\n <h3>Image metadata</h3>\n <dl>\n <dt>Owner</dt>\n <dd>system</dd>\n <dt>OS</dt>\n <dd>Kubuntu</dd>\n <dt>Kernel</dt>\n <dd>4.8.2</dd>\n <dt>Size</dt>\n <dd>2.51GB</dd>\n <dt>Users</dt>\n <dd>user</dd>\n <dt>Root partition</dt>\n <dd>1</dd>\n </dl>\n </div>\n </div>\n </li>\n <li class=\"system-images\">\n <div class=\"row\">\n <div class=\"img-col\"><img src=\"images/os-windows.png\" alt=\"\"></div>\n <a href=\"\" class=\"name-col\">Windows Server 2008</a>\n <div class=\"size-col\">10.79 GB</div>\n <div class=\"btn-col\"><a href=\"\" data-next=\"el3\">details</a></div>\n </div>\n <div class=\"details\">\n <div class=\"row\">\n <h3>Image metadata</h3>\n <dl>\n <dt>Owner</dt>\n <dd>system</dd>\n <dt>OS</dt>\n <dd>Kubuntu</dd>\n <dt>Kernel</dt>\n <dd>4.8.2</dd>\n <dt>Size</dt>\n <dd>2.51GB</dd>\n <dt>Users</dt>\n <dd>user</dd>\n <dt>Root partition</dt>\n <dd>1</dd>\n </dl>\n </div>\n </div>\n </li>\n \n </ul>"); |
|
382 |
return buffer; |
|
383 |
|
|
384 |
}); |
|
385 |
|
|
386 |
Ember.TEMPLATES["wizardSteps/step-2"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data |
|
387 |
/**/) { |
|
388 |
this.compilerInfo = [4,'>= 1.0.0']; |
|
389 |
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {}; |
|
390 |
var buffer = '', stack1; |
|
391 |
|
|
392 |
|
|
393 |
data.buffer.push("<h3>"); |
|
394 |
stack1 = helpers._triageMustache.call(depth0, "view.content", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data}); |
|
395 |
if(stack1 || stack1 === 0) { data.buffer.push(stack1); } |
|
396 |
data.buffer.push("</h3>\n<div class=\"row\">\n <form class=\"custom\">\n <select class=\"medium\">\n <option class=\"el5\">Basic Project</option>\n <option>Project 2</option>\n <option>Project 3</option>\n </select>\n </form>\n <ul class=\"flavor\">\n <li>\n <div class=\"title\">\n <span class=\"snf-chip-outline snf-font\"></span>\n <h2>\n CPU<span> (x cores)</span>\n <em>Choose number of CPU cores</em>\n </h2>\n <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>\n </div>\n <div class=\"options-bar\">\n <div class=\"bar\">\n <div class=\"wrap\">\n <div class=\"container\">\n <!-- width percentages do not correspond to actual mesurements -->\n <div class=\"total\" style=\"width:60%\">\n <div class=\"current\" style=\"width:30%\"></div>\n <span>60%</span>\n </div>\n </div>\n </div>\n </div>\n <ul class=\"options with-flavor\">\n <li><a href=\"\" class=\"small current preselected \" data-help=\"help text for 1\">1</a></li>\n <li><a href=\"\" class=\"medium\" data-help=\"help text for 2\">2</a></li>\n <li><a href=\"\" class=\"large disabled\" data-help=\"help text for 3\">3</a></li>\n <li><a href=\"\" class=\"disabled\" data-help=\"help text for 4\">4</a></li>\n </ul>\n </div>\n </li>\n <li>\n <div class=\"title\">\n <span class=\"snf-ram-outline snf-font\"></span>\n <h2>\n Memory Size \n <span> (MB)</span>\n <em>Choose memory size</em>\n </h2>\n <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>\n </div>\n <div class=\"options-bar\">\n <div class=\"bar\">\n <div class=\"wrap\">\n <div class=\"container\">\n <!-- width percentages do not correspond to actual mesurements -->\n <div class=\"total\" style=\"width:60%\">\n <div class=\"current\" style=\"width:30%\"></div>\n <span>60%</span>\n </div>\n </div>\n </div>\n </div>\n <ul class=\"options with-flavor\">\n <li><a href=\"\" class=\"small current preselected\">1024</a></li>\n <li><a href=\"\" class=\"medium\">2048</a></li>\n <li><a href=\"\" class=\"large\">4096</a></li>\n </ul>\n </div>\n </li>\n <li>\n <div class=\"title\">\n <span class=\"snf-volume-outline snf-font\"></span>\n <h2>\n Disk Size<span> (GB)</span>\n <em>Choose disk size</em>\n </h2>\n <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>\n </div>\n <div class=\"options-bar\">\n <div class=\"bar\">\n <div class=\"wrap\">\n <div class=\"container\">\n <!-- width percentages do not correspond to actual mesurements -->\n <div class=\"total low\" style=\"width:40%\">\n <div class=\"current\" style=\"width:80%\"></div>\n <span>40%</span>\n </div>\n </div>\n </div>\n </div>\n <ul class=\"options with-flavor\">\n <li><a href=\"\" class=\"small current preselected\">10</a></li>\n <li><a href=\"\" class=\"medium\">20</a></li>\n <li><a href=\"\" class=\"large\">30</a></li>\n <li><a href=\"\">40</a></li>\n </ul>\n </div>\n </li>\n <li>\n <div class=\"title\">\n <span class=\"snf-volume-outline snf-font\"></span>\n <h2>\n Storage\n <em>Select storage type</em>\n </h2>\n <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>\n </div>\n <div class=\"options-bar\">\n <div class=\"bar\">\n <div class=\"wrap disabled-progress-bar\">\n <div class=\"container\">\n <!-- width percentages do not correspond to actual mesurements -->\n <div class=\"total\" style=\"width:100%\">\n <div class=\"current\" style=\"width:0%\"></div>\n <span></span>\n </div>\n </div>\n </div>\n </div>\n <ul class=\"options vm-storage-selection\">\n <li><a href=\"\" class=\"current preselected\">DRBD</a></li>\n <li><a href=\"\" data-next=\"el3\">Archipelago</a></li>\n </ul>\n </div>\n </li>\n </ul>\n </div>"); |
|
397 |
return buffer; |
|
398 |
|
|
399 |
}); |
|
400 |
|
|
401 |
Ember.TEMPLATES["wizardSteps/step-3"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data |
|
402 |
/**/) { |
|
403 |
this.compilerInfo = [4,'>= 1.0.0']; |
|
404 |
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {}; |
|
405 |
var stack1; |
|
406 |
|
|
407 |
|
|
408 |
stack1 = helpers._triageMustache.call(depth0, "view.content", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data}); |
|
409 |
if(stack1 || stack1 === 0) { data.buffer.push(stack1); } |
|
410 |
else { data.buffer.push(''); } |
|
411 |
|
|
412 |
}); |
|
413 |
|
|
414 |
Ember.TEMPLATES["wizardSteps/step-4"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data |
|
415 |
/**/) { |
|
416 |
this.compilerInfo = [4,'>= 1.0.0']; |
|
417 |
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {}; |
|
418 |
var stack1; |
|
419 |
|
|
420 |
|
|
421 |
stack1 = helpers._triageMustache.call(depth0, "view.content", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data}); |
|
422 |
if(stack1 || stack1 === 0) { data.buffer.push(stack1); } |
|
423 |
else { data.buffer.push(''); } |
|
424 |
|
|
367 | 425 |
}); |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/wizard.hbs | ||
---|---|---|
7 | 7 |
</div> |
8 | 8 |
{{collection Synnefo.WizardSubMenusView}} |
9 | 9 |
</div> |
10 |
<div class="middle"></div>
|
|
10 |
{{collection Synnefo.WizardStepsView}}
|
|
11 | 11 |
<div class="bottom"> |
12 | 12 |
<div class="row"> |
13 | 13 |
{{view Synnefo.WizardBtnBackView}} |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/wizardSteps/step-1.hbs | ||
---|---|---|
1 |
<span>{{view.content}}</span> |
|
2 |
<ul class="os"> |
|
3 |
<li class="current preselected system-images"> |
|
4 |
<div class="row"> |
|
5 |
<div class="img-col"><img src="images/os-kubuntu.png" alt=""></div> |
|
6 |
<a href="" class="name-col el1">Kubuntu</a> |
|
7 |
<div class="size-col">3.13 GB</div> |
|
8 |
<div class="btn-col"><a href="">details</a></div> |
|
9 |
</div> |
|
10 |
<div class="details"> |
|
11 |
<div class="row"> |
|
12 |
<h3>Image metadata</h3> |
|
13 |
<dl> |
|
14 |
<dt>Owner</dt> |
|
15 |
<dd>system</dd> |
|
16 |
<dt>OS</dt> |
|
17 |
<dd>Kubuntu</dd> |
|
18 |
<dt>Kernel</dt> |
|
19 |
<dd>4.8.2</dd> |
|
20 |
<dt>Size</dt> |
|
21 |
<dd>2.51GB</dd> |
|
22 |
<dt>Users</dt> |
|
23 |
<dd>user</dd> |
|
24 |
<dt>Root partition</dt> |
|
25 |
<dd>1</dd> |
|
26 |
</dl> |
|
27 |
</div> |
|
28 |
</div> |
|
29 |
</li> |
|
30 |
<li class="public-images"> |
|
31 |
<div class="row"> |
|
32 |
<div class="img-col"><img src="images/os-kubuntu.png" alt=""></div> |
|
33 |
<a href="" class="name-col">Kubuntu LTS (by Kpal)</a> |
|
34 |
<div class="size-col">10GB</div> |
|
35 |
<div class="btn-col"><a href="">details</a></div> |
|
36 |
</div> |
|
37 |
<div class="details"> |
|
38 |
<div class="row"> |
|
39 |
<h3>Image metadata</h3> |
|
40 |
<dl> |
|
41 |
<dt>Owner</dt> |
|
42 |
<dd>system</dd> |
|
43 |
<dt>OS</dt> |
|
44 |
<dd>Kubuntu</dd> |
|
45 |
<dt>Kernel</dt> |
|
46 |
<dd>4.8.2</dd> |
|
47 |
<dt>Size</dt> |
|
48 |
<dd>2.51GB</dd> |
|
49 |
<dt>Users</dt> |
|
50 |
<dd>user</dd> |
|
51 |
<dt>Root partition</dt> |
|
52 |
<dd>1</dd> |
|
53 |
</dl> |
|
54 |
</div> |
|
55 |
</div> |
|
56 |
</li> |
|
57 |
<li class="public-images"> |
|
58 |
<div class="row"> |
|
59 |
<div class="img-col"><img src="images/os-fedora.png" alt=""></div> |
|
60 |
<a href="" class="name-col">Fedora (by Athina)</a> |
|
61 |
<div class="size-col">10GB</div> |
|
62 |
<div class="btn-col"><a href="">details</a></div> |
|
63 |
</div> |
|
64 |
<div class="details"> |
|
65 |
<div class="row"> |
|
66 |
<h3>Image metadata</h3> |
|
67 |
<dl> |
|
68 |
<dt>Owner</dt> |
|
69 |
<dd>system</dd> |
|
70 |
<dt>OS</dt> |
|
71 |
<dd>Kubuntu</dd> |
|
72 |
<dt>Kernel</dt> |
|
73 |
<dd>4.8.2</dd> |
|
74 |
<dt>Size</dt> |
|
75 |
<dd>2.51GB</dd> |
|
76 |
<dt>Users</dt> |
|
77 |
<dd>user</dd> |
|
78 |
<dt>Root partition</dt> |
|
79 |
<dd>1</dd> |
|
80 |
</dl> |
|
81 |
</div> |
|
82 |
</div> |
|
83 |
</li> |
|
84 |
<li class="shared-images"> |
|
85 |
<div class="row"> |
|
86 |
<div class="img-col"><img src="images/os-fedora.png" alt=""></div> |
|
87 |
<a href="" class="name-col">Fedora (by Athina)</a> |
|
88 |
<div class="size-col">3.67 GB</div> |
|
89 |
<div class="btn-col"><a href="">details</a></div> |
|
90 |
</div> |
|
91 |
<div class="details"> |
|
92 |
<div class="row"> |
|
93 |
<h3>Image metadata</h3> |
|
94 |
<dl> |
|
95 |
<dt>Owner</dt> |
|
96 |
<dd>system</dd> |
|
97 |
<dt>OS</dt> |
|
98 |
<dd>Kubuntu</dd> |
|
99 |
<dt>Kernel</dt> |
|
100 |
<dd>4.8.2</dd> |
|
101 |
<dt>Size</dt> |
|
102 |
<dd>2.51GB</dd> |
|
103 |
<dt>Users</dt> |
|
104 |
<dd>user</dd> |
|
105 |
<dt>Root partition</dt> |
|
106 |
<dd>1</dd> |
|
107 |
</dl> |
|
108 |
</div> |
|
109 |
</div> |
|
110 |
</li> |
|
111 |
<li class="my-images"> |
|
112 |
<div class="row"> |
|
113 |
<div class="img-col"><img src="images/os-windows.png" alt=""></div> |
|
114 |
<a href="" class="name-col">Windows Server 2012</a> |
|
115 |
<div class="size-col">13.66 GB</div> |
|
116 |
<div class="btn-col"><a href="">details</a></div> |
|
117 |
</div> |
|
118 |
<div class="details"> |
|
119 |
<div class="row"> |
|
120 |
<h3>Image metadata</h3> |
|
121 |
<dl> |
|
122 |
<dt>Owner</dt> |
|
123 |
<dd>system</dd> |
|
124 |
<dt>OS</dt> |
|
125 |
<dd>Kubuntu</dd> |
|
126 |
<dt>Kernel</dt> |
|
127 |
<dd>4.8.2</dd> |
|
128 |
<dt>Size</dt> |
|
129 |
<dd>2.51GB</dd> |
|
130 |
<dt>Users</dt> |
|
131 |
<dd>user</dd> |
|
132 |
<dt>Root partition</dt> |
|
133 |
<dd>1</dd> |
|
134 |
</dl> |
|
135 |
</div> |
|
136 |
</div> |
|
137 |
</li> |
|
138 |
<li class="system-images"> |
|
139 |
<div class="row"> |
|
140 |
<div class="img-col"><img src="images/os-windows.png" alt=""></div> |
|
141 |
<a href="" class="name-col">Windows Server 2012</a> |
|
142 |
<div class="size-col">13.66 GB</div> |
|
143 |
<div class="btn-col"><a href="">details</a></div> |
|
144 |
</div> |
|
145 |
<div class="details"> |
|
146 |
<div class="row"> |
|
147 |
<h3>Image metadata</h3> |
|
148 |
<dl> |
|
149 |
<dt>Owner</dt> |
|
150 |
<dd>system</dd> |
|
151 |
<dt>OS</dt> |
|
152 |
<dd>Kubuntu</dd> |
|
153 |
<dt>Kernel</dt> |
|
154 |
<dd>4.8.2</dd> |
|
155 |
<dt>Size</dt> |
|
156 |
<dd>2.51GB</dd> |
|
157 |
<dt>Users</dt> |
|
158 |
<dd>user</dd> |
|
159 |
<dt>Root partition</dt> |
|
160 |
<dd>1</dd> |
|
161 |
</dl> |
|
162 |
</div> |
|
163 |
</div> |
|
164 |
</li> |
|
165 |
<li class="system-images"> |
|
166 |
<div class="row"> |
|
167 |
<div class="img-col"><img src="images/os-windows.png" alt=""></div> |
|
168 |
<a href="" class="name-col">Windows Server 2008</a> |
|
169 |
<div class="size-col">10.79 GB</div> |
|
170 |
<div class="btn-col"><a href="" data-next="el3">details</a></div> |
|
171 |
</div> |
|
172 |
<div class="details"> |
|
173 |
<div class="row"> |
|
174 |
<h3>Image metadata</h3> |
|
175 |
<dl> |
|
176 |
<dt>Owner</dt> |
|
177 |
<dd>system</dd> |
|
178 |
<dt>OS</dt> |
|
179 |
<dd>Kubuntu</dd> |
|
180 |
<dt>Kernel</dt> |
|
181 |
<dd>4.8.2</dd> |
|
182 |
<dt>Size</dt> |
|
183 |
<dd>2.51GB</dd> |
|
184 |
<dt>Users</dt> |
|
185 |
<dd>user</dd> |
|
186 |
<dt>Root partition</dt> |
|
187 |
<dd>1</dd> |
|
188 |
</dl> |
|
189 |
</div> |
|
190 |
</div> |
|
191 |
</li> |
|
192 |
|
|
193 |
</ul> |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/wizardSteps/step-2.hbs | ||
---|---|---|
1 |
<h3>{{view.content}}</h3> |
|
2 |
<div class="row"> |
|
3 |
<form class="custom"> |
|
4 |
<select class="medium"> |
|
5 |
<option class="el5">Basic Project</option> |
|
6 |
<option>Project 2</option> |
|
7 |
<option>Project 3</option> |
|
8 |
</select> |
|
9 |
</form> |
|
10 |
<ul class="flavor"> |
|
11 |
<li> |
|
12 |
<div class="title"> |
|
13 |
<span class="snf-chip-outline snf-font"></span> |
|
14 |
<h2> |
|
15 |
CPU<span> (x cores)</span> |
|
16 |
<em>Choose number of CPU cores</em> |
|
17 |
</h2> |
|
18 |
<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> |
|
19 |
</div> |
|
20 |
<div class="options-bar"> |
|
21 |
<div class="bar"> |
|
22 |
<div class="wrap"> |
|
23 |
<div class="container"> |
|
24 |
<!-- width percentages do not correspond to actual mesurements --> |
|
25 |
<div class="total" style="width:60%"> |
|
26 |
<div class="current" style="width:30%"></div> |
|
27 |
<span>60%</span> |
|
28 |
</div> |
|
29 |
</div> |
|
30 |
</div> |
|
31 |
</div> |
|
32 |
<ul class="options with-flavor"> |
|
33 |
<li><a href="" class="small current preselected " data-help="help text for 1">1</a></li> |
|
34 |
<li><a href="" class="medium" data-help="help text for 2">2</a></li> |
|
35 |
<li><a href="" class="large disabled" data-help="help text for 3">3</a></li> |
|
36 |
<li><a href="" class="disabled" data-help="help text for 4">4</a></li> |
|
37 |
</ul> |
|
38 |
</div> |
|
39 |
</li> |
|
40 |
<li> |
|
41 |
<div class="title"> |
|
42 |
<span class="snf-ram-outline snf-font"></span> |
|
43 |
<h2> |
|
44 |
Memory Size |
|
45 |
<span> (MB)</span> |
|
46 |
<em>Choose memory size</em> |
|
47 |
</h2> |
|
48 |
<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> |
|
49 |
</div> |
|
50 |
<div class="options-bar"> |
|
51 |
<div class="bar"> |
|
52 |
<div class="wrap"> |
|
53 |
<div class="container"> |
|
54 |
<!-- width percentages do not correspond to actual mesurements --> |
|
55 |
<div class="total" style="width:60%"> |
|
56 |
<div class="current" style="width:30%"></div> |
|
57 |
<span>60%</span> |
|
58 |
</div> |
|
59 |
</div> |
|
60 |
</div> |
|
61 |
</div> |
|
62 |
<ul class="options with-flavor"> |
|
63 |
<li><a href="" class="small current preselected">1024</a></li> |
|
64 |
<li><a href="" class="medium">2048</a></li> |
|
65 |
<li><a href="" class="large">4096</a></li> |
|
66 |
</ul> |
|
67 |
</div> |
|
68 |
</li> |
|
69 |
<li> |
|
70 |
<div class="title"> |
|
71 |
<span class="snf-volume-outline snf-font"></span> |
|
72 |
<h2> |
|
73 |
Disk Size<span> (GB)</span> |
|
74 |
<em>Choose disk size</em> |
|
75 |
</h2> |
|
76 |
<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> |
|
77 |
</div> |
|
78 |
<div class="options-bar"> |
|
79 |
<div class="bar"> |
|
80 |
<div class="wrap"> |
|
81 |
<div class="container"> |
|
82 |
<!-- width percentages do not correspond to actual mesurements --> |
|
83 |
<div class="total low" style="width:40%"> |
|
84 |
<div class="current" style="width:80%"></div> |
|
85 |
<span>40%</span> |
|
86 |
</div> |
|
87 |
</div> |
|
88 |
</div> |
|
89 |
</div> |
|
90 |
<ul class="options with-flavor"> |
|
91 |
<li><a href="" class="small current preselected">10</a></li> |
|
92 |
<li><a href="" class="medium">20</a></li> |
|
93 |
<li><a href="" class="large">30</a></li> |
|
94 |
<li><a href="">40</a></li> |
|
95 |
</ul> |
|
96 |
</div> |
|
97 |
</li> |
|
98 |
<li> |
|
99 |
<div class="title"> |
|
100 |
<span class="snf-volume-outline snf-font"></span> |
|
101 |
<h2> |
|
102 |
Storage |
|
103 |
<em>Select storage type</em> |
|
104 |
</h2> |
|
105 |
<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> |
|
106 |
</div> |
|
107 |
<div class="options-bar"> |
|
108 |
<div class="bar"> |
|
109 |
<div class="wrap disabled-progress-bar"> |
|
110 |
<div class="container"> |
|
111 |
<!-- width percentages do not correspond to actual mesurements --> |
|
112 |
<div class="total" style="width:100%"> |
|
113 |
<div class="current" style="width:0%"></div> |
|
114 |
<span></span> |
|
115 |
</div> |
|
116 |
</div> |
|
117 |
</div> |
|
118 |
</div> |
|
119 |
<ul class="options vm-storage-selection"> |
|
120 |
<li><a href="" class="current preselected">DRBD</a></li> |
|
121 |
<li><a href="" data-next="el3">Archipelago</a></li> |
|
122 |
</ul> |
|
123 |
</div> |
|
124 |
</li> |
|
125 |
</ul> |
|
126 |
</div> |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/wizardSteps/step-3.hbs | ||
---|---|---|
1 |
{{view.content}} |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/wizardSteps/step-4.hbs | ||
---|---|---|
1 |
{{view.content}} |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_wizards.scss | ||
---|---|---|
140 | 140 |
width:100%; |
141 | 141 |
} |
142 | 142 |
.step { |
143 |
&.moveLeft { |
|
144 |
left: 100%; |
|
145 |
top: 0 |
|
146 |
} |
|
147 |
// background-color: cyan; |
|
148 |
border: 1px solid white; |
|
143 | 149 |
position: absolute; |
144 | 150 |
top:0; |
145 | 151 |
width:100%; |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css | ||
---|---|---|
9494 | 9494 |
} |
9495 | 9495 |
/* line 142, ../sass/_wizards.scss */ |
9496 | 9496 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step { |
9497 |
border: 1px solid white; |
|
9497 | 9498 |
position: absolute; |
9498 | 9499 |
top: 0; |
9499 | 9500 |
width: 100%; |
9500 | 9501 |
display: none; |
9501 | 9502 |
padding: 50px 0 50px; |
9502 | 9503 |
} |
9503 |
/* line 148, ../sass/_wizards.scss */ |
|
9504 |
/* line 143, ../sass/_wizards.scss */ |
|
9505 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step.moveLeft { |
|
9506 |
left: 100%; |
|
9507 |
top: 0; |
|
9508 |
} |
|
9509 |
/* line 154, ../sass/_wizards.scss */ |
|
9504 | 9510 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step.current { |
9505 | 9511 |
display: block; |
9506 | 9512 |
} |
9507 |
/* line 151, ../sass/_wizards.scss */
|
|
9513 |
/* line 157, ../sass/_wizards.scss */
|
|
9508 | 9514 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step h2 { |
9509 | 9515 |
color: white; |
9510 | 9516 |
font-size: 1em; |
9511 | 9517 |
} |
9512 |
/* line 155, ../sass/_wizards.scss */
|
|
9518 |
/* line 161, ../sass/_wizards.scss */
|
|
9513 | 9519 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step li { |
9514 | 9520 |
list-style: none outside none; |
9515 | 9521 |
position: relative; |
9516 | 9522 |
} |
9517 |
/* line 160, ../sass/_wizards.scss */
|
|
9523 |
/* line 166, ../sass/_wizards.scss */
|
|
9518 | 9524 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step a { |
9519 | 9525 |
color: white; |
9520 | 9526 |
} |
9521 |
/* line 163, ../sass/_wizards.scss */
|
|
9527 |
/* line 169, ../sass/_wizards.scss */
|
|
9522 | 9528 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .vms-list { |
9523 | 9529 |
margin-top: 1em; |
9524 | 9530 |
} |
9525 |
/* line 165, ../sass/_wizards.scss */
|
|
9531 |
/* line 171, ../sass/_wizards.scss */
|
|
9526 | 9532 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .vms-list > li { |
9527 | 9533 |
margin-bottom: 0.5em; |
9528 | 9534 |
margin-left: 1.5em; |
9529 | 9535 |
} |
9530 |
/* line 169, ../sass/_wizards.scss */
|
|
9536 |
/* line 175, ../sass/_wizards.scss */
|
|
9531 | 9537 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .vms-list > li:first-child .img-wrap .snf-font { |
9532 | 9538 |
color: white; |
9533 | 9539 |
} |
9534 |
/* line 173, ../sass/_wizards.scss */
|
|
9540 |
/* line 179, ../sass/_wizards.scss */
|
|
9535 | 9541 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .vms-list > li > div, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .vms-list > li > a { |
9536 | 9542 |
display: inline-block; |
9537 | 9543 |
margin-right: 15px; |
9538 | 9544 |
} |
9539 |
/* line 177, ../sass/_wizards.scss */
|
|
9545 |
/* line 183, ../sass/_wizards.scss */
|
|
9540 | 9546 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .vms-list > li .img-wrap { |
9541 | 9547 |
position: relative; |
9542 | 9548 |
width: 1.875em; |
9543 | 9549 |
} |
9544 |
/* line 180, ../sass/_wizards.scss */
|
|
9550 |
/* line 186, ../sass/_wizards.scss */
|
|
9545 | 9551 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .vms-list > li .img-wrap .snf-font { |
9546 | 9552 |
font-size: 1.875em; |
9547 | 9553 |
color: #30c79e; |
9548 | 9554 |
line-height: 120%; |
9549 | 9555 |
} |
9550 |
/* line 185, ../sass/_wizards.scss */
|
|
9556 |
/* line 191, ../sass/_wizards.scss */
|
|
9551 | 9557 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .vms-list > li .img-wrap .os { |
9552 | 9558 |
background: url("../images/os-unknown.png") no-repeat center center; |
9553 | 9559 |
width: 14px; |
... | ... | |
9559 | 9565 |
top: 5px; |
9560 | 9566 |
left: 18px; |
9561 | 9567 |
} |
9562 |
/* line 192, ../sass/_wizards.scss */
|
|
9568 |
/* line 198, ../sass/_wizards.scss */
|
|
9563 | 9569 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .vms-list > li .name { |
9564 | 9570 |
width: 18.75em; |
9565 | 9571 |
} |
9566 |
/* line 202, ../sass/_wizards.scss */
|
|
9572 |
/* line 208, ../sass/_wizards.scss */
|
|
9567 | 9573 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step.step-2 .dropdown { |
9568 | 9574 |
margin-bottom: 40px; |
9569 | 9575 |
} |
9570 |
/* line 210, ../sass/_wizards.scss */
|
|
9576 |
/* line 216, ../sass/_wizards.scss */
|
|
9571 | 9577 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li { |
9572 | 9578 |
display: none; |
9573 | 9579 |
list-style: none outside none; |
9574 | 9580 |
font-size: 0.75em; |
9575 | 9581 |
padding: 15px 0; |
9576 | 9582 |
} |
9577 |
/* line 217, ../sass/_wizards.scss */
|
|
9583 |
/* line 223, ../sass/_wizards.scss */
|
|
9578 | 9584 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li.hover { |
9579 | 9585 |
background: #2d3338; |
9580 | 9586 |
} |
9581 |
/* line 220, ../sass/_wizards.scss */
|
|
9587 |
/* line 226, ../sass/_wizards.scss */
|
|
9582 | 9588 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li.current { |
9583 | 9589 |
background: white; |
9584 | 9590 |
color: #485057; |
9585 | 9591 |
} |
9586 |
/* line 223, ../sass/_wizards.scss */
|
|
9592 |
/* line 229, ../sass/_wizards.scss */
|
|
9587 | 9593 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li.current .name-col { |
9588 | 9594 |
color: #485057; |
9589 | 9595 |
} |
9590 |
/* line 227, ../sass/_wizards.scss */
|
|
9596 |
/* line 233, ../sass/_wizards.scss */
|
|
9591 | 9597 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li.current .btn-col a { |
9592 | 9598 |
border-color: #485057; |
9593 | 9599 |
color: #485057; |
9594 | 9600 |
} |
9595 |
/* line 232, ../sass/_wizards.scss */
|
|
9601 |
/* line 238, ../sass/_wizards.scss */
|
|
9596 | 9602 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li.current .btn-col a:hover span { |
9597 | 9603 |
border-color: #485057; |
9598 | 9604 |
} |
9599 |
/* line 236, ../sass/_wizards.scss */
|
|
9605 |
/* line 242, ../sass/_wizards.scss */
|
|
9600 | 9606 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li.current .btn-col a.current { |
9601 | 9607 |
color: white; |
9602 | 9608 |
} |
9603 |
/* line 238, ../sass/_wizards.scss */
|
|
9609 |
/* line 244, ../sass/_wizards.scss */
|
|
9604 | 9610 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li.current .btn-col a.current span { |
9605 | 9611 |
background: #485057; |
9606 | 9612 |
} |
9607 |
/* line 245, ../sass/_wizards.scss */
|
|
9613 |
/* line 251, ../sass/_wizards.scss */
|
|
9608 | 9614 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li.system-images { |
9609 | 9615 |
display: list-item; |
9610 | 9616 |
} |
9611 |
/* line 248, ../sass/_wizards.scss */
|
|
9617 |
/* line 254, ../sass/_wizards.scss */
|
|
9612 | 9618 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .img-col { |
9613 | 9619 |
float: left; |
9614 | 9620 |
width: 50px; |
9615 | 9621 |
line-height: 30px; |
9616 | 9622 |
} |
9617 |
/* line 253, ../sass/_wizards.scss */
|
|
9623 |
/* line 259, ../sass/_wizards.scss */
|
|
9618 | 9624 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .name-col { |
9619 | 9625 |
float: left; |
9620 | 9626 |
color: white; |
... | ... | |
9622 | 9628 |
padding-right: 10px; |
9623 | 9629 |
line-height: 30px; |
9624 | 9630 |
} |
9625 |
/* line 260, ../sass/_wizards.scss */
|
|
9631 |
/* line 266, ../sass/_wizards.scss */
|
|
9626 | 9632 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .size-col { |
9627 | 9633 |
float: left; |
9628 | 9634 |
width: 10%; |
9629 | 9635 |
line-height: 30px; |
9630 | 9636 |
} |
9631 |
/* line 265, ../sass/_wizards.scss */
|
|
9637 |
/* line 271, ../sass/_wizards.scss */
|
|
9632 | 9638 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col { |
9633 | 9639 |
float: right; |
9634 | 9640 |
width: 10%; |
9635 | 9641 |
margin-left: 10px; |
9636 | 9642 |
} |
9637 |
/* line 269, ../sass/_wizards.scss */
|
|
9643 |
/* line 275, ../sass/_wizards.scss */
|
|
9638 | 9644 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a { |
9639 | 9645 |
font-size: 1em; |
9640 | 9646 |
} |
9641 |
/* line 273, ../sass/_wizards.scss */
|
|
9647 |
/* line 279, ../sass/_wizards.scss */
|
|
9642 | 9648 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a.current { |
9643 | 9649 |
color: #485057; |
9644 | 9650 |
} |
9645 |
/* line 278, ../sass/_wizards.scss */
|
|
9651 |
/* line 284, ../sass/_wizards.scss */
|
|
9646 | 9652 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details { |
9647 | 9653 |
display: none; |
9648 | 9654 |
background: #e6e6e6; |
... | ... | |
9650 | 9656 |
margin: 20px 6px -9px; |
9651 | 9657 |
color: #2d3338; |
9652 | 9658 |
} |
9653 |
/* line 284, ../sass/_wizards.scss */
|
|
9659 |
/* line 290, ../sass/_wizards.scss */
|
|
9654 | 9660 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details h3 { |
9655 | 9661 |
font-size: 1em; |
9656 | 9662 |
font-weight: normal; |
9657 | 9663 |
margin-bottom: 1em; |
9658 | 9664 |
padding-left: 50px; |
9659 | 9665 |
} |
9660 |
/* line 290, ../sass/_wizards.scss */
|
|
9666 |
/* line 296, ../sass/_wizards.scss */
|
|
9661 | 9667 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl { |
9662 | 9668 |
margin: 0; |
9663 | 9669 |
padding-left: 50px; |
9664 | 9670 |
} |
9665 |
/* line 294, ../sass/_wizards.scss */
|
|
9671 |
/* line 300, ../sass/_wizards.scss */
|
|
9666 | 9672 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl dt { |
9667 | 9673 |
width: 20%; |
9668 | 9674 |
float: left; |
9669 | 9675 |
font-weight: normal; |
9670 | 9676 |
} |
9671 |
/* line 299, ../sass/_wizards.scss */
|
|
9677 |
/* line 305, ../sass/_wizards.scss */
|
|
9672 | 9678 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl dd { |
9673 | 9679 |
margin: 0 0 5px; |
9674 | 9680 |
} |
9675 |
/* line 306, ../sass/_wizards.scss */
|
|
9681 |
/* line 312, ../sass/_wizards.scss */
|
|
9676 | 9682 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor { |
9677 | 9683 |
list-style: none outside none; |
9678 | 9684 |
} |
9679 |
/* line 308, ../sass/_wizards.scss */
|
|
9685 |
/* line 314, ../sass/_wizards.scss */
|
|
9680 | 9686 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li { |
9681 | 9687 |
list-style: none outside none; |
9682 | 9688 |
margin-bottom: 30px; |
9683 | 9689 |
} |
9684 |
/* line 311, ../sass/_wizards.scss */
|
|
9690 |
/* line 317, ../sass/_wizards.scss */
|
|
9685 | 9691 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title { |
9686 | 9692 |
height: 40px; |
9687 | 9693 |
overflow: hidden; |
... | ... | |
9689 | 9695 |
color: white; |
9690 | 9696 |
vertical-align: top; |
9691 | 9697 |
} |
9692 |
/* line 318, ../sass/_wizards.scss */
|
|
9698 |
/* line 324, ../sass/_wizards.scss */
|
|
9693 | 9699 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title .snf-font { |
9694 | 9700 |
display: block; |
9695 | 9701 |
width: 60px; |
... | ... | |
9698 | 9704 |
position: relative; |
9699 | 9705 |
bottom: -3px; |
9700 | 9706 |
} |
9701 |
/* line 326, ../sass/_wizards.scss */
|
|
9707 |
/* line 332, ../sass/_wizards.scss */
|
|
9702 | 9708 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title h2 { |
9703 | 9709 |
font-size: 0.875em; |
9704 | 9710 |
float: left; |
... | ... | |
9707 | 9713 |
margin-right: 60px; |
9708 | 9714 |
padding-left: 0.625em; |
9709 | 9715 |
} |
9710 |
/* line 328, ../sass/_wizards.scss */
|
|
9716 |
/* line 334, ../sass/_wizards.scss */
|
|
9711 | 9717 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title h2 span { |
9712 | 9718 |
font-weight: normal; |
9713 | 9719 |
} |
9714 |
/* line 336, ../sass/_wizards.scss */
|
|
9720 |
/* line 342, ../sass/_wizards.scss */
|
|
9715 | 9721 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title h2 em { |
9716 | 9722 |
display: block; |
9717 | 9723 |
margin-top: 4px; |
... | ... | |
9721 | 9727 |
white-space: nowrap; |
9722 | 9728 |
line-height: 13px; |
9723 | 9729 |
} |
9724 |
/* line 346, ../sass/_wizards.scss */
|
|
9730 |
/* line 352, ../sass/_wizards.scss */
|
|
9725 | 9731 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title p { |
9726 | 9732 |
visibility: hidden; |
9727 | 9733 |
overflow: hidden; |
... | ... | |
9729 | 9735 |
font-size: 11px; |
9730 | 9736 |
line-height: 11px; |
9731 | 9737 |
} |
9732 |
/* line 356, ../sass/_wizards.scss */
|
|
9738 |
/* line 362, ../sass/_wizards.scss */
|
|
9733 | 9739 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .bar { |
9734 | 9740 |
width: 200px; |
9735 | 9741 |
float: left; |
... | ... | |
9738 | 9744 |
position: relative; |
9739 | 9745 |
top: 10px; |
9740 | 9746 |
} |
9741 |
/* line 363, ../sass/_wizards.scss */
|
|
9747 |
/* line 369, ../sass/_wizards.scss */
|
|
9742 | 9748 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .bar .wrap { |
9743 | 9749 |
border: 1px solid white; |
9744 | 9750 |
padding: 1px; |
9745 | 9751 |
height: 100%; |
9746 | 9752 |
} |
9747 |
/* line 367, ../sass/_wizards.scss */
|
|
9753 |
/* line 373, ../sass/_wizards.scss */
|
|
9748 | 9754 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .bar .wrap.disabled-progress-bar { |
9749 | 9755 |
border-color: #bebebe; |
9750 | 9756 |
} |
9751 |
/* line 370, ../sass/_wizards.scss */
|
|
9757 |
/* line 376, ../sass/_wizards.scss */
|
|
9752 | 9758 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .bar .wrap.disabled-progress-bar .container .total { |
9753 | 9759 |
background-color: #bebebe; |
9754 | 9760 |
} |
9755 |
/* line 375, ../sass/_wizards.scss */
|
|
9761 |
/* line 381, ../sass/_wizards.scss */
|
|
9756 | 9762 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .bar .wrap .container { |
9757 | 9763 |
height: 100%; |
9758 | 9764 |
} |
9759 |
/* line 377, ../sass/_wizards.scss */
|
|
9765 |
/* line 383, ../sass/_wizards.scss */
|
|
9760 | 9766 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .bar .wrap .container .total { |
9761 | 9767 |
background: #bebebe; |
9762 | 9768 |
height: 100%; |
9763 | 9769 |
float: left; |
9764 | 9770 |
position: relative; |
9765 | 9771 |
} |
9766 |
/* line 382, ../sass/_wizards.scss */
|
|
9772 |
/* line 388, ../sass/_wizards.scss */
|
|
9767 | 9773 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .bar .wrap .container .total .current { |
9768 | 9774 |
background: white; |
9769 | 9775 |
height: 100%; |
9770 | 9776 |
float: left; |
9771 | 9777 |
} |
9772 |
/* line 387, ../sass/_wizards.scss */
|
|
9778 |
/* line 393, ../sass/_wizards.scss */
|
|
9773 | 9779 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .bar .wrap .container .total span { |
9774 | 9780 |
position: absolute; |
9775 | 9781 |
right: 10px; |
9776 | 9782 |
font-size: 0.5625em; |
9777 | 9783 |
top: 2px; |
9778 | 9784 |
} |
9779 |
/* line 394, ../sass/_wizards.scss */
|
|
9785 |
/* line 400, ../sass/_wizards.scss */
|
|
9780 | 9786 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .bar .wrap .container .total.low span { |
9781 | 9787 |
right: -30px; |
9782 | 9788 |
color: white; |
9783 | 9789 |
} |
9784 |
/* line 404, ../sass/_wizards.scss */
|
|
9790 |
/* line 410, ../sass/_wizards.scss */
|
|
9785 | 9791 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options { |
9786 | 9792 |
overflow: hidden; |
9787 | 9793 |
list-style: none outside none; |
9788 | 9794 |
} |
9789 |
/* line 407, ../sass/_wizards.scss */
|
|
9795 |
/* line 413, ../sass/_wizards.scss */
|
|
9790 | 9796 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li { |
9791 | 9797 |
list-style: none outside none; |
9792 | 9798 |
display: inline-block; |
9793 | 9799 |
margin-right: 10px; |
9794 | 9800 |
margin-bottom: 0; |
9795 | 9801 |
} |
9796 |
/* line 412, ../sass/_wizards.scss */
|
|
9802 |
/* line 418, ../sass/_wizards.scss */
|
|
9797 | 9803 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a { |
9798 | 9804 |
min-width: 60px; |
9799 | 9805 |
} |
9800 |
/* line 415, ../sass/_wizards.scss */
|
|
9806 |
/* line 421, ../sass/_wizards.scss */
|
|
9801 | 9807 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a.current { |
9802 | 9808 |
color: #485057; |
9803 | 9809 |
} |
9804 |
/* line 418, ../sass/_wizards.scss */
|
|
9810 |
/* line 424, ../sass/_wizards.scss */
|
|
9805 | 9811 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a.disabled { |
9806 | 9812 |
border-color: #bebebe; |
9807 | 9813 |
color: #bebebe; |
9808 | 9814 |
} |
9809 |
/* line 421, ../sass/_wizards.scss */
|
|
9815 |
/* line 427, ../sass/_wizards.scss */
|
|
9810 | 9816 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a.disabled:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a.disabled:active { |
9811 | 9817 |
cursor: default; |
9812 | 9818 |
border-width: 1px; |
9813 | 9819 |
line-height: 28px; |
9814 | 9820 |
} |
9815 |
/* line 434, ../sass/_wizards.scss */
|
|
9821 |
/* line 440, ../sass/_wizards.scss */
|
|
9816 | 9822 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .summary { |
9817 | 9823 |
padding-bottom: 40px; |
9818 | 9824 |
} |
9819 |
/* line 437, ../sass/_wizards.scss */
|
|
9825 |
/* line 443, ../sass/_wizards.scss */
|
|
9820 | 9826 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .summary .row .wrap { |
9821 | 9827 |
max-width: 36.25em; |
9822 | 9828 |
border-top: 1px solid white; |
9823 | 9829 |
padding-top: 1em; |
9824 | 9830 |
} |
9825 |
/* line 444, ../sass/_wizards.scss */
|
|
9831 |
/* line 450, ../sass/_wizards.scss */
|
|
9826 | 9832 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .summary .row:first-child .wrap { |
9827 | 9833 |
border-top: 0 none; |
9828 | 9834 |
margin-top: 0; |
9829 | 9835 |
} |
9830 |
/* line 449, ../sass/_wizards.scss */
|
|
9836 |
/* line 455, ../sass/_wizards.scss */
|
|
9831 | 9837 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .summary .row:first-child dl dt { |
9832 | 9838 |
font-weight: bold; |
9833 | 9839 |
} |
9834 |
/* line 455, ../sass/_wizards.scss */
|
|
9840 |
/* line 461, ../sass/_wizards.scss */
|
|
9835 | 9841 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .summary h2 { |
9836 | 9842 |
font-size: 1em; |
9837 | 9843 |
color: white; |
9838 | 9844 |
margin-bottom: 1em; |
9839 | 9845 |
} |
9840 |
/* line 460, ../sass/_wizards.scss */
|
|
9846 |
/* line 466, ../sass/_wizards.scss */
|
|
9841 | 9847 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .summary dl { |
9842 | 9848 |
margin-bottom: 0; |
9843 | 9849 |
} |
9844 |
/* line 462, ../sass/_wizards.scss */
|
|
9850 |
/* line 468, ../sass/_wizards.scss */
|
|
9845 | 9851 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .summary dl span { |
9846 | 9852 |
width: 40px; |
9847 | 9853 |
display: inline-block; |
... | ... | |
9849 | 9855 |
position: relative; |
9850 | 9856 |
bottom: -2px; |
9851 | 9857 |
} |
9852 |
/* line 469, ../sass/_wizards.scss */
|
|
9858 |
/* line 475, ../sass/_wizards.scss */
|
|
9853 | 9859 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .summary dl dt { |
9854 | 9860 |
display: inline-block; |
9855 | 9861 |
width: 42%; |
9856 | 9862 |
vertical-align: top; |
9857 | 9863 |
font-weight: 600; |
9858 | 9864 |
} |
9859 |
/* line 475, ../sass/_wizards.scss */
|
|
9865 |
/* line 481, ../sass/_wizards.scss */
|
|
9860 | 9866 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .summary dl dd { |
9861 | 9867 |
display: inline-block; |
9862 | 9868 |
width: 45%; |
9863 | 9869 |
margin-bottom: 1em; |
9864 | 9870 |
} |
9865 |
/* line 482, ../sass/_wizards.scss */
|
|
9871 |
/* line 488, ../sass/_wizards.scss */
|
|
9866 | 9872 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step { |
9867 | 9873 |
color: white; |
9868 | 9874 |
} |
9869 |
/* line 484, ../sass/_wizards.scss */
|
|
9875 |
/* line 490, ../sass/_wizards.scss */
|
|
9870 | 9876 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step h2 { |
9871 | 9877 |
color: white; |
9872 | 9878 |
font-size: 1em; |
9873 | 9879 |
margin-bottom: 10px; |
9874 | 9880 |
line-height: 1; |
9875 | 9881 |
} |
9876 |
/* line 490, ../sass/_wizards.scss */
|
|
9882 |
/* line 496, ../sass/_wizards.scss */
|
|
9877 | 9883 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step p { |
9878 | 9884 |
font-size: 10px; |
9879 | 9885 |
} |
9880 |
/* line 493, ../sass/_wizards.scss */
|
|
9886 |
/* line 499, ../sass/_wizards.scss */
|
|
9881 | 9887 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .snf-checkbox-checked, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .snf-checkbox-unchecked { |
9882 | 9888 |
color: white; |
9883 | 9889 |
} |
9884 |
/* line 496, ../sass/_wizards.scss */
|
|
9890 |
/* line 502, ../sass/_wizards.scss */
|
|
9885 | 9891 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .expand-btn { |
9886 | 9892 |
margin: 50px 0 2.5em; |
9887 | 9893 |
} |
9888 |
/* line 498, ../sass/_wizards.scss */
|
|
9894 |
/* line 504, ../sass/_wizards.scss */
|
|
9889 | 9895 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .expand-btn a { |
9890 | 9896 |
color: white; |
9891 | 9897 |
} |
9892 |
/* line 500, ../sass/_wizards.scss */
|
|
9898 |
/* line 506, ../sass/_wizards.scss */
|
|
9893 | 9899 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .expand-btn a span { |
9894 | 9900 |
padding-left: 24px; |
9895 | 9901 |
} |
9896 |
/* line 507, ../sass/_wizards.scss */
|
|
9902 |
/* line 513, ../sass/_wizards.scss */
|
|
9897 | 9903 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .adv-main .vm-name h2 { |
9898 | 9904 |
color: white; |
9899 | 9905 |
font-size: 1em; |
9900 | 9906 |
margin-bottom: 0.5em; |
9901 | 9907 |
} |
9902 |
/* line 515, ../sass/_wizards.scss */
|
|
9908 |
/* line 521, ../sass/_wizards.scss */
|
|
9903 | 9909 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .btn5:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .os li .btn-col a:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step a:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .volume_options > li .options-bar .options li a:hover, #volume-wizard .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .volume_options > li .options-bar .options li a:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options > li .options-bar .options li .advanced-conf-step a:hover, #volume-wizard .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options > li .options-bar .options li .advanced-conf-step a:hover { |
9904 | 9910 |
color: white; |
9905 | 9911 |
} |
9906 |
/* line 518, ../sass/_wizards.scss */
|
|
9912 |
/* line 524, ../sass/_wizards.scss */
|
|
9907 | 9913 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .btn5.current, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .os li .btn-col a.current, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step a.current, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a.current, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a.current, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .volume_options > li .options-bar .options li a.current, #volume-wizard .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .volume_options > li .options-bar .options li a.current, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options > li .options-bar .options li .advanced-conf-step a.current, #volume-wizard .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options > li .options-bar .options li .advanced-conf-step a.current, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .btn5.current:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .os li .btn-col a.current:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step a.current:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a.current:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a.current:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .volume_options > li .options-bar .options li a.current:hover, #volume-wizard .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .volume_options > li .options-bar .options li a.current:hover, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options > li .options-bar .options li .advanced-conf-step a.current:hover, #volume-wizard .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options > li .options-bar .options li .advanced-conf-step a.current:hover { |
9908 | 9914 |
color: #485057; |
9909 | 9915 |
} |
9910 |
/* line 522, ../sass/_wizards.scss */
|
|
9916 |
/* line 528, ../sass/_wizards.scss */
|
|
9911 | 9917 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options { |
9912 | 9918 |
display: none; |
9913 | 9919 |
} |
9914 |
/* line 524, ../sass/_wizards.scss */
|
|
9920 |
/* line 530, ../sass/_wizards.scss */
|
|
9915 | 9921 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .check { |
9916 | 9922 |
font-size: 20px; |
9917 | 9923 |
} |
9918 |
/* line 527, ../sass/_wizards.scss */
|
|
9924 |
/* line 533, ../sass/_wizards.scss */
|
|
9919 | 9925 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .area { |
9920 | 9926 |
padding: 2.5em 0; |
9921 | 9927 |
} |
9922 |
/* line 530, ../sass/_wizards.scss */
|
|
9928 |
/* line 536, ../sass/_wizards.scss */
|
|
9923 | 9929 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .area .row p { |
9924 | 9930 |
max-width: 340px; |
9925 | 9931 |
margin-bottom: 20px; |
9926 | 9932 |
} |
9927 |
/* line 536, ../sass/_wizards.scss */
|
|
9933 |
/* line 542, ../sass/_wizards.scss */
|
|
9928 | 9934 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .area ul li { |
9929 | 9935 |
position: relative; |
9930 | 9936 |
list-style: none outside none; |
9931 | 9937 |
margin-bottom: 7px; |
9932 | 9938 |
} |
9933 |
/* line 541, ../sass/_wizards.scss */
|
|
9939 |
/* line 547, ../sass/_wizards.scss */
|
|
9934 | 9940 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .area ul li.checkbox:hover { |
9935 | 9941 |
cursor: pointer; |
9936 | 9942 |
} |
9937 |
/* line 545, ../sass/_wizards.scss */
|
|
9943 |
/* line 551, ../sass/_wizards.scss */
|
|
9938 | 9944 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .area ul li h3 { |
9939 | 9945 |
width: 18.75em; |
9940 | 9946 |
color: white; |
... | ... | |
9943 | 9949 |
margin: 0 28px 0 0; |
9944 | 9950 |
display: inline-block; |
9945 | 9951 |
} |
9946 |
/* line 557, ../sass/_wizards.scss */
|
|
9952 |
/* line 563, ../sass/_wizards.scss */
|
|
9947 | 9953 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area { |
9948 | 9954 |
background-color: #ff7049; |
9949 | 9955 |
} |
9950 |
/* line 559, ../sass/_wizards.scss */
|
|
9956 |
/* line 565, ../sass/_wizards.scss */
|
|
9951 | 9957 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .btn5, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .os li .btn-col a, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step .advanced-conf-options .ssh-keys-area a, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .flavor li .options-bar .options li a, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step .advanced-conf-options .ssh-keys-area a, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .volume_options > li .options-bar .options li a, #volume-wizard .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .volume_options > li .options-bar .options li a, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options > li .options-bar .options li .advanced-conf-step .advanced-conf-options .ssh-keys-area a, #volume-wizard .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options > li .options-bar .options li .advanced-conf-step .advanced-conf-options .ssh-keys-area a { |
9952 | 9958 |
margin-top: 3px; |
9953 | 9959 |
} |
9954 |
/* line 564, ../sass/_wizards.scss */
|
|
9960 |
/* line 570, ../sass/_wizards.scss */
|
|
9955 | 9961 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area { |
9956 | 9962 |
background-color: #f6938d; |
9957 | 9963 |
} |
9958 |
/* line 566, ../sass/_wizards.scss */
|
|
9964 |
/* line 572, ../sass/_wizards.scss */
|
|
9959 | 9965 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area ul { |
9960 | 9966 |
position: relative; |
9961 | 9967 |
margin-bottom: 0; |
9962 | 9968 |
} |
9963 |
/* line 571, ../sass/_wizards.scss */
|
|
9969 |
/* line 577, ../sass/_wizards.scss */
|
|
9964 | 9970 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li .net-icons { |
9965 | 9971 |
padding-right: 30px; |
9966 | 9972 |
display: inline-block; |
... | ... | |
9970 | 9976 |
margin-bottom: 0; |
9971 | 9977 |
position: relative; |
9972 | 9978 |
} |
9973 |
/* line 579, ../sass/_wizards.scss */
|
|
9979 |
/* line 585, ../sass/_wizards.scss */
|
|
9974 | 9980 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li .net-icons span { |
9975 | 9981 |
position: relative; |
9976 | 9982 |
} |
9977 |
/* line 581, ../sass/_wizards.scss */
|
|
9983 |
/* line 587, ../sass/_wizards.scss */
|
|
9978 | 9984 |
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li .net-icons span.snf-router-outline { |
9979 | 9985 |
top: -1px; |
Also available in: Unified diff