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%; | ... | ... |