From 7cb14fc49795255f298cd3db92953439d1d0acc9 Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@serpro.gov.br>
Date: Tue, 12 Jan 2016 16:01:04 -0200
Subject: [PATCH] Fixes #119. Fix image position and button overlaping text.

---
 src/app/pages/programas/programa.controller.js | 24 +++++++++++-------------
 src/app/pages/programas/programa.html          | 20 ++++++++++++++++----
 src/app/pages/programas/programas.scss         | 25 +++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/src/app/pages/programas/programa.controller.js b/src/app/pages/programas/programa.controller.js
index be2886c..1f77e00 100644
--- a/src/app/pages/programas/programa.controller.js
+++ b/src/app/pages/programas/programa.controller.js
@@ -98,6 +98,17 @@
         vm.proposalsTopRated = vm.proposals.slice(0, 3);
         vm.loadingTopProposals = false;
 
+        // HACK: get image from body 'proposal'
+        // remove tags html
+        for (var j = vm.proposalsTopRated.length - 1; j >= 0; j--) {
+          var proposalTopRated = vm.proposalsTopRated[j];
+          if (proposalTopRated && proposalTopRated.body && proposalTopRated.body.length > 0) {
+            proposalTopRated.body = String(proposalTopRated.body).replace(/<[^>]+>/gm, '');
+          }else{
+            proposalTopRated.body = vm.banner.src;
+          }
+        }
+
         if (vm.article.archived) {
 
           // show 'respostas e compromissos',
@@ -121,19 +132,6 @@
 
             // set focus at proposal, ASYNC
             vm.$rootScope.findElAsyncAndFocus('.sub-section-' + proposal_id);
-
-            // TODO: load and show proposal response
-          }
-        }
-
-        // HACK: get image from body 'proposal'
-        // remove tags html
-        for (var j = vm.proposalsTopRated.length - 1; j >= 0; j--) {
-          var proposalTopRated = vm.proposalsTopRated[j];
-          if (proposalTopRated && proposalTopRated.body && proposalTopRated.body.length > 0) {
-            proposalTopRated.body = String(proposalTopRated.body).replace(/<[^>]+>/gm, '');
-          }else{
-            proposalTopRated.body = vm.banner.src;
           }
         }
 
diff --git a/src/app/pages/programas/programa.html b/src/app/pages/programas/programa.html
index 860b53f..20fe4aa 100644
--- a/src/app/pages/programas/programa.html
+++ b/src/app/pages/programas/programa.html
@@ -242,7 +242,7 @@
                     <div class="sub-section sub-section-{{::proposal.id}}" ng-class="{'sub-section-even': ( ($index+1) % 2 === 0), 'sub-section-odd': ( ($index+1) % 2 === 1)}">
                         <div class="container">
                             <div class="row">
-                                <div class="col-sm-4 col-md-3">
+                                <div class="col-xs-6 col-sm-4 col-md-3">
                                     <div class="img-mask--container" ng-style="{'background-image':'url( {{::proposal.body}} )'}">
                                         <div class="img-mask--background ng-scope">
                                             <div class="icon icon-programa-respondido">
@@ -253,11 +253,24 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-sm-8 col-md-9">
+                                <div class="col-xs-6 col-sm-8 col-md-9">
                                     <br>
                                     <h3 class="color-theme-fg">{{($index+1)}}ª proposta mais votada:</h3>
                                     <p>{{::proposal.abstract}}</p>
-                                    <div class="button--themed">
+                                    <div class="hidden-xs">
+                                        <div class="button--themed" style="margin: 10px 0;">
+                                            <button class="btn btn-block btn-responsive" ng-click="pagePrograma.toggleResponseVisibility(proposal)">
+                                                Veja a resposta e o compromisso do governo
+                                                <div class="button-left-icon">
+                                                    <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg" aria-hidden="true"></span>
+                                                </div>
+                                            </button>
+                                        </div>
+                                        <br>
+                                    </div>
+                                </div>
+                                <div class="col-xs-12 visible-xs">
+                                    <div class="button--themed" style="margin: 10px 0;">
                                         <button class="btn btn-block btn-responsive" ng-click="pagePrograma.toggleResponseVisibility(proposal)">
                                             Veja a resposta e o compromisso do governo
                                             <div class="button-left-icon">
@@ -265,7 +278,6 @@
                                             </div>
                                         </button>
                                     </div>
-                                    <br>
                                 </div>
                             </div>
                         </div>
diff --git a/src/app/pages/programas/programas.scss b/src/app/pages/programas/programas.scss
index 42a4d9b..c1c31a7 100644
--- a/src/app/pages/programas/programas.scss
+++ b/src/app/pages/programas/programas.scss
@@ -271,6 +271,29 @@
 
         .gov-response {
             background-color: #e1e1e1;
+
+            &--link-list .btn{
+
+                @media screen and (max-width: $screen-xs) {
+                    padding-right: 50px;
+                    padding-left: 15px;
+                }
+
+            }
+        }
+
+
+        .icon-programa-respondido {
+            @media screen and (max-width: $screen-xs) {
+                transform: scale(0.6);
+                margin-left: -10px;
+            }
+        }
+
+        .img-mask--container {
+            @media screen and (max-width: $screen-xs) {
+                min-width: 145px;
+            }
         }
 
         .button--themed {
@@ -285,6 +308,8 @@
             .btn-responsive {
                 white-space: normal !important;
                 word-wrap: break-word;
+                padding-right: 40px;
+                padding-left: 15px;
             }
         }
 
--
libgit2 0.21.2