Merge pull request #1015 from /issues/978/compromisos-tarjetas

Issues/978/compromisos tarjetas
ciudadanointeligente · Nov 15, 2017 · 8021271 · 8021271
2 parents bb30c8c + 4681054
commit 8021271
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 3 deletions.
diff --git a/votai_general_theme/static/sass/_2017sitio1.scss b/votai_general_theme/static/sass/_2017sitio1.scss
@@ -871,6 +871,41 @@ p.intro{
   }
 }
 
+.ribbon-wrapper-candidate {
+  width: 333px;
+  height: 288px;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  .ribbon-candidate {
+    font-weight: 700;
+    line-height: 1.2;
+    text-align: center;
+    -webkit-transform: rotate(-45deg);
+    -moz-transform:    rotate(-45deg);
+    -ms-transform:     rotate(-45deg);
+    -o-transform:      rotate(-45deg);
+    position: relative;
+    padding: 6px 0 5px 0;
+    top: 107px;
+    right: -93px;
+    width: 188px;
+    color: white;
+    word-wrap: break-word;
+    white-space: normal;
+    background-color: #FF645B;
+    border-radius: 6px;
+    span.no-commitments{
+      padding: 5px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      font-weight: 700;
+      font-family: 'Montserrat', sans-serif;
+      font-size: 13px;
+    }
+  }
+}
 /*Pasos creando propuesta*/
 .tips, .tips-invert{
   background: $grey-one;
@@ -1103,6 +1138,7 @@ label{
   }
 }
 
+/*IMAGE GALLERY*/
 .gallery {
   margin: 0 auto;
   padding: 5px;
@@ -1139,3 +1175,22 @@ label{
 .cf:after {
   clear: both;
 }
+
+/*CANDIDATE CARD*/
+.candidate-name-card{
+  font-family: 'Montserrat', sans-serif;
+  text-align: center;
+}
+
+.candidate-commitment-card{
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
+  text-align: center;
+  color: white;
+  background-color: $blue;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  padding: 5px;
+  border-radius: 6px;
+  font-size: 13px;
+}
diff --git a/votai_general_theme/static/sass/_media-2017sitio1.scss b/votai_general_theme/static/sass/_media-2017sitio1.scss
@@ -2,6 +2,15 @@
   .presidents{
     bottom: -250px;
   }
+
+  .ribbon-wrapper-candidate {
+    .ribbon-candidate {
+      padding: 6px 0 5px 0;
+      top: 84px;
+      right: -118px;
+      width: 188px;
+    }
+  }
 }
 
 @media screen and (max-width: 991px) {
@@ -70,6 +79,14 @@
   .gallery > div:hover > img {
     transform: none;
   }
+
+  .ribbon-wrapper-candidate {
+    width: 100%;
+    .ribbon-candidate {
+      right: -38%;
+      top: 47%;
+    }
+  }
 }
 
 @media screen and (max-width: 900px) {
@@ -90,6 +107,16 @@
   }
 }
 
+@media screen and (max-width: 630px) {
+  .ribbon-wrapper-candidate {
+    width: 100%;
+    .ribbon-candidate {
+      right: -36%;
+      top: 49%;
+    }
+  }
+}
+
 @media screen and (max-width: 560px) {
   #welcome{
     h1{
@@ -103,6 +130,13 @@
       font-size: 22px;
     }
   }
+  .ribbon-wrapper-candidate {
+    width: 100%;
+    .ribbon-candidate {
+      right: -27%;
+      top: 49%;
+    }
+  }
 }
 
 
@@ -156,6 +190,13 @@
   .bajada {
     margin: 0px;
   }
+  .ribbon-wrapper-candidate {
+    width: 100%;
+    .ribbon-candidate {
+      right: -23%;
+      top: 47%;
+    }
+  }
 }
 
 
@@ -182,3 +223,13 @@
     margin: 10px 0 10px;
   }
 }
+
+@media screen and (max-width: 320px) {
+  .ribbon-wrapper-candidate {
+    width: 100%;
+    .ribbon-candidate {
+      right: -19%;
+      top: 41%;
+    }
+  }
+}
diff --git a/votai_general_theme/templates/elections/election_card.html b/votai_general_theme/templates/elections/election_card.html
@@ -18,7 +18,12 @@ <h4>Comunas</h4>
   <div class="row">
     {% for candidate in election.candidates.all %}
     <div class="col-md-3">
-      <div class="panel-heading">
+      <div class="panel-heading text-center">
+        {% if not candidate.commitments.exists %}
+        <div class="ribbon-wrapper-candidate">
+          <div class="ribbon-candidate text-center"><span class="no-commitments text-center">Sin compromisos en votainteligente.cl</span></div>
+        </div>
+        {% endif %}
         {% if candidate.image %}
         {% thumbnail candidate.image "300x300" crop="center" as im %}
           <a href="{{candidate.get_absolute_url}}"><img src="{{ im.url }}" alt="{{ candidate.name }}" border="0" class="img-responsive img-circle" itemprop="image" /></a>
@@ -28,8 +33,11 @@ <h4>Comunas</h4>
         {% endif %}
       </div>
       <div class="panel panel-default">
-        <div class="panel-body">
-          <a href="{{candidate.get_absolute_url}}" itemprop="name"><h3>{{ candidate.name }}</h3></a>
+        <div class="panel-body text-center">
+          <a href="{{candidate.get_absolute_url}}" itemprop="name"><h3 class="candidate-name-card">{{ candidate.name }}</h3>
+          {% if candidate.commitments.exists %}
+            <span class="candidate-commitment-card">{{ candidate.commitments.count }} compromisos</span></a>
+          {% endif %}
         </div>
       </div>
     </div>