Download as
Browse Code »

Commit 4c5ccf60daf43cf5481a010c94ff328aa77e8ca8

Authored by Francisco Marcelo de Araújo Lima Júnior
1 parent 68b6eccf
Exists in staging and in 7 other branches angular_poc, api-article-archived, api-homepage, captcha_serpro_plugin, login-captcha, production, resend_confirmation_email

add effects for scrolling blocks

Showing 4 changed files with 14 additions and 36 deletions   Show diff stats
app/views/box_organizer/index.html.erb
  Diff comments   View file @4c5ccf6
@@ -51,12 +51,8 @@ @@ -51,12 +51,8 @@
51 51
52 <section id="block-types-navigation"> 52 <section id="block-types-navigation">
53 <nav class="nav-circlepop"> 53 <nav class="nav-circlepop">
54 - <a class="previous" href="javascript:void(0);">  
55 - <span class="icon-wrap"></span>  
56 - </a>  
57 - <a class="next" href="javascript:void(0);">  
58 - <span class="icon-wrap"></span>  
59 - </a> 54 + <a class="previous" href="javascript:void(0);"><span class="icon-wrap"></span></a>
  55 + <a class="next" href="javascript:void(0);"><span class="icon-wrap"></span></a>
60 </nav> 56 </nav>
61 </section> 57 </section>
62 58
public/designs/themes/noosfero/block_store.css
  Diff comments   View file @4c5ccf6
  1 +#block-types {
  2 + height: 100px;
  3 +}
  4 +
1 #block-types-container { 5 #block-types-container {
2 margin: 0 60px; 6 margin: 0 60px;
3 } 7 }
4 8
5 .block-types-group { 9 .block-types-group {
6 display: none; 10 display: none;
7 -}  
8 -  
9 -.block-types-group.active {  
10 - display: block; 11 + position: absolute;
  12 + min-width: 800px;
11 } 13 }
12 14
13 #block-types-navigation a#next { 15 #block-types-navigation a#next {
public/designs/themes/noosfero/circlepop.css
  Diff comments   View file @4c5ccf6
1 nav a { 1 nav a {
2 position: absolute; 2 position: absolute;
3 - top: 30%; 3 + top: 215px;
4 display: block; 4 display: block;
5 outline: none; 5 outline: none;
6 text-align: left; 6 text-align: left;
public/javascripts/block_store.js
  Diff comments   View file @4c5ccf6
1 jQuery(document).ready(function () { 1 jQuery(document).ready(function () {
2 -  
3 - // navigation - click action  
4 jQuery('#block-types-navigation a.previous').click(PreviousSlide); 2 jQuery('#block-types-navigation a.previous').click(PreviousSlide);
5 jQuery('#block-types-navigation a.next').click(NextSlide); 3 jQuery('#block-types-navigation a.next').click(NextSlide);
6 -  
7 - // set first block types group active  
8 jQuery('.block-types-group').first().addClass('active'); 4 jQuery('.block-types-group').first().addClass('active');
9 jQuery(".block-types-group.active + .block-types-group").addClass('next'); 5 jQuery(".block-types-group.active + .block-types-group").addClass('next');
10 -  
11 firstBlockTypesGroup = jQuery(".block-types-group").first(); 6 firstBlockTypesGroup = jQuery(".block-types-group").first();
12 lastBlockTypesGroup = jQuery(".block-types-group").last(); 7 lastBlockTypesGroup = jQuery(".block-types-group").last();
  8 + jQuery('.block-types-group').first().show( 'slide', { direction : 'down' }, 1000 );
13 jQuery("#block-types-navigation a.previous").hide(); 9 jQuery("#block-types-navigation a.previous").hide();
14 }); 10 });
15 11
16 function NextSlide() { 12 function NextSlide() {
17 - // get active block-types-group  
18 activeBlockTypesGroup = jQuery(".block-types-group.active"); 13 activeBlockTypesGroup = jQuery(".block-types-group.active");
19 -  
20 - // get next block-types-group  
21 nextBlockTypesGroup = jQuery(".block-types-group.next").first(); 14 nextBlockTypesGroup = jQuery(".block-types-group.next").first();
22 -  
23 - // switch active group  
24 activeBlockTypesGroup.removeClass('active'); 15 activeBlockTypesGroup.removeClass('active');
25 activeBlockTypesGroup.addClass('prev'); 16 activeBlockTypesGroup.addClass('prev');
26 - activeBlockTypesGroup.css({"display":"none"}); 17 + activeBlockTypesGroup.hide( 'slide', { direction : 'left' }, 1000 );
27 nextBlockTypesGroup.removeClass('next'); 18 nextBlockTypesGroup.removeClass('next');
28 nextBlockTypesGroup.addClass('active'); 19 nextBlockTypesGroup.addClass('active');
29 - nextBlockTypesGroup.css({"display": "block"});  
30 -  
31 jQuery(".block-types-group.active + .block-types-group").addClass('next'); 20 jQuery(".block-types-group.active + .block-types-group").addClass('next');
32 - 21 + nextBlockTypesGroup.show( 'slide', { direction : 'right' }, 1000 );
33 activeBlockTypesGroup = jQuery(".block-types-group.active"); 22 activeBlockTypesGroup = jQuery(".block-types-group.active");
34 -  
35 jQuery("#block-types-navigation a.previous").show(); 23 jQuery("#block-types-navigation a.previous").show();
36 24
37 if ( activeBlockTypesGroup.is( lastBlockTypesGroup ) ) { 25 if ( activeBlockTypesGroup.is( lastBlockTypesGroup ) ) {
@@ -40,26 +28,18 @@ function NextSlide() { @@ -40,26 +28,18 @@ function NextSlide() {
40 } 28 }
41 29
42 function PreviousSlide() { 30 function PreviousSlide() {
43 - // get active block-types-group  
44 activeBlockTypesGroup = jQuery(".block-types-group.active"); 31 activeBlockTypesGroup = jQuery(".block-types-group.active");
45 -  
46 - // get previous block-types-group  
47 previousBlockTypesGroup = jQuery(".block-types-group.prev").last(); 32 previousBlockTypesGroup = jQuery(".block-types-group.prev").last();
48 -  
49 - // switch active group  
50 activeBlockTypesGroup.removeClass('active'); 33 activeBlockTypesGroup.removeClass('active');
51 activeBlockTypesGroup.addClass('next'); 34 activeBlockTypesGroup.addClass('next');
52 - activeBlockTypesGroup.css({"display":"none"}); 35 + activeBlockTypesGroup.hide( 'slide', { direction : 'right' }, 1000 );
53 previousBlockTypesGroup.removeClass('prev'); 36 previousBlockTypesGroup.removeClass('prev');
54 previousBlockTypesGroup.addClass('active'); 37 previousBlockTypesGroup.addClass('active');
55 - previousBlockTypesGroup.css({"display": "block"});  
56 - 38 + previousBlockTypesGroup.show( 'slide', { direction : 'left' }, 1000 );
57 activeBlockTypesGroup = jQuery(".block-types-group.active"); 39 activeBlockTypesGroup = jQuery(".block-types-group.active");
58 -  
59 jQuery("#block-types-navigation a.next").show(); 40 jQuery("#block-types-navigation a.next").show();
60 41
61 if ( activeBlockTypesGroup.is( firstBlockTypesGroup ) ) { 42 if ( activeBlockTypesGroup.is( firstBlockTypesGroup ) ) {
62 jQuery("#block-types-navigation a.previous").hide(); 43 jQuery("#block-types-navigation a.previous").hide();
63 } 44 }
64 } 45 }
65 -