Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ 912bf2a1

History | View | Annotate | Download (5.3 kB)

1
{% load i18n %}
2
<!DOCTYPE html>
3
<head>
4
        <title>{{ project }}</title>
5
        <!-- include the Tools -->
6
        <script src="static/jquery.tools.min.js"></script>
7
    <script src="static/jQueryRotate.js"></script>
8
        <link rel="stylesheet" type="text/css" href="static/main.css"/>        
9
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' />
10

    
11
</head>
12
<body>
13
    <div id="wrapper">
14
        <div id='user'>
15
            <a href="#">{% trans "username" %}</a> &nbsp;|&nbsp; <a href="#">{% trans "settings" %}</a>
16
            {% get_available_languages as LANGUAGES %}
17
            {% for lang in LANGUAGES %}
18
                &nbsp;|&nbsp;
19
                <a {% if  == lang.0 %}class="current_lang" {% else %}  href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a> 
20
            {% endfor %}
21
        </div>
22
        <div id='header'>
23
            <a href="/" class="logo">
24
                <img src="static/nefo.png" alt="+nefo"/>
25
            </a>
26
            <div class='fatborder'></div>
27
        </div>
28
        <!-- tabs -->
29
        <ul class="css-tabs">
30
                <li><a href="machines" title="{% trans "manage  virtual " %}" class="primary" id="machines">
31
                {% trans "machines" %}</a></li>
32
                <li><a href="disks" title="{% trans "manage  storage " %}" class="primary" id="disks">
33
                {% trans "disks" %}</a></li>
34
                <li><a href="images" title="{% trans "manage  images" %}" class="primary" id="images">
35
                {% trans "images" %}</a></li>
36
                <li><a href="networks" title="{% trans "configure " %}" class="primary" id="networks">
37
                {% trans "networks" %}</a></li>
38
            <li><a href="files" title="{% trans "your " %}" class="secondary" id="files">
39
                {% trans "files" %}</a></li>
40
                <li><a href="desktops" title="{% trans "your " %}" class="secondary" id="desktops">
41
                {% trans "desktops" %}</a></li>
42
                <li><a href="apps" title="{% trans "your " %}" class="secondary" id="apps">
43
                {% trans "apps" %}</a></li>
44
        </ul>
45
        <div class="more-tabs"><img src="static/arrow.png" id="arrow"></img></div>
46
        <div class="css-panes">
47
                <div id="machines-pane" class="pane" style="display:block">{% include "machines.html" %}</div>
48
                <div id="disks-pane" class="pane"></div>
49
                <div id="images-pane" class="pane"></div>
50
                <div id="networks-pane" class="pane"></div>
51
            <div id="files-pane" class="pane"></div>
52
                <div id="desktops-pane" class="pane"></div>
53
                <div id="apps-pane" class="pane"></div>
54
        </div>
55
    </div>
56
    <!-- activate tabs with JavaScript -->
57
    <script>
58
                $(function() {
59
                    $('ul.css-tabs li').hover(function(){
60
                            $(this).find('a:not(.current)').animate({top:'0px'},{queue:false,duration:150});
61
            }, function(){
62
                $('ul.css-tabs li a:not(.current)').animate({top:'9px'},{queue:false,duration:150});
63
                    });
64
                });
65
        $(function() {
66
                $("ul.css-tabs").tabs("div.css-panes div.pane", {        
67
                        onBeforeClick: function(event, i) {
68
                    $('ul.css-tabs li a').animate({top:'9px'},{queue:false,duration:150});
69
                                // get the pane to be opened
70
                                var pane = this.getPanes().eq(i);
71
                    pane.text('');
72
                                // load it with a page specified in the tab's href attribute
73
                                pane.load(this.getTabs().eq(i).attr("href"));
74

75
                        }
76
                });
77
        });
78

79
        // toggle main menu
80
        $("#arrow").click(function(event){
81
                toggleMenu();
82
        }); 
83
                
84
                function toggleMenu() {
85
                var primary = $("ul.css-tabs li a.primary");
86
            var secondary = $("ul.css-tabs li a.secondary");
87
            var all = $("ul.css-tabs li a");                        
88
                        var toggled = $('ul.css-tabs li a.current').hasClass('secondary');
89
                        
90
                        // if anything is still moving, do nothing
91
                if ($(":animated").length) {
92
                        return;
93
                } 
94
                
95
                // nothing is current to begin with
96
            $('ul.css-tabs li a.current').removeClass('current');
97
                        
98
                        // move stuff around
99
            all.animate({top:'30px'}, {complete: function() { 
100
                $(this).hide();
101
                if (toggled) {
102
                        primary.show();
103
                        primary.animate({top:'9px'}, {complete: function() {
104
                                $('ul.css-tabs li a.primary#machines').addClass('current');
105
                                $('a#machines').click();                                   
106
                        }});
107
                } else {
108
                        secondary.show();
109
                        secondary.animate({top:'9px'}, {complete: function() {
110
                                $('ul.css-tabs li a.secondary#files').addClass('current');
111
                                $('a#files').click();                                                                           
112
                        }});
113
                }                                              
114
            }});
115
            
116
            // rotate arrow icon
117
            if (toggled) {
118
                    $("#arrow").rotate({animateAngle: (0), bind:[{"click":function(){toggleMenu()}}]});
119
                    $("#arrow").rotateAnimation(0);                    
120
            } else {
121
                    $("#arrow").rotate({animateAngle: (-180), bind:[{"click":function(){toggleMenu()}}]});
122
                    $("#arrow").rotateAnimation(-180);
123
            }            
124
                }  
125
    </script>
126
</body>
127
</html>
128