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
Split 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
# tf = TipoDispositivo.objects.get(pk=context['tipo_pk'])
print("aqui")
return {}
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(),
'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);
});

295
static/styles/compilacao.scss
View File

@ -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;
}
}
}
}

2
templates/base.html
View File

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

6
templates/compilacao/edit_bloco.html
View File

@ -18,12 +18,12 @@
<div class="csform">
<form method="post" action="" action_ajax="{{dpt.pk}}/refresh">
<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 %}
<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-detail"><a class="btn-top btn-action" pk="{{dpt.pk}}" action="refresh:detail" title="{% trans 'TODO: Edição detalhada'%}">E*</a></li>
{%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 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>
@ -45,7 +45,7 @@
<li><a class="btn-bottom btn-action" pk="{{dpt.pk}}" title="Button Bottom">BB</a></li>
</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 %}
{% 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>
@ -79,7 +79,7 @@
{%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>
{%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>
</form>
</div>

Write Preview
Loading…
Cancel
Save