Commit cc0b92941bfc9c422de093e3f0323ff40f42c13b
Exists in
master
and in
4 other branches
Merge branch 'master' into staging
Showing
3 changed files
with
71 additions
and
47 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
... | ... | @@ -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 { | ... | ... |