From c62e13bf4952196ab8de339ae522f8c45cb1881d Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@serpro.gov.br>
Date: Thu, 17 Sep 2015 15:08:53 -0300
Subject: [PATCH] Style: program

---
 src/app/pages/programas/programa.html  | 137 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------
 src/app/pages/programas/programas.scss | 150 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------
 2 files changed, 168 insertions(+), 119 deletions(-)

diff --git a/src/app/pages/programas/programa.html b/src/app/pages/programas/programa.html
index 14eebb4..214f9c5 100644
--- a/src/app/pages/programas/programa.html
+++ b/src/app/pages/programas/programa.html
@@ -23,89 +23,98 @@
       <div class="container">
         <div class="row">
           <article class="program-preview">
-              <!-- Preview > Titulo -->
-              <div class="col-md-12">
-                <h1 class="program-preview--title color-theme-fg">{{::pagePrograma.article.title}}</h1>
-              </div>
-              <!-- Preview > coluna da esquerda -->
-              <div class="col-md-8">
-                <div class="program-preview--box contraste-box">
-                  <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pagePrograma.banner.src}} )'}"></div>
-                  <div class="program-preview--box--content-wrapper">
-                    <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pagePrograma.category.slug">
-                      <span class="icon" ng-class="'icon-tema-' + pagePrograma.category.slug"></span>
-                    </div>
-                    <div class="program-preview--abstract color-theme-fg">
-                      <h2>{{::stripHtml(pagePrograma.article.abstract)}}</h2>
-                    </div>
-                    <div class="program-preview--abstract-details">
-                      <p>Lorem ipsum dolor sit amet, ea veniam mucius ocurreret vix, ius ex nisl vidisse partiendo. Blandit nominavi cum ei, paulo quaestio his ei, eum minim salutandi in. Civibus albucius in quo, et eam posse facilisis. Debet suavitate sea ut, his ei feugiat fastidii eleifend. Quo ex quando maiestatis voluptatum, mel te perpetua maiestatis, sit ceteros legendos deserunt ea. Enim dolores moderatius eu pro, ad quo ignota aliquid meliore.</p>
-                    </div>
-                    <div class="program-preview--share">
-                      <div class="program-preview--share-label">Compartilhe este programa:</div>
-                      <social-share class="program-preview--share-directive"></social-share>
+            <!-- Preview > Titulo -->
+            <div class="col-md-12">
+              <h1 class="program-preview--title color-theme-fg">{{::pagePrograma.article.title}}</h1>
+            </div>
+            <!-- Preview > coluna da esquerda -->
+            <div class="col-md-8">
+              <div class="program-preview--box contraste-box">
+                <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pagePrograma.banner.src}} )'}"></div>
+                <div class="program-preview--box--content-wrapper">
+                  <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pagePrograma.category.slug">
+                    <span class="icon" ng-class="'icon-tema-' + pagePrograma.category.slug"></span>
+                  </div>
+                  <div class="program-preview--abstract color-theme-fg">
+                    <h2>{{::stripHtml(pagePrograma.article.abstract)}}</h2>
+                  </div>
+                  <div class="program-preview--abstract-details">
+                    <p>Lorem ipsum dolor sit amet, ea veniam mucius ocurreret vix, ius ex nisl vidisse partiendo. Blandit nominavi cum ei, paulo quaestio his ei, eum minim salutandi in. Civibus albucius in quo, et eam posse facilisis. Debet suavitate sea ut, his ei feugiat fastidii eleifend. Quo ex quando maiestatis voluptatum, mel te perpetua maiestatis, sit ceteros legendos deserunt ea. Enim dolores moderatius eu pro, ad quo ignota aliquid meliore.</p>
+                  </div>
+                  <div class="program-preview--share">
+                    <div class="program-preview--share-label">COMPARTILHE ESTE <b>PROGRAMA</b></div>
+                    <div class="dropdown">
+                      <button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>
+                      <social-share
+                        url=""
+                        text=""
+                        image=""
+                        arrow-class="social-share--arrow"
+                        class="dropdown-menu dropdown-menu-right"
+                        ></social-share>
                     </div>
-                    <div class="program-preview--make-proposal">
-                      <div class="row">
-                        <div class="col-sm-6">
-                          <div class="button--themed">
-                            <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>
-                          </div>
+                  </div>
+                  <div class="program-preview--make-proposal">
+                    <div class="row">
+                      <div class="col-sm-6">
+                        <div class="button--themed">
+                          <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-              <!-- Preview > coluna da direita -->
-              <div class="col-md-4">
-                <div class="row">
+            </div>
+            <!-- Preview > coluna da direita -->
+            <div class="col-md-4">
+              <div class="row">
 
-                  <!-- Top Proposals -->
-                  <div>
-                    <!-- Loading Top Proposals -->
-                    <div ng-if="pagePrograma.loadingTopProposals">
-                      <div class="alert alert-info" role="alert">
-                        Carregando propostas mais votadas...
-                      </div>
+                <!-- Top Proposals -->
+                <div>
+                  <!-- Loading Top Proposals -->
+                  <div ng-if="pagePrograma.loadingTopProposals">
+                    <div class="alert alert-info" role="alert">
+                      Carregando propostas mais votadas...
                     </div>
+                  </div>
 
-                    <!-- Top Proposals > Carousel -->
-                    <div class="col-xs-12" ng-if="!pagePrograma.loadingTopProposals && pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0">
-                      <h3 class="color-theme-fg">Propostas mais votadas</h3>
-                      <proposal-carousel proposals="pagePrograma.proposalsTopRated"></proposal-carousel>
-                    </div>
+                  <!-- Top Proposals > Carousel -->
+                  <div class="col-xs-12" ng-if="!pagePrograma.loadingTopProposals && pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0">
+                    <h3 class="color-theme-fg">Propostas mais votadas</h3>
+                    <proposal-carousel proposals="pagePrograma.proposalsTopRated"></proposal-carousel>
                   </div>
+                </div>
 
-                  <!-- Proposal Box -->
-                  <div>
-                    <div class="col-xs-12" ng-if="!pagePrograma.loadingProposalBox && pagePrograma.randomProposal" ng-class="{'focused-proposal': !!pagePrograma.search.proposal_id}">
-                      <h3 class="color-theme-fg">Apoie outras propostas</h3>
-                      <proposal-box proposal="pagePrograma.randomProposal" topic="pagePrograma.article" category="pagePrograma.category" can-vote="true" focus="{{pagePrograma.search.proposal_id}}" ></proposal-box>
-                    </div>
+                <!-- Proposal Box -->
+                <div>
+                  <div class="col-xs-12" ng-if="!pagePrograma.loadingProposalBox && pagePrograma.randomProposal" ng-class="{'focused-proposal': !!pagePrograma.search.proposal_id}">
+                    <h3 class="color-theme-fg">Apoie outras propostas</h3>
+                    <proposal-box proposal="pagePrograma.randomProposal" topic="pagePrograma.article" category="pagePrograma.category" can-vote="true" focus="{{pagePrograma.search.proposal_id}}" ></proposal-box>
+                  </div>
 
-                    <!-- Loading Proposal Box -->
-                    <div ng-if="pagePrograma.loadingProposalBox">
-                      <div class="alert alert-info" role="alert">
-                        Carregando propostas nesse programa...
-                      </div>
+                  <!-- Loading Proposal Box -->
+                  <div ng-if="pagePrograma.loadingProposalBox">
+                    <div class="alert alert-info" role="alert">
+                      Carregando propostas nesse programa...
                     </div>
                   </div>
+                </div>
 
-                  <!-- No Proposals? okay! -->
-                  <div ng-if="!pagePrograma.loadingTopProposals && !pagePrograma.loadingProposalBox">
-                    <div class="col-xs-12" ng-if="!pagePrograma.randomProposal && !(pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0)">
-                      <h3>Programas sem propostas</h3>
-                      <p>
-                        Este programa ainda não possui nenhuma proposta.
-                        <div class="button--themed">
-                          <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>
-                        </div>
-                      </p>
-                    </div>
+                <!-- No Proposals? okay! -->
+                <div ng-if="!pagePrograma.loadingTopProposals && !pagePrograma.loadingProposalBox">
+                  <div class="col-xs-12" ng-if="!pagePrograma.randomProposal && !(pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0)">
+                    <h3>Programas sem propostas</h3>
+                    <p>
+                      Este programa ainda não possui nenhuma proposta.
+                      <div class="button--themed">
+                        <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>
+                      </div>
+                    </p>
                   </div>
                 </div>
               </div>
+            </div>
           </article>
         </div>
       </div>
diff --git a/src/app/pages/programas/programas.scss b/src/app/pages/programas/programas.scss
index 0a39875..5cff315 100644
--- a/src/app/pages/programas/programas.scss
+++ b/src/app/pages/programas/programas.scss
@@ -7,81 +7,121 @@
     }
 }
 
-.program-preview {
+.page--program {
 
-    .program-preview--box {
-        position: relative;
-        background-color: #f1f1f1;
-    }
+    .program-preview {
 
-    .program-preview--banner {
-        width: 100%;
-        height: 400px;
+        .program-preview--box {
+            position: relative;
+            background-color: #f1f1f1;
+        }
 
-        background-position: center;
-        background-size: cover;
-        background-repeat: no-repeat;
+        .program-preview--banner {
+            width: 100%;
+            height: 400px;
 
+            background-position: center;
+            background-size: cover;
+            background-repeat: no-repeat;
 
 
-        @media screen and (max-width: $screen-xs) {
-            // height: 15px;
 
-            // .video {
-            //     height: 290px;
-            // }
-        }
-    }
+            @media screen and (max-width: $screen-xs) {
+                // height: 15px;
 
-    .program-preview--icon {
-        $icon-size: 98px;
-        $icon-scale: 0.7;
-        position: absolute;
-        top: (-1) * ($icon-size / 2);
-        left: 40px;
+                // .video {
+                //     height: 290px;
+                // }
+            }
+        }
 
-        width: $icon-size * $icon-scale + 20px;
-        height: $icon-size * $icon-scale + 20px;
+        .program-preview--icon {
+            $icon-size: 80px;
+            $icon-scale: 0.7;
+            position: absolute;
+            top: (-1) * ($icon-size / 2);
+            left: 40px;
+
+            width: $icon-size * $icon-scale + 25px;
+            height: $icon-size * $icon-scale + 25px;
+
+            .icon {
+                display: block;
+                position: relative;
+                top: -2px;
+                left: -2px;
+            }
+
+            .contraste & {
+                border: 1px solid #fff;
+            }
+        }
 
-        .icon {
-            display: block;
+        .program-preview--box--content-wrapper {
+            padding: 48px;
             position: relative;
-            top: -8px;
-            left: -8px;
-            // transform: scale($icon-scale);
         }
 
-        .contraste & {
-            border: 1px solid #fff;
+        .program-preview--abstract {
+            h2 {
+                margin-top: 22px; // parent.margin + this.margin = 48 + 22 = 72px;
+                margin-bottom: 32px;
+            }
         }
-    }
 
-    .program-preview--box--content-wrapper {
-        padding: 40px;
-        position: relative;
-    }
+        .program-preview--abstract-details {
+            p {
+                color: #484848;
+                font-size: 14px;
+                line-height: 18px;
+                margin-bottom: 25px;
+            }
+        }
 
-    .program-preview--share-label,
-    .program-preview--share-directive {
-        display: inline-block;
-        vertical-align: middle;
-    }
+        .program-preview--share {
+            margin-bottom: 20px;
+            position: relative;
+            .dropdown {
+                display: inline-block;
+                position: relative;
+            }
+
+            .dropdown-menu {
+                padding: 0;
+                margin: 0;
+            }
+
+            .social-share {
+                background-color: #fff;
+            }
+
+            .social-share--arrow {
+                border-bottom-color: #fff;
+            }
+        }
 
-    .program-preview--abstract h2 {
-        font-size: 40px;
-    }
+        .program-preview--share-label,
+        .program-preview--share-directive {
+            display: inline-block;
+            vertical-align: middle;
+        }
 
-    h2,
-    h3{
-        font-weight: bold;
-    }
+        h1 {
+            font-size: 38px;
+            line-height: 40px;
+            font-weight: 900;
+        }
 
-    h3 {
-        margin-top: 0;
-    }
-}
+        h2 {
+            font-size: 32px;
+            line-height: 36px;
+            font-weight: bold;
+        }
 
-.page--program {
+        h3 {
+            margin-top: 0;
+        }
+    }
 
     .btn-close {
         position: absolute;
--
libgit2 0.21.2