Revision 69a37abb

b/ui/static/main.css
1726 1726
    margin: 2px 0 0 -30px;
1727 1727
}
1728 1728

  
1729
div.network-placeholder {
1730
    border-left: 3px solid #FB822F;
1731
    margin-left: 33px;
1732
}
1733

  
1729 1734
.network a, .show-machines, span.ip, .show-firewall {
1730 1735
    color: #3d3d3d;
1731 1736
    font-weight: normal;
......
1887 1892
}
1888 1893

  
1889 1894
.network-machine {
1890
    margin-left: 73px;
1895
    margin-left: 34px;
1891 1896
    padding-bottom: 5px;
1892 1897
    padding-left: 5px;
1893 1898
    padding-top: 10px;
......
1921 1926
    height: 3px;
1922 1927
    background-color: #87AADE;
1923 1928
    margin-bottom: 15px;
1924
    margin-left: 78px;
1925
    width: 425px;
1929
    margin-left: 39px;
1930
    width: 428px;
1926 1931
}
1927 1932

  
1928 1933
.network-contents-end-separator {
1929 1934
    height: 3px;
1930 1935
    background-color: #87AADE;
1931 1936
    margin-top: 7px;
1932
    margin-left: 15px;
1933
    width: 488px;
1937
    margin-left: 5px;
1938
    width: 498px;
1934 1939
}
1935 1940

  
1936 1941
.network-machine .state {
......
1955 1960
}
1956 1961

  
1957 1962
.machines {
1958
    margin: 2px 0 0 73px;
1963
    margin: 2px 0 0 39px;
1959 1964
    width: 430px;
1960 1965
    background-color: #B3B3B3;
1961 1966
}
b/ui/templates/networks.html
28 28
            {% trans "Show:" %} <span class="show-machines">{% trans "machines" %} (2)</span>
29 29
        </h5>
30 30
        <div class="network-contents">
31
            <div class="network-contents-start-separator"></div>
32
            <div class="network-machine" id="machine-template">
33
                <div class="machine-actions">
34
                    <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
35
                    <a href="#" class="action-details">{% trans "Details" %}</a>
36
                </div>        
37
                <div class="state">
38
                    <div class="status"><span class="discreet">IPv4:</span> 192.94.73.15</div>
39
                    <div class="status"><span class="discreet">IPv6:</span> vv</div>
40
                    <img class="spinner" style="display:none" src="/static/progress.gif" />
41
                    <img class="wave" style="display:none" src="/static/wave.gif" />
42
                </div>
43
                <img class="logo" src="/static/machines/debian-on.png" />
44
                <div href="#" class="machine-name-div">
45
                    <h5 class="namecontainer editable">
46
                        <span class="name">my desktop1</span><span class="rename"></span>
47
                        <div class="editbuttons" style="display:none">
48
                            <span class="save" />
49
                            <span class="cancel" />
50
                        </div>
51
                    </h5>
52
                </div>
53
                <h5>
54
                    <span class="ip">{% trans "IPs" %}</span> | 
55
                    <span class="show-firewall">{% trans "Firewall" %}</span> 
56
                    (<span class="firewall-on">{% trans "On" %}</span>)   
57
                </h5>     
58
                <div class="firewall-content">
59
                    <div class="firewall-contents-start-separator"></div>
60
                    <input type="radio" class="checkboxes" name="image-id1" /> <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span><br />
61
                    <input type="radio" class="checkboxes" name="image-id1" /> <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span><br />
62
                    <input type="radio" class="checkboxes" name="image-id1" /> <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span><br />
63
                    <input type="radio" class="checkboxes" name="image-id1" /> <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>
64
                    <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>
65
                    <div class="firewall-contents-end-separator"></div>
66
                </div>
67
            </div>
68
            <div class="network-separator machines"></div>
69
            <div class="network-machine" id="machine-template">
70
                <div class="machine-actions">
71
                    <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
72
                    <a href="#" class="action-details">{% trans "Details" %}</a>
73
                </div>        
74
                <div class="state">
75
                    <div class="status"><span class="discreet">IPv4:</span> 192.94.73.18</div>
76
                    <div class="status"><span class="discreet">IPv6:</span> vv</div>
77
                    <img class="spinner" style="display:none" src="/static/progress.gif" />
78
                    <img class="wave" style="display:none" src="/static/wave.gif" />
79
                </div>
80
                <img class="logo" src="/static/machines/windows-off.png" />
81
                <div href="#" class="machine-name-div">
82
                    <h5 class="namecontainer editable">
83
                        <span class="name">my desktop1</span><span class="rename"></span>
84
                        <div class="editbuttons" style="display:none">
85
                            <span class="save" />
86
                            <span class="cancel" />
87
                        </div>
88
                    </h5>
89
                </div>
90
                <h5>
91
                    <span class="ip">{% trans "IPs" %}</span> | 
92
                    <span class="show-firewall" href="#">{% trans "Firewall" %}</span> 
93
                    (<span class="firewall-off">{% trans "Off" %}</span>)   
94
                </h5>  
95
                <div class="firewall-content">
96
                    <div class="firewall-contents-start-separator"></div>
97
                    <input type="radio" class="checkboxes" name="image-id2" /> <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span><br />
98
                    <input type="radio" class="checkboxes" name="image-id2" /> <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span><br />
99
                    <input type="radio" class="checkboxes" name="image-id2" /> <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span><br />
100
                    <input type="radio" class="checkboxes" name="image-id2" /> <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>
101
                    <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>
102
                    <div class="firewall-contents-end-separator"></div>
103
                </div>
104
            </div>
105
            <div class="network-contents-end-separator"></div>
106
        </div>
107
    </div>
108
    <div id="internet-separator"></div>
109
    <div id="private-networks">
110
        <div class="network" id="network-template">
111
            <div class="actions">
112
                <a href="#" class="action-add">{% trans "Add Machine" %}</a>
113
                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>
114
                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>
115
            </div>    
116
            <div class="state">
117
                <div class="status">{% trans "Private Network" %}</div>
118
                <div class="indicator"></div>
119
                <div class="indicator"></div>
120
                <div class="indicator"></div>
121
                <div class="indicator"></div>
122
            </div>    
123
            <img class="network-logos" src="/static/network.png" />
124
            <div href="#" class="name-div">
125
                <h5 class="namecontainer">
126
                    <span class="name">{% trans "My Network 1" %}</span><span class="rename-network"></span>
127
                </h5>
128
            </div>
129
            <h5 class="network-machines">
130
                {% trans "Show:" %} <span class="show-machines">{% trans "machines" %} (2)</span>
131
            </h5>
132
            <div class="network-contents">
31
            <div class="network-placeholder">
133 32
                <div class="network-contents-start-separator"></div>
134 33
                <div class="network-machine" id="machine-template">
135 34
                    <div class="machine-actions">
......
153 52
                        </h5>
154 53
                    </div>
155 54
                    <h5>
156
                        <span class="machine-connect">{% trans "Connect" %}</span> {% trans "to manage private IPs" %}
157
                    </h5>
55
                        <span class="ip">{% trans "IPs" %}</span> | 
56
                        <span class="show-firewall">{% trans "Firewall" %}</span> 
57
                        (<span class="firewall-on">{% trans "On" %}</span>)   
58
                    </h5>     
158 59
                    <div class="firewall-content">
159
                        firewall content
60
                        <div class="firewall-contents-start-separator"></div>
61
                        <input type="radio" class="checkboxes" name="image-id1" /> 
62
                        <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span>
63
                        <br />
64
                        <input type="radio" class="checkboxes" name="image-id1" /> 
65
                        <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span>
66
                        <br />
67
                        <input type="radio" class="checkboxes" name="image-id1" /> 
68
                        <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span>
69
                        <br />
70
                        <input type="radio" class="checkboxes" name="image-id1" /> 
71
                        <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>
72
                        <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>
73
                        <div class="firewall-contents-end-separator"></div>
160 74
                    </div>
161 75
                </div>
162 76
                <div class="network-separator machines"></div>
......
171 85
                        <img class="spinner" style="display:none" src="/static/progress.gif" />
172 86
                        <img class="wave" style="display:none" src="/static/wave.gif" />
173 87
                    </div>
174
                    <img class="logo" src="/static/machines/ubuntu-on.png" />
88
                    <img class="logo" src="/static/machines/windows-off.png" />
175 89
                    <div href="#" class="machine-name-div">
176 90
                        <h5 class="namecontainer editable">
177 91
                            <span class="name">my desktop1</span><span class="rename"></span>
......
182 96
                        </h5>
183 97
                    </div>
184 98
                    <h5>
185
                        <span class="machine-connect">{% trans "Connect" %}</span> {% trans "to manage private IPs" %}
186
                    </h5>
99
                        <span class="ip">{% trans "IPs" %}</span> | 
100
                        <span class="show-firewall" href="#">{% trans "Firewall" %}</span> 
101
                        (<span class="firewall-off">{% trans "Off" %}</span>)   
102
                    </h5>  
103
                    <div class="firewall-content">
104
                        <div class="firewall-contents-start-separator"></div>
105
                        <input type="radio" class="checkboxes" name="image-id2" /> 
106
                        <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span>
107
                        <br />
108
                        <input type="radio" class="checkboxes" name="image-id2" /> 
109
                        <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span>
110
                        <br />
111
                        <input type="radio" class="checkboxes" name="image-id2" /> 
112
                        <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span>
113
                        <br />
114
                        <input type="radio" class="checkboxes" name="image-id2" /> 
115
                        <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>
116
                        <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>
117
                        <div class="firewall-contents-end-separator"></div>
118
                    </div>
119
                </div>
120
            </div>
121
            <div class="network-contents-end-separator"></div>
122
        </div>
123
    </div>
124
    <div id="internet-separator"></div>
125
    <div id="private-networks">
126
        <div class="network" id="network-template">
127
            <div class="actions">
128
                <a href="#" class="action-add">{% trans "Add Machine" %}</a>
129
                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>
130
                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>
131
            </div>    
132
            <div class="state">
133
                <div class="status">{% trans "Private Network" %}</div>
134
                <div class="indicator"></div>
135
                <div class="indicator"></div>
136
                <div class="indicator"></div>
137
                <div class="indicator"></div>
138
            </div>    
139
            <img class="network-logos" src="/static/network.png" />
140
            <div href="#" class="name-div">
141
                <h5 class="namecontainer">
142
                    <span class="name">{% trans "My Network 1" %}</span><span class="rename-network"></span>
143
                </h5>
144
            </div>
145
            <h5 class="network-machines">
146
                {% trans "Show:" %} <span class="show-machines">{% trans "machines" %} (2)</span>
147
            </h5>
148
            <div class="network-contents">
149
                <div class="network-placeholder">
150
                    <div class="network-contents-start-separator"></div>
151
                    <div class="network-machine" id="machine-template">
152
                        <div class="machine-actions">
153
                            <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
154
                            <a href="#" class="action-details">{% trans "Details" %}</a>
155
                        </div>        
156
                        <div class="state">
157
                            <div class="status"><span class="discreet">IPv4:</span> 192.94.73.15</div>
158
                            <div class="status"><span class="discreet">IPv6:</span> vv</div>
159
                            <img class="spinner" style="display:none" src="/static/progress.gif" />
160
                            <img class="wave" style="display:none" src="/static/wave.gif" />
161
                        </div>
162
                        <img class="logo" src="/static/machines/debian-on.png" />
163
                        <div href="#" class="machine-name-div">
164
                            <h5 class="namecontainer editable">
165
                                <span class="name">my desktop1</span><span class="rename"></span>
166
                                <div class="editbuttons" style="display:none">
167
                                    <span class="save" />
168
                                    <span class="cancel" />
169
                                </div>
170
                            </h5>
171
                        </div>
172
                        <h5>
173
                            <span class="machine-connect">{% trans "Connect" %}</span> {% trans "to manage private IPs" %}
174
                        </h5>
175
                        <div class="firewall-content">
176
                            firewall content
177
                        </div>
178
                    </div>
179
                    <div class="network-separator machines"></div>
180
                    <div class="network-machine" id="machine-template">
181
                        <div class="machine-actions">
182
                            <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
183
                            <a href="#" class="action-details">{% trans "Details" %}</a>
184
                        </div>        
185
                        <div class="state">
186
                            <div class="status"><span class="discreet">IPv4:</span> 192.94.73.18</div>
187
                            <div class="status"><span class="discreet">IPv6:</span> vv</div>
188
                            <img class="spinner" style="display:none" src="/static/progress.gif" />
189
                            <img class="wave" style="display:none" src="/static/wave.gif" />
190
                        </div>
191
                        <img class="logo" src="/static/machines/ubuntu-on.png" />
192
                        <div href="#" class="machine-name-div">
193
                            <h5 class="namecontainer editable">
194
                                <span class="name">my desktop1</span><span class="rename"></span>
195
                                <div class="editbuttons" style="display:none">
196
                                    <span class="save" />
197
                                    <span class="cancel" />
198
                                </div>
199
                            </h5>
200
                        </div>
201
                        <h5>
202
                            <span class="machine-connect">{% trans "Connect" %}</span> {% trans "to manage private IPs" %}
203
                        </h5>
204
                    </div>
187 205
                </div>
188 206
                <div class="network-contents-end-separator"></div>
189 207
            </div>

Also available in: Unified diff