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. 4
      static/styles/_settings.scss
  2. 221
      static/styles/app.scss
  3. 2
      templates/compilacao/textoarticulado_detail.html
  4. 35
      templates/sessao/sessaoplenaria_detail.html

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;

221
static/styles/app.scss
View File

@ -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 {
@ -113,150 +113,151 @@ $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;
margin-top:10px;
vertical-align: top; vertical-align: top;
} }
.masthead__heading h1 { .masthead__heading h1 {
color: #333333; color: #333333;
text-shadow: 1px 1px 3px #dadada; text-shadow: 1px 1px 3px #dadada;
font-size: 130%; font-size: 130%;
} }
.masthead__heading h2 { .masthead__heading h2 {
padding-left: 2px; padding-left: 2px;
color: #444444; color: #444444;
text-shadow: 1px 1px 3px #dadada; text-shadow: 1px 1px 3px #dadada;
font-weight: normal; font-weight: normal;
font-size: 90%; font-size: 90%;
} }
.masthead .sub-nav { .masthead .sub-nav {
display: block; display: block;
overflow: hidden; overflow: visible;
padding-top: 0.25rem; padding-top: 0.25rem;
width: auto; width: auto;
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
margin: 0; margin: 0;
right: 0; right: 0.5em;
dd { dd {
@ -265,6 +266,29 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23);
border-bottom: 1px solid $primary-color; border-bottom: 1px solid $primary-color;
border-top: 2px solid transparent; border-top: 2px solid transparent;
border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
transition: all 0.5s cubic-bezier(0.55,0,0.1,1);
ul {
margin-right: -3px;
&::after, &::before {
border: 0px;
}
li {
margin: 0;
display: block;
padding: 0.3rem;
color: #555555;
width: 100%;
a {
display: block;
}
&:hover, &.active {
background: #eee;
}
}
}
a { a {
color: #18577A; color: #18577A;
@ -284,88 +308,89 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23);
border: 1px solid $primary-color; border: 1px solid $primary-color;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
border-top: 2px solid $primary-color; 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;
@ -375,7 +400,7 @@ text-align: center;
height: 50px; height: 50px;
width: 1px; width: 1px;
background-color: white; background-color: white;
} }
@media (max-width: 480px) { @media (max-width: 480px) {

2
templates/compilacao/textoarticulado_detail.html
View File

@ -11,7 +11,7 @@
<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 %}

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