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	<article class="program-box" ng-if="vm.isDisplayBox()" ng-click="vm.showContent()">	2	<article class="program-box" ng-if="vm.isDisplayBox()" ng-click="vm.showContent()">
3	- <div class="{{::vm.getCategorySlug()}}">	3	+ <div>
4	<h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>	4	<h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
5	<div class="program-box--image-wrapper">	5	<div class="program-box--image-wrapper">
6	<!-- <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" /> -->	6	<!-- <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" /> -->
	@@ -51,10 +51,10 @@ $darken: 15%;		@@ -51,10 +51,10 @@ $darken: 15%;
51	vertical-align: middle;	51	vertical-align: middle;
52		52
53	// Altura das linhas do abstract	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	@media (max-width: $screen-xs) {	58	@media (max-width: $screen-xs) {
59	// height: $hLine * 3;	59	// height: $hLine * 3;
60	height: auto;	60	height: auto;
	@@ -79,7 +79,7 @@ $darken: 15%;		@@ -79,7 +79,7 @@ $darken: 15%;
79	padding: 0 $program-box-space;	79	padding: 0 $program-box-space;
80	display: table-cell;	80	display: table-cell;
81	vertical-align: middle;	81	vertical-align: middle;
82	-	82	+
83	// Altura das linhas do abstract	83	// Altura das linhas do abstract
84	$pLine: 20px;	84	$pLine: 20px;
85	// 1 linha: 19px -> 20	85	// 1 linha: 19px -> 20
	@@ -88,7 +88,7 @@ $darken: 15%;		@@ -88,7 +88,7 @@ $darken: 15%;
88	// 4 linhas: 76px -> 80	88	// 4 linhas: 76px -> 80
89		89
90	height: $pLine * 2; // default	90	height: $pLine * 2; // default
91	-	91	+
92	@media (max-width: $screen-xs) {	92	@media (max-width: $screen-xs) {
93	// height: $pLine * 4;	93	// height: $pLine * 4;
94	height: auto;	94	height: auto;
	@@ -190,6 +190,45 @@ $darken: 15%;		@@ -190,6 +190,45 @@ $darken: 15%;
190		190
191	.program-preview {	191	.program-preview {
192	.program-banner {	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	}