Revision 34d12b31

b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
27 27
    }
28 28
}
29 29

  
30
/* sets lt-sidebar height. Useful for jscrollpane scrollbar */
31
ui.setSidebarHeight = function(){
30
/* Sets mainArea min-height
31
* Used for .details div
32
*/
33
ui.setElminHeight = function(el){
32 34
    var WindowHeight = $(window).height();
33
    var h1= WindowHeight - $('.header').outerHeight();
34
    var h2= $('.main').outerHeight();
35
    $('.lt-sidebar').height((h2>h1) ? h2 : h1);
36
    $('.lt-bar').height((h2>h1) ? h2 : h1);
35
    var header = $('.header').outerHeight();
36
    var actions = $('.actions').outerHeight();
37
    var h1= WindowHeight - (header+actions);
38
    el.css('min-height', h1);
37 39
}
38 40

  
39 41

  
......
89 91
    })
90 92
}
91 93

  
92
ui.detailsLastCustom = function() {
93

  
94
    // details connected related js
94
ui.detailsCustom = function() {
95
    // position last connected item
95 96
    var el = $('.connected .item').last();
96 97
    // -2 is the border width;
97 98
    var moveY = el.find('.connections >li').last().outerHeight(true) -2;
98 99
    el.css('top',moveY);
99 100
    el.css('marginTop', -moveY);
100
    //el.css('margin-top')
101 101
}
102 102

  
103 103
ui.firewallSetup = function(){
......
288 288
            });
289 289
}
290 290

  
291

  
292
/* Tabs functionality
293
* tabsEl is the div/ul with the links to the sections and the sections that
294
* with toggle have class sectionEl.
295
* Markup needed is an href to each a with the id of the relative section.
296
*/
297
ui.tabs = function(tabsEl, sectionEl) {
298
    var tabLink = tabsEl.find('a');
299
    function href(a) {
300
        return a.attr('href');
301
    }
302
    tabLink.click(function(e){
303
        e.preventDefault();
304
        if ( $(this).hasClass('active')){
305
             return false;
306
        } else {
307
            $(this).parents(tabsEl).find('a').removeClass('active');
308
            $(this).addClass('active');
309
            $(sectionEl).hide();
310
            $(href($(this))).stop(true,true).slideDown(500);
311
        }
312

  
313
    })
314
}
315

  
291 316
$(document).ready(function(){
292 317

  
293 318
    if($('.vms.entities').length!=0){
294 319
        ui.inactiveActions();
295 320
    };
296
    ui.setSidebarHeight();
321
    ui.setElminHeight($('.details'));
297 322
    $('#hd-search .hd-icon-search').click(function(e){
298 323
        var that = this;
299 324
        $(this).parents('.hd-search').toggleClass('hd-open');
......
553 578
    });
554 579

  
555 580
    // connected details js
556
    ui.detailsLastCustom();
581
    ui.detailsCustom();
557 582
    ui.firewallSetup();
558 583
    $('.firewall .more  a').click(function(e){
559 584
        e.preventDefault();
......
573 598
    $('.firewall').mouseleave(function(e){
574 599
        $(this).find('.more').stop(true, true).slideUp(200);
575 600
    });
601
    ui.tabs($('.tabs'), $('.content'));
576 602
    // end of connected details js
577 603
})
578 604

  
579 605

  
580 606
$(window).resize(function(e){
581
    ui.setSidebarHeight();
607
    ui.setElminHeight($('.details'));
582 608
    $('.scroll-pane').jScrollPane();
583 609
})
b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_details.html
19 19
		<header class="header">
20 20
		<nav>
21 21
			<ul class="icons-nav">
22
				<li><a href="vm_list.html" data-tooltip class="has-tip current" title="Machines"><span class="snf-PC_fill"></span></a></li>
23
				<li><a href="network_list.html" data-tooltip class="has-tip" title="Networks"><span class="snf-network"></span></a></li>
22
				<li><a href="vm_list.html" data-tooltip class="has-tip" title="Machines"><span class="snf-PC"></span></a></li>
23
				<li><a href="network_list.html" data-tooltip class="has-tip current" title="Networks"><span class="snf-network_full"></span></a></li>
24 24
				<li><a href="" data-tooltip class="has-tip" title="Disks"><span class="snf-HDD"></span></a></li>
25 25
				<li><a href="pithos_list.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li>
26 26
				<li><a href="" data-tooltip class="has-tip" title="Images" ><span class="snf-images"></span></a></li>
......
84 84
						</div>
85 85
						<div class="tabs">
86 86
							<ul>
87
								<li><a href=""><span class="snf-info_outline"></span></a></li>
88
								<li><a href="" class="current"><span class="snf-PC_fill"></span></a></li>
87
								<li><a href="#info"><span class="snf-info_outline"></span></a></li>
88
								<li><a href="#vm-connected" class="active"><span class="snf-PC_fill"></span></a></li>
89 89
							</ul>
90 90
						</div>
91 91
					</div>
92 92
				</section>
93
				<section class="content connected">
93
				<section class="content info-simple" id="info" style="display:none;">
94
					<section class="info-block">
95
						<h2>info</h2>
96
						<dl>
97
							<dt><span class="snf-cpu icon"></span>CPUs</dt>
98
							<dd>4</dd>
99
							<dt><span class="snf-ram icon"></span>RAM</dt>
100
							<dd>512 MB</dd>
101
							<dt><span class="snf-HDD icon"></span>System Disk Size</dt>
102
							<dd>4GB</dd>
103
							<dt><span class="snf-HDD icon"></span>Storage Type</dt>
104
							<dd>Archipelago</dd>
105
							<dt><span class="snf-images icon"></span>Image Name</dt>
106
							<dd>Fedora</dd>
107
							<dt><span class="snf-images icon"></span>Image Size</dt>
108
							<dd>3.68 GB</dd>
109
							<dt><span class="snf-ram icon"></span>IPv4</dt>
110
							<dd>83.212.96.152</dd>
111
							<dt><span class="snf-ram icon"></span>IPv4</dt>
112
							<dd>83.212.96.153</dd>
113
							<dt><span class="snf-ram icon"></span>IPv6</dt>
114
							<dd>2001:648:2ffc:1112:a80c:eaff:fec2:8cd9</dd>
115
						</dl>
116
					</section>
117
				</section>
118
				<section class="content connected" id="vm-connected" style="display:block">
94 119
					<section class="item error">
95 120
						<div class="what">
96 121
							<div class="img-wrap">
b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_list.html
159 159
	<!-- overlays end -->
160 160
	
161 161
				<section class="actions-bar clearfix">
162
			<h2>Virtual Machines</h2>
162
			<h2>Networks</h2>
163 163
			<div class="view-type">
164 164
				<a href="" class="list"><span class="snf-listview "></span></a>
165 165
				<a href="" class="grid"><span class="snf-gridview current"></span></a>
......
201 201
								<div class="col lt">
202 202
									<ul>
203 203
										<li><a href="">Option i</a></li>
204
										<li><a href="">Option j</a></li>
204
										<li><a href="network_details.html">Details</a></li>
205 205
										<li><a href="">Option k</a></li>
206 206
										<li><a href="">Option l</a></li>
207 207
										<li><a href="">Option m</a></li>
......
210 210
								<div class="col rt">
211 211
									<ul>
212 212
										<li><a href="">Option i</a></li>
213
										<li><a href="">Option j</a></li>
213
										<li><a href="network_details.html">Details</a></li>
214 214
									</ul>
215 215
								</div>
216 216
							</div>
......
238 238
								<div class="col lt">
239 239
									<ul>
240 240
										<li><a href="">Option i</a></li>
241
										<li><a href="">Option j</a></li>
241
										<li><a href="network_details.html">Details</a></li>
242 242
										<li><a href="">Option k</a></li>
243 243
										<li><a href="">Option l</a></li>
244 244
										<li><a href="">Option m</a></li>
......
247 247
								<div class="col rt">
248 248
									<ul>
249 249
										<li><a href="">Option i</a></li>
250
										<li><a href="">Option j</a></li>
250
										<li><a href="network_details.html">Details</a></li>
251 251
									</ul>
252 252
								</div>
253 253
							</div>
......
275 275
								<div class="col lt">
276 276
									<ul>
277 277
										<li><a href="">Option i</a></li>
278
										<li><a href="">Option j</a></li>
278
										<li><a href="network_details.html">Details</a></li>
279 279
										<li><a href="">Option k</a></li>
280 280
										<li><a href="">Option l</a></li>
281 281
										<li><a href="">Option m</a></li>
......
284 284
								<div class="col rt">
285 285
									<ul>
286 286
										<li><a href="">Option i</a></li>
287
										<li><a href="">Option j</a></li>
287
										<li><a href="network_details.html">Details</a></li>
288 288
									</ul>
289 289
								</div>
290 290
							</div>

Also available in: Unified diff