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 | <article class="article-box" ng-click="vm.showContent()" ng-class="vm.category.slug"> | 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 | </div> | 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 | </article> | 25 | </article> |
src/app/index.scss
| @@ -198,6 +198,36 @@ body { | @@ -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 | .icon { | 231 | .icon { |
| 202 | display: inline-block; | 232 | display: inline-block; |
| 203 | vertical-align: middle; | 233 | vertical-align: middle; |
src/app/pages/programas/programas.scss
| @@ -206,34 +206,6 @@ | @@ -206,34 +206,6 @@ | ||
| 206 | background-size: cover; | 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 | .program-preview--banner .icon-programa-respondido { | 209 | .program-preview--banner .icon-programa-respondido { |
| 238 | position: relative; | 210 | position: relative; |
| 239 | top: 50%; | 211 | top: 50%; |