Update program banner/strip

Leonardo Merlin
1 parent d87f4c33
Showing 3 changed files with 53 additions and 10 deletions Show diff stats
src/app/components/programa/programa.html
src/app/components/programa/programa.scss
src/app/pages/programas/programas.scss
-<div ng-if="vm.program">
+<div ng-if="vm.program" class="{{::vm.getCategorySlug()}}">
   <article class="program-box" ng-if="vm.isDisplayBox()" ng-click="vm.showContent()">
-    <div class="{{::vm.getCategorySlug()}}">
+    <div>
       <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
       <div class="program-box--image-wrapper">
         <!-- <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" /> -->
@@ -51,10 +51,10 @@ $darken: 15%;
             vertical-align: middle;
  
             // Altura das linhas do abstract
-            $hLine: 20px;            
-            // default 
-            height: $hLine * 2; 
-            
+            $hLine: 20px;
+            // default
+            height: $hLine * 2;
+
             @media (max-width: $screen-xs) {
                 // height: $hLine * 3;
                 height: auto;
@@ -79,7 +79,7 @@ $darken: 15%;
         padding: 0 $program-box-space;
         display: table-cell;
         vertical-align: middle;
-        
+
         // Altura das linhas do abstract
         $pLine: 20px;
         // 1 linha: 19px -> 20
@@ -88,7 +88,7 @@ $darken: 15%;
         // 4 linhas: 76px -> 80
  
         height: $pLine * 2; // default
-        
+
         @media (max-width: $screen-xs) {
             // height: $pLine * 4;
             height: auto;
@@ -190,6 +190,45 @@ $darken: 15%;
  
 .program-preview {
     .program-banner {
+        position: relative;
+    }
+
+    .program-banner--image {
+        width: 100%;
+    }
+
+    .program-banner--strip {
+        color: #fff;
+        position: absolute;
+        bottom: 15%;
+        right: 0;
+        width: 50%;
+        text-align: center;
  
+        @each $category, $color in $categories {
+            .#{$category} & {
+                background-color: $color;
+            }
+        }
+
+        @media (max-width: $screen-sm){
+            position: relative;
+            width: 100%;
+        }
+
+    }
+
+    .program-banner--title {
+        font-size: 32px;
+        text-transform: uppercase;
+        margin-top: 0;
+        padding-top: 20px;
+    }
+    .program-banner--title,
+    .program-banner--abstract {
+        font-weight: bold;
+    }
+    .program-banner--abstract {
+        padding-bottom: 10px;
     }
 }
 .article-bar {
-    
+
     .btn {
         color: #fff;
         font-weight: bold;
     }
-    
+
     &--item {
         margin: 8px 0;
     }
  
+    .navbar {
+        margin-bottom: 0;
+    }
+
     .navbar-right {
         margin-right: 15px;
     }
1		-<div ng-if="vm.program">
	1	+<div ng-if="vm.program" class="{{::vm.getCategorySlug()}}">
2	2	<article class="program-box" ng-if="vm.isDisplayBox()" ng-click="vm.showContent()">
3		- <div class="{{::vm.getCategorySlug()}}">
	3	+ <div>
4	4	<h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
5	5	<div class="program-box--image-wrapper">
6	6	<!-- <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" /> -->
...	...
...	...	@@ -51,10 +51,10 @@ $darken: 15%;
51	51	vertical-align: middle;
52	52
53	53	// Altura das linhas do abstract
54		- $hLine: 20px;
55		- // default
56		- height: $hLine * 2;
57		-
	54	+ $hLine: 20px;
	55	+ // default
	56	+ height: $hLine * 2;
	57	+
58	58	@media (max-width: $screen-xs) {
59	59	// height: $hLine * 3;
60	60	height: auto;
...	...	@@ -79,7 +79,7 @@ $darken: 15%;
79	79	padding: 0 $program-box-space;
80	80	display: table-cell;
81	81	vertical-align: middle;
82		-
	82	+
83	83	// Altura das linhas do abstract
84	84	$pLine: 20px;
85	85	// 1 linha: 19px -> 20
...	...	@@ -88,7 +88,7 @@ $darken: 15%;
88	88	// 4 linhas: 76px -> 80
89	89
90	90	height: $pLine * 2; // default
91		-
	91	+
92	92	@media (max-width: $screen-xs) {
93	93	// height: $pLine * 4;
94	94	height: auto;
...	...	@@ -190,6 +190,45 @@ $darken: 15%;
190	190
191	191	.program-preview {
192	192	.program-banner {
	193	+ position: relative;
	194	+ }
	195	+
	196	+ .program-banner--image {
	197	+ width: 100%;
	198	+ }
	199	+
	200	+ .program-banner--strip {
	201	+ color: #fff;
	202	+ position: absolute;
	203	+ bottom: 15%;
	204	+ right: 0;
	205	+ width: 50%;
	206	+ text-align: center;
193	207
	208	+ @each $category, $color in $categories {
	209	+ .#{$category} & {
	210	+ background-color: $color;
	211	+ }
	212	+ }
	213	+
	214	+ @media (max-width: $screen-sm){
	215	+ position: relative;
	216	+ width: 100%;
	217	+ }
	218	+
	219	+ }
	220	+
	221	+ .program-banner--title {
	222	+ font-size: 32px;
	223	+ text-transform: uppercase;
	224	+ margin-top: 0;
	225	+ padding-top: 20px;
	226	+ }
	227	+ .program-banner--title,
	228	+ .program-banner--abstract {
	229	+ font-weight: bold;
	230	+ }
	231	+ .program-banner--abstract {
	232	+ padding-bottom: 10px;
194	233	}
195	234	}
...	...
1	1	.article-bar {
2		-
	2	+
3	3	.btn {
4	4	color: #fff;
5	5	font-weight: bold;
6	6	}
7		-
	7	+
8	8	&--item {
9	9	margin: 8px 0;
10	10	}
11	11
	12	+ .navbar {
	13	+ margin-bottom: 0;
	14	+ }
	15	+
12	16	.navbar-right {
13	17	margin-right: 15px;
14	18	}
...	...