Merge pull request #1002 from /issues/1000/estilo-medianaranja

Issues/1000/estilo medianaranja
ciudadanointeligente · Nov 7, 2017 · 23ba504 · 23ba504
2 parents 00f467d + 24728ad
commit 23ba504
Show file tree

Hide file tree

Showing 9 changed files with 314 additions and 71 deletions.
diff --git a/votai_general_theme/static/img/logo-media-naranja.svg b/votai_general_theme/static/img/logo-media-naranja.svg
diff --git a/votai_general_theme/static/img/mano.svg b/votai_general_theme/static/img/mano.svg
diff --git a/votai_general_theme/static/sass/_2017sitio1.scss b/votai_general_theme/static/sass/_2017sitio1.scss
@@ -958,3 +958,84 @@ label{
 .candidate-diary{
   color: $grey-one;
 }
+
+/*MEDIA NARANJA*/
+.media-naranja{
+  background-color: #E2F4FF;
+  padding-top: 60px;
+}
+
+.naranja-form{
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  margin-bottom: 60px;
+  h1{
+    text-transform: none;
+    letter-spacing: 0;
+  }
+  .checkbox label, .radio label{
+    font-family: 'Nunito', sans-serif;
+    text-transform: none;
+    letter-spacing: 0;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 1;
+  }
+  .badge{
+    font-size: 30px;
+    color: $grey-one;
+    background-color: $blue-light;
+    border-radius: 45px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-family: 'Montserrat', sans-serif;
+    padding: 4px 13px;
+  }
+  .label-default{
+    background-color: $blue;
+    color: white;
+    padding: 2px 5px;
+    font-family: 'Montserrat', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 11px;
+    border-radius: 5px;
+  }
+  .label-warning{
+    @extend .label-default;
+    background-color: $yellow;
+  }
+  .pregunta{
+    border: 3px solid $blue-light;
+    border-radius: 10px;
+    padding: 15px;
+    margin-bottom: 20px;
+  }
+  .candidate-result-name{
+    font-family: 'Arvo', sans-serif;
+    font-weight: 700;
+    color: $grey-one;
+    a{
+      color: $grey-one;
+      &:hover{
+        color: $blue;
+      }
+    }
+  }
+  .candidate-result-value{
+    font-family: 'Arvo', serif;
+    font-size: 30px;
+    font-weight: 700;
+    margin: 10px 0 10px;
+  }
+}
+
+.mano{
+  background-image: url("../img/mano.svg");
+  min-height: 410px;
+  background-repeat: no-repeat;
+  background-position: 90%;
+  margin-bottom: -70px;
+  margin-top: -40px;
+}
diff --git a/votai_general_theme/static/sass/_media-2017sitio1.scss b/votai_general_theme/static/sass/_media-2017sitio1.scss
@@ -57,6 +57,16 @@
   .share-detail a .fa-stack:hover {
       color: $grey-one;
   }
+
+  .naranja-form{
+    .candidate-result-value{
+      margin: 60px 0 10px;
+    }
+  }
+
+  .mano{
+    display: none;
+  }
 }
 
 @media screen and (max-width: 900px) {

diff --git a/votai_general_theme/templates/medianaranja2/base.html b/votai_general_theme/templates/medianaranja2/base.html
@@ -10,16 +10,27 @@
 {% block navbar %}
 {% endblock navbar %}
 
-{% block content %}
-<div class="content medianaranja">
-  <div class="text-width">
-    <h1 class="ribbon-medianaranja text-center">Media Naranja</h1>
-    <div class="text-center paso_title">
-      Paso <span class="badge">{{wizard.steps.step1}}</span>
+{% block everything %}
+<section class="media-naranja">
+<div class="container">
+  <div class="row">
+    <div class="col-md-4 col-md-offset-2">
+      <img src="{% static 'img/logo-media-naranja.svg' %}" alt="Media Naranja Política">
+    </div>
+    <div class="col-md-4 mano">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-10 col-md-offset-1 naranja-form">
+      <div class="text-center paso_title">
+        {% block paso %}
+        <h1>Paso <span class="badge">{{wizard.steps.step1}}</span></h1>
+        {% endblock paso %}
+      </div>
+      {% block questions %}
+      {% endblock questions %}
     </div>
   </div>
-
-  {% block questions %}
-  {% endblock questions %}
 </div>
-{% endblock content %}
+</section>
+{% endblock everything %}
diff --git a/votai_general_theme/templates/medianaranja2/paso_0_setup.html b/votai_general_theme/templates/medianaranja2/paso_0_setup.html
@@ -8,9 +8,6 @@
 
 {% block questions %}
 
-
-  <p>Para poder decirte con qué candidatura eres más compatible, necesitamos conocer un poco de ti.</p>
-
   <form method="post" enctype="multipart/form-data">
   {% csrf_token %}
   {{ wizard.form.media }}
@@ -22,7 +19,7 @@
   <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}" class="btn btn-default" onclick="ga('send','event','primer-paso-{{wizard.steps.step1}}-media-naranja','click')">{% trans "first step" %}</button>
   <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}" class="btn btn-default" onclick="ga('send','event','anterior-paso-{{wizard.steps.step1}}-media-naranja','click')">{% trans "prev step" %}</button>
   {% endif %}
-  <input type="submit" name="submit" value="{% trans "Paso Siguiente" %}" class="btn btn-success " onclick="ga('send','event','siguiente-paso-{{wizard.steps.step1}}-media-naranja','click')" />
+  <input type="submit" name="submit" value="{% trans "Paso Siguiente" %}" class="btn btn-success pull-right" onclick="ga('send','event','siguiente-paso-{{wizard.steps.step1}}-media-naranja','click')" />
   </form>
 
 <script type="text/javascript">
@@ -31,4 +28,3 @@
 });
 </script>
 {% endblock questions %}
-
diff --git a/votai_general_theme/templates/medianaranja2/paso_1_preguntas_y_respuestas.html b/votai_general_theme/templates/medianaranja2/paso_1_preguntas_y_respuestas.html
@@ -15,20 +15,19 @@
   {{ wizard.management_form }}
   {% for field in wizard.form %}
   <div class="pregunta">
+    <span class="label-default">Economía y desarrollo</span>
     {% bootstrap_field field %}
   </div>
   {% endfor %}
 
   {% if wizard.steps.prev %}
-  <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}" class="btn btn-default" onclick="ga('send','event','primer-paso-{{wizard.steps.step1}}-media-naranja','click')">{% trans "first step" %}</button>
   <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}" class="btn btn-default" onclick="ga('send','event','anterior-paso-{{wizard.steps.step1}}-media-naranja','click')">{% trans "prev step" %}</button>
   {% endif %}
-<input type="submit" name="submit" value="{% trans "Paso Siguiente" %}" class="btn btn-success " onclick="ga('send','event','siguiente-paso-{{wizard.steps.step1}}-media-naranja','click')" />
+<input type="submit" name="submit" value="{% trans "Paso Siguiente" %}" class="btn btn-success pull-right" onclick="ga('send','event','siguiente-paso-{{wizard.steps.step1}}-media-naranja','click')"/>
   </form>
 <script type="text/javascript">
 $(function(){
    $("select").chosen({no_results_text: "Oh! no pillamos eso!"});
 });
 </script>
 {% endblock questions %}
-
diff --git a/votai_general_theme/templates/medianaranja2/paso_2_proposals_list.html b/votai_general_theme/templates/medianaranja2/paso_2_proposals_list.html
@@ -25,23 +25,20 @@
 
 
   {% if wizard.steps.prev %}
-  <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}" class="btn btn-default" onclick="ga('send','event','primer-paso-{{wizard.steps.step1}}-media-naranja','click')">{% trans "first step" %}</button>
   <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}" class="btn btn-default" onclick="ga('send','event','anterior-paso-{{wizard.steps.step1}}-media-naranja','click')">{% trans "prev step" %}</button>
   {% endif %}
-<input type="submit" name="submit" value="{% trans "Paso Siguiente" %}" class="btn btn-success " onclick="ga('send','event','siguiente-paso-{{wizard.steps.step1}}-media-naranja','click')" />
+<input type="submit" name="submit" value="{% trans "Paso Siguiente" %}" class="btn btn-success pull-right" onclick="ga('send','event','siguiente-paso-{{wizard.steps.step1}}-media-naranja','click')" />
   </form>
   <script type="text/javascript">
   $(function(){
 
     $("input[type=checkbox][name={{wizard.steps.current}}-{{wizard.form.proposals.name}}]").click(function() {
 
-        var bol = $("input[type=checkbox][name={{wizard.steps.current}}-{{wizard.form.proposals.name}}]:checked").length >= {{config.MEDIA_NARANJA_MAX_SELECT_PROPOSALS}};     
+        var bol = $("input[type=checkbox][name={{wizard.steps.current}}-{{wizard.form.proposals.name}}]:checked").length >= {{config.MEDIA_NARANJA_MAX_SELECT_PROPOSALS}};
         $("input[type=checkbox][name={{wizard.steps.current}}-{{wizard.form.proposals.name}}]").not(":checked").attr("disabled",bol);
 
     });
   });
-  
+
   </script>
 {% endblock questions %}
-
-
diff --git a/votai_general_theme/templates/medianaranja2/resultado.html b/votai_general_theme/templates/medianaranja2/resultado.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "medianaranja2/base.html" %}
 {% load staticfiles %}
 {% load i18n %}
 {% load thumbnail %}
@@ -10,75 +10,71 @@
 {% block navbar %}
 {% endblock navbar %}
 
-{% block content %}
-<div class="content">
-  <h1 class="ribbon-medianaranja text-center">Media Naranja</h1>
-  <h2 class="page-header text-center">Resultado</h2>
+{% block paso %}
+<h1>Resultados</h1>
+{% endblock paso %}
 
-  <p>Además de entregarte quién es el candidato que más te representa, tenemos algunas organizaciones que quizás puedan ser de tu interés.</p>
-
-  {% if organizations.all %}
-  <div>
-    <h3>Organizaciones</h3>
-    <ul class="list-unstyled text-center">
+{% block questions %}
+<p>Además de entregarte quién es el candidato que más te representa, tenemos algunas organizaciones que quizás puedan ser de tu interés.</p>
+{% if organizations.all %}
+<div class="col-md-12">
+  <h3>Organizaciones</h3>
     {% for o in organizations.all %}
-      <li>
+    <div class="col-md-4 text-center">
         {% if o.logo_small %}
-          <a href="{{o.get_absolute_url}}"><img src="{{o.logo_small.url}}" alt="{{o.title}}" title="{{o.title}}" class="img-responsive"></img></a>
+        <a href="{{o.get_absolute_url}}"><img src="{{o.logo_small.url}}" alt="{{o.title}}" title="{{o.title}}" height="96" width="96" border="0" class="img-circle"></img></a>
         {% endif %}
         <ul class="list-unstyled list-inline">
           {% if o.org_url %}
-            <li><a href="{{o.org_url}}"><i class="fa fa-globe" aria-label="Website"></i></a></li>
+          <li><a href="{{o.org_url}}"><i class="fa fa-globe" aria-label="Website"></i></a></li>
           {% endif %}
           {% if o.facebook %}
-            <li><a href="{{o.facebook}}"><i class="fa fa-facebook" aria-label="Facebook"></i></a></li>
+          <li><a href="{{o.facebook}}"><i class="fa fa-facebook" aria-label="Facebook"></i></a></li>
           {% endif %}
           {% if o.twitter %}
-            <li><a href="{{o.twitter}}"><i class="fa fa-twitter" aria-label="Twitter"></i></a></li>
+          <li><a href="{{o.twitter}}"><i class="fa fa-twitter" aria-label="Twitter"></i></a></li>
           {% endif %}
           {% if o.instagram %}
-            <li><a href="{{o.instagram}}"><i class="fa fa-instagram" aria-label="Instagram"></i></a></li>
+          <li><a href="{{o.instagram}}"><i class="fa fa-instagram" aria-label="Instagram"></i></a></li>
           {% endif %}
           {% if o.rss_url %}
-            <li><a href="{{o.rss_url}}"><i class="fa fa-rss" aria-label="RSS"></i></a></li>
+          <li><a href="{{o.rss_url}}"><i class="fa fa-rss" aria-label="RSS"></i></a></li>
           {% endif %}
         </ul>
-      </li>
+    </div>
     {% endfor %}
-    </ul>
-  </div>
-  {% endif %}
+</div>
+<hr>
+{% endif %}
 
 
-  {% for election_result in results %}
-  <div>
-    <h3>{{election_result.election}}</h3>
-    <ul class="list-unstyled text-center">
-    {% for candidate_result in election_result.candidates %}
-      <li>
-        <a href="{{candidate_result.candidate.get_absolute_url}}">
-          {% if candidate_result.candidate.image %}
-            {% thumbnail candidate_result.candidate.image "100x100" crop="center" as im %}
-              <img src="{{ im.url }}" alt="{{candidate_result.candidate.name}}" height="96" width="96" border="0" class="img-circle">
-            {% endthumbnail %}
-          {% else %}
-            <img src="{% static 'img/candidate-default.jpg' %}" alt="{{candidate_result.candidate.name}}" height="96" width="96" border="0" class="img-circle">
-          {% endif %}
-        </a>
-        <p><a href="{{candidate_result.candidate.get_absolute_url}}">{{candidate_result.candidate}}</a></p>
-        {% get_personal_data candidate=candidate_result.candidate personal_data='Partido' as partido %}
+{% for election_result in results %}
+<div class="col-md-12">
+  <h3>{{election_result.election}}</h3>
+  {% for candidate_result in election_result.candidates %}
+  <div class="col-md-4 text-center">
+      <div class="text-center candidate-result-value">{{ candidate_result.value }}%</div>
+      <a href="{{candidate_result.candidate.get_absolute_url}}">
+      {% if candidate_result.candidate.image %}
+        {% thumbnail candidate_result.candidate.image "100x100" crop="center" as im %}
+        <img src="{{ im.url }}" alt="{{candidate_result.candidate.name}}" height="96" width="96" border="0" class="img-circle">
+        {% endthumbnail %}
+      {% else %}
+        <img src="{% static 'img/candidate-default.jpg' %}" alt="{{candidate_result.candidate.name}}" height="96" width="96" border="0" class="img-circle">
+      {% endif %}
+      </a>
+      <p class="candidate-result-name"><a href="{{candidate_result.candidate.get_absolute_url}}">{{candidate_result.candidate}}</a></p>
+      {% get_personal_data candidate=candidate_result.candidate personal_data='Partido' as partido %}
         {% if partido.value %}
-        <p>{{partido.value}}</p>
+        <span class="label-default">{{partido.value}}</span>
         {% endif %}
         {% get_personal_data candidate=candidate_result.candidate personal_data='Pacto' as pacto %}
         {% if pacto.value %}
-        <p>{{pacto.value}}</p>
+        <span class="label-warning">{{pacto.value}}</span>
         {% endif %}
-
-      </li>
-    {% endfor %}
-    </ul>
-  </div>
+    </div>
   {% endfor %}
 </div>
-{% endblock content %}
+<hr>
+{% endfor %}
+{% endblock questions %}