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

Layout de submenus em sub-nav

pull/153/head
LeandroRoberto 9 years ago
parent
7cc0ea9b6b
commit
85cf7ab7b5
5 changed files with 291 additions and 255 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
      static/js/app.js
  2. 4
      static/styles/_settings.scss
  3. 501
      static/styles/app.scss
  4. 4
      templates/compilacao/textoarticulado_detail.html
  5. 35
      templates/sessao/sessaoplenaria_detail.html

2
static/js/app.js
View File

@ -1,7 +1,7 @@
tinymce.init({selector:'textarea'}); tinymce.init({selector:'textarea'});
$(document).foundation(); $(document).foundation();
$(document).ready(function(){ $(document).ready(function(){

4
static/styles/_settings.scss
View File

@ -535,10 +535,10 @@ $include-html-global-classes: $include-html-classes;
// $f-dropdown-max-height: none; // $f-dropdown-max-height: none;
// Used for bottom position // Used for bottom position
// $f-dropdown-margin-top: 2px; $f-dropdown-margin-top: 0px;
// Used for right position // Used for right position
// $f-dropdown-margin-left: $f-dropdown-margin-top; $f-dropdown-margin-left: 5px;
// Used for left position // Used for left position
// $f-dropdown-margin-right: $f-dropdown-margin-top; // $f-dropdown-margin-right: $f-dropdown-margin-top;

501
static/styles/app.scss
View File

@ -19,7 +19,7 @@ $top-bar-dropdown-radius: $global-radius;
~ .top-bar-section { ~ .top-bar-section {
.has-dropdown.moved > .dropdown, .has-dropdown.moved > .dropdown,
.dropdown { .dropdown {
top: $topbar-height; top: $topbar-height;
} }
} }
} }
@ -27,10 +27,10 @@ $top-bar-dropdown-radius: $global-radius;
// Restyles to foundation top bar menu, in order to behave aesthetically different // Restyles to foundation top bar menu, in order to behave aesthetically different
/* /*
XXX XXX
Is there a better way to implement these styles using best practices without the Is there a better way to implement these styles using best practices without the
need to override this much of foundation? Or at least avoid too much nesting and need to override this much of foundation? Or at least avoid too much nesting and
specificity (better use of BEM and ITCSS)? specificity (better use of BEM and ITCSS)?
*/ */
.nav { .nav {
@ -48,7 +48,7 @@ $top-bar-dropdown-radius: $global-radius;
@include side-radius(bottom, rem-calc($top-bar-dropdown-radius)); @include side-radius(bottom, rem-calc($top-bar-dropdown-radius));
} }
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.19), box-shadow: 0 10px 18px rgba(0, 0, 0, 0.19),
0 2px 6px rgba(0, 0, 0, 0.23); 0 2px 6px rgba(0, 0, 0, 0.23);
// For the transition effect. // For the transition effect.
opacity: 0; opacity: 0;
// Show the dropdown accurately while it animates. // Show the dropdown accurately while it animates.
@ -60,8 +60,8 @@ $top-bar-dropdown-radius: $global-radius;
transform: translateY(rem-calc(25px)); transform: translateY(rem-calc(25px));
// This transition is actually for when we hover-out of the dropdown. // This transition is actually for when we hover-out of the dropdown.
transition: transform 0.1s linear, transition: transform 0.1s linear,
opacity 0.1s linear, opacity 0.1s linear,
clip 0s 0.3s; clip 0s 0.3s;
// The triangle pip // The triangle pip
&::before { &::before {
@include css-triangle(rem-calc(6px), $topbar-dropdown-bg, bottom); @include css-triangle(rem-calc(6px), $topbar-dropdown-bg, bottom);
@ -94,9 +94,9 @@ $top-bar-dropdown-radius: $global-radius;
pointer-events: auto; pointer-events: auto;
// Animating with a beautiful cubic-bezier curve, or Google's "Swift out" easing :) // Animating with a beautiful cubic-bezier curve, or Google's "Swift out" easing :)
transition: transform 0.3s cubic-bezier(0.55,0,0.1,1), transition: transform 0.3s cubic-bezier(0.55,0,0.1,1),
opacity 0.3s cubic-bezier(0.55,0,0.1,1), opacity 0.3s cubic-bezier(0.55,0,0.1,1),
// Here we make sure the clipping is set before any other transition. // Here we make sure the clipping is set before any other transition.
clip 0s 0s; clip 0s 0s;
// Don't forget to properly animate our bridge, so it keeps only between our gap. // Don't forget to properly animate our bridge, so it keeps only between our gap.
&::after { &::after {
top: rem-calc(-10px); top: rem-calc(-10px);
@ -113,295 +113,320 @@ $top-bar-dropdown-radius: $global-radius;
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
@-webkit-keyframes fadeIn { @-webkit-keyframes fadeIn {
0% {opacity: 0;} 0% {opacity: 0;}
100% {opacity: 1;} 100% {opacity: 1;}
} }
@keyframes fadeIn { @keyframes fadeIn {
0% {opacity: 0;} 0% {opacity: 0;}
100% {opacity: 1;} 100% {opacity: 1;}
} }
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
} }
h1, h2, h3, h4, h5, h6, form, dl, dt, dd, p, div, img, a { h1, h2, h3, h4, h5, h6, form, dl, dt, dd, p, div, img, a {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
img { img {
border: none; border: none;
} }
a { a {
background-color: transparent; background-color: transparent;
color: $primary-color; color: $primary-color;
text-decoration: none; text-decoration: none;
transition: 0.2s; transition: 0.2s;
} }
h1 { h1 {
color: $primary-color; color: $primary-color;
font-size: 120%; font-size: 120%;
} }
h2 { h2 {
color: $primary-color; color: $primary-color;
font-size: 110%; font-size: 110%;
} }
h1 a, h2 a, h3 a, h1 a:hover, h2 a:hover, h3 a:hover { h1 a, h2 a, h3 a, h1 a:hover, h2 a:hover, h3 a:hover {
color: $primary-color; color: $primary-color;
} }
.fadein { .fadein {
-webkit-animation: fadeIn 0.25s ease-in-out; -webkit-animation: fadeIn 0.25s ease-in-out;
-moz-animation: fadeIn 0.25s ease-in-out; -moz-animation: fadeIn 0.25s ease-in-out;
-o-animation: fadeIn 0.25s ease-in-out; -o-animation: fadeIn 0.25s ease-in-out;
} }
.container { .container {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
max-width: 960px; max-width: 960px;
} }
.page { .page {
position: relative; position: relative;
display: table; display: table;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #fafafa; background-color: #fafafa;
color: #444444; color: #444444;
} }
.page__row { .page__row {
display: table-row; display: table-row;
box-sizing: content-box; box-sizing: content-box;
} }
/* XXX find a better way to fix main layout box-sizing */ /* XXX find a better way to fix main layout box-sizing */
.page__row > .container > *{ .page__row > .container > *{
box-sizing: border-box; box-sizing: border-box;
} }
.navigation { .navigation {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23);
} }
.navigation > .container { .navigation > .container {
padding: 0px; padding: 0px;
max-width: 960px; max-width: 960px;
} }
.icon-bar { .icon-bar {
vertical-align: top; vertical-align: top;
} }
.masthead .container { .masthead .container {
padding: 10px 0; padding: 10px 0;
background-color: #e3e3e3; background-color: #e3e3e3;
} }
.masthead > .container { .masthead > .container {
padding: 0px; padding: 0px;
max-width: none; max-width: none;
border-bottom: 1px solid $primary-color; border-bottom: 1px solid $primary-color;
} }
.masthead__logo { .masthead__logo {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.masthead__logo a { .masthead__logo a {
display: block; display: block;
} }
.masthead__logo img { .masthead__logo img {
width: auto; width: auto;
height: 85px; height: 85px;
} }
.masthead__heading { .masthead__heading {
display: inline-block; display: inline-block;
margin-left: 10px; margin-left: 10px;
vertical-align: top; margin-top:10px;
} vertical-align: top;
}
.masthead__heading h1 {
color: #333333; .masthead__heading h1 {
text-shadow: 1px 1px 3px #dadada; color: #333333;
font-size: 130%; text-shadow: 1px 1px 3px #dadada;
} font-size: 130%;
}
.masthead__heading h2 {
padding-left: 2px; .masthead__heading h2 {
color: #444444; padding-left: 2px;
text-shadow: 1px 1px 3px #dadada; color: #444444;
font-weight: normal; text-shadow: 1px 1px 3px #dadada;
font-size: 90%; font-weight: normal;
} font-size: 90%;
}
.masthead .sub-nav {
display: block; .masthead .sub-nav {
overflow: hidden; display: block;
padding-top: 0.25rem; overflow: visible;
width: auto; padding-top: 0.25rem;
position: absolute; width: auto;
bottom: -1px; position: absolute;
margin: 0; bottom: -1px;
right: 0; margin: 0;
right: 0.5em;
dd {
margin: 0; dd {
border: 1px solid transparent; margin: 0;
border-bottom: 1px solid $primary-color; border: 1px solid transparent;
border-top: 2px solid transparent; border-bottom: 1px solid $primary-color;
border-radius: 5px 5px 0px 0px; border-top: 2px solid transparent;
border-radius: 5px 5px 0px 0px;
a { transition: all 0.5s cubic-bezier(0.55,0,0.1,1);
color: #18577A;
background-color: transparent; ul {
display: inline-block; margin-right: -3px;
padding: 2px 6px 0; &::after, &::before {
position: relative; border: 0px;
font-size: 90%; }
&:hover { li {
color: #444; margin: 0;
background-color: transparent; display: block;
padding: 0.3rem;
color: #555555;
width: 100%;
a {
display: block;
} }
}
&:hover, &.active { &:hover, &.active {
background: #fff; background: #eee;
border: 1px solid $primary-color;
border-bottom: 1px solid #fff; }
border-top: 2px solid $primary-color; }
}
a {
color: #18577A;
background-color: transparent;
display: inline-block;
padding: 2px 6px 0;
position: relative;
font-size: 90%;
&:hover {
color: #444;
background-color: transparent;
} }
} }
&:hover, &.active {
background: #fff;
border: 1px solid $primary-color;
border-bottom: 1px solid #fff;
border-top: 2px solid $primary-color;
transition: all 0.5s cubic-bezier(0.55,0,0.1,1);
}
} }
}
.content { .content {
position: relative; position: relative;
display: table-cell; display: table-cell;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
text-align: left; text-align: left;
font-size: 100%; font-size: 100%;
} }
.content > .container { .content > .container {
height: 100%; height: 100%;
background-color: #ffffff; background-color: #ffffff;
} }
/* Layout */ /* Layout */
.footer { .footer {
width: 100%; width: 100%;
background-color: $secondary-color; background-color: $secondary-color;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
} }
.footer__block { .footer__block {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 5px 0; margin: 5px 0;
padding: 0 20px; padding: 0 20px;
vertical-align: middle; vertical-align: middle;
font-size: 70%; font-size: 70%;
} }
.footer__block a { .footer__block a {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-weight: 600; font-weight: 600;
} }
.footer__block a:hover { .footer__block a:hover {
text-decoration: underline; text-decoration: underline;
} }
.footer__block small { .footer__block small {
font-size: 100%; font-size: 100%;
} }
.footer__logo { .footer__logo {
display: block; display: block;
font-size: 0; font-size: 0;
margin-bottom: 10px; margin-bottom: 10px;
} }
.footer__logo > img { .footer__logo > img {
height: 32px; height: 32px;
} }
.footer__block--about { .footer__block--about {
padding-left: 0; padding-left: 0;
max-width: 195px; max-width: 195px;
} }
.footer__block--license { .footer__block--license {
max-width: 285px; max-width: 285px;
} }
.footer__block--parliament-info { .footer__block--parliament-info {
border: 0; border: 0;
padding-right: 0; padding-right: 0;
max-width: 385px; max-width: 385px;
} }
.footer__block--parliament-info > abbr { .footer__block--parliament-info > abbr {
border: 0; border: 0;
font-size: inherit; font-size: inherit;
cursor: inherit; cursor: inherit;
color: inherit; color: inherit;
} }
.footer__block--separator::after { .footer__block--separator::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
margin: auto; margin: auto;
height: 50px; height: 50px;
width: 1px; width: 1px;
background-color: white; background-color: white;
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.masthead { .masthead {
text-align: center text-align: center
} }
.masthead__logo { .masthead__logo {
display: block; display: block;
margin: 10px; margin: 10px;
} }
.masthead__heading { .masthead__heading {
margin-left: 0; margin-left: 0;
} }
.masthead__logo > img{ .masthead__logo > img{
height: 80px; height: 80px;
} }
.masthead__heading h1 { .masthead__heading h1 {
font-size: 90%; font-size: 90%;
} }
.masthead__heading h2 { .masthead__heading h2 {
font-size: 70%; font-size: 70%;
} }
} }

4
templates/compilacao/textoarticulado_detail.html
View File

@ -11,9 +11,9 @@
<dd><a href="{% url 'ta_pub_list' object.pk %}">{% model_verbose_name_plural 'Publicacao' %}</a></dd> <dd><a href="{% url 'ta_pub_list' object.pk %}">{% model_verbose_name_plural 'Publicacao' %}</a></dd>
<dd><a href="{% url 'ta_text' object.pk %}">{% trans 'Texto' %}</a></dd> <dd><a href="{% url 'ta_text' object.pk %}">{% trans 'Texto' %}</a></dd>
<dd><a href="{% url 'ta_text_edit' object.pk %}">{% trans 'Edição do Texto' %}</a></li> <dd><a href="{% url 'ta_text_edit' object.pk %}">{% trans 'Edição do Texto' %}</a></dd>
</dl> </dl>
{% endblock %} {% endblock %}
{% block base_content %} {# FIXME is this the best markup to use? #} {% block base_content %} {# FIXME is this the best markup to use? #}

35
templates/sessao/sessaoplenaria_detail.html
View File

@ -2,17 +2,28 @@
{% load i18n %} {% load i18n %}
{% block actions %} {% endblock %} {% block actions %} {% endblock %}
{% block sections_nav %} {% block sections_nav %}
<dl class="sub-nav left"> <dl class="sub-nav">
<dd><a href="{% url 'sessaoplenaria:detail' object.pk %}" class="button secondary">{% trans 'Início' %}</a></dd> <dd><a data-dropdown="hover1" data-options="is_hover:true; hover_timeout:1000" aria-expanded="false" >{% trans 'Abertura' %}</a>
<dd><a href="{% url 'sessaoplenaria:expediente' object.pk %}" class="button secondary">{% trans 'Expediente' %}</a></dd> <ul id="hover1" class="f-dropdown" data-dropdown-content aria-hidden="true">
<dd><a href="{% url 'sessaoplenaria:presenca' object.pk %}" class="button secondary">{% trans 'Presença' %}</a></dd> <li><a href="{% url 'sessaoplenaria:detail' object.pk %}">{% trans 'Dados Básicos' %}</a></li>
<dd><a href="{% url 'sessaoplenaria:presencaordemdia' object.pk %}" class="button secondary">{% trans 'Presença Ordem do Dia' %}</a></dd> <li><a href="{% url 'sessaoplenaria:mesa' object.pk %}">{% trans 'Mesa' %}</a></li>
<dd><a href="{% url 'sessaoplenaria:oradorexpediente' object.pk %}" class="button secondary">{% trans 'Oradores do Expediente' %}</a></dd> <li><a href="{% url 'sessaoplenaria:presenca' object.pk %}">{% trans 'Presença' %}</a></li>
<dd><a href="{% url 'sessaoplenaria:mesa' object.pk %}" class="button secondary">{% trans 'Mesa' %}</a></dd> <li><a href="{% url 'sessaoplenaria:explicacao' object.pk %}">{% trans 'Explicações Pessoais' %}</a></li>
<dd><a href="{% url 'sessaoplenaria:explicacao' object.pk %}" class="button secondary">{% trans 'Explicações Pessoais' %}</a></dd> </ul></dd>
<dd><a href="{% url 'sessaoplenaria:materiaordemdia_list' object.pk %}" class="button secondary">{% trans 'Matérias Ordem do Dia' %}</a></dd> <dd><a data-dropdown="hover2" data-options="is_hover:true; hover_timeout:1000">{% trans 'Expedientes' %}</a>
<dd><a href="{% url 'sessaoplenaria:expedienteordemdia_list' object.pk %}" class="button secondary">{% trans 'Matérias Expediente' %}</a></dd> <ul id="hover2" class="f-dropdown" data-dropdown-content>
<dd><a href="{% url 'sessaoplenaria:painel' object.pk %}" class="button secondary">{% trans 'Painel Eletrônico' %}</a></dd> <li><a href="{% url 'sessaoplenaria:expediente' object.pk %}">{% trans 'Expediente Diversos' %}</a></li>
<dd><a href="{% url 'sessaoplenaria:resumo' object.pk %}" class="button secondary">{% trans 'Resumo' %}</a></dd> <li><a href="{% url 'sessaoplenaria:expedienteordemdia_list' object.pk %}">{% trans 'Matérias Expediente' %}</a></li>
<li><a href="{% url 'sessaoplenaria:oradorexpediente' object.pk %}">{% trans 'Oradores do Expediente' %}</a></li>
</ul></dd>
<dd><a data-dropdown="hover3" data-options="is_hover:true; hover_timeout:1000">{% trans 'Ordem do Dia' %}</a>
<ul id="hover3" class="f-dropdown" data-dropdown-content>
<li><a href="{% url 'sessaoplenaria:materiaordemdia_list' object.pk %}">{% trans 'Matérias Ordem do Dia' %}</a></li>
<li><a href="{% url 'sessaoplenaria:presencaordemdia' object.pk %}">{% trans 'Presença Ordem do Dia' %}</a></li>
</ul></dd>
<dd><a href="{% url 'sessaoplenaria:painel' object.pk %}">{% trans 'Painel Eletrônico' %}</a></dd>
<dd><a href="{% url 'sessaoplenaria:resumo' object.pk %}">{% trans 'Resumo' %}</a></dd>
</dl> </dl>
{% endblock sections_nav %} {% endblock sections_nav %}

Write Preview
Loading…
Cancel
Save