Download as
Browse Code »

Commit c62e13bf4952196ab8de339ae522f8c45cb1881d

Authored by Leonardo Merlin
1 parent c6be5283
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Style: program

Showing 2 changed files with 168 additions and 119 deletions   Show diff stats
src/app/pages/programas/programa.html
  Diff comments   View file @c62e13b
... ... @@ -23,89 +23,98 @@
23 23 <div class="container">
24 24 <div class="row">
25 25 <article class="program-preview">
26   - <!-- Preview > Titulo -->
27   - <div class="col-md-12">
28   - <h1 class="program-preview--title color-theme-fg">{{::pagePrograma.article.title}}</h1>
29   - </div>
30   - <!-- Preview > coluna da esquerda -->
31   - <div class="col-md-8">
32   - <div class="program-preview--box contraste-box">
33   - <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pagePrograma.banner.src}} )'}"></div>
34   - <div class="program-preview--box--content-wrapper">
35   - <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pagePrograma.category.slug">
36   - <span class="icon" ng-class="'icon-tema-' + pagePrograma.category.slug"></span>
37   - </div>
38   - <div class="program-preview--abstract color-theme-fg">
39   - <h2>{{::stripHtml(pagePrograma.article.abstract)}}</h2>
40   - </div>
41   - <div class="program-preview--abstract-details">
42   - <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>
43   - </div>
44   - <div class="program-preview--share">
45   - <div class="program-preview--share-label">Compartilhe este programa:</div>
46   - <social-share class="program-preview--share-directive"></social-share>
  26 + <!-- Preview > Titulo -->
  27 + <div class="col-md-12">
  28 + <h1 class="program-preview--title color-theme-fg">{{::pagePrograma.article.title}}</h1>
  29 + </div>
  30 + <!-- Preview > coluna da esquerda -->
  31 + <div class="col-md-8">
  32 + <div class="program-preview--box contraste-box">
  33 + <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pagePrograma.banner.src}} )'}"></div>
  34 + <div class="program-preview--box--content-wrapper">
  35 + <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pagePrograma.category.slug">
  36 + <span class="icon" ng-class="'icon-tema-' + pagePrograma.category.slug"></span>
  37 + </div>
  38 + <div class="program-preview--abstract color-theme-fg">
  39 + <h2>{{::stripHtml(pagePrograma.article.abstract)}}</h2>
  40 + </div>
  41 + <div class="program-preview--abstract-details">
  42 + <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>
  43 + </div>
  44 + <div class="program-preview--share">
  45 + <div class="program-preview--share-label">COMPARTILHE ESTE <b>PROGRAMA</b></div>
  46 + <div class="dropdown">
  47 + <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>
  48 + <social-share
  49 + url=""
  50 + text=""
  51 + image=""
  52 + arrow-class="social-share--arrow"
  53 + class="dropdown-menu dropdown-menu-right"
  54 + ></social-share>
47 55 </div>
48   - <div class="program-preview--make-proposal">
49   - <div class="row">
50   - <div class="col-sm-6">
51   - <div class="button--themed">
52   - <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>
53   - </div>
  56 + </div>
  57 + <div class="program-preview--make-proposal">
  58 + <div class="row">
  59 + <div class="col-sm-6">
  60 + <div class="button--themed">
  61 + <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>
54 62 </div>
55 63 </div>
56 64 </div>
57 65 </div>
58 66 </div>
59 67 </div>
60   - <!-- Preview > coluna da direita -->
61   - <div class="col-md-4">
62   - <div class="row">
  68 + </div>
  69 + <!-- Preview > coluna da direita -->
  70 + <div class="col-md-4">
  71 + <div class="row">
63 72  
64   - <!-- Top Proposals -->
65   - <div>
66   - <!-- Loading Top Proposals -->
67   - <div ng-if="pagePrograma.loadingTopProposals">
68   - <div class="alert alert-info" role="alert">
69   - Carregando propostas mais votadas...
70   - </div>
  73 + <!-- Top Proposals -->
  74 + <div>
  75 + <!-- Loading Top Proposals -->
  76 + <div ng-if="pagePrograma.loadingTopProposals">
  77 + <div class="alert alert-info" role="alert">
  78 + Carregando propostas mais votadas...
71 79 </div>
  80 + </div>
72 81  
73   - <!-- Top Proposals > Carousel -->
74   - <div class="col-xs-12" ng-if="!pagePrograma.loadingTopProposals && pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0">
75   - <h3 class="color-theme-fg">Propostas mais votadas</h3>
76   - <proposal-carousel proposals="pagePrograma.proposalsTopRated"></proposal-carousel>
77   - </div>
  82 + <!-- Top Proposals > Carousel -->
  83 + <div class="col-xs-12" ng-if="!pagePrograma.loadingTopProposals && pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0">
  84 + <h3 class="color-theme-fg">Propostas mais votadas</h3>
  85 + <proposal-carousel proposals="pagePrograma.proposalsTopRated"></proposal-carousel>
78 86 </div>
  87 + </div>
79 88  
80   - <!-- Proposal Box -->
81   - <div>
82   - <div class="col-xs-12" ng-if="!pagePrograma.loadingProposalBox && pagePrograma.randomProposal" ng-class="{'focused-proposal': !!pagePrograma.search.proposal_id}">
83   - <h3 class="color-theme-fg">Apoie outras propostas</h3>
84   - <proposal-box proposal="pagePrograma.randomProposal" topic="pagePrograma.article" category="pagePrograma.category" can-vote="true" focus="{{pagePrograma.search.proposal_id}}" ></proposal-box>
85   - </div>
  89 + <!-- Proposal Box -->
  90 + <div>
  91 + <div class="col-xs-12" ng-if="!pagePrograma.loadingProposalBox && pagePrograma.randomProposal" ng-class="{'focused-proposal': !!pagePrograma.search.proposal_id}">
  92 + <h3 class="color-theme-fg">Apoie outras propostas</h3>
  93 + <proposal-box proposal="pagePrograma.randomProposal" topic="pagePrograma.article" category="pagePrograma.category" can-vote="true" focus="{{pagePrograma.search.proposal_id}}" ></proposal-box>
  94 + </div>
86 95  
87   - <!-- Loading Proposal Box -->
88   - <div ng-if="pagePrograma.loadingProposalBox">
89   - <div class="alert alert-info" role="alert">
90   - Carregando propostas nesse programa...
91   - </div>
  96 + <!-- Loading Proposal Box -->
  97 + <div ng-if="pagePrograma.loadingProposalBox">
  98 + <div class="alert alert-info" role="alert">
  99 + Carregando propostas nesse programa...
92 100 </div>
93 101 </div>
  102 + </div>
94 103  
95   - <!-- No Proposals? okay! -->
96   - <div ng-if="!pagePrograma.loadingTopProposals && !pagePrograma.loadingProposalBox">
97   - <div class="col-xs-12" ng-if="!pagePrograma.randomProposal && !(pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0)">
98   - <h3>Programas sem propostas</h3>
99   - <p>
100   - Este programa ainda não possui nenhuma proposta.
101   - <div class="button--themed">
102   - <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>
103   - </div>
104   - </p>
105   - </div>
  104 + <!-- No Proposals? okay! -->
  105 + <div ng-if="!pagePrograma.loadingTopProposals && !pagePrograma.loadingProposalBox">
  106 + <div class="col-xs-12" ng-if="!pagePrograma.randomProposal && !(pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0)">
  107 + <h3>Programas sem propostas</h3>
  108 + <p>
  109 + Este programa ainda não possui nenhuma proposta.
  110 + <div class="button--themed">
  111 + <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>
  112 + </div>
  113 + </p>
106 114 </div>
107 115 </div>
108 116 </div>
  117 + </div>
109 118 </article>
110 119 </div>
111 120 </div>
... ...
src/app/pages/programas/programas.scss
  Diff comments   View file @c62e13b
... ... @@ -7,81 +7,121 @@
7 7 }
8 8 }
9 9  
10   -.program-preview {
  10 +.page--program {
11 11  
12   - .program-preview--box {
13   - position: relative;
14   - background-color: #f1f1f1;
15   - }
  12 + .program-preview {
16 13  
17   - .program-preview--banner {
18   - width: 100%;
19   - height: 400px;
  14 + .program-preview--box {
  15 + position: relative;
  16 + background-color: #f1f1f1;
  17 + }
20 18  
21   - background-position: center;
22   - background-size: cover;
23   - background-repeat: no-repeat;
  19 + .program-preview--banner {
  20 + width: 100%;
  21 + height: 400px;
24 22  
  23 + background-position: center;
  24 + background-size: cover;
  25 + background-repeat: no-repeat;
25 26  
26 27  
27   - @media screen and (max-width: $screen-xs) {
28   - // height: 15px;
29 28  
30   - // .video {
31   - // height: 290px;
32   - // }
33   - }
34   - }
  29 + @media screen and (max-width: $screen-xs) {
  30 + // height: 15px;
35 31  
36   - .program-preview--icon {
37   - $icon-size: 98px;
38   - $icon-scale: 0.7;
39   - position: absolute;
40   - top: (-1) * ($icon-size / 2);
41   - left: 40px;
  32 + // .video {
  33 + // height: 290px;
  34 + // }
  35 + }
  36 + }
42 37  
43   - width: $icon-size * $icon-scale + 20px;
44   - height: $icon-size * $icon-scale + 20px;
  38 + .program-preview--icon {
  39 + $icon-size: 80px;
  40 + $icon-scale: 0.7;
  41 + position: absolute;
  42 + top: (-1) * ($icon-size / 2);
  43 + left: 40px;
  44 +
  45 + width: $icon-size * $icon-scale + 25px;
  46 + height: $icon-size * $icon-scale + 25px;
  47 +
  48 + .icon {
  49 + display: block;
  50 + position: relative;
  51 + top: -2px;
  52 + left: -2px;
  53 + }
  54 +
  55 + .contraste & {
  56 + border: 1px solid #fff;
  57 + }
  58 + }
45 59  
46   - .icon {
47   - display: block;
  60 + .program-preview--box--content-wrapper {
  61 + padding: 48px;
48 62 position: relative;
49   - top: -8px;
50   - left: -8px;
51   - // transform: scale($icon-scale);
52 63 }
53 64  
54   - .contraste & {
55   - border: 1px solid #fff;
  65 + .program-preview--abstract {
  66 + h2 {
  67 + margin-top: 22px; // parent.margin + this.margin = 48 + 22 = 72px;
  68 + margin-bottom: 32px;
  69 + }
56 70 }
57   - }
58 71  
59   - .program-preview--box--content-wrapper {
60   - padding: 40px;
61   - position: relative;
62   - }
  72 + .program-preview--abstract-details {
  73 + p {
  74 + color: #484848;
  75 + font-size: 14px;
  76 + line-height: 18px;
  77 + margin-bottom: 25px;
  78 + }
  79 + }
63 80  
64   - .program-preview--share-label,
65   - .program-preview--share-directive {
66   - display: inline-block;
67   - vertical-align: middle;
68   - }
  81 + .program-preview--share {
  82 + margin-bottom: 20px;
  83 + position: relative;
  84 + .dropdown {
  85 + display: inline-block;
  86 + position: relative;
  87 + }
  88 +
  89 + .dropdown-menu {
  90 + padding: 0;
  91 + margin: 0;
  92 + }
  93 +
  94 + .social-share {
  95 + background-color: #fff;
  96 + }
  97 +
  98 + .social-share--arrow {
  99 + border-bottom-color: #fff;
  100 + }
  101 + }
69 102  
70   - .program-preview--abstract h2 {
71   - font-size: 40px;
72   - }
  103 + .program-preview--share-label,
  104 + .program-preview--share-directive {
  105 + display: inline-block;
  106 + vertical-align: middle;
  107 + }
73 108  
74   - h2,
75   - h3{
76   - font-weight: bold;
77   - }
  109 + h1 {
  110 + font-size: 38px;
  111 + line-height: 40px;
  112 + font-weight: 900;
  113 + }
78 114  
79   - h3 {
80   - margin-top: 0;
81   - }
82   -}
  115 + h2 {
  116 + font-size: 32px;
  117 + line-height: 36px;
  118 + font-weight: bold;
  119 + }
83 120  
84   -.page--program {
  121 + h3 {
  122 + margin-top: 0;
  123 + }
  124 + }
85 125  
86 126 .btn-close {
87 127 position: absolute;
... ...