Merge branch 'master' of github.com:interlegis/sapl

sapl/context_processors.py

@@ -0,0 +1,13 @@
+def parliament_info(request):
+
+    return {
+        'state': 'Estado',
+        'state_abbr': 'UF',
+        'city': 'Cidade',
+        'parliament_type': 'Câmara Municipal',
+        'address': 'Rua Lorem Ipsum de Amet, Casa X',
+        'postal_code': '70000-000',
+        'phone_number': '00 0000-0000',
+        'url_portal': '#',
+        'url_email': '#',
+    }

sapl/settings.py

@@ -86,6 +86,7 @@ TEMPLATES = [
                 'django.template.context_processors.request',
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
+                'sapl.context_processors.parliament_info',
             ],
             'debug': DEBUG
         },

static/styles/style.css

@@ -0,0 +1,282 @@
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
+
+@-webkit-keyframes fadeIn {
+0% {opacity: 0;}
+100% {opacity: 1;}
+}
+@keyframes fadeIn {
+0% {opacity: 0;}
+100% {opacity: 1;}
+}
+
+html, body {
+font: 100% "Open Sans", Helvetica, Arial, sans-serif;
+margin: 0;
+padding: 0;
+height: 100%;
+}
+
+h1, h2, h3, h4, h5, h6, form, dl, dt, dd, p, div, img, a {
+margin: 0;
+padding: 0;
+}
+
+p {
+margin: 0.5em 0;
+}
+
+img {
+border: none;
+}
+
+a {
+background-color: transparent;
+color: #27ae60;
+text-decoration: none;
+}
+
+h1 {
+max-width: 1000px;
+color: #27ae60;
+font-size: 120%;
+}
+
+h2 {
+color: #27ae60;
+font-size: 110%;
+}
+
+h3 {
+color: #444444;
+font-size: 105%;
+line-height: 1.4em;
+}
+
+h1 a, h2 a, h3 a, h1 a:hover, h2 a:hover, h3 a:hover {
+color: #27ae60;
+}
+
+.fadein {
+-webkit-animation: fadeIn 0.25s ease-in-out;
+-moz-animation: fadeIn 0.25s ease-in-out;
+-o-animation: fadeIn 0.25s ease-in-out;    
+}
+
+.container {
+position: relative;
+margin: 0 auto;
+padding: 20px;
+max-width: 960px;
+}
+
+.page {
+position: relative;
+display: table;
+width: 100%;
+height: 100%;
+background-color: #fafafa;
+color: #444444;
+}
+
+    .page__row {
+    display: table-row;
+    box-sizing: content-box;
+    }
+
+.navigation {
+position: fixed;
+z-index: 100;
+top: 0;
+font-weight: 700;
+font-size: 85%;
+padding: 0;
+width: 100%;
+height: 40px;
+line-height: 40px;
+background-color: #34495e;
+color: #ffffff;
+box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23);
+}
+
+    .navigation > .container {
+    padding: 0px;
+    max-width: 1000px;
+    }
+
+.masthead {
+
+}  
+
+    .masthead > .container {
+    padding-top: 60px;
+    border-bottom: 20px solid #27ae60;
+    background-color: #ffffff;
+    }
+
+    .masthead__logo {
+    display: inline-block;
+    vertical-align: middle;
+    }
+
+        .masthead__logo a {
+        display: block;
+        }
+
+        .masthead__logo img {
+        width: auto;
+        height: 95px;
+        }
+
+    .masthead__heading {
+    display: inline-block;
+    margin-left: 15px;
+    vertical-align: middle;
+    }
+
+        .masthead__heading h1 {
+        color: #333333;
+        text-shadow: 1px 1px 3px #dadada;
+        font-size: 150%;
+        }
+
+        .masthead__heading h2 {
+        padding-left: 2px;
+        color: #444444;
+        text-shadow: 1px 1px 3px #dadada;
+        font-weight: normal;
+        font-size: 100%;
+        }
+
+.content {
+position: relative;
+display: table-cell;
+overflow: hidden;
+height: 100%;
+text-align: left;
+font-size: 100%;
+}
+
+    .content > .container {
+    height: 100%;
+    background-color: #ffffff;
+    }
+
+    .content a:hover {
+    color: #444444;
+    -webkit-transition: 0.3s ease-in;
+    -moz-transition: 0.3s ease-in;
+    -o-transition: 0.3s ease-in;
+    }
+/* Layout */
+
+.footer {
+width: 100%;
+background-color: #34495e;
+color: #ffffff;
+text-align: center;
+}
+
+    .footer__block {
+    position: relative;
+    display: inline-block;
+    margin: 5px 0;
+    padding: 0 20px;
+    vertical-align: middle;
+    font-size: 70%;
+    }
+
+        .footer__block a {
+        color: rgb(255, 255, 255);
+        font-weight: 600;
+        }
+
+        .footer__block a:hover {
+        text-decoration: underline;
+        }
+
+        .footer__block small {
+        font-size: 100%;
+        }
+
+        .footer__logo {
+        display: block;
+        font-size: 0;
+        margin-bottom: 10px;
+        }
+
+        .footer__logo > img {
+        height: 32px;
+        }
+
+    .footer__block--about {
+    padding-left: 0;
+    max-width: 195px; 
+    }
+
+    .footer__block--license {
+    max-width: 285px;
+    }
+
+    .footer__block--parliament-info {
+    border: 0;
+    padding-right: 0;
+    max-width: 385px;
+    }
+
+        .footer__block--parliament-info > abbr {
+        border: 0;
+        font-size: inherit;
+        cursor: inherit;
+        color: inherit;
+        }
+
+    .footer__block--separator::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    height: 50px;
+    width: 1px;
+    background-color: white;
+    }
+
+
+
+@media (max-width: 980px) {
+
+}
+
+@media (max-width: 650px) {
+
+}
+
+@media (max-width: 480px) {
+
+    .masthead {
+    text-align: center
+    }
+
+    .masthead__logo {
+    display: block;
+    margin: 10px;
+    }
+
+    .masthead__heading {
+    margin-left: 0;
+    }
+
+    .masthead__logo > img{
+    height: 80px;
+    }
+
+    .masthead__heading h1 {
+    font-size: 90%;
+    }
+
+    .masthead__heading h2 {
+    font-size: 70%;
+    }
+
+}

templates/base.html

@@ -2,8 +2,11 @@
 {% load staticfiles %}
 <!DOCTYPE html>
 <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
-<head>
+<!--[if gt IE 8]><!--> 
+<html class="no-js" lang="en"> 
+<!--<![endif]-->
+
+  <head>
     <meta charset="utf-8">
     <title>{% block head_title %}{% trans 'SAPL - Sistema de Apoio ao Processo Legislativo' %}{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -12,6 +15,7 @@
       <link rel="stylesheet" href="{% static 'foundation-datepicker/css/foundation-datepicker.min.css' %}">
       <link rel="stylesheet" href="{% static 'components-font-awesome/css/font-awesome.css' %}">
       <link rel="stylesheet" href="{% static 'foundation-icon-fonts/foundation-icons.css' %}">
+      <link rel="stylesheet" href="{% static 'styles/style.css' %}">
 
       {# modernizr must be in head (see http://modernizr.com/docs/#installing) #}
       <script type="text/javascript" src="{% static 'foundation/js/vendor/modernizr.js' %}"></script>
@@ -19,58 +23,119 @@
       <script type="text/javascript" src="{% static 'foundation/js/vendor/jquery.js' %}"></script>
       <script type="text/javascript" src="{% static 'foundation-datepicker/js/foundation-datepicker.js' %}"></script>
     {% endblock %}
-</head>
-
-<body>
-    <header>
-      ... header ...
-      <hr/>
-    </header>
-
-    <!-- Content -->
-    {% block content_container %}
-    {# FIXME: row class is not for that: replace it keeping the layout (notice width) #}
-    <div id="body_content" class="row">
-
-      {# Feedback messages #}
-      {% for message in messages %}
-        <div data-alert class="alert-box {% if message.tags == 'error' %}alert{% else %}{{ message.tags }}{% endif %} radius">
-          {{ message|safe }}
-          <a href="#" class="close">&times;</a>
-        </div>
-      {% endfor %}
+  </head>
+
+  <body>
+    <div class="page fadein">
+    
+      {# Navigation #}
+      {% block navigation %}
+        <nav id="navigation" class="navigation">
+          <div class="container">
+            <span>Navigation Placeholder!</span>
+          </div>
+        </nav>
+      {% endblock navigation %}
+      
+      {# Header #}
+      {% block main_header %}
+        <header id="masthead" class="masthead page__row">
+          <div class="container">
+            <a class="masthead__logo" href="#">
+              <img src="{% static 'img/logo.png' %}" alt="Logo">
+            </a>
+            <div class="masthead__heading">
+              <h1>{{ parliament_type }} {% trans 'de' %} {{ city }} - {{ state }}</h1>
+              <h2>{% trans 'Sistema de Apoio ao Processo Legislativo' %}</h2>
+            </div>
+          </div>
+        </header>
+      {% endblock main_header %}
+
+      {# Main content #}
+      {% block content_container %}
+        <main id="content" class="content page__row">
+          <div class="container">
+
+            {# Feedback messages #}
+            {% for message in messages %}
+              <div data-alert class="alert-box {% if message.tags == 'error' %}alert{% else %}{{ message.tags }}{% endif %} radius">
+                {{ message|safe }}
+                <a href="#" class="close">&times;</a>
+              </div>
+            {% endfor %}
+
+            {# Content header #}
+            {% block base_header %}
+              <div class="clearfix">
                 
-      {% block base_header %}
+                {% block help %}
+                  {% if view.help_path %}
+                    <a class="contextual-help right" href="{% url 'help_base' %}{{ view.help_path }}">{% trans 'Ajuda' %}</a>
+                  {% endif %}
+                {% endblock %}
 
-      <div class="clearfix">
-        {% block help %}
-          {% if view.help_path %}
-            <a class="contextual-help right" href="{% url 'help_base' %}{{ view.help_path }}">{% trans 'Ajuda' %}</a>
-          {% endif %}
-        {% endblock %}
-        {% block title %}{% if view.title %}<h1>{{ view.title }}</h1>{% endif %}{% endblock %}
-      </div>
-      {% endblock base_header %}
+                {% block title %}
+                  {% if view.title %}
+                    <h1>{{ view.title }}</h1>
+                  {% endif %}
+                {% endblock %}
 
-      {% block base_content %}{% endblock %}
+              </div>
+            {% endblock base_header %}
+
+            {# Content per se #}
+            {% block base_content %}
+            {% endblock base_content %}
+
+          </div>
+        </main>
+
+      {% endblock content_container %}
+
+      <footer id="footer" class="footer page__row">
+        <div class="container">
+          <div class="footer__block footer__block--about footer__block--separator">
+            <a class="footer__logo" href="#">
+              <img src="{% static 'img/logo_interlegis.png' %}" alt="{% trans 'Logo do Interlegis' %} ">
+            </a>
+            <small>
+              Desenvolvido pelo <a href="#">Interlegis</a> em software livre e aberto sobre o <a href="#">Zope</a>.
+            </small>
+          </div>
+          <div class="footer__block footer__block--license footer__block--separator">
+            <a class="footer__logo" href="#">
+              <img src="{% static 'img/logo_cc.png' %}" alt="{% trans 'Logo do Creative Commons BY SA' %}">
+            </a>
+            <small>
+              Conteúdo e dados sob licença <a href="#">Creative Commons</a> 4.0 <a href="#">Atribuir Fonte - Compartilhar Igual</a>
+            </small>
+          </div>
+
+          <div class="footer__block footer__block--parliament-info vcard">
+            <span class="org">{{ parliament_type }}</span> de <span class="locality">{{ city }}</span> - <abbr class="region" title="{{ state }}">{{ state_abbr }}</abbr>
+            <br>
+            <span class="street-address">{{ address }}</span>
+            <br> CEP: <span class="postal-code">{{ postal_code }}</span> | Telefone: <span>{{ phone_number }}</span>
+            <br>
+            <a href="{{url_portal}}" class="url">{% trans 'Site da Câmara' %}</a> | <a href="{{url_email}}" class="email">{% trans 'Fale Conosco' %}</a>
+            <br>
+          </div>
+        </div>
+      </footer>
     </div>
-    {% endblock content_container %}
-    <!-- END Content -->
-
-    <footer id="footer">
-      <hr/>
-      ... footer...
-    </footer>
-
-    {% block foot_js %}
-      <script type="text/javascript" src="{% static 'foundation/js/foundation.min.js' %}"></script>
-      <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>
-    {% endblock foot_js %}
-</body>
+
+      {% block foot_js %}
+        <script type="text/javascript" src="{% static 'foundation/js/foundation.min.js' %}"></script>
+        <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>
+      {% endblock foot_js %}
+  </body>
 </html>

templates/index.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load i18n %}
 
-{% block content_container %}
+{% block title%}
   <h1>Bem-vindo ao SAPL!</h1>
 {% endblock %}