Merge pull request civica-digital#7 from mendozagioo/master

Fix some responsive design problems in home and informationgranted views
mendozagioo · Aug 5, 2016 · d5e7c4f · d5e7c4f
2 parents 1b5c132 + 68b9977
commit d5e7c4f
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 30 deletions.
diff --git a/source/assets/javascripts/application.js b/source/assets/javascripts/application.js
@@ -53,7 +53,7 @@ function print_bar(max_height, font_size_param, fill_bar, name, container_name){
           }
         })
       .attr("y", max_height*0.25) // y position of the text inside bar
-      .attr("dx", -3) // padding-right
+      .attr("dx", 5) // padding-right
       .attr("dy", ".35em") // vertical-align: middle
       .attr("text-anchor", function(d){
         if(x(d)==max_width*0.8 && fill_bar !=100){
@@ -84,7 +84,7 @@ function print_bar(max_height, font_size_param, fill_bar, name, container_name){
         chart.append("text")
           .attr("x", max_width*0.05)
           .attr("y", max_height*0.25) // y position of the text inside bar
-          .attr("dx", -3) // padding-right
+          .attr("dx", 5) // padding-right
           .attr("dy", ".35em") // vertical-align: middle
           .attr("text-anchor", "left")// text-align: right
           .attr("font-size", font_size_param)
@@ -94,15 +94,27 @@ function print_bar(max_height, font_size_param, fill_bar, name, container_name){
     return null
   };
 
-//print_bar(Width px -int , Height px - int, fontsize-string, fill % - int, title -str, container)
-print_bar(60, "18px", 62, "","#progressbar");
-print_bar(45, "12px", 65, "Sindicatos","#r1");
-print_bar(45, "12px", 49, "Partido Político","#r2");
-print_bar(45, "12px", 39, "Municipios","#r3");
-print_bar(45, "12px", 39, "Fondos","#r4");
-print_bar(45, "12px", 31, "Ejecutivo","#r5");
-print_bar(45, "12px", 100, "Jalisco","#r6");
-print_bar(45, "12px", 76, "Oaxaca","#r7");
-print_bar(45, "12px", 71, "Puebla","#r8");
-print_bar(45, "12px", 70, "Querétaro","#r9");
-print_bar(45, "12px", 64, "Hidalgo","#r10");
+function printProgressBar() {
+  //print_bar(Width px -int , Height px - int, fontsize-string, fill % - int, title -str, container)
+  print_bar(60, "18px", 62, "","#progressbar");
+  print_bar(45, "12px", 65, "Sindicatos","#r1");
+  print_bar(45, "12px", 49, "Partido Político","#r2");
+  print_bar(45, "12px", 39, "Municipios","#r3");
+  print_bar(45, "12px", 39, "Fondos","#r4");
+  print_bar(45, "12px", 31, "Ejecutivo","#r5");
+  print_bar(45, "12px", 100, "Jalisco","#r6");
+  print_bar(45, "12px", 76, "Oaxaca","#r7");
+  print_bar(45, "12px", 71, "Puebla","#r8");
+  print_bar(45, "12px", 70, "Querétaro","#r9");
+  print_bar(45, "12px", 64, "Hidalgo","#r10");
+}
+
+printProgressBar();
+
+$(window).resize(function() {
+  $('#progressbar svg').remove();
+  $('#r1 svg, #r2 svg, #r3 svg, #r4 svg, #r5 svg').remove();
+  $('#r6 svg, #r7 svg, #r8 svg, #r9 svg, #r10 svg').remove();
+
+  printProgressBar();
+});
diff --git a/source/assets/stylesheets/application.css.scss b/source/assets/stylesheets/application.css.scss
@@ -22,7 +22,7 @@
   @media (min-width:640px) and (max-width: 779px) {
     width: 640px; padding-left:10px; padding-right:10px;
   }
-  @media (min-width:320px) and (max-width: 639px) {
+  @media (min-width:250px) and (max-width: 639px) {
     width: 100%; padding-left:10px; padding-right:10px;
   }
-}
+}
diff --git a/source/assets/stylesheets/components/_banner.scss b/source/assets/stylesheets/components/_banner.scss
@@ -11,7 +11,6 @@
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98ABD4', endColorstr='#899BC0', GradientType=1 );
 
   .text{
-    width: 70%;
     color: #fff;
     text-align: center;
     margin: 0 auto;
@@ -22,6 +21,8 @@
     background-position: top center;
     padding:120px 0 40px 0;
 
+    @media (max-width: 640px) { width: 100%; }
+    @media (min-width: 641px) { width: 70%; }
 
     h3 {
       font-size: 30px;
@@ -40,9 +41,10 @@
       background-color: $lightest-blue;
       margin: 60px 0;
       padding: 20px 40px;
-      border-radius: 30px;
+      border-radius: 50px;
       font-size: 18px;
       font-weight: 400;
+      white-space: normal;
       transition: all .5s all;
       &:hover{
         background-color: #F1227A;

diff --git a/source/assets/stylesheets/components/_infromation-granted.scss b/source/assets/stylesheets/components/_infromation-granted.scss
@@ -82,14 +82,18 @@
 
   .numbers{
     overflow: hidden;
-    display: table;
+    display: block;
     width: 100%;
     padding-bottom: 40px;
 
     .number{
-      display: table-cell;
-      width:25%;
-      height: 100%;
+      display: block;
+      float: left;
+      margin-bottom: 15px;
+
+      @media (min-width: 780px) { width:25%; }
+      @media (min-width: 545px) and (max-width: 779px) { width: 50%; }
+      @media (max-width: 544px) { width: 100% }
 
       .number-content{
         margin: 0 20px;
@@ -126,9 +130,11 @@
 
 
     .col{
-      width: 50%;
       padding-right: 60px;
       float: left;
+
+      @media (min-width: 780px) { width: 50%; }
+      @media (max-width: 779px) { width: 100%; }
       h2{
         margin: 30px 0;
       }

diff --git a/source/assets/stylesheets/components/_progressbar.scss b/source/assets/stylesheets/components/_progressbar.scss
@@ -1,10 +1,12 @@
 #progressbar {
-      border-radius: 13px; /* (height of inner div) / 2 + padding */
-      padding: 3px;
-      text-align: center;
-      margin: 30px auto;
-      clear: both;
-    }
+  border-radius: 13px; /* (height of inner div) / 2 + padding */
+  padding: 3px;
+  text-align: center;
+  margin: 30px auto;
+  clear: both;
+
+  svg { width: 82.2%; }
+}
 
   .chart rect:first-of-type {
     color: #F1F5F6;

diff --git a/source/index.html.haml b/source/index.html.haml
@@ -8,7 +8,7 @@ title: Plataforma de transparencia
       .text
         %h3=t(:title) 
         %p=t(:subtitle_html) 
-        =link_to 'Crear nueva solicitud de información','#', class:'button'
+        =link_to 'Crear nueva solicitud de información','#', class:'button button-new-request'
         %br
         =link_to 'Explora el Sistema Nacional de Transparencia','#'
         %br