From 816ad44acd3b19e505ee8d5d0f5ca6f1c0769183 Mon Sep 17 00:00:00 2001 From: LeandroRoberto Date: Wed, 28 Oct 2015 21:07:50 -0200 Subject: [PATCH] refactoring of Compilacao style sheet to scss --- compilacao/views.py | 2 +- static/js/compilacao.js | 16 +- static/styles/compilacao.scss | 295 ++++++++++++++++----------- templates/base.html | 2 +- templates/compilacao/edit_bloco.html | 6 +- 5 files changed, 194 insertions(+), 127 deletions(-) diff --git a/compilacao/views.py b/compilacao/views.py index 8e2d7fe19..79ae8a048 100644 --- a/compilacao/views.py +++ b/compilacao/views.py @@ -582,7 +582,7 @@ class ActionsEditMixin(object): # Tipo Filho # tf = TipoDispositivo.objects.get(pk=context['tipo_pk']) - + print("aqui") return {} def add_next(self, context): diff --git a/static/js/compilacao.js b/static/js/compilacao.js index 1eae0c7d9..09381ccc9 100644 --- a/static/js/compilacao.js +++ b/static/js/compilacao.js @@ -19,6 +19,7 @@ var onSubmitEditForm = function(event) { 'csrfmiddlewaretoken' : $('input[name=csrfmiddlewaretoken]').val(), 'texto' : texto }; + var url = $('.csform form').attr( "action_ajax" ); $("#message_block").css("display", "block"); $.post(url,formData) @@ -100,7 +101,7 @@ var clickUpdateDispositivo = function(event, __pk, __action, addeditselected) { $( '#dpt' + _pk ).prepend( data ); } reloadFunctionClicks(); - + if ( editortype == 'tinymce' ) { initTinymce(); } @@ -111,15 +112,16 @@ var clickUpdateDispositivo = function(event, __pk, __action, addeditselected) { $('.csform .btn-salvar').parent().remove(); $('.csform .btn-salvar, .csform textarea').remove(); $('#dpt'+flag_add_next_pk).css('min-height', $('.actions_right').height()*2); - $('.actions_inserts').addClass('menu_fixo'); + $('.actions_inserts').removeClass('menu_flutuante'); } $(".edt-"+editortype).addClass('selected'); + //$(".container").addClass('class_color_container'); if (addeditselected == null || addeditselected) { - $('#dpt'+flag_add_next_pk).addClass('dpt-selected'); $('html, body').animate({ scrollTop: $('#dpt' + flag_add_next_pk ).offset().top - window.innerHeight / 10 }, 300); + $('#dpt'+flag_add_next_pk).addClass('dpt-selected'); flag_add_next_pk = 0; } } @@ -149,6 +151,11 @@ var clickUpdateDispositivo = function(event, __pk, __action, addeditselected) { flag_add_next = false; } } + else { + clearEditSelected(); + reloadFunctionClicks(); + flag_add_next_pk = 0; + } }).always(function() { $("#message_block").css("display", "none"); }); @@ -156,6 +163,7 @@ var clickUpdateDispositivo = function(event, __pk, __action, addeditselected) { function clearEditSelected() { + $(".container").removeClass('class_color_container'); tinymce.remove(); $('.dpt-selected').removeClass('dpt-selected'); $('.dpt').css('min-height', ''); @@ -197,6 +205,6 @@ $(document).ready(function() { reloadFunctionClicks(); $("#message_block").css("display", "none"); - clickUpdateDispositivo(null, 216879, 'refresh', true); + clickUpdateDispositivo(null, 60933, 'refresh', true); }); diff --git a/static/styles/compilacao.scss b/static/styles/compilacao.scss index cce8423e5..70804c93d 100644 --- a/static/styles/compilacao.scss +++ b/static/styles/compilacao.scss @@ -1,5 +1,5 @@ $color_actions: #16407c; -$color_actions_border: #ddd; +$color_actions_border: #CCC; @mixin background-top-down($top, $bottom) { background: $top; background-image: -webkit-linear-gradient(top, $top, $bottom); @@ -15,6 +15,63 @@ $color_actions_border: #ddd; border-radius: $radius; } +@mixin li_flutuante() { + & > ul { + transform: translateY(30px); + transition: transform 0.1s linear, + opacity 0.1s linear, + clip 0s 0.3s; + clip: rect(0, 0, 0, 0); + opacity: 0; + position:absolute; + margin-left: 0.5em; + box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.19), 0px 2px 6px rgba(0, 0, 0, 0.23); + + li { + a { + border-right: 0px !important; + } + } + + &::before { + border-width: 0.375rem; + border-style: inset inset solid; + content: ""; + display: block; + height: 0px; + width: 0px; + border-color: transparent transparent #3385CA; + position: absolute; + top: -0.75rem; + left: 0.9375rem; + } + // This bridges the gap between the top bar and a dropdown. + &::after { + content: ""; + position: absolute; + z-index: -1; + left: 0; + top: rem-calc(-25px); + height: rem-calc(25px); + width: 100%; + // This transition is for hover-on. + transition: all 0.3s cubic-bezier(0.55,0,0.1,1); + } + } + &:hover > ul { + + transform: translateY(7px); + // This transition is actually for when we hover-out of the dropdown. + transition: transform 0.4s linear, + opacity 0.4s linear, + clip 0s 0.2s; + opacity: 1; + clip: rect(-100px, 2000px, 2000px, -100px); + + } + +} + #message_block { display: block; position: fixed; @@ -40,9 +97,6 @@ $color_actions_border: #ddd; } } -.page { - background-color: #f0f0f0; -} .cp { .dpt { @@ -230,10 +284,6 @@ $color_actions_border: #ddd; color: #8DA6D8; } - .selected { - background-color: rgba(0, 0, 0, 0.1); - } - .dpt { position: relative; display:block; @@ -287,7 +337,7 @@ $color_actions_border: #ddd; display: block; clear: both; *:hover { - background-color: #eee; + color: #27AE60; } } .articulacao{ @@ -302,15 +352,20 @@ $color_actions_border: #ddd; display:block; } } - } + .btns-action { + opacity: 0; + } + } /* fim dpt */ .dpt-selected { font-size: 1em; - border: 1px solid #aabbcc; + border: 0px solid $color_actions_border; margin: 1em -2em 1em -2.8em; padding: 2.2em 2.2em 1.6em 2.2em; - background: #eee; - box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.19), 0px 2px 6px rgba(0, 0, 0, 0.23); + box-shadow: -4px 18px 18px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23); + + @include background-top-down(#eaeaee, #ddd); + ul { list-style: none; @@ -330,16 +385,15 @@ $color_actions_border: #ddd; } & > .bloco { - padding: 1em; + padding: 1em 0; opacity: 1; margin: 0 !important; } & > .dpt { - padding: 0 1em; + padding: 0; &:last-child { padding-bottom: 1em; - border-bottom: 1px solid black; } } @@ -354,9 +408,15 @@ $color_actions_border: #ddd; position: static; .btns-action { + -webkit-animation: fadeIn 1s ease-in-out; + -moz-animation: fadeIn 1s ease-in-out; + -o-animation: fadeIn 1s ease-in-out; + opacity: 1; + position: absolute; display: table; transition: all 0.4s ease-in-out; + a { color: $color_actions; display: block; @@ -367,6 +427,7 @@ $color_actions_border: #ddd; text-shadow: 0 0 10px rgba(0,0,0,0.3); padding: 0.33em 0.4em; } + & > li { position: relative; display: table-cell; @@ -404,7 +465,7 @@ $color_actions_border: #ddd; font-size: 80%; display: table-cell; vertical-align: middle; - border-right: 1px solid #ccc; + border-right: 1px solid $color_actions_border; } div { padding: 0 0.4em; @@ -469,6 +530,11 @@ $color_actions_border: #ddd; left: 0em; } + + + + + .actions_inserts { background: transparent; position: relative; @@ -476,73 +542,35 @@ $color_actions_border: #ddd; display: table; width: 100%; - li, li:hover { - background: #2980C9; - a { - vertical-align: top; - text-shadow: 0 0 0; - color: #fff; - font-weight: normal; - white-space: nowrap; - min-height: 2.4em; - &:hover { - background: #1770ba; - text-shadow: 0 0 0; - color: #ffd145; - font-weight: normal; - } - } - } & > li { - background: #3385CA; display: table-cell; - table-layout: auto; - vertical-align: top; - border-right: 1px solid #eee; - &:hover > ul { - display: block; - } - &:last-child { - border-right: 0px; - } - &:only-child { - display: inline-block; - float: right; - } - - & > ul { - - display: none; - position:absolute; - box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.19), 0px 2px 6px rgba(0, 0, 0, 0.23); - a { - text-align: left; - font-size: 80%; - padding: 0.3em 1em; - white-space: nowrap; - } - li:nth-child(even) { - background: #3385CA; - } + &:hover > a { + @include background-top-down(#1c81c4, #0b6dad); } - - span { - padding: 0.7em; - } - & > a { @include background-top-down(#3498DB, #2980C9); + border-right: 1px solid #fff; + padding: 0.3em; + display: block; + color: white; + text-align: center; + white-space: nowrap; + &.btn-excluir { + text-align: left; background: #A70808; color: #c99; padding-left: 1.7em; + position: relative; + &:hover { background-color: #c70808; color: #ecc; } + &::before { z-index: 10; position: absolute; @@ -552,14 +580,14 @@ $color_actions_border: #ddd; left: 0; display: block; color: black; - margin-left: 0.6em; - height: 2em; + margin-left: 0.4em; + height: 100%; width: 2em; } - } + } /* btn-excluir */ + &.btn-salvar { @extend .btn-excluir; - background: #1f8b4d; color: white; &:hover { @@ -567,38 +595,53 @@ $color_actions_border: #ddd; color: white; } &::before { - background: url(/static/img/icon_save_white.png) no-repeat 0 50%; + background: url(/static/img/icon_save_white.png) no-repeat 50% 50%; } } + span { + padding: 0 0.7em; + } } - } /* fim li de primeiro nivel*/ - } /* fim actions_inserts*/ + &:last-child > a{ + border-right: 0px solid #fff; + } - .menu_fixo { - & > li { - vertical-align: top; - background: transparent !important; & > ul { - display: block; - position: relative; - box-shadow: 0 0 0; - a { - white-space: normal; + li { + &:nth-child(even) a { + background: #3385CA; + } + a { + border-right: 1px solid #fff; + display: block; + color: white; + background: #2980C9; + font-size: 80%; + padding: 0.33em 1em; + &:hover { + background: #0a5ea4; + } + } + } } - } /* fim li de primeiro nivel*/ - .add_prior { - display: block; - position: static; - ul { - position: absolute; - display: none; - right: 1em; - box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.19), 0px 2px 6px rgba(0, 0, 0, 0.5); + &.add_prior { + @include li_flutuante(); + display: block; } } - } /* fim menu_fixo*/ + } /* actions_inserts */ + + + .menu_flutuante { + & > li { + @include li_flutuante(); + } + + } + + textarea { margin: 0; @@ -626,8 +669,21 @@ $color_actions_border: #ddd; } } /* fim csform*/ } -} + .selected { + background-color: rgba(0, 0, 0, 0.1); + a { + &:hover { + color: $color_actions !important; + font-weight: normal !important; + } + } + } + +} +.class_color_container { + background: #ddd !important; +} .clear { clear:both; } @@ -641,13 +697,10 @@ $color_actions_border: #ddd; box-shadow: 0 0 5px #777; } - .displaynone { display: none !important; } - - @media only screen and (max-width: 40.0625em) { .cp .fixed{ @@ -669,43 +722,49 @@ $color_actions_border: #ddd; div, li { display: inline-block !important; } - } .actions_inserts { - a { - &.btn-inserts, &.btn-excluir, &.btn-salvar { + & > li { + @include li_flutuante(); + + & > a { span { display: none; } + &.btn-excluir, &.btn-salvar { + padding-left: 0; + min-width: 1em; + &::before { + width: 100%; + margin: 0; + } + } } - } - & > li { &.add_in, &.add_next, &.add_prior { - - position: static !important; - - ul { - position: absolute !important; - display: none !important; - box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.19), 0px 2px 6px rgba(0, 0, 0, 0.5) !important; - } - &:hover ul { - display: block !important; - position: absolute !important; - } + position: static; } - &.add_in ul { + &.add_in > ul { left: 1em !important; right: 1em !important; + margin-left: 0; + &::before { + left: 37%; + } } - &.add_next ul { + &.add_next > ul { left: 0 !important; right: 1em !important; } - &.add_prior ul { + &.add_prior > ul { left: 1em !important; right: 0 !important; + margin-left: 0; + margin-right: 0.5em; + &::before { + right: 42%; + left: auto; + } } } } diff --git a/templates/base.html b/templates/base.html index 46a1ed1d8..10ee92173 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,7 +4,7 @@ - + diff --git a/templates/compilacao/edit_bloco.html b/templates/compilacao/edit_bloco.html index 90f21e259..d9d760732 100644 --- a/templates/compilacao/edit_bloco.html +++ b/templates/compilacao/edit_bloco.html @@ -18,12 +18,12 @@
    -
  • C
    • {% if not dpt.tipo_dispositivo.dispositivo_de_articulacao %}
  • E
  • E+
  • E*
    • {%endif%} +
  • C
  • ❬
    • @@ -45,7 +45,7 @@
  • BB
-