From 68b6eccf47a5152cfdd37086ba9f2dd5965ac919 Mon Sep 17 00:00:00 2001 From: Francisco Marcelo de Araújo Lima Júnior Date: Tue, 12 Aug 2014 12:16:25 -0300 Subject: [PATCH] add navigation arrows --- app/views/box_organizer/index.html.erb | 17 ++++++++++++----- public/designs/themes/noosfero/block_store.css | 6 +++++- public/designs/themes/noosfero/circlepop.css | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ public/javascripts/block_store.js | 14 +++++++------- 4 files changed, 142 insertions(+), 13 deletions(-) create mode 100644 public/designs/themes/noosfero/circlepop.css diff --git a/app/views/box_organizer/index.html.erb b/app/views/box_organizer/index.html.erb index 209b468..a7637cc 100644 --- a/app/views/box_organizer/index.html.erb +++ b/app/views/box_organizer/index.html.erb @@ -1,4 +1,5 @@ <%= stylesheet_link_tag '/designs/themes/default/block_store.css' %> +<%= stylesheet_link_tag '/designs/themes/default/circlepop.css' %>

<%= _('Editing sideboxes')%>

@@ -36,7 +37,7 @@ <%= draggable_element("block-#{block.name}", :revert => true) %> - <% if cont == 7 || i == @blocks.length %> + <% if cont == 7 || i == (@blocks.length - 1) %> <% cont = 0 %> <% end %> @@ -48,10 +49,16 @@ -
- - -
+
+ +
diff --git a/public/designs/themes/noosfero/block_store.css b/public/designs/themes/noosfero/block_store.css index edb0215..d0f21ed 100644 --- a/public/designs/themes/noosfero/block_store.css +++ b/public/designs/themes/noosfero/block_store.css @@ -1,3 +1,7 @@ +#block-types-container { + margin: 0 60px; +} + .block-types-group { display: none; } @@ -54,7 +58,7 @@ r, margin: 0; display: none; position: absolute; - right: 5%; + right: 0%; border: 0px solid #AAA; margin: 0px; padding: 0px; diff --git a/public/designs/themes/noosfero/circlepop.css b/public/designs/themes/noosfero/circlepop.css new file mode 100644 index 0000000..dd40d8c --- /dev/null +++ b/public/designs/themes/noosfero/circlepop.css @@ -0,0 +1,118 @@ +nav a { + position: absolute; + top: 30%; + display: block; + outline: none; + text-align: left; + z-index: 1000; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); +} + +nav a.prev { + left: 0; +} + +nav a.next { + right: 0; +} + +nav a svg { + display: block; + margin: 0 auto; + padding: 0; +} + +/* Individual styles */ + +/*--------------------*/ +/* Circle pop */ +/*--------------------*/ +.color-3 { background: transparent; } + +.nav-circlepop a { + margin: 0 15px; + width: 50px; + height: 50px; +} + +.nav-circlepop a::before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 50%; + background: #fff; + content: ''; + opacity: 0; + -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + -webkit-transform: scale(0.9); + transform: scale(0.9); +} + +.nav-circlepop .icon-wrap { + position: relative; + display: block; + margin: 10% 0 0 10%; + width: 80%; + height: 80%; +} + +.nav-circlepop a.next .icon-wrap { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} + +.nav-circlepop .icon-wrap::before, +.nav-circlepop .icon-wrap::after { + position: absolute; + left: 25%; + width: 3px; + height: 50%; + background: #ccc; + content: ''; + -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; + transition: transform 0.3s, background-color 0.3s; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.nav-circlepop .icon-wrap::before { + -webkit-transform: translateX(-50%) rotate(30deg); + transform: translateX(-50%) rotate(30deg); + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; +} + +.nav-circlepop .icon-wrap::after { + top: 50%; + -webkit-transform: translateX(-50%) rotate(-30deg); + transform: translateX(-50%) rotate(-30deg); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; +} + +.nav-circlepop a:hover::before { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); +} + +.nav-circlepop a:hover .icon-wrap::before, +.nav-circlepop a:hover .icon-wrap::after { + background: #999; +} + +.nav-circlepop a:hover .icon-wrap::before { + -webkit-transform: translateX(-50%) rotate(45deg); + transform: translateX(-50%) rotate(45deg); +} + +.nav-circlepop a:hover .icon-wrap::after { + -webkit-transform: translateX(-50%) rotate(-45deg); + transform: translateX(-50%) rotate(-45deg); +} + + diff --git a/public/javascripts/block_store.js b/public/javascripts/block_store.js index 7006b5c..f57a0be 100644 --- a/public/javascripts/block_store.js +++ b/public/javascripts/block_store.js @@ -1,8 +1,8 @@ jQuery(document).ready(function () { // navigation - click action - jQuery('#block-types-navigation a#previous').click(PreviousSlide); - jQuery('#block-types-navigation a#next').click(NextSlide); + jQuery('#block-types-navigation a.previous').click(PreviousSlide); + jQuery('#block-types-navigation a.next').click(NextSlide); // set first block types group active jQuery('.block-types-group').first().addClass('active'); @@ -10,7 +10,7 @@ jQuery(document).ready(function () { firstBlockTypesGroup = jQuery(".block-types-group").first(); lastBlockTypesGroup = jQuery(".block-types-group").last(); - jQuery("#block-types-navigation a#previous").hide(); + jQuery("#block-types-navigation a.previous").hide(); }); function NextSlide() { @@ -32,10 +32,10 @@ function NextSlide() { activeBlockTypesGroup = jQuery(".block-types-group.active"); - jQuery("#block-types-navigation a#previous").show(); + jQuery("#block-types-navigation a.previous").show(); if ( activeBlockTypesGroup.is( lastBlockTypesGroup ) ) { - jQuery("#block-types-navigation a#next").hide(); + jQuery("#block-types-navigation a.next").hide(); } } @@ -56,10 +56,10 @@ function PreviousSlide() { activeBlockTypesGroup = jQuery(".block-types-group.active"); - jQuery("#block-types-navigation a#next").show(); + jQuery("#block-types-navigation a.next").show(); if ( activeBlockTypesGroup.is( firstBlockTypesGroup ) ) { - jQuery("#block-types-navigation a#previous").hide(); + jQuery("#block-types-navigation a.previous").hide(); } } -- libgit2 0.21.2