Commit cc0b92941bfc9c422de093e3f0323ff40f42c13b

Authored by Leonardo Merlin
2 parents 3847cdb6 f8415dec

Merge branch 'master' into staging

src/app/components/article-box/article-box.html
1 1 <article class="article-box" ng-click="vm.showContent()" ng-class="vm.category.slug">
2   - <div>
3   - <h2 class="article-box--category">{{ ::vm.category.name }}</h2>
4   - <div class="article-box--image-wrapper">
5   - <div class="article-box--image" ng-style="{ 'background-image' : 'url({{ vm.image.src }})' }"></div>
  2 + <div>
  3 + <h2 class="article-box--category">{{ ::vm.category.name }}</h2>
  4 + <div class="article-box--image-wrapper">
  5 + <div class="article-box--image" ng-style="{ 'background-image' : 'url({{ vm.image.src }})' }">
  6 + <div ng-if="vm.article.archived" class="img-mask--background">
  7 + <div class="icon icon-programa-respondido">
  8 + <div class="icon-circle">
  9 + <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  10 + </div>
  11 + </div>
  12 + </div>
  13 + </div>
  14 + </div>
  15 + <div class="article-box--title">
  16 + <h1>{{::vm.article.title}}</h1>
  17 + </div>
  18 + <div class="article-box--abstract" ng-bind-html="vm.article.summary"></div>
  19 + <div class="button--themed">
  20 + <button class="btn btn-block">
  21 + Participe
  22 + </button>
  23 + </div>
6 24 </div>
7   - <div class="article-box--title">
8   - <h1>{{::vm.article.title}}</h1>
9   - </div>
10   - <div class="article-box--abstract" ng-bind-html="vm.article.summary"></div>
11   - <div class="button--themed">
12   - <button class="btn btn-block">
13   - Participe
14   - </button>
15   - </div>
16   - </div>
17 25 </article>
... ...
src/app/index.scss
... ... @@ -198,6 +198,36 @@ body {
198 198 }
199 199 }
200 200  
  201 +
  202 +
  203 +.img-mask--background {
  204 + width: 100%;
  205 + height: 100%;
  206 + text-align: center;
  207 +
  208 + .icon-circle{
  209 + position: absolute;
  210 + left: 50%;
  211 + margin-left: -15px;
  212 + bottom: -10px;
  213 + width: 31px;
  214 + height: 31px;
  215 + }
  216 +
  217 + .glyphicon {
  218 + position: relative;
  219 + top: -2px;
  220 + color: #fff;
  221 + background-color: #3FC869;
  222 + padding: 6px 5px 5px 6px;
  223 + border-radius: 100%;
  224 + }
  225 +
  226 + .icon-programa-respondido {
  227 + transform: scale(0.8);
  228 + }
  229 +}
  230 +
201 231 .icon {
202 232 display: inline-block;
203 233 vertical-align: middle;
... ...
src/app/pages/programas/programas.scss
... ... @@ -46,14 +46,20 @@
46 46 background-size: cover;
47 47 background-repeat: no-repeat;
48 48  
  49 + @media screen and (max-width: $screen-lg) {
  50 + height: 300px;
  51 + }
  52 +
  53 + @media screen and (max-width: $screen-md) {
  54 + height: 300px;
  55 + }
49 56  
  57 + @media screen and (max-width: $screen-sm) {
  58 + height: 260px;
  59 + }
50 60  
51 61 @media screen and (max-width: $screen-xs) {
52   - // height: 15px;
53   -
54   - // .video {
55   - // height: 290px;
56   - // }
  62 + height: 200px;
57 63 }
58 64 }
59 65  
... ... @@ -206,39 +212,19 @@
206 212 background-size: cover;
207 213 }
208 214  
209   - .img-mask--background {
210   - width: 100%;
211   - height: 100%;
212   - text-align: center;
213   -
214   - .icon-circle{
215   - position: absolute;
216   - left: 50%;
217   - margin-left: -15px;
218   - bottom: -10px;
219   - width: 31px;
220   - height: 31px;
221   - }
222   -
223   - .glyphicon {
224   - position: relative;
225   - top: -2px;
226   - color: #fff;
227   - background-color: #3FC869;
228   - padding: 6px 5px 5px 6px;
229   - border-radius: 100%;
230   - }
231   -
232   - .icon-programa-respondido {
233   - transform: scale(0.8);
234   - }
235   - }
236   -
237 215 .program-preview--banner .icon-programa-respondido {
238 216 position: relative;
239 217 top: 50%;
240 218 margin-top: -100px;
241 219 transform: scale(1);
  220 +
  221 + @media screen and (max-width: $screen-sm) {
  222 + transform: scale(0.8);
  223 + }
  224 +
  225 + @media screen and (max-width: $screen-xs) {
  226 + transform: scale(0.7);
  227 + }
242 228 }
243 229  
244 230 #section-archived-banner {
... ...