Revision 6f547d12

b/ui/static/main.css
1683 1683
    width: 500px;
1684 1684
}
1685 1685

  
1686
#network-template {
1687
    margin: 2px 0 0 -30px;
1688
}
1689

  
1686 1690
.network a {
1687 1691
    color: #3d3d3d;
1688 1692
    font-weight: normal;
......
1748 1752
    background-color:#dcdcdc;
1749 1753
}
1750 1754

  
1751
.network .mini-separator {
1755
#internet-separator {
1752 1756
    width: 510px;
1753 1757
    height: 5px;
1754 1758
    background-color: #6C535D;
1755
    margin-left: -10px;
1756
    margin-top: 30px;
1759
    margin-left: -36px;
1760
    margin-top: 20px;
1757 1761
}
1758 1762

  
1759 1763
.network-logos {
......
1792 1796
}
1793 1797

  
1794 1798
.private-network {
1795
    margin-top: 50px;
1799
    margin-top: 20px;
1796 1800
}
1797 1801

  
1798 1802
span.rename-network, span.configure {
b/ui/templates/networks.html
28 28
            {% trans "Show:" %}  
29 29
            <a class="show-machines" href="#">{% trans "machines" %} (3)</a>
30 30
        </h5>
31
        <div class="mini-separator"></div>
32 31
    </div>
32
    <div class="network-contents">
33
        content
34
    </div>
35
    <div id="internet-separator"></div>
33 36
    <div class="private-network">
34 37
        <div class="network" id="network-template">
35 38
            <div class="actions">
......
55 58
                <a class="show-machines" href="#">{% trans "machines" %} (3)</a>
56 59
            </h5>
57 60
        </div>
61
        <div class="network-contents">
62
            content
63
        </div>
64
        <div class="separator"></div>
65
        <div class="network" id="network-template">
66
            <div class="actions">
67
                <a href="#" class="action-add">{% trans "Add Machine" %}</a>
68
                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>
69
                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>
70
            </div>    
71
            <div class="state">
72
                <div class="status">{% trans "Private Network" %}</div>
73
                <div class="indicator"></div>
74
                <div class="indicator"></div>
75
                <div class="indicator"></div>
76
                <div class="indicator"></div>
77
            </div>    
78
            <img class="network-logos" src="/static/network.png" />
79
            <div href="#" class="name">
80
                <h5 class="namecontainer">
81
                    <span class="name">{% trans "My Network 2" %}</span><span class="rename-network"></span>
82
                </h5>
83
            </div>
84
            <h5 class="network-machines">
85
                {% trans "Show:" %}  
86
                <a class="show-machines" href="#">{% trans "machines" %} (1)</a>
87
            </h5>
88
        </div>
89
        <div class="network-contents">
90
            content
91
        </div>
58 92
        <div class="separator"></div>
93
        <div class="network" id="network-template">
94
            <div class="actions">
95
                <a href="#" class="action-add">{% trans "Add Machine" %}</a>
96
                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>
97
                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>
98
            </div>    
99
            <div class="state">
100
                <div class="status">{% trans "Private Network" %}</div>
101
                <div class="indicator"></div>
102
                <div class="indicator"></div>
103
                <div class="indicator"></div>
104
                <div class="indicator"></div>
105
            </div>    
106
            <img class="network-logos" src="/static/network.png" />
107
            <div href="#" class="name">
108
                <h5 class="namecontainer">
109
                    <span class="name">{% trans "My Network 3" %}</span><span class="rename-network"></span>
110
                </h5>
111
            </div>
112
            <h5 class="network-machines">
113
                {% trans "Show:" %}  
114
                <a class="show-machines" href="#">{% trans "machines" %} (2)</a>
115
            </h5>
116
        </div>
117
        <div class="network-contents">
118
            content
119
        </div>
59 120
    </div>
60 121
</div>
61 122
<div id="networks" class="separator"></div>
123

  
124

  
125
<script>
126
  //hide the all of the networks contents
127
  $(".network-contents").hide();
128
  //toggle the componenet with class network-contents
129
  $(".show-machines").click(function()
130
  {
131
    $(this).parent().parent().next(".network-contents").slideToggle(600);
132
  });
133
</script>

Also available in: Unified diff