Refatoração do design do section-nav

static/js/app.js

@@ -0,0 +1,33 @@
+
+tinymce.init({selector:'textarea'});
+$(document).foundation();
+ 
+$(document).ready(function(){
+
+
+    $('.dateinput').fdatepicker({
+        // TODO localize
+        format: 'dd/mm/yyyy',
+        language: 'pt',
+        endDate: '31/12/2100',
+        todayBtn: true
+        });
+
+    $('.telefone').mask("(99) 9999-9999", {placeholder:"(__) ____ -____"});
+    $('.cpf').mask("000.000.000-00", {placeholder:"___.___.___-__"});
+    $('.cep').mask("00000-000", {placeholder:"_____-___"});
+    $('.rg').mask("0.000.000", {placeholder:"_.___.___"});
+    $('.titulo_eleitor').mask("0000.0000.0000.0000", {placeholder:"____.____.____.____"});
+    $('.hora').mask("00:00", {placeholder:"hh:mm"});
+    $('.hora_hms').mask("00:00:00", {placeholder:"hh:mm:ss"});
+
+    var href = location.href.split('?')
+    $('.masthead .sub-nav a').each(function() {
+
+        if (href.length >= 1) {
+            if (href[0].endsWith($(this).attr('href')))
+                $(this).parent().addClass('active')
+        }
+    });
+
+});

static/styles/app.scss

@@ -175,7 +175,7 @@ position: relative;
 display: table;
 width: 100%;
 height: 100%;
-background-color: #e9eaed;
+background-color: #fafafa;
 color: #444444;
 }
 
@@ -202,10 +202,15 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23);
 	vertical-align: top;
 }
 
-    .masthead > .container {
+    .masthead .container {
-    padding-top: 20px;
+    	padding: 10px 0;
-    border-bottom: 20px solid $primary-color;
+	    background-color: #e3e3e3;
-    background-color: #ffffff;
+    }
+
+	.masthead > .container {
+		padding: 0px;
+		max-width: none;
+	    border-bottom: 1px solid $primary-color;
     }
 
     .masthead__logo {
@@ -219,19 +224,19 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23);
 
         .masthead__logo img {
         width: auto;
-        height: 95px;
+        height: 85px;
         }
 
     .masthead__heading {
     display: inline-block;
-    margin-left: 15px;
+    margin-left: 10px;
-    vertical-align: middle;
+    vertical-align: top;
     }
 
         .masthead__heading h1 {
         color: #333333;
         text-shadow: 1px 1px 3px #dadada;
-        font-size: 150%;
+        font-size: 130%;
         }
 
         .masthead__heading h2 {
@@ -239,9 +244,51 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23);
         color: #444444;
         text-shadow: 1px 1px 3px #dadada;
         font-weight: normal;
-        font-size: 100%;
+        font-size: 90%;
         }
 
+
+	.masthead .sub-nav {
+	    display: block;
+	    overflow: hidden;
+	    padding-top: 0.25rem;
+	    width: auto;
+	    position: absolute;
+	    bottom: -1px;
+	    margin: 0;
+		right: 0;
+
+
+		dd {
+			margin: 0;
+			border: 1px solid transparent;
+			border-bottom: 1px solid $primary-color;
+			border-top: 2px solid transparent;
+			border-radius: 5px 5px 0px 0px;
+
+			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;
+
+			}
+		}
+	}
+
 .content {
 position: relative;
 display: table-cell;

templates/base.html

@@ -116,20 +116,28 @@
       {# Header #}
       {% block main_header %}
         <header id="masthead" class="masthead page__row">
-          <div class="container">
+            <div class="container">
-            <a class="masthead__logo" href="#">
+                <div class="container">
-                {% if logotipo %}
+                    <a class="masthead__logo" href="#">
-                    <img src="{{ MEDIA_URL }}{{ logotipo }}" alt="Logo">
+                        {% if logotipo %}
-                {% else %}
+                            <img src="{{ MEDIA_URL }}{{ logotipo }}" alt="Logo">
-                    <img src="{% static 'img/logo.png' %}" alt="Logo">
+                        {% else %}
-                {% endif %}
+                            <img src="{% static 'img/logo.png' %}" alt="Logo">
-            </a>
+                        {% endif %}
-            <div class="masthead__heading">
+                    </a>
-              {# XXX Make better use of translation tags in html blocks ie. actually use the proper blocktrans tag efficiently #}
+                    <div class="masthead__heading">
-              <h1>{{ parliament_type }} {% trans 'de' %} {{ city }} - {{ state }}</h1>
+                        {# XXX Make better use of translation tags in html blocks ie. actually use the proper blocktrans tag efficiently #}
-              <h2>{% trans 'Sistema de Apoio ao Processo Legislativo' %}</h2>
+                        <h1>{{ parliament_type }} {% trans 'de' %} {{ city }} - {{ state }}</h1>
+                        <h2>{% trans 'Sistema de Apoio ao Processo Legislativo' %}</h2>
+                    </div>
+
+
+                    {% block sections_nav %}
+                    {% endblock sections_nav %}
+
+
+                </div>
             </div>
-          </div>
         </header>
       {% endblock main_header %}
 
@@ -211,33 +219,11 @@
       <script type="text/javascript" src="{% static 'foundation/js/vendor/fastclick.js' %}"></script>
       <script src="{% static 'tinymce/tinymce.min.js' %}"></script>
 
-      <script>tinymce.init({selector:'textarea'});</script>
-
-      <script>$(document).foundation();</script>
 
-      <script type="text/javascript">
+      <script type="text/javascript" src="{% static 'js/app.js' %}"></script>
-        $(function () {
-
-          $('.dateinput').fdatepicker({
-            // TODO localize
-            format: 'dd/mm/yyyy',
-            language: 'pt',
-            endDate: '31/12/2100',
-            todayBtn: true
-          });
-        });
-      </script>
 
       <script>
-        $(document).ready(function(){
+
-           $('.telefone').mask("(99) 9999-9999", {placeholder:"(__) ____ -____"});
-           $('.cpf').mask("000.000.000-00", {placeholder:"___.___.___-__"});
-           $('.cep').mask("00000-000", {placeholder:"_____-___"});
-           $('.rg').mask("0.000.000", {placeholder:"_.___.___"});
-           $('.titulo_eleitor').mask("0000.0000.0000.0000", {placeholder:"____.____.____.____"});
-           $('.hora').mask("00:00", {placeholder:"hh:mm"});
-           $('.hora_hms').mask("00:00:00", {placeholder:"hh:mm:ss"});
-        });
       </script>
 
       {% block extra_js %}

templates/compilacao/textoarticulado_detail.html

@@ -1,5 +1,21 @@
 {% extends "base.html" %} {% load i18n %} {% load compilacao_filters %}
 
+
+    {% block sections_nav %}
+      <dl class="sub-nav">
+        {% if object.content_object%}
+            <dd><a href="{% url object|urldetail_content_type object.content_object.pk %}"title="{% trans 'Ir para '%}{{object.content_object}}">Início</a></dd>
+        {%else%}
+            <dd><a href="{% url 'ta_detail' object.pk %}" {% trans 'Início' %}</a></dd>
+        {%endif%}
+            <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_edit' object.pk %}">{% trans 'Edição do Texto' %}</a></li>
+
+           </dl>
+     {% endblock %}
+
 {% block base_content %} {# FIXME is this the best markup to use? #}
 <div class="clearfix">
     {% block actions %}
@@ -19,19 +35,7 @@
             </ul></li>
     </ul>
     {% endblock actions %}
-    <ul class="button-group left">
-        {% block sections_nav %}
-            {% if object.content_object%}
-                <li><a href="{% url object|urldetail_content_type object.content_object.pk %}" class="tiny button secondary" title="{% trans 'Ir para '%}{{object.content_object}}">Início</a></li>
-            {%else%}
-                <li><a href="{% url 'ta_detail' object.pk %}" class="tiny button secondary">{% trans 'Início' %}</a></li>
-            {%endif%}
-                <li><a href="{% url 'ta_pub_list' object.pk %}" class="tiny button secondary">{% model_verbose_name_plural 'Publicacao' %}</a></li>
 
-                <li><a href="{% url 'ta_text' object.pk %}" class="tiny button secondary">{% trans 'Texto' %}</a></li>
-                <li><a href="{% url 'ta_text_edit' object.pk %}" class="tiny button secondary">{% trans 'Edição do Texto' %}</a></li>
-         {% endblock %}
-    </ul>
 </div>
 
 {% block detail_content %} {# TODO replace fieldset for something semantically correct, but with similar visual grouping style #}

templates/compilacao/tipotextoarticulado_detail.html

@@ -1,6 +1,9 @@
 {% extends "base.html" %} {% load i18n %} {% load compilacao_filters %}
 
 {% block base_content %} {# FIXME is this the best markup to use? #}
+
+    {% block sections_nav %}
+     {% endblock %}
 <div class="clearfix">
     {% block actions %}
     <ul class="button-group right">
@@ -8,10 +11,7 @@
         <li><a href="{% url 'tipo_ta_delete' object.pk %}" class="button alert tiny">{% trans 'Excluir' %}</a></li>
     </ul>
     {% endblock actions %}
-    <dl class="sub-nav left">
+
-        {% block sections_nav %}
-         {% endblock %}
-    </dl>
 </div>
 
 	{% block detail_content %} {# TODO replace fieldset for something semantically correct, but with similar visual grouping style #}

templates/crud/detail.html

@@ -11,7 +11,7 @@
         <dd><a href="{{ view.delete_url }}" class="button alert">{% trans 'Excluir' %}</a></dd>
       </dl>
     {% endblock actions %}
-    {% block sections_nav %}{% endblock %}
+
   </div>
 
   {% block detail_content %}

templates/materia/materialegislativa_detail.html

@@ -2,16 +2,16 @@
 {% load i18n %}
 
 {% block sections_nav %}
-  <dl class="sub-nav left">
+  <dl class="sub-nav">
-    <dd><a href="{% url 'materialegislativa:detail' materialegislativa.id %}" class="button secondary">{% trans 'Início' %}</a></dd>
+    <dd><a href="{% url 'materialegislativa:detail' materialegislativa.id %}">{% trans 'Início' %}</a></dd>
-    <dd><a href="{% url 'materia_anexada' materialegislativa.id %}" class="button secondary">{% trans 'Anexada' %}</a></dd>
+    <dd><a href="{% url 'materia_anexada' materialegislativa.id %}">{% trans 'Anexada' %}</a></dd>
-    <dd><a href="{% url 'autoria' materialegislativa.id %}" class="button secondary">{% trans 'Autoria' %}</a></dd>
+    <dd><a href="{% url 'autoria' materialegislativa.id %}">{% trans 'Autoria' %}</a></dd>
-    <dd><a href="{% url 'despacho_inicial' materialegislativa.id %}" class="button secondary">{% trans 'Despacho Inicial' %}</a></dd>
+    <dd><a href="{% url 'despacho_inicial' materialegislativa.id %}">{% trans 'Despacho Inicial' %}</a></dd>
-    <dd><a href="{% url 'documento_acessorio' materialegislativa.id %}" class="button secondary">{% trans 'Documento Acessório' %}</a></dd>
+    <dd><a href="{% url 'documento_acessorio' materialegislativa.id %}">{% trans 'Documento Acessório' %}</a></dd>
-    <dd><a href="{% url 'legislacao_citada' materialegislativa.id %}" class="button secondary">{% trans 'Legislação Citada' %}</a></dd>
+    <dd><a href="{% url 'legislacao_citada' materialegislativa.id %}">{% trans 'Legislação Citada' %}</a></dd>
-    <dd><a href="{% url 'numeracao' materialegislativa.id %}" class="button secondary">{% trans 'Numeração' %}</a></dd>
+    <dd><a href="{% url 'numeracao' materialegislativa.id %}">{% trans 'Numeração' %}</a></dd>
-    <dd><a href="{% url 'tramitacao_materia' materialegislativa.id %}" class="button secondary">{% trans 'Tramitação' %}</a></dd>
+    <dd><a href="{% url 'tramitacao_materia' materialegislativa.id %}">{% trans 'Tramitação' %}</a></dd>
-    <dd><a href="{% url 'relatoria' materialegislativa.id %}" class="button secondary">{% trans 'Relatoria' %}</a></dd>
+    <dd><a href="{% url 'relatoria' materialegislativa.id %}">{% trans 'Relatoria' %}</a></dd>
 
     {% comment %}
         Opção adicionada para chamar o TextoArticulado da matéria.
@@ -19,6 +19,6 @@
             e a view MateriaTaView(IntegracaoTaView) em views.py
            Em nada mais a integração interfere em MateriaLegislativa
     {% endcomment %}
-    <dd><a href="{% url 'materia_ta' materialegislativa.id %}" class="button secondary">{% trans 'Texto' %}</a></dd>
+    <dd><a href="{% url 'materia_ta' materialegislativa.id %}">{% trans 'Texto' %}</a></dd>
   </dl>
 {% endblock sections_nav %}

templates/parlamentares/parlamentares_detail.html

@@ -1,8 +1,7 @@
 {% extends "crud/detail.html" %}
 {% load i18n %}
-{% block actions %}  {% endblock %}
+{% block actions %}
-{% block sections_nav %}
   <dl class="sub-nav left">
     <dd><a href="{% url 'parlamentares_cadastro' legislatura_id %}" id="incluir-parlamentar" class="button secondary">{% trans 'Incluir Parlamentar' %}</a></dd>
   </dl>
-{% endblock sections_nav %}
+{% endblock actions %}