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