Download as
Browse Code »

Commit 68b6eccf47a5152cfdd37086ba9f2dd5965ac919

Authored by Francisco Marcelo de Araújo Lima Júnior
1 parent 2ff3869e
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 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 <%= stylesheet_link_tag '/designs/themes/default/block_store.css' %> 1 <%= stylesheet_link_tag '/designs/themes/default/block_store.css' %>
  2 +<%= stylesheet_link_tag '/designs/themes/default/circlepop.css' %>
2 3
3 <h1><%= _('Editing sideboxes')%></h1> 4 <h1><%= _('Editing sideboxes')%></h1>
4 5
@@ -36,7 +37,7 @@ @@ -36,7 +37,7 @@
36 37
37 <%= draggable_element("block-#{block.name}", :revert => true) %> 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 <% cont = 0 %> 41 <% cont = 0 %>
41 </div> 42 </div>
42 <% end %> 43 <% end %>
@@ -48,10 +49,16 @@ @@ -48,10 +49,16 @@
48 </div> 49 </div>
49 </div> 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 <div style="clear:both;"></div> 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 .block-types-group { 5 .block-types-group {
2 display: none; 6 display: none;
3 } 7 }
@@ -54,7 +58,7 @@ r, @@ -54,7 +58,7 @@ r,
54 margin: 0; 58 margin: 0;
55 display: none; 59 display: none;
56 position: absolute; 60 position: absolute;
57 - right: 5%; 61 + right: 0%;
58 border: 0px solid #AAA; 62 border: 0px solid #AAA;
59 margin: 0px; 63 margin: 0px;
60 padding: 0px; 64 padding: 0px;
public/designs/themes/noosfero/circlepop.css 0 → 100644
  Diff comments   View file @68b6ecc
@@ -0,0 +1,118 @@ @@ -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 jQuery(document).ready(function () { 1 jQuery(document).ready(function () {
2 2
3 // navigation - click action 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 // set first block types group active 7 // set first block types group active
8 jQuery('.block-types-group').first().addClass('active'); 8 jQuery('.block-types-group').first().addClass('active');
@@ -10,7 +10,7 @@ jQuery(document).ready(function () { @@ -10,7 +10,7 @@ jQuery(document).ready(function () {
10 10
11 firstBlockTypesGroup = jQuery(".block-types-group").first(); 11 firstBlockTypesGroup = jQuery(".block-types-group").first();
12 lastBlockTypesGroup = jQuery(".block-types-group").last(); 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 function NextSlide() { 16 function NextSlide() {
@@ -32,10 +32,10 @@ function NextSlide() { @@ -32,10 +32,10 @@ function NextSlide() {
32 32
33 activeBlockTypesGroup = jQuery(".block-types-group.active"); 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 if ( activeBlockTypesGroup.is( lastBlockTypesGroup ) ) { 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,10 +56,10 @@ function PreviousSlide() {
56 56
57 activeBlockTypesGroup = jQuery(".block-types-group.active"); 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 if ( activeBlockTypesGroup.is( firstBlockTypesGroup ) ) { 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