Download as
Browse Code »

Commit 87ec73ab681da877fa25881847e8bd13f4fb13f7

Authored by Evandro Junior
2 parents 96f66caf d8083699
Exists in community_hub_submodule

Merge branch 'AI3074-community_dashboard' of gitlab.com:participa/noosfero into … 

…AI3074-community_dashboard
Showing 3 changed files with 224 additions and 34 deletions   Show diff stats
public/javascripts/community_hub.js
  Diff comments   View file @87ec73a
@@ -173,7 +173,7 @@ function update_mediation_comments(mediation) { @@ -173,7 +173,7 @@ function update_mediation_comments(mediation) {
173 173
174 function update_mediations() { 174 function update_mediations() {
175 175
176 - if (jQuery("#mediation-section.show").size() != 0) { 176 + if (jQuery("#right-tab.show").size() != 0) {
177 177
178 var hub_id = jQuery(".hub").attr('id'); 178 var hub_id = jQuery(".hub").attr('id');
179 179
@@ -206,7 +206,7 @@ function update_mediations() { @@ -206,7 +206,7 @@ function update_mediations() {
206 206
207 function update_live_stream() { 207 function update_live_stream() {
208 208
209 - if (jQuery("#live-section.show").size() != 0) { 209 + if (jQuery("#left-tab.show").size() != 0) {
210 210
211 var hub_id = jQuery(".hub").attr('id'); 211 var hub_id = jQuery(".hub").attr('id');
212 212
@@ -243,17 +243,22 @@ function update_live_stream() { @@ -243,17 +243,22 @@ function update_live_stream() {
243 } 243 }
244 244
245 function hub_left_tab_click() { 245 function hub_left_tab_click() {
246 - jQuery("#mediation-section").removeClass('show');  
247 - jQuery("#mediation-section").addClass('hide');  
248 - jQuery("#live-section").removeClass('hide');  
249 - jQuery("#live-section").addClass('show'); 246 + jQuery("#right-tab").removeClass('show');
  247 + jQuery("#right-tab").addClass('hide');
  248 + jQuery("#left-tab").removeClass('hide');
  249 + jQuery("#left-tab").addClass('show');
250 } 250 }
251 251
252 function hub_right_tab_click() { 252 function hub_right_tab_click() {
253 - jQuery("#live-section").removeClass('show');  
254 - jQuery("#live-section").addClass('hide');  
255 - jQuery("#mediation-section").removeClass('hide');  
256 - jQuery("#mediation-section").addClass('show'); 253 + jQuery("#left-tab").removeClass('show');
  254 + jQuery("#left-tab").addClass('hide');
  255 + jQuery("#right-tab").removeClass('hide');
  256 + jQuery("#right-tab").addClass('show');
  257 + jQuery(".hub #left-tab.hide").click(hub_left_tab_click);
  258 +}
  259 +
  260 +function marcelo() {
  261 + console.log('teste!');
257 } 262 }
258 263
259 jQuery(document).ready(function() { 264 jQuery(document).ready(function() {
@@ -261,8 +266,7 @@ jQuery(document).ready(function() { @@ -261,8 +266,7 @@ jQuery(document).ready(function() {
261 live_scroll_position = jQuery("#live-posts").scrollTop(); 266 live_scroll_position = jQuery("#live-posts").scrollTop();
262 }); 267 });
263 268
264 - jQuery(".hub #left-tab").click(hub_left_tab_click);  
265 - jQuery(".hub #right-tab").click(hub_right_tab_click); 269 + jQuery(".hub #right-tab.hide").click(hub_right_tab_click);
266 270
267 setTimeout(update_live_stream, 5000); 271 setTimeout(update_live_stream, 5000);
268 setTimeout(update_mediations, 7000); 272 setTimeout(update_mediations, 7000);
public/style.css
  Diff comments   View file @87ec73a
1 -div.content-tab.show { 1 +/*div.content-tab.show {
2 display: block; 2 display: block;
3 } 3 }
4 4
5 div.content-tab.hide { 5 div.content-tab.hide {
6 display: none; 6 display: none;
7 -} 7 +}*/
8 8
9 #banner-embed-container { 9 #banner-embed-container {
10 width: 49%; 10 width: 49%;
@@ -17,17 +17,17 @@ div.content-tab.hide { @@ -17,17 +17,17 @@ div.content-tab.hide {
17 height: 350px; 17 height: 350px;
18 } 18 }
19 19
20 -.hub #left-tab {  
21 - /*border: 0px solid lightGray;*/ 20 +/*.hub #left-tab {
  21 + comentado-border: 0px solid lightGray;-comentado
22 border: 1px solid red; 22 border: 1px solid red;
23 display: inline-block; 23 display: inline-block;
24 float: left; 24 float: left;
25 width: 49%; 25 width: 49%;
26 margin-bottom: 2em; 26 margin-bottom: 2em;
27 cursor: pointer; 27 cursor: pointer;
28 -} 28 +}*/
29 29
30 -.hub #right-tab { 30 +/*.hub #right-tab {
31 border: 1px solid green; 31 border: 1px solid green;
32 display: inline-block; 32 display: inline-block;
33 clear: right; 33 clear: right;
@@ -36,12 +36,12 @@ div.content-tab.hide { @@ -36,12 +36,12 @@ div.content-tab.hide {
36 width: 50%; 36 width: 50%;
37 margin-bottom: 2em; 37 margin-bottom: 2em;
38 cursor: pointer; 38 cursor: pointer;
39 -} 39 +}*/
40 40
41 .hub #content-tab { 41 .hub #content-tab {
42 } 42 }
43 43
44 -.hub #left-tab .on-air { 44 +/*.hub #left-tab .on-air {
45 background-color: #d40000; 45 background-color: #d40000;
46 border-radius: 10px 10px 10px 10px; 46 border-radius: 10px 10px 10px 10px;
47 color: white; 47 color: white;
@@ -69,7 +69,7 @@ div.content-tab.hide { @@ -69,7 +69,7 @@ div.content-tab.hide {
69 vertical-align: top; 69 vertical-align: top;
70 width: 20%; 70 width: 20%;
71 } 71 }
72 - 72 +*/
73 73
74 #hub-loading { 74 #hub-loading {
75 /*margin-top: 18px;*/ 75 /*margin-top: 18px;*/
@@ -141,18 +141,29 @@ div.content-tab.hide { @@ -141,18 +141,29 @@ div.content-tab.hide {
141 }*/ 141 }*/
142 142
143 .hub .message { 143 .hub .message {
144 -display: inline-block;  
145 -width: 69%;  
146 -float: none;  
147 -clear: both; 144 + display: inline-block;
  145 + width: 65%;
  146 + float: none;
  147 + clear: both;
148 } 148 }
149 149
150 -.hub .message .author { 150 +.hub .show .message {
  151 + width: 80%;
  152 +}
  153 +
  154 +/*.hub .message .author {
151 font-weight: bold; 155 font-weight: bold;
152 float: left; 156 float: left;
153 display: inline-block; 157 display: inline-block;
154 line-height: 16px; 158 line-height: 16px;
155 margin-right: 5px; 159 margin-right: 5px;
  160 +}*/
  161 +
  162 +.hub .message .author {
  163 + font-weight: bold;
  164 + display: inline-block;
  165 + margin-right: 5px;
  166 + padding-bottom: 0px;
156 } 167 }
157 168
158 .hub .mediation-bar { 169 .hub .mediation-bar {
@@ -236,10 +247,6 @@ clear: both; @@ -236,10 +247,6 @@ clear: both;
236 display: block; 247 display: block;
237 } 248 }
238 249
239 -.hub ul#mediation-posts .post {  
240 - padding-bottom: 10px;  
241 -}  
242 -  
243 /**/ 250 /**/
244 251
245 .hub .live { 252 .hub .live {
@@ -269,8 +276,10 @@ clear: both; @@ -269,8 +276,10 @@ clear: both;
269 .hub ul#mediation-posts .post{ 276 .hub ul#mediation-posts .post{
270 background-color:#eee; 277 background-color:#eee;
271 border-color: #fff; 278 border-color: #fff;
  279 + padding-bottom: 10px;
272 } 280 }
273 281
  282 +
274 #content .main-block .hub .live h1{ 283 #content .main-block .hub .live h1{
275 background-color: #f4f4f4; 284 background-color: #f4f4f4;
276 border: 1px solid lightGray 285 border: 1px solid lightGray
@@ -312,6 +321,74 @@ clear: both; @@ -312,6 +321,74 @@ clear: both;
312 width: 20%; 321 width: 20%;
313 } 322 }
314 323
  324 +/****aba live fechada****/
  325 +
  326 +
  327 +.hub .live.hide {
  328 + width: 10%;
  329 +}
  330 +
  331 +.hub .live.hide ul#live-posts{
  332 + overflow-x: visible;
  333 + overflow-y: visible;
  334 + background-color: lightGray;
  335 +}
  336 +
  337 +.hub .live.hide ul#live-posts li{
  338 + display: none;
  339 +}
  340 +
  341 +#content .hub .live.hide h1 {
  342 + text-align: center;
  343 +}
  344 +
  345 +#content .hub .live.hide h1 .title {
  346 + /*display: inline-block;*/
  347 + display: none;
  348 +}
  349 +#content .hub .live.hide .on-air,
  350 +#content .hub .live.hide .off-air {
  351 + width: auto;
  352 +}
  353 +
  354 +
  355 +
  356 +/****fim aba live fechada****/
  357 +
  358 +/****aba live aberta****/
  359 +
  360 +.hub .live.show {
  361 + width: 85%;
  362 +}
  363 +
  364 +/*.hub .live.show ul#live-posts{
  365 + overflow-x: hidden;
  366 + overflow-y: scroll;
  367 + background-color: #fff;
  368 +}*/
  369 +
  370 +.hub .live.show ul#live-posts .li{
  371 +
  372 +}
  373 +
  374 +#content .hub .live.show .on-air,
  375 +#content .hub .live.show .off-air{
  376 +float: right;
  377 +margin-right: 10px;
  378 +}
  379 +
  380 +/*#content .hub .live.show .on-air,
  381 +#content .hub .live.show .off-air {
  382 + width: 20%;
  383 +}*/
  384 +
  385 +
  386 +
  387 +/****fim aba mlive aberta****/
  388 +
  389 +
  390 +/**************************************/
  391 +
315 392
316 .hub .mediation { 393 .hub .mediation {
317 border: 0px solid lightGray; 394 border: 0px solid lightGray;
@@ -341,6 +418,108 @@ clear: both; @@ -341,6 +418,108 @@ clear: both;
341 float: right; 418 float: right;
342 padding-right: 1em; 419 padding-right: 1em;
343 } 420 }
  421 +
  422 +/****aba mediation fechada****/
  423 +
  424 +.hub .mediation.hide {
  425 + border: 0px solid lightGray;
  426 + display: inline-block;
  427 + clear: right;
  428 + float: none;
  429 + margin-left: 1%;
  430 + width: 10%;
  431 + margin-bottom: 0em;
  432 +}
  433 +
  434 +#content .main-block .hub .mediation.hide h1{
  435 + background-color: #ed8e01;
  436 + border: 1px solid lightGray;
  437 + text-align: center;
  438 + padding-left: 0;
  439 +}
  440 +
  441 +#content .hub .mediation.hide .title {
  442 + color: white;
  443 + display: inline-block;
  444 + font-size: 14px;
  445 + font-family: Arial Black, arial, sans-serif;
  446 + padding-right: 0;
  447 + width: 100%;
  448 + /*font-variant: normal;*/
  449 +}
  450 +.hub .mediation.hide .expand {
  451 + display: none;
  452 +}
  453 +
  454 +
  455 +.hub .mediation.hide ul#mediation-posts {
  456 +height: 500px;
  457 +overflow-x: visible;
  458 +overflow-y: visible;
  459 +border-width: 0 1px 1px;
  460 +border-style: solid;
  461 +border-color: lightGray;
  462 +padding-top: 10px;
  463 +background-color: lightgray;
  464 +}
  465 +
  466 +.hub .mediation.hide ul#mediation-posts li{
  467 +display: none;
  468 +}
  469 +
  470 +/****fim aba mediation fechada****/
  471 +
  472 +/****aba mediation aberta****/
  473 +
  474 +.hub .mediation.show {
  475 + border: 0px solid lightGray;
  476 + display: inline-block;
  477 + clear: right;
  478 + float: none;
  479 + margin-left: 1%;
  480 + width: 85%;
  481 + margin-bottom: 2em;
  482 +}
  483 +
  484 +#content .main-block .hub .mediation.show h1{
  485 + background-color: #ed8e01;
  486 + border: 1px solid lightGray
  487 +}
  488 +
  489 +#content .hub .mediation.show .title {
  490 + color: white;
  491 + display: inline-block;
  492 + font-size: 20px;
  493 + font-family: Arial Black, arial, sans-serif;
  494 + padding-right: 0;
  495 + width: 100%;
  496 + /*font-variant: normal;*/
  497 +}
  498 +.hub .mediation.show .expand {
  499 + float: right;
  500 + padding-right: 1em;
  501 + display: block;
  502 +}
  503 +
  504 +
  505 +.hub .mediation.show ul#mediation-posts {
  506 +height: 500px;
  507 +overflow-x: hidden;
  508 +overflow-y: scroll;
  509 +border-width: 0 1px 1px;
  510 +border-style: solid;
  511 +border-color: lightGray;
  512 +padding-top: 10px;
  513 +background-color: #f9f9f9;
  514 +}
  515 +
  516 +.hub .mediation.show ul#mediation-posts li{
  517 +
  518 +}
  519 +
  520 +
  521 +/****fim aba mediation aberta****/
  522 +
344 .hub .form { 523 .hub .form {
345 /*clear: left;*/ 524 /*clear: left;*/
346 /*float: left;*/ 525 /*float: left;*/
views/content_viewer/hub.rhtml
  Diff comments   View file @87ec73a
@@ -8,15 +8,22 @@ @@ -8,15 +8,22 @@
8 8
9 <br /> 9 <br />
10 10
11 - <span id="left-tab"><%= @page.title %><span class="on-air"><%= _("Live") %></span></span>  
12 - <span id="right-tab"><%= _("Mediation") %><span class="expand">&#9660;</span></span>  
13 - <div id="live-section" class="content-tab show"> 11 +
  12 +<div id="left-tab" class="live content-tab show">
  13 + <h1>
  14 + <span class="title"><%= @page.title %></span><span class="on-air"><%= _("Live") %></span>
  15 + </h1>
  16 +
14 <ul id="live-posts"> 17 <ul id="live-posts">
15 </ul> 18 </ul>
16 <span><%= check_box_tag 'auto_scrolling', 'yes', true %><%= _("Auto scrolling") %></span> 19 <span><%= check_box_tag 'auto_scrolling', 'yes', true %><%= _("Auto scrolling") %></span>
17 </div> 20 </div>
18 21
19 - <div id="mediation-section" class="content-tab hide"> 22 + <div id="right-tab" class="mediation content-tab hide">
  23 + <h1>
  24 + <span class="title"><%= _("Mediation") %><span class="expand">&#9660;</span></span>
  25 + </h1>
  26 +
20 <ul id="mediation-posts"> 27 <ul id="mediation-posts">
21 </ul> 28 </ul>
22 </div> 29 </div>