Commit fd672a8277533efec0b2601ab95c0c8d5d9d3228

Authored by Leonardo Merlin
2 parents 5738291d 6eef97a9

Merge branch 'add-archived-image-maks'

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
... ... @@ -206,34 +206,6 @@
206 206 background-size: cover;
207 207 }
208 208  
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 209 .program-preview--banner .icon-programa-respondido {
238 210 position: relative;
239 211 top: 50%;
... ...