diff --git a/sapl/settings.py b/sapl/settings.py index 9ed9b7149..0857c2161 100644 --- a/sapl/settings.py +++ b/sapl/settings.py @@ -137,7 +137,7 @@ MEDIA_ROOT = BASE_DIR.child("media") DAB_FIELD_RENDERER = \ 'django_admin_bootstrapped.renderers.BootstrapFieldRenderer' -CRISPY_TEMPLATE_PACK = 'bootstrap3' +CRISPY_TEMPLATE_PACK = 'foundation-5' CRISPY_FAIL_SILENTLY = not DEBUG BOWER_COMPONENTS_ROOT = BASE_DIR.child("bower") @@ -147,6 +147,7 @@ BOWER_INSTALLED_APPS = ( 'components-font-awesome', 'foundation-icon-fonts', 'tinymce', + 'jquery-runner', ) # Additional search paths for SASS files when using the @import statement diff --git a/sessao/views.py b/sessao/views.py index e8b4b94fa..8780621d3 100644 --- a/sessao/views.py +++ b/sessao/views.py @@ -1,8 +1,9 @@ +from django import forms from django.utils.translation import ugettext_lazy as _ +from django.views.generic.edit import FormMixin from extra_views import InlineFormSetView - +from parlamentares.models import Parlamentar from sapl.crud import build_crud - from .models import (ExpedienteMateria, ExpedienteSessao, OrdemDia, RegistroVotacao, SessaoPlenaria, SessaoPlenariaPresenca, TipoExpediente, TipoResultadoVotacao, TipoSessaoPlenaria) @@ -90,7 +91,62 @@ class ExpedienteView(InlineFormSetView): extra = 1 -class PresencaView(InlineFormSetView): - model = SessaoPlenaria - inline_model = SessaoPlenariaPresenca +class PresencaForm(forms.Form): + presenca = forms.CharField(required=False, initial=False) + parlamentar = forms.CharField(required=False, max_length=20) + + +class PresencaView(FormMixin, sessao_crud.CrudDetailView): template_name = 'sessao/presenca.html' + form_class = PresencaForm + + def post(self, request, *args, **kwargs): + self.object = self.get_object() + form = self.get_form() + + if form.is_valid(): + # Pegar os presentes salvos no banco + presentes_banco = SessaoPlenariaPresenca.objects.filter( + sessao_plen_id=self.object.id) + + # Id dos parlamentares presentes + marcados = request.POST.getlist('presenca') + + # Deletar os que foram desmarcadors + deletar = set(set(presentes_banco) - set(marcados)) + for d in deletar: + SessaoPlenariaPresenca.objects.filter( + parlamentar_id=d.parlamentar_id).delete() + + for p in marcados: + sessao = SessaoPlenariaPresenca() + sessao.sessao_plen = self.object + sessao.parlamentar = Parlamentar.objects.get(id=p) + sessao.save() + + return self.form_valid(form) + else: + return self.form_invalid(form) + + def get_success_url(self): + return self.detail_url + + def get_parlamentares(self): + self.object = self.get_object() + + presencas = SessaoPlenariaPresenca.objects.filter( + sessao_plen_id=self.object.id + ) + + presentes = [] + for p in presencas: + presentes.append(p.parlamentar.id) + + for parlamentar in Parlamentar.objects.all(): + if parlamentar.ativo: + try: + presentes.index(parlamentar.id) + except ValueError: + yield (parlamentar, False) + else: + yield (parlamentar, True) diff --git a/static/styles/_settings.scss b/static/styles/_settings.scss index 1e0978a4d..3347c6297 100644 --- a/static/styles/_settings.scss +++ b/static/styles/_settings.scss @@ -86,7 +86,7 @@ $include-html-global-classes: $include-html-classes; // - - - - - - - - - - - - - - - - - - - - - - - - - // We use these to define default font stacks -// $font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + $font-family-sans-serif: "Open Sans" "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; // $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif; // $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; @@ -115,8 +115,8 @@ $include-html-global-classes: $include-html-classes; // $black : #000000; // We use these as default colors throughout -// $primary-color: #008CBA; -// $secondary-color: #e7e7e7; + $primary-color: #27AE60; + $secondary-color: #34495E; // $alert-color: #f04124; // $success-color: #43AC6A; // $warning-color: #f08a24; @@ -139,7 +139,7 @@ $include-html-global-classes: $include-html-classes; // $last-child-float: $opposite-direction; // We use these to make sure border radius matches unless we want it different. -// $global-radius: 3px; + $global-radius: 4px; // $global-rounded: 1000px; // We use these to control inset shadow shiny edges and depressions. @@ -709,18 +709,18 @@ $include-html-global-classes: $include-html-classes; // - - - - - - - - - - - - - - - - - - - - - - - - - // We use these to style the icon-bar and items -// $icon-bar-bg: $oil; + $icon-bar-bg: $secondary-color; // $icon-bar-font-color: $white; // $icon-bar-font-color-hover: $icon-bar-font-color; -// $icon-bar-font-size: 1rem; -// $icon-bar-hover-color: $primary-color; +// $icon-bar-font-size: 0; + $icon-bar-hover-color: darken($secondary-color, 5%); // $icon-bar-icon-color: $white; // $icon-bar-icon-color-hover: $icon-bar-icon-color; -// $icon-bar-icon-size: 1.875rem; -// $icon-bar-image-width: 1.875rem; -// $icon-bar-image-height: 1.875rem; +// $icon-bar-icon-size: 1rem; + $icon-bar-image-width: 1rem; + $icon-bar-image-height: 1rem; // $icon-bar-active-color: $primary-color; -// $icon-bar-item-padding: 1.25rem; + $icon-bar-item-padding: 0.75rem; // We use this to set default opacity and cursor for disabled icons. // $icon-bar-disabled-opacity: .7; @@ -1399,11 +1399,11 @@ $include-html-global-classes: $include-html-classes; // $include-html-top-bar-classes: $include-html-classes; // Background color for the top bar -// $topbar-bg-color: $oil; -// $topbar-bg: $topbar-bg-color; + $topbar-bg-color: $secondary-color; + $topbar-bg: $topbar-bg-color; // Height and margin -// $topbar-height: rem-calc(45); + $topbar-height: rem-calc(40); // $topbar-margin-bottom: 0; // Controlling the styles for the title in the top bar @@ -1415,11 +1415,11 @@ $include-html-global-classes: $include-html-classes; // $topbar-link-color-hover: $white; // $topbar-link-color-active: $white; // $topbar-link-color-active-hover: $white; -// $topbar-link-weight: $font-weight-normal; -// $topbar-link-font-size: rem-calc(13); + $topbar-link-weight: bold; + $topbar-link-font-size: rem-calc(12px); // $topbar-link-hover-lightness: -10%; // Darken by 10% // $topbar-link-bg: $topbar-bg; -// $topbar-link-bg-hover: $jet; + $topbar-link-bg-hover: darken($topbar-bg, 5%); // $topbar-link-bg-color-hover: $charcoal; // $topbar-link-bg-active: $primary-color; // $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%); @@ -1432,12 +1432,12 @@ $include-html-global-classes: $include-html-classes; // $topbar-button-top: 7px; // Style the top bar dropdown elements -// $topbar-dropdown-bg: $oil; + $topbar-dropdown-bg: $primary-color; // $topbar-dropdown-link-color: $white; // $topbar-dropdown-link-color-hover: $topbar-link-color-hover; -// $topbar-dropdown-link-bg: $oil; -// $topbar-dropdown-link-bg-hover: $jet; -// $topbar-dropdown-link-weight: $font-weight-normal; + $topbar-dropdown-link-bg: $topbar-dropdown-bg; + $topbar-dropdown-link-bg-hover: darken($topbar-dropdown-bg, 5%); + $topbar-dropdown-link-weight: bold; // $topbar-dropdown-toggle-size: 5px; // $topbar-dropdown-toggle-color: $white; // $topbar-dropdown-toggle-alpha: .4; @@ -1473,7 +1473,7 @@ $include-html-global-classes: $include-html-classes; // Sticky Class // $topbar-sticky-class: ".sticky"; -// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item + $topbar-arrows: false; //Set false to remove the triangle icon from the menu item // $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li// // 36. Visibility Classes diff --git a/static/styles/app.scss b/static/styles/app.scss index f532721b0..286488098 100644 --- a/static/styles/app.scss +++ b/static/styles/app.scss @@ -4,8 +4,111 @@ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); -$main-color: #27AE60; -$sub-color: #34495E; +$top-bar-dropdown-radius: $global-radius; + +// Foundation Restyling +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// Moving the mobile menu icon to the right +.title-area.left { + .toggle-topbar { + right: initial; + } + // Making sure dropdowns on mobile are not rendered on top of the top bar. + @media #{$small-only} { + ~ .top-bar-section { + .has-dropdown.moved > .dropdown, + .dropdown { + top: $topbar-height; + } + } + } +} + +// Restyles to foundation top bar menu, in order to behave aesthetically different +/* + XXX + 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 + specificity (better use of BEM and ITCSS)? +*/ + +.nav { + @media #{$topbar-media-query} { + .has-dropdown { + // Default values for dropdowns, while also being hidden. + .dropdown { + // Border-radius for the first and last dropdown items. We don't style the parent dropdown, as the items overflows it. + @include radius(rem-calc($top-bar-dropdown-radius)); + // Second child here actually targets the first item, since Foundation JS injects a hidden li before it for a mobile back button. + > li:nth-child(2), > li:nth-child(2) > a { + @include side-radius(top, rem-calc($top-bar-dropdown-radius)); + } + > li:last-child, li:last-child > a { + @include side-radius(bottom, rem-calc($top-bar-dropdown-radius)); + } + box-shadow: 0 10px 18px rgba(0, 0, 0, 0.19), + 0 2px 6px rgba(0, 0, 0, 0.23); + // For the transition effect. + opacity: 0; + // Show the dropdown accurately while it animates. + width: auto; + // This will allow the triangle pip to be visible above the dropdown. + overflow: visible; + // This ensures we won't accidentally trigger the dropdown if we hover on it, while the animation to default values is run. + pointer-events: none; + transform: translateY(rem-calc(25px)); + // This transition is actually for when we hover-out of the dropdown. + transition: transform 0.1s linear, + opacity 0.1s linear, + clip 0s 0.3s; + // The triangle pip + &::before { + @include css-triangle(rem-calc(6px), $topbar-dropdown-bg, bottom); + position: absolute; + top: rem-calc(-12px); + left: rem-calc(15px); + } + // 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); + } + } + // When hovering + &.hover, &.not-click:hover { + > .dropdown { + opacity: 1; + // Here we override the default clip value ("auto") for an arbitrary large size that fits any dropdown, + // as this now makes it possible to apply a transition effect for it. + clip: rect(-100px, 2000px, 2000px, -100px); + transform: translateY(rem-calc(10px)); + // Reverting back our pointer-events. + pointer-events: auto; + // 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), + opacity 0.3s cubic-bezier(0.55,0,0.1,1), + // Here we make sure the clipping is set before any other transition. + clip 0s 0s; + // Don't forget to properly animate our bridge, so it keeps only between our gap. + &::after { + top: rem-calc(-10px); + } + } + } + } + } +} + +// Our app +// - - - - - - - - - - - - - - - - - - - - - - - - - @-webkit-keyframes fadeIn { 0% {opacity: 0;} @@ -17,7 +120,6 @@ $sub-color: #34495E; } html, body { -font: 100% "Open Sans", Helvetica, Arial, sans-serif; margin: 0; padding: 0; height: 100%; @@ -34,23 +136,23 @@ border: none; a { background-color: transparent; -color: $main-color; +color: $primary-color; text-decoration: none; transition: 0.2s; } h1 { -color: $main-color; +color: $primary-color; font-size: 120%; } h2 { -color: $main-color; +color: $primary-color; font-size: 110%; } h1 a, h2 a, h3 a, h1 a:hover, h2 a:hover, h3 a:hover { -color: $main-color; +color: $primary-color; } .fadein { @@ -86,17 +188,6 @@ color: #444444; } .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: $sub-color; -color: #ffffff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23); } @@ -105,13 +196,14 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23); max-width: 960px; } -.masthead { -} +.icon-bar { + vertical-align: top; +} .masthead > .container { - padding-top: 60px; - border-bottom: 20px solid $main-color; + padding-top: 20px; + border-bottom: 20px solid $primary-color; background-color: #ffffff; } @@ -170,7 +262,7 @@ font-size: 100%; .footer { width: 100%; -background-color: $sub-color; +background-color: $secondary-color; color: #ffffff; text-align: center; } diff --git a/templates/base.html b/templates/base.html index 0f202f35b..9c9dbb49c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -3,8 +3,8 @@ {% load sass_tags %} - - + + @@ -12,34 +12,110 @@ {% block head_title %}{% trans 'SAPL - Sistema de Apoio ao Processo Legislativo' %}{% endblock %} {% block head_content %} - + {# Styles #} - {# Root directory to look for SASS files is set in settings.py with SASS_PROCESSOR_ROOT #} - + {# Scripts #} {# modernizr must be in head (see http://modernizr.com/docs/#installing) #} + + {% endblock %}
- + {# Navigation #} {% block navigation %} - + {% endblock navigation %} - + {# Header #} {% block main_header %}
@@ -48,6 +124,7 @@ Logo
+ {# XXX Make better use of translation tags in html blocks ie. actually use the proper blocktrans tag efficiently #}

{{ parliament_type }} {% trans 'de' %} {{ city }} - {{ state }}

{% trans 'Sistema de Apoio ao Processo Legislativo' %}

@@ -71,7 +148,7 @@ {# Content header #} {% block base_header %}
- + {% block help %} {% if view.help_path %} {% trans 'Ajuda' %} diff --git a/templates/painel/controlador.html b/templates/painel/controlador.html new file mode 100644 index 000000000..672c86320 --- /dev/null +++ b/templates/painel/controlador.html @@ -0,0 +1,45 @@ +{% load i18n %} +{% load staticfiles %} + + + + + + + + + + {% block head_title %}{% trans 'SAPL - Sistema de Apoio ao Processo Legislativo' %}{% endblock %} + + + + + + + + STATUS SESSÃO:
+ + + +
+ + CRONÔMETROS:
+ + + +
+ + + +
+ + + +
+ + + diff --git a/templates/sessao/presenca.html b/templates/sessao/presenca.html index f17f7791f..a975c1dcc 100644 --- a/templates/sessao/presenca.html +++ b/templates/sessao/presenca.html @@ -13,11 +13,11 @@
  • Marcar/Desmarcar Todos
- {{formset}} - {% for fieldname in view.get_parlamentares %} + + {% for parlamentar, check in view.get_parlamentares %}
    -
    • -
    • +
    • +
{% endfor %}