Skip to content

Commit 103ade7

Browse files
fernaofernao
committed
layout fixes: #47 
1 parent c3130a7 commit 103ade7

16 files changed

+105
-73
lines changed

‎app/django-bbx/bbx/static/css/main.css

+40-25
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,18 @@ html, body, #container {height: 100%; }
2222
max-width: 300px !important;
2323
margin-left: 75%;
2424
margin-right: 2px;
25-
margin-top: 78px;
2625
min-width: 200px;
2726
padding: 10px;
28-
background-color: #fff;
2927
z-index: 20;
3028
}
29+
.sidebar-inner { background-color: #fff; height: 100%; margin-top: 10px}
30+
3131
#footer {clear: both; height: 40px; position: fixed; z-index: 10; background-color: #E1D2A0; width: 100%; bottom: -2px; border-top: #fff solid 2px; }
3232
.bbx #content,
3333
.mocambola #content,
3434
.mucua #content,
3535
.media #content,
36-
.rede #content { margin-bottom: 40px; margin-top: 170px; margin-left: 10px}
36+
.rede #content { margin-bottom: 40px; margin-top: 170px; margin-left: 60px}
3737

3838
.mucua #content {text-align: right}
3939
a {text-decoration: none;}
@@ -118,8 +118,8 @@ a {text-decoration: none;}
118118
*/
119119

120120
#user-profile {height: 50px}
121-
#sidebar #user-profile img {float: left; width: 45px; height: 45px}
122-
#sidebar #user-profile h4 {font-size: 12px; float: left; text-decoration: none; color: #D5C590 !important; margin: 0 auto; padding-top: 12px; padding-left: 8px}
121+
#sidebar #user-profile img {float: left; width: 45px; height: 45px; margin-top: 8px;}
122+
#sidebar #user-profile h4 {font-size: 12px; float: left; text-decoration: none; color: #D5C590 !important; margin: 0 auto; padding-top: 31px; padding-left: 8px}
123123
#sidebar #link-login a {color: #D5C590; font-size: 12px; font-weight: bold}
124124
#user-profile a.logout {font-size:11px; color:#D5C590; float: right; background-image: url(/images/logout.png); width: 37px; height: 18px}
125125

@@ -140,7 +140,7 @@ a {text-decoration: none;}
140140
.destaques {clear: both}
141141
#content .media {clear: both}
142142
#content .media div {float: right;}
143-
.destaques h3.title {color: #fff; font-size: 26px; margin: 4px}
143+
.destaques h3.title {colr: #fff; font-size: 26px; margin: 4px}
144144
.media #buscador .media-display-type {display: none; }
145145

146146
#header-bottom { color: #145B7A; font-weight: bold; font-size: 12px; }
@@ -195,13 +195,13 @@ a {text-decoration: none;}
195195
/*
196196
* media grid
197197
*/
198-
.media-box {width: 192px; height: 175px; background: #f4efdd; margin: 3px; font-size: 11px; border-radius: 5px; padding: 6px; text-align: center}
198+
.media-box {width: 192px; height: 175px; background: #f4efdd; margin: 3px; font-size: 11px; border-radius: 5px; padding: 6px; text-align: center; overflow: hidden}
199199
.media-box .result-thumb {width: 192px; height: 130px; background: #000}
200-
.media-box .title {font-size: 11px }
200+
.media-box .title {font-size: 13px; font-weight: bold }
201201
.media-box .format_type { color: #aaa; text-transform: uppercase }
202202
.media-box .date {font-size: 10px }
203203
.media-box .format_type {padding: 6px; font-size: 10px}
204-
.media-box .origin {font-size: 10px; color: #aaa; padding-right: 10px }
204+
.media-box .origin {font-size: 10px; color: #aaa; padding-right: 10px; font-weight: bold; padding-top:2px }
205205
.media-box .license {color: #b96}
206206
.media-box a {color: #2E7E36}
207207
.media-box a:hover {color: #005500}
@@ -241,33 +241,36 @@ a {text-decoration: none;}
241241
* media view
242242
*/
243243
#media-view {margin-left: 15px}
244-
.media #content {width: 70%}
244+
.media #content {width: 68%}
245245
#media-view .content-title {font-size: 18px;}
246246
#media-view .title-bold {font-size: 18px; font-weight: bold}
247247

248-
#media-view #link-edit {background-image: url(../images/edit-media.png); width: 51px; height: 21px; float:right; margin-right: 30px}
249-
#media-view #media-title {margin-left: 20px;}
250-
#media-view #media-title h3 { color:#197299; font-size: 20px}
248+
#media-view #link-edit {background-image: url(../images/edit-media.png); width: 51px; height: 21px; float: right;}
249+
#media-view #media-title h3 { color:#197299; font-size: 20px; height: 26px}
251250

252251
#media-view #inner-content {margin-right: 30px }
253252
#media-view .block-1 {display: inline; width: 60%; min-width: 420px; padding-right: 2px}
254253
#media-view .block-1 .title {font-weight: bold; }
255254

256-
#media-view .block-2 {display: inline; width:30%; min-width: 160px; max-width: 300px; background-color: #8cb689; border-radius: 8px; padding: 10px;}
257-
#media-view .block-2 p {margin: 0; padding-bottom: 5px}
258-
#media-view .block-2 .block-fields p {font-size: 17px; font-weight: bold}
259-
#media-view .block-2 .block-title {float: left; width: 25%; text-align: right; }
260-
#media-view .block-2 .block-fields {float: left; width: 70%; padding-left: 10px}
261-
#media-view .block-2 .blocks {float: left; width: 100%; border-top: 2px solid #fff }
262-
#media-view .block-2 .blocks .text {font-weight: normal; font-size: 12px; color: #296b7c}
255+
#media-view .block-2 table {margin-top: 30px9}
256+
#media-view .block-2 {display: inline; width:25%; min-width: 160px; max-width: 200px; background-color: #8cb689; border-radius: 8px; padding: 10px; margin: 86px 0 0 20px}
257+
#media-view .block-2 td {margin: 0; padding-bottom: 5px}
258+
#media-view .block-2 td {font-size: 11px; color: #fff}
259+
#media-view .block-2 .left {text-align: right}
260+
#media-view .block-2 .right {font-weight: bold; font-size: 12px}
261+
262+
#media-view .blocks { width: 100%; border-bottom: 1px solid #fff; margin-bottom: 16px; color:#000 }
263+
#media-view .blocks p.text {font-weight: normal; font-size: 14px; color: #000; line-height: 135%; padding: 5px}
264+
#media-view .blocks .title {font-size: 16px; font-weight: bold}
263265

264-
#media-view p {color: #fff; font-size: 17px}
265-
#media-view .media-image { border-radius: 8px; background-color: #f4efdd; padding: 8px; margin-right: 10px; width: 90%}
266+
#media-view p {color: #fff; font-size: 11px}
267+
#media-view .media-image { }
266268
#media-view .media-image img,
267-
#media-view .media-image video {background-color: #000; width: 85%;}
269+
#media-view .media-image video {background-color: #000; width: 96%; margin-top: 22px}
268270
#media-view .media-image .download,
269271
#media-view .blocks .download {color: #145B7A}
270-
#media-view #whereis a {display: inline-block}
272+
#media-view h3.quem-tem {margin-bottom: 4px; color: #fff}
273+
#media-view #whereis a {display: inline-block; border: 1px solid #ddd; background-color: #72a56e; padding: 2px; border-radius: 4px; margin-bottom: 4px; padding: 2px 4px 2px 4px}
271274

272275
#media-view a {color: #fff}
273276
#media-view .solicit-copy a {color: #197299}
@@ -278,7 +281,7 @@ a {text-decoration: none;}
278281
.result-thumb .type {font-size: 10px; background-color: #666; color: #fff; float: right}
279282

280283
#license {font-size: 11px}
281-
.license-image {width: 88px; height: 31px; margin: 2px }
284+
.license-image {width: 88px; height: 20px; margin: 2px }
282285
.license-gplv3 {background: url('/images/license-gplv3.png') no-repeat;}
283286
.license-gfdl {background: url('/images/license-gfdl.png') no-repeat;}
284287
.license-lgplv3 {background: url('/images/license-lgplv3.png') no-repeat;}
@@ -291,6 +294,18 @@ a {text-decoration: none;}
291294
.license-cc_sd {background: url('/images/license-cc_sd.png') no-repeat;}
292295
.license-cc_sd_nc {background: url('/images/license-cc_sd_nc.png') no-repeat;}
293296

297+
/*
298+
* media publish /edit
299+
*/
300+
#media_publish {padding-left: 20px; }
301+
#media_publish input {width: 350px !important; padding: 4px; margin-top: 4px}
302+
#media_publish textarea {width: 450px !important; padding: 4px}
303+
/*
304+
* media publish /edit
305+
*/
306+
#media_publish {padding-left: 20px; }
307+
#media_publish input {width: 350px !important; padding: 4px; margin-top: 4px}
308+
#media_publish textarea {width: 450px !important; padding: 4px}
294309
/*
295310
* mocambola && mucua
296311
*/

‎app/django-bbx/bbx/static/images/license-agplv3.png

-402 Bytes
Loading

‎app/django-bbx/bbx/static/images/license-cc.png

-303 Bytes
Loading

‎app/django-bbx/bbx/static/images/license-cc_ci.png

-146 Bytes
Loading

‎app/django-bbx/bbx/static/images/license-cc_ci_nc.png

-101 Bytes
Loading

‎app/django-bbx/bbx/static/images/license-cc_nc.png

-198 Bytes
Loading

‎app/django-bbx/bbx/static/images/license-cc_sd.png

39 Bytes
Loading

‎app/django-bbx/bbx/static/images/license-cc_sd_nc.png

32 Bytes
Loading

‎app/django-bbx/bbx/static/images/license-copyleft.png

-459 Bytes
Loading

‎app/django-bbx/bbx/static/images/license-gfdl.png

59 Bytes
Loading

‎app/django-bbx/bbx/static/images/license-gplv3.png

-1004 Bytes
Loading

‎app/django-bbx/bbx/static/images/license-lgplv3.png

-501 Bytes
Loading

‎app/django-bbx/bbx/templates/common/Sidebar.html

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
{% load i18n %}
22
<div id="sidebar">
33
<% if (_.isEmpty(config.profile)) { %><div id="link-login"><a class="" href='#login'>{% trans "do login" %}</a></div><% } %>
4-
<div id="user-profile"></div>
5-
<div id="place-profile"></div>
6-
<div id="cloud">
7-
<div class="term"><a href="">{% trans "cloud" %}</a></div>
8-
<div class="term"><a href="">{% trans "cloud" %}</a></div>
9-
<div class="term"><a href="">{% trans "cloud" %}</a></div>
10-
<div class="term"><a href="">{% trans "cloud" %}</a></div>
4+
<div class="sidebar-inner">
5+
<div id="place-profile"></div>
6+
<div id="cloud">
7+
<div class="term"><a href="">{% trans "cloud" %}</a></div>
8+
<div class="term"><a href="">{% trans "cloud" %}</a></div>
9+
<div class="term"><a href="">{% trans "cloud" %}</a></div>
10+
<div class="term"><a href="">{% trans "cloud" %}</a></div>
11+
</div>
1112
</div>
1213
</div>

‎app/django-bbx/bbx/templates/common/UserProfile.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{% load i18n %}
22
<a href="<%=mocambolaUrl%>">
33
<img src="<%=avatar%>" />
4-
<h4><%=username%></h4>
4+
<h4>
5+
<% var usernameShort = username.match(/([a-zA-Z]*)\@/);
6+
print(usernameShort[1]);
7+
%>
8+
</h4>
59
</a>
610
<a class="logout" href="/#logout"></a>

‎app/django-bbx/bbx/templates/media/MediaGrid.html

+5-8
Original file line numberDiff line numberDiff line change
@@ -34,18 +34,15 @@
3434
</div>
3535
<span class="title">
3636
<a href="#<%= media.repository %>/<%= media.origin %>/media/<%= media.uuid %>">
37-
<% var strSize = 50; print(media.name.substring(0, strSize) + ((media.name.length > strSize) ? '...' : '')) %>
37+
<% var strSize = 35; print(media.name.substring(0, strSize) + ((media.name.length > strSize) ? '...' : '')) %>
3838
</a>
3939
</span>
4040
<br/>
41-
<div style="float: left;">
42-
<span class="format_type"><%= media.format %></span><br/>
43-
<span class="origin"><%= media.origin %></span>
41+
<div style="float:right;" class="origin">
42+
<span><%= media.origin %></span>
4443
</div>
45-
<div style="float: left;">
46-
<span class="date"><%= formatDate(media.date) %></span><br/>
47-
<span class="license"><%= media.license %></span>
48-
44+
<div style="float: left;" class="date">
45+
<span><%= formatDate(media.date) %></span><br/>
4946
</div>
5047
</div>
5148
<% }) %>

‎app/django-bbx/bbx/templates/media/MediaView.html

+47-32
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,47 @@
11
{% load i18n %}
22
<div id="media-view">
3-
<% if (config.userData.username) { %>
4-
<div id="link-edit">
5-
<a href="<%= '#' + media.repository + '/' + media.origin + '/media/' + media.uuid %>/edit">
6-
<img src="images/edit-media.png" />
7-
</a>
8-
</div>
9-
<% } %>
10-
11-
<div id="media-title">
12-
<h3><%= media.name %></h3>
13-
</div>
14-
153
<!-- inicio inner content -->
164
<div id="inner-content">
175

186
<!-- inner sidebar -->
197
<div class="block-2 content-div">
20-
<div class="block-title">
21-
<p>{% trans "By" %}</p>
22-
<p>{% trans "Date" %}</p>
23-
<p>{% trans "Mucua" %}</p>
24-
<p>{% trans "Format" %}</p>
25-
<p>{% trans "Size" %}</p>
26-
<p>{% trans "License" %}</p>
8+
<% if (config.userData.username) { %>
9+
<div id="link-edit">
10+
<a href="<%= '#' + media.repository + '/' + media.origin + '/media/' + media.uuid %>/edit">
11+
<img src="images/edit-media.png" />
12+
</a>
2713
</div>
14+
<% } %>
15+
16+
<table class="block-title">
17+
<tr>
18+
<td class="left">{% trans "By" %}</td>
19+
<td class="right"><a href="<% print('#' + media.repository + '/' + media.origin + '/mocambola/' + media.author) %>"><%= media.author.split('@')[0] %></a></td>
20+
</tr>
21+
<tr>
22+
<td class="left">{% trans "Date" %}</td>
23+
<td class="right"><%= formatDate(media.date) %></td>
24+
</tr>
25+
<tr>
26+
<td class="left">{% trans "Mucua" %}</td>
27+
<td class="right"><a href="<% print('#' + media.repository + '/' + media.origin) %>"><%= media.origin %></a></td>
28+
</tr>
29+
<tr>
30+
<td class="left">{% trans "Format" %}</td>
31+
<td class="right"><%= media.format %></td>
32+
</tr>
33+
<tr>
34+
<td class="left">{% trans "Size" %}</td>
35+
<td class="right">0GB</td>
36+
</tr>
37+
<tr>
38+
<td class="left">{% trans "License" %}</td>
39+
<td class="right license-image license-<%= media.license %>"></td>
40+
</tr>
41+
</table>
42+
43+
2844
<div class="block-fields">
29-
<p><a href="<% print('#' + media.repository + '/' + media.origin + '/mocambola/' + media.author) %>"><%= media.author.split('@')[0] %></a></p>
30-
<p><%= formatDate(media.date) %></p>
31-
<p><a href="<% print('#' + media.repository + '/' + media.origin) %>"><%= media.origin %></a></p>
32-
<p><%= media.format %></p>
33-
<p>0GB</p>
34-
<p><div class="license-image license-<%= media.license %>"></div></p>
3545
</div>
3646
<% if (media.tags != '') { %>
3747
<div class="blocks">
@@ -42,22 +52,21 @@ <h3><%= media.name %></h3>
4252
</p>
4353
</div>
4454
<% } %>
45-
<% if (media.note != '') { %>
46-
<div class="blocks">
47-
<p class="text"><%= media.note %></p>
48-
</div>
49-
<% } %>
5055
<div class="blocks">
56+
<h3 class="quem-tem title">{% trans "who was this file?" %}</h3>
5157
<p class="quem-tem">
52-
<span class="title-bold">{% trans "who was this file?" %}</span>
5358
<span id="whereis">&nbsp;</span>
5459
</p>
5560
</div>
5661
</div>
5762
<!-- fim de inner sidebar -->
5863

5964
<!-- bloco multimedia -->
60-
<div class="block-1 content-div">
65+
<div class="block-1 content-div">
66+
<div id="media-title">
67+
<h3><%= media.name %></h3>
68+
</div>
69+
6170
<% if (media.is_local) { %>
6271
<div class="media-image">
6372
<% if (media.type === 'imagem') { %>
@@ -75,6 +84,12 @@ <h3><%= media.name %></h3>
7584
{% trans "No preview available" %}
7685
<% } %>
7786

87+
<% if (media.note != '') { %>
88+
<div class="blocks" style="clear: both">
89+
<p class="text"><%= media.note %></p>
90+
</div>
91+
<% } %>
92+
7893
</div>
7994

8095
<% if (media.is_local) { %>

0 commit comments

Comments
 (0)