Commit fd672a8277533efec0b2601ab95c0c8d5d9d3228
Exists in
master
and in
4 other branches
Merge branch 'add-archived-image-maks'
Showing
3 changed files
with
52 additions
and
42 deletions
Show diff stats
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%; | ... | ... |