Download as
Browse Code »

Commit 68b6eccf47a5152cfdd37086ba9f2dd5965ac919

Authored by Francisco Marcelo de Araújo Lima Júnior
1 parent 2ff3869e
Exists in theme-brasil-digital-from-staging and in 9 other branches angular_poc, api-article-archived, backup-7-jan-2016, captcha_serpro_plugin, login-captcha, production, resend_confirmation_email, staging, staging_rails3

add navigation arrows

Showing 4 changed files with 142 additions and 13 deletions   Show diff stats
app/views/box_organizer/index.html.erb
  Diff comments   View file @68b6ecc
1 1 <%= stylesheet_link_tag '/designs/themes/default/block_store.css' %>
  2 +<%= stylesheet_link_tag '/designs/themes/default/circlepop.css' %>
2 3  
3 4 <h1><%= _('Editing sideboxes')%></h1>
4 5  
... ... @@ -36,7 +37,7 @@
36 37  
37 38 <%= draggable_element("block-#{block.name}", :revert => true) %>
38 39  
39   - <% if cont == 7 || i == @blocks.length %>
  40 + <% if cont == 7 || i == (@blocks.length - 1) %>
40 41 <% cont = 0 %>
41 42 </div>
42 43 <% end %>
... ... @@ -48,10 +49,16 @@
48 49 </div>
49 50 </div>
50 51  
51   -<div id="block-types-navigation">
52   - <a href="javascript:void(0)" id="previous">Previous block types</a>
53   - <a href="javascript:void(0)" id="next">Next block types</a>
54   -</div>
  52 +<section id="block-types-navigation">
  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>
  60 + </nav>
  61 +</section>
55 62  
56 63 <div style="clear:both;"></div>
57 64  
... ...
public/designs/themes/noosfero/block_store.css
  Diff comments   View file @68b6ecc
  1 +#block-types-container {
  2 + margin: 0 60px;
  3 +}
  4 +
1 5 .block-types-group {
2 6 display: none;
3 7 }
... ... @@ -54,7 +58,7 @@ r,
54 58 margin: 0;
55 59 display: none;
56 60 position: absolute;
57   - right: 5%;
  61 + right: 0%;
58 62 border: 0px solid #AAA;
59 63 margin: 0px;
60 64 padding: 0px;
... ...
public/designs/themes/noosfero/circlepop.css 0 → 100644
  Diff comments   View file @68b6ecc
... ... @@ -0,0 +1,118 @@
  1 +nav a {
  2 + position: absolute;
  3 + top: 30%;
  4 + display: block;
  5 + outline: none;
  6 + text-align: left;
  7 + z-index: 1000;
  8 + -webkit-transform: translateY(-50%);
  9 + transform: translateY(-50%);
  10 +}
  11 +
  12 +nav a.prev {
  13 + left: 0;
  14 +}
  15 +
  16 +nav a.next {
  17 + right: 0;
  18 +}
  19 +
  20 +nav a svg {
  21 + display: block;
  22 + margin: 0 auto;
  23 + padding: 0;
  24 +}
  25 +
  26 +/* Individual styles */
  27 +
  28 +/*--------------------*/
  29 +/* Circle pop */
  30 +/*--------------------*/
  31 +.color-3 { background: transparent; }
  32 +
  33 +.nav-circlepop a {
  34 + margin: 0 15px;
  35 + width: 50px;
  36 + height: 50px;
  37 +}
  38 +
  39 +.nav-circlepop a::before {
  40 + position: absolute;
  41 + top: 0;
  42 + left: 0;
  43 + width: 100%;
  44 + height: 100%;
  45 + border-radius: 50%;
  46 + background: #fff;
  47 + content: '';
  48 + opacity: 0;
  49 + -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  50 + transition: transform 0.3s, opacity 0.3s;
  51 + -webkit-transform: scale(0.9);
  52 + transform: scale(0.9);
  53 +}
  54 +
  55 +.nav-circlepop .icon-wrap {
  56 + position: relative;
  57 + display: block;
  58 + margin: 10% 0 0 10%;
  59 + width: 80%;
  60 + height: 80%;
  61 +}
  62 +
  63 +.nav-circlepop a.next .icon-wrap {
  64 + -webkit-transform: rotate(180deg);
  65 + transform: rotate(180deg);
  66 +}
  67 +
  68 +.nav-circlepop .icon-wrap::before,
  69 +.nav-circlepop .icon-wrap::after {
  70 + position: absolute;
  71 + left: 25%;
  72 + width: 3px;
  73 + height: 50%;
  74 + background: #ccc;
  75 + content: '';
  76 + -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
  77 + transition: transform 0.3s, background-color 0.3s;
  78 + -webkit-backface-visibility: hidden;
  79 + backface-visibility: hidden;
  80 +}
  81 +
  82 +.nav-circlepop .icon-wrap::before {
  83 + -webkit-transform: translateX(-50%) rotate(30deg);
  84 + transform: translateX(-50%) rotate(30deg);
  85 + -webkit-transform-origin: 0 100%;
  86 + transform-origin: 0 100%;
  87 +}
  88 +
  89 +.nav-circlepop .icon-wrap::after {
  90 + top: 50%;
  91 + -webkit-transform: translateX(-50%) rotate(-30deg);
  92 + transform: translateX(-50%) rotate(-30deg);
  93 + -webkit-transform-origin: 0 0;
  94 + transform-origin: 0 0;
  95 +}
  96 +
  97 +.nav-circlepop a:hover::before {
  98 + opacity: 1;
  99 + -webkit-transform: scale(1);
  100 + transform: scale(1);
  101 +}
  102 +
  103 +.nav-circlepop a:hover .icon-wrap::before,
  104 +.nav-circlepop a:hover .icon-wrap::after {
  105 + background: #999;
  106 +}
  107 +
  108 +.nav-circlepop a:hover .icon-wrap::before {
  109 + -webkit-transform: translateX(-50%) rotate(45deg);
  110 + transform: translateX(-50%) rotate(45deg);
  111 +}
  112 +
  113 +.nav-circlepop a:hover .icon-wrap::after {
  114 + -webkit-transform: translateX(-50%) rotate(-45deg);
  115 + transform: translateX(-50%) rotate(-45deg);
  116 +}
  117 +
  118 +
... ...
public/javascripts/block_store.js
  Diff comments   View file @68b6ecc
1 1 jQuery(document).ready(function () {
2 2  
3 3 // navigation - click action
4   - jQuery('#block-types-navigation a#previous').click(PreviousSlide);
5   - jQuery('#block-types-navigation a#next').click(NextSlide);
  4 + jQuery('#block-types-navigation a.previous').click(PreviousSlide);
  5 + jQuery('#block-types-navigation a.next').click(NextSlide);
6 6  
7 7 // set first block types group active
8 8 jQuery('.block-types-group').first().addClass('active');
... ... @@ -10,7 +10,7 @@ jQuery(document).ready(function () {
10 10  
11 11 firstBlockTypesGroup = jQuery(".block-types-group").first();
12 12 lastBlockTypesGroup = jQuery(".block-types-group").last();
13   - jQuery("#block-types-navigation a#previous").hide();
  13 + jQuery("#block-types-navigation a.previous").hide();
14 14 });
15 15  
16 16 function NextSlide() {
... ... @@ -32,10 +32,10 @@ function NextSlide() {
32 32  
33 33 activeBlockTypesGroup = jQuery(".block-types-group.active");
34 34  
35   - jQuery("#block-types-navigation a#previous").show();
  35 + jQuery("#block-types-navigation a.previous").show();
36 36  
37 37 if ( activeBlockTypesGroup.is( lastBlockTypesGroup ) ) {
38   - jQuery("#block-types-navigation a#next").hide();
  38 + jQuery("#block-types-navigation a.next").hide();
39 39 }
40 40 }
41 41  
... ... @@ -56,10 +56,10 @@ function PreviousSlide() {
56 56  
57 57 activeBlockTypesGroup = jQuery(".block-types-group.active");
58 58  
59   - jQuery("#block-types-navigation a#next").show();
  59 + jQuery("#block-types-navigation a.next").show();
60 60  
61 61 if ( activeBlockTypesGroup.is( firstBlockTypesGroup ) ) {
62   - jQuery("#block-types-navigation a#previous").hide();
  62 + jQuery("#block-types-navigation a.previous").hide();
63 63 }
64 64 }
65 65  
... ...