Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ d932286d

History | View | Annotate | Download (6 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
        // what should be working
80
        /*
81
        $(".inactive#arrow").click(function(event){
82
            $(this).removeClass("inactive");
83
            $(this).addClass("active");
84
            $(this).rotateAnimation(90);
85
        });
86

87
        $(".active#arrow").click(function(event){
88
            $(this).removeClass("active");
89
            $(this).addClass("inactive");
90
            $(this).rotateAnimation(0);
91
        });
92
        */
93
        
94
        // what is working
95
        $("#arrow").click(function(event){
96
            $("ul.css-tabs li a.current").removeClass("current");
97
            $("ul.css-tabs li a").animate({top:'30px'}, {complete: function() { 
98
                $(this).hide(); 
99
                $("ul.css-tabs li a.secondary").show();
100
                $("ul.css-tabs li a.secondary").animate({top:'9px'}, {complete: function() {
101
                     $("ul.css-tabs li a.secondary#files").addClass("current");
102
                }});            
103
            }});
104
            var state = false;
105
            $(this).rotate({animateAngle: (-180), bind:[{
106
                "click":function(){
107
                    if (state) {
108
                        $(this).rotateAnimation(-180);
109
                        $("ul.css-tabs li a.current").removeClass("current");
110
                        $("ul.css-tabs li a").animate({top:'30px'}, {complete: function() { 
111
                            $(this).hide(); 
112
                            $("ul.css-tabs li a.secondary").show();
113
                            $("ul.css-tabs li a.secondary").animate({top:'9px'}, {complete: function() {
114
                                 $("ul.css-tabs li a.secondary#files").addClass("current");
115
                            }});            
116
                        }});
117
                        state = false;
118
                        }
119
                    else {
120
                       $(this).rotateAnimation(0);
121
                        $("ul.css-tabs li a.current").removeClass("current");
122
                        $("ul.css-tabs li a").animate({top:'30px'}, {complete: function() { 
123
                            $(this).hide(); 
124
                            $("ul.css-tabs li a.primary").show();
125
                            $("ul.css-tabs li a.primary").animate({top:'9px'}, {complete: function() {
126
                                 $("ul.css-tabs li a.primary#machines").addClass("current");
127
                            }});            
128
                        }});
129
                       state = true;
130
                       }
131
                }}]
132
            });
133
        });
134

    
135
    </script>
136
</body>
137
</html>
138