Merge branch 'master' into staging

Leonardo Merlin
2 parents 3847cdb6 f8415dec
Showing 3 changed files with 71 additions and 47 deletions Show diff stats
src/app/components/article-box/article-box.html
src/app/index.scss
src/app/pages/programas/programas.scss
 <article class="article-box" ng-click="vm.showContent()" ng-class="vm.category.slug">
-  <div>
-    <h2 class="article-box--category">{{ ::vm.category.name }}</h2>
-    <div class="article-box--image-wrapper">
-      <div class="article-box--image" ng-style="{ 'background-image' : 'url({{ vm.image.src }})' }"></div>
+    <div>
+        <h2 class="article-box--category">{{ ::vm.category.name }}</h2>
+        <div class="article-box--image-wrapper">
+            <div class="article-box--image" ng-style="{ 'background-image' : 'url({{ vm.image.src }})' }">
+                <div ng-if="vm.article.archived" class="img-mask--background">
+                    <div class="icon icon-programa-respondido">
+                        <div class="icon-circle">
+                            <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="article-box--title">
+            <h1>{{::vm.article.title}}</h1>
+        </div>
+        <div class="article-box--abstract" ng-bind-html="vm.article.summary"></div>
+        <div class="button--themed">
+            <button class="btn btn-block">
+                Participe
+            </button>
+        </div>
     </div>
-    <div class="article-box--title">
-      <h1>{{::vm.article.title}}</h1>
-    </div>
-    <div class="article-box--abstract" ng-bind-html="vm.article.summary"></div>
-    <div class="button--themed">
-      <button class="btn btn-block">
-        Participe
-      </button>
-    </div>
-  </div>
 </article>
@@ -198,6 +198,36 @@ body {
     }
 }
+
+
+.img-mask--background {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    
+    .icon-circle{
+        position: absolute;
+        left: 50%;
+        margin-left: -15px;
+        bottom: -10px;
+        width: 31px;
+        height: 31px;
+    }
+
+    .glyphicon {
+        position: relative;
+        top: -2px;
+        color: #fff;
+        background-color: #3FC869;
+        padding: 6px 5px 5px 6px;
+        border-radius: 100%;
+    }
+
+    .icon-programa-respondido {
+        transform: scale(0.8);
+    }
+}
+
 .icon {
     display: inline-block;
     vertical-align: middle;
@@ -46,14 +46,20 @@
             background-size: cover;
             background-repeat: no-repeat;
+            @media screen and (max-width: $screen-lg) {
+                height: 300px;
+            }
+
+            @media screen and (max-width: $screen-md) {
+                height: 300px;
+            }
+            @media screen and (max-width: $screen-sm) {
+                height: 260px;
+            }
             @media screen and (max-width: $screen-xs) {
-                // height: 15px;
-
-                // .video {
-                //     height: 290px;
-                // }
+                height: 200px;
             }
         }
@@ -206,39 +212,19 @@
         background-size: cover;
     }
-    .img-mask--background {
-        width: 100%;
-        height: 100%;
-        text-align: center;
-        
-        .icon-circle{
-            position: absolute;
-            left: 50%;
-            margin-left: -15px;
-            bottom: -10px;
-            width: 31px;
-            height: 31px;
-        }
-
-        .glyphicon {
-            position: relative;
-            top: -2px;
-            color: #fff;
-            background-color: #3FC869;
-            padding: 6px 5px 5px 6px;
-            border-radius: 100%;
-        }
-
-        .icon-programa-respondido {
-            transform: scale(0.8);
-        }
-    }
-
     .program-preview--banner .icon-programa-respondido {
         position: relative;
         top: 50%;
         margin-top: -100px;
         transform: scale(1);
+
+        @media screen and (max-width: $screen-sm) {
+            transform: scale(0.8);
+        }
+
+        @media screen and (max-width: $screen-xs) {
+            transform: scale(0.7);
+        }
     }
     #section-archived-banner {
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>
	@@ -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;