SPDT
/
sapl
mirror of https://github.com/interlegis/sapl.git
5
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

refactoring of Compilacao style sheet to scss

pull/10/head
LeandroRoberto 9 years ago
parent
4421d6bc1d
commit
816ad44acd
5 changed files with 194 additions and 127 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      compilacao/views.py
  2. 16
      static/js/compilacao.js
  3. 295
      static/styles/compilacao.scss
  4. 2
      templates/base.html
  5. 6
      templates/compilacao/edit_bloco.html

2
compilacao/views.py
View File

@ -582,7 +582,7 @@ class ActionsEditMixin(object):
# Tipo Filho # Tipo Filho
# tf = TipoDispositivo.objects.get(pk=context['tipo_pk']) # tf = TipoDispositivo.objects.get(pk=context['tipo_pk'])
print("aqui")
return {} return {}
def add_next(self, context): def add_next(self, context):

16
static/js/compilacao.js
View File

@ -19,6 +19,7 @@ var onSubmitEditForm = function(event) {
'csrfmiddlewaretoken' : $('input[name=csrfmiddlewaretoken]').val(), 'csrfmiddlewaretoken' : $('input[name=csrfmiddlewaretoken]').val(),
'texto' : texto 'texto' : texto
}; };
var url = $('.csform form').attr( "action_ajax" ); var url = $('.csform form').attr( "action_ajax" );
$("#message_block").css("display", "block"); $("#message_block").css("display", "block");
$.post(url,formData) $.post(url,formData)
@ -100,7 +101,7 @@ var clickUpdateDispositivo = function(event, __pk, __action, addeditselected) {
$( '#dpt' + _pk ).prepend( data ); $( '#dpt' + _pk ).prepend( data );
} }
reloadFunctionClicks(); reloadFunctionClicks();
if ( editortype == 'tinymce' ) { if ( editortype == 'tinymce' ) {
initTinymce(); initTinymce();
} }
@ -111,15 +112,16 @@ var clickUpdateDispositivo = function(event, __pk, __action, addeditselected) {
$('.csform .btn-salvar').parent().remove(); $('.csform .btn-salvar').parent().remove();
$('.csform .btn-salvar, .csform textarea').remove(); $('.csform .btn-salvar, .csform textarea').remove();
$('#dpt'+flag_add_next_pk).css('min-height', $('.actions_right').height()*2); $('#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'); $(".edt-"+editortype).addClass('selected');
//$(".container").addClass('class_color_container');
if (addeditselected == null || addeditselected) { if (addeditselected == null || addeditselected) {
$('#dpt'+flag_add_next_pk).addClass('dpt-selected');
$('html, body').animate({ $('html, body').animate({
scrollTop: $('#dpt' + flag_add_next_pk ).offset().top - window.innerHeight / 10 scrollTop: $('#dpt' + flag_add_next_pk ).offset().top - window.innerHeight / 10
}, 300); }, 300);
$('#dpt'+flag_add_next_pk).addClass('dpt-selected');
flag_add_next_pk = 0; flag_add_next_pk = 0;
} }
} }
@ -149,6 +151,11 @@ var clickUpdateDispositivo = function(event, __pk, __action, addeditselected) {
flag_add_next = false; flag_add_next = false;
} }
} }
else {
clearEditSelected();
reloadFunctionClicks();
flag_add_next_pk = 0;
}
}).always(function() { }).always(function() {
$("#message_block").css("display", "none"); $("#message_block").css("display", "none");
}); });
@ -156,6 +163,7 @@ var clickUpdateDispositivo = function(event, __pk, __action, addeditselected) {
function clearEditSelected() { function clearEditSelected() {
$(".container").removeClass('class_color_container');
tinymce.remove(); tinymce.remove();
$('.dpt-selected').removeClass('dpt-selected'); $('.dpt-selected').removeClass('dpt-selected');
$('.dpt').css('min-height', ''); $('.dpt').css('min-height', '');
@ -197,6 +205,6 @@ $(document).ready(function() {
reloadFunctionClicks(); reloadFunctionClicks();
$("#message_block").css("display", "none"); $("#message_block").css("display", "none");
clickUpdateDispositivo(null, 216879, 'refresh', true); clickUpdateDispositivo(null, 60933, 'refresh', true);
}); });

295
static/styles/compilacao.scss
View File

@ -1,5 +1,5 @@
$color_actions: #16407c; $color_actions: #16407c;
$color_actions_border: #ddd; $color_actions_border: #CCC;
@mixin background-top-down($top, $bottom) { @mixin background-top-down($top, $bottom) {
background: $top; background: $top;
background-image: -webkit-linear-gradient(top, $top, $bottom); background-image: -webkit-linear-gradient(top, $top, $bottom);
@ -15,6 +15,63 @@ $color_actions_border: #ddd;
border-radius: $radius; 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 { #message_block {
display: block; display: block;
position: fixed; position: fixed;
@ -40,9 +97,6 @@ $color_actions_border: #ddd;
} }
} }
.page {
background-color: #f0f0f0;
}
.cp { .cp {
.dpt { .dpt {
@ -230,10 +284,6 @@ $color_actions_border: #ddd;
color: #8DA6D8; color: #8DA6D8;
} }
.selected {
background-color: rgba(0, 0, 0, 0.1);
}
.dpt { .dpt {
position: relative; position: relative;
display:block; display:block;
@ -287,7 +337,7 @@ $color_actions_border: #ddd;
display: block; display: block;
clear: both; clear: both;
*:hover { *:hover {
background-color: #eee; color: #27AE60;
} }
} }
.articulacao{ .articulacao{
@ -302,15 +352,20 @@ $color_actions_border: #ddd;
display:block; display:block;
} }
} }
} .btns-action {
opacity: 0;
}
} /* fim dpt */
.dpt-selected { .dpt-selected {
font-size: 1em; font-size: 1em;
border: 1px solid #aabbcc; border: 0px solid $color_actions_border;
margin: 1em -2em 1em -2.8em; margin: 1em -2em 1em -2.8em;
padding: 2.2em 2.2em 1.6em 2.2em; padding: 2.2em 2.2em 1.6em 2.2em;
background: #eee; box-shadow: -4px 18px 18px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.19), 0px 2px 6px rgba(0, 0, 0, 0.23);
@include background-top-down(#eaeaee, #ddd);
ul { ul {
list-style: none; list-style: none;
@ -330,16 +385,15 @@ $color_actions_border: #ddd;
} }
& > .bloco { & > .bloco {
padding: 1em; padding: 1em 0;
opacity: 1; opacity: 1;
margin: 0 !important; margin: 0 !important;
} }
& > .dpt { & > .dpt {
padding: 0 1em; padding: 0;
&:last-child { &:last-child {
padding-bottom: 1em; padding-bottom: 1em;
border-bottom: 1px solid black;
} }
} }
@ -354,9 +408,15 @@ $color_actions_border: #ddd;
position: static; position: static;
.btns-action { .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; position: absolute;
display: table; display: table;
transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
a { a {
color: $color_actions; color: $color_actions;
display: block; display: block;
@ -367,6 +427,7 @@ $color_actions_border: #ddd;
text-shadow: 0 0 10px rgba(0,0,0,0.3); text-shadow: 0 0 10px rgba(0,0,0,0.3);
padding: 0.33em 0.4em; padding: 0.33em 0.4em;
} }
& > li { & > li {
position: relative; position: relative;
display: table-cell; display: table-cell;
@ -404,7 +465,7 @@ $color_actions_border: #ddd;
font-size: 80%; font-size: 80%;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
border-right: 1px solid #ccc; border-right: 1px solid $color_actions_border;
} }
div { div {
padding: 0 0.4em; padding: 0 0.4em;
@ -469,6 +530,11 @@ $color_actions_border: #ddd;
left: 0em; left: 0em;
} }
.actions_inserts { .actions_inserts {
background: transparent; background: transparent;
position: relative; position: relative;
@ -476,73 +542,35 @@ $color_actions_border: #ddd;
display: table; display: table;
width: 100%; 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 { & > li {
background: #3385CA;
display: table-cell; display: table-cell;
table-layout: auto;
vertical-align: top;
border-right: 1px solid #eee;
&:hover > ul { &:hover > a {
display: block; @include background-top-down(#1c81c4, #0b6dad);
}
&: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;
}
} }
span {
padding: 0.7em;
}
& > a { & > a {
@include background-top-down(#3498DB, #2980C9); @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 { &.btn-excluir {
text-align: left; text-align: left;
background: #A70808; background: #A70808;
color: #c99; color: #c99;
padding-left: 1.7em; padding-left: 1.7em;
position: relative;
&:hover { &:hover {
background-color: #c70808; background-color: #c70808;
color: #ecc; color: #ecc;
} }
&::before { &::before {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
@ -552,14 +580,14 @@ $color_actions_border: #ddd;
left: 0; left: 0;
display: block; display: block;
color: black; color: black;
margin-left: 0.6em; margin-left: 0.4em;
height: 2em; height: 100%;
width: 2em; width: 2em;
} }
} } /* btn-excluir */
&.btn-salvar { &.btn-salvar {
@extend .btn-excluir; @extend .btn-excluir;
background: #1f8b4d; background: #1f8b4d;
color: white; color: white;
&:hover { &:hover {
@ -567,38 +595,53 @@ $color_actions_border: #ddd;
color: white; color: white;
} }
&::before { &::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 { & > ul {
display: block; li {
position: relative; &:nth-child(even) a {
box-shadow: 0 0 0; background: #3385CA;
a { }
white-space: normal; 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 {
.add_prior { @include li_flutuante();
display: block; 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);
} }
} }
} /* fim menu_fixo*/ } /* actions_inserts */
.menu_flutuante {
& > li {
@include li_flutuante();
}
}
textarea { textarea {
margin: 0; margin: 0;
@ -626,8 +669,21 @@ $color_actions_border: #ddd;
} }
} /* fim csform*/ } /* 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 {
clear:both; clear:both;
} }
@ -641,13 +697,10 @@ $color_actions_border: #ddd;
box-shadow: 0 0 5px #777; box-shadow: 0 0 5px #777;
} }
.displaynone { .displaynone {
display: none !important; display: none !important;
} }
@media only screen and (max-width: 40.0625em) { @media only screen and (max-width: 40.0625em) {
.cp .fixed{ .cp .fixed{
@ -669,43 +722,49 @@ $color_actions_border: #ddd;
div, li { div, li {
display: inline-block !important; display: inline-block !important;
} }
} }
.actions_inserts { .actions_inserts {
a { & > li {
&.btn-inserts, &.btn-excluir, &.btn-salvar { @include li_flutuante();
& > a {
span { span {
display: none; display: none;
} }
&.btn-excluir, &.btn-salvar {
padding-left: 0;
min-width: 1em;
&::before {
width: 100%;
margin: 0;
}
}
} }
}
& > li {
&.add_in, &.add_next, &.add_prior { &.add_in, &.add_next, &.add_prior {
position: static;
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;
}
} }
&.add_in ul { &.add_in > ul {
left: 1em !important; left: 1em !important;
right: 1em !important; right: 1em !important;
margin-left: 0;
&::before {
left: 37%;
}
} }
&.add_next ul { &.add_next > ul {
left: 0 !important; left: 0 !important;
right: 1em !important; right: 1em !important;
} }
&.add_prior ul { &.add_prior > ul {
left: 1em !important; left: 1em !important;
right: 0 !important; right: 0 !important;
margin-left: 0;
margin-right: 0.5em;
&::before {
right: 42%;
left: auto;
}
} }
} }
} }

2
templates/base.html
View File

@ -4,7 +4,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <html class="no-js" lang="pt-br">
<!--<![endif]--> <!--<![endif]-->
<head> <head>

6
templates/compilacao/edit_bloco.html
View File

@ -18,12 +18,12 @@
<div class="csform"> <div class="csform">
<form method="post" action="" action_ajax="{{dpt.pk}}/refresh"> <form method="post" action="" action_ajax="{{dpt.pk}}/refresh">
<ul class="btns-action actions_top"> <ul class="btns-action actions_top">
<li class="edt-construct"><a class="btn-top btn-action" pk="{{dpt.pk}}" action="refresh:construct" title="{% trans 'Construçao da estrutura da Norma'%}">C</a></li>
{% if not dpt.tipo_dispositivo.dispositivo_de_articulacao %} {% if not dpt.tipo_dispositivo.dispositivo_de_articulacao %}
<li class="edt-textarea"><a class="btn-top btn-action" pk="{{dpt.pk}}" action="refresh:textarea" title="{% trans 'Edição simples apenas do texto'%}">E</a></li> <li class="edt-textarea"><a class="btn-top btn-action" pk="{{dpt.pk}}" action="refresh:textarea" title="{% trans 'Edição simples apenas do texto'%}">E</a></li>
<li class="edt-tinymce"><a class="btn-top btn-action" pk="{{dpt.pk}}" action="refresh:tinymce" title="{% trans 'Editar o texto com TinyMCE'%}">E+</a></li> <li class="edt-tinymce"><a class="btn-top btn-action" pk="{{dpt.pk}}" action="refresh:tinymce" title="{% trans 'Editar o texto com TinyMCE'%}">E+</a></li>
<li class="edt-detail"><a class="btn-top btn-action" pk="{{dpt.pk}}" action="refresh:detail" title="{% trans 'TODO: Edição detalhada'%}">E*</a></li> <li class="edt-detail"><a class="btn-top btn-action" pk="{{dpt.pk}}" action="refresh:detail" title="{% trans 'TODO: Edição detalhada'%}">E*</a></li>
{%endif%} {%endif%}
<li class="edt-construct"><a class="btn-top btn-action" pk="{{dpt.pk}}" action="refresh:construct" title="{% trans 'Construçao da estrutura da Norma'%}">C</a></li>
</ul> </ul>
<ul class="btns-action actions_right"> <ul class="btns-action actions_right">
<li><a class="btn-right btn-action" pk="{{dpt.pk}}" action="refresh" title="{% trans 'TODO: Reduzir nível do Dispositivo'%}">&#10092;</a></li> <li><a class="btn-right btn-action" pk="{{dpt.pk}}" action="refresh" title="{% trans 'TODO: Reduzir nível do Dispositivo'%}">&#10092;</a></li>
@ -45,7 +45,7 @@
<li><a class="btn-bottom btn-action" pk="{{dpt.pk}}" title="Button Bottom">BB</a></li> <li><a class="btn-bottom btn-action" pk="{{dpt.pk}}" title="Button Bottom">BB</a></li>
</ul> </ul>
<ul class="btns-action actions_inserts {% if dpt.tipo_dispositivo.dispositivo_de_articulacao %}menu_fixo{%endif%}"> <ul class="actions_inserts {% if not dpt.tipo_dispositivo.dispositivo_de_articulacao %}menu_flutuante{%endif%}">
{% if dpt.dispositivo_subsequente == None %} {% if dpt.dispositivo_subsequente == None %}
{% for inserts in view.select_provaveis_inserts%} {% for inserts in view.select_provaveis_inserts%}
<li class="{{inserts|get_field:'action'}}"><a class="btn-inserts" action="" pk="{{dpt.pk}}">{{inserts|get_field:'icone'|safe}}<span>{{inserts|get_field:'tipo_insert'}}</span></a> <li class="{{inserts|get_field:'action'}}"><a class="btn-inserts" action="" pk="{{dpt.pk}}">{{inserts|get_field:'icone'|safe}}<span>{{inserts|get_field:'tipo_insert'}}</span></a>
@ -79,7 +79,7 @@
{%for parent in dpt.get_parents_asc %} {%for parent in dpt.get_parents_asc %}
<li><a action="refresh" pk="{{parent.pk}}" ordem="{{parent.ordem}}" name="{{parent.pk}}" title="{{parent.texto|short_string:50}}" class="btn-parents btn-action">{{parent|nomenclatura}}</a></li> <li><a action="refresh" pk="{{parent.pk}}" ordem="{{parent.ordem}}" name="{{parent.pk}}" title="{{parent.texto|short_string:50}}" class="btn-parents btn-action">{{parent|nomenclatura}}</a></li>
{%endfor %} {%endfor %}
<li><a action="refresh" pk="{{dpt.pk}}" ordem="{{dpt.ordem}}" name="{{dpt.pk}}" title="{{dpt.texto|short_string:50}}" class="btn-parents btn-action">{{dpt|nomenclatura}}</a></li> <li class="selected"><a action="refresh" pk="{{dpt.pk}}" ordem="{{dpt.ordem}}" name="{{dpt.pk}}" title="{{dpt.texto|short_string:50}}" class="btn-parents btn-action">{{dpt|nomenclatura}}</a></li>
</ul> </ul>
</form> </form>
</div> </div>

Write Preview
Loading…
Cancel
Save