Add featured event styles

Leonardo Merlin
1 parent bc16df93
Showing 3 changed files with 118 additions and 7 deletions Show diff stats
src/app/pages/inicio/inicio.html
src/app/pages/inicio/inicio.scss
src/assets/images/event-video-area.png
@@ -2,7 +2,7 @@
   <section class="section-video">
     <div class="container">
       <div class="row">
-        <div class="col-sm-8" ng-class="{'col-sm-offset-2': !pageInicio.featuredEvent}">
+        <div class="col-md-8" ng-class="{'col-md-offset-2': !pageInicio.featuredEvent}">
           <div class="video-player js-youtube">
             <div class="embed-responsive embed-responsive-16by9">
               <div class="js-iframe" ng-if="pageInicio.article.videoIsLoaded" ng-bind-html="pageInicio.article.abstractTrusted"></div>
@@ -15,9 +15,25 @@
             </div>
           </div>
         </div>
-        <div class="col-sm-2" ng-if="pageInicio.featuredEvent">
-          <div class="featured-event--box">
-            Evento em destaque
+        <div class="col-md-4" ng-if="pageInicio.featuredEvent">
+          <div class="row">
+            <div class="featured-event--box">
+              <div class="box-top col-xs-12 col-sm-4 col-md-12">
+                <h2 class="box-title">Bate papo com <b>MINISTR@S</b></h2>
+              </div>
+              <div class="box-middle col-xs-12 col-sm-4 col-md-12">
+                <div class="video" style="background-image: url(/assets/images/event-video-area.png)">
+                </div>
+              </div>
+              <div class="box-bottom col-xs-12 col-sm-4 col-md-12">
+                <div class="date">DD/MM/YYYY</div>
+                <div class="live">AO VIVO</div>
+                <p>
+                  Lorem ipsum dolor sit amet, mei at facete constituto partiendo et.
+                </p>
+              </div>
+              <div class="clearfix"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -38,6 +38,97 @@
     .input-group-btn {
         background-color: #fff;
     }
+
+    .featured-event--box {
+        display: block;
+        position: relative;
+        background-color: #545454;
+        color: #fff;
+        border-radius: 5px;
+
+        .box-top {
+            text-transform: uppercase;
+
+            .box-title {
+                font-size: 28px;
+            }
+
+            b {
+                color: #FFB91C;
+            }
+        }
+
+        .box-middle {
+            margin: 0;
+            padding: 0;
+
+            .video {
+                width: 100%;
+                min-height: 125px;
+                background-color: #4A4A0E;
+                background-size: cover;
+                background-position: center;
+            }
+        }
+
+        .box-bottom {
+            position: relative;
+            padding: 10px 20px;
+
+            .date {
+                font-weight: bold;
+                text-transform: uppercase;
+            }
+
+            .live {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                width: 80px;
+                text-align: center;
+                font-weight: bold;
+
+                color: #545454;
+                background-color: #FFB91C;
+
+                border-radius: 20px;
+            }
+
+            p { padding: 10px 0;}
+        }
+
+        @media screen and (min-width: $screen-lg) {
+
+        }
+
+        @media screen and (min-width: $screen-md) {
+            // width: 223px;
+            width: 100%;
+            height: 338px;
+        }
+
+        @media screen and (min-width: $screen-sm) and (max-width: $screen-md) {
+            width: 100%;
+            height: 125px;
+            margin: 30px 0 10px 0;
+        }
+
+        @media screen and (min-width: $screen-xs) and (max-width: $screen-sm) {
+            margin: 30px 30px 10px 30px;
+
+            .video {
+                height: 290px;
+            }
+        }
+
+        @media screen and (max-width: $screen-xs) {
+            margin: 15px;
+
+            .video {
+                height: 290px;
+            }
+        }
+    }
 }
 .section-gray {
@@ -60,6 +151,8 @@
 .video-player {
   position: relative;
   border: 1px solid #333;
+  width: 600px;
+  margin: 0 auto;
   .video-background {
     text-align: center;
@@ -124,8 +217,10 @@
     }
   }
-  @media screen and (min-width: 992px) {
-    width: 80%;
-    margin: 0 auto;
+  // @media screen and ( min-width: $screen-md ) {
+  //   width: 480px;
+  // }
+  @media screen and (max-width: $screen-md) {
+    width: 100%;
   }
 }
	@@ -2,7 +2,7 @@		@@ -2,7 +2,7 @@
2	<section class="section-video">	2	<section class="section-video">
3	<div class="container">	3	<div class="container">
4	<div class="row">	4	<div class="row">
5	- <div class="col-sm-8" ng-class="{'col-sm-offset-2': !pageInicio.featuredEvent}">	5	+ <div class="col-md-8" ng-class="{'col-md-offset-2': !pageInicio.featuredEvent}">
6	<div class="video-player js-youtube">	6	<div class="video-player js-youtube">
7	<div class="embed-responsive embed-responsive-16by9">	7	<div class="embed-responsive embed-responsive-16by9">
8	<div class="js-iframe" ng-if="pageInicio.article.videoIsLoaded" ng-bind-html="pageInicio.article.abstractTrusted"></div>	8	<div class="js-iframe" ng-if="pageInicio.article.videoIsLoaded" ng-bind-html="pageInicio.article.abstractTrusted"></div>
	@@ -15,9 +15,25 @@		@@ -15,9 +15,25 @@
15	</div>	15	</div>
16	</div>	16	</div>
17	</div>	17	</div>
18	- <div class="col-sm-2" ng-if="pageInicio.featuredEvent">
19	- <div class="featured-event--box">
20	- Evento em destaque	18	+ <div class="col-md-4" ng-if="pageInicio.featuredEvent">
		19	+ <div class="row">
		20	+ <div class="featured-event--box">
		21	+ <div class="box-top col-xs-12 col-sm-4 col-md-12">
		22	+ <h2 class="box-title">Bate papo com <b>MINISTR@S</b></h2>
		23	+ </div>
		24	+ <div class="box-middle col-xs-12 col-sm-4 col-md-12">
		25	+ <div class="video" style="background-image: url(/assets/images/event-video-area.png)">
		26	+ </div>
		27	+ </div>
		28	+ <div class="box-bottom col-xs-12 col-sm-4 col-md-12">
		29	+ <div class="date">DD/MM/YYYY</div>
		30	+ <div class="live">AO VIVO</div>
		31	+ <p>
		32	+ Lorem ipsum dolor sit amet, mei at facete constituto partiendo et.
		33	+ </p>
		34	+ </div>
		35	+ <div class="clearfix"></div>
		36	+ </div>
21	</div>	37	</div>
22	</div>	38	</div>
23	</div>	39	</div>
	@@ -38,6 +38,97 @@		@@ -38,6 +38,97 @@
38	.input-group-btn {	38	.input-group-btn {
39	background-color: #fff;	39	background-color: #fff;
40	}	40	}
		41	+
		42	+ .featured-event--box {
		43	+ display: block;
		44	+ position: relative;
		45	+ background-color: #545454;
		46	+ color: #fff;
		47	+ border-radius: 5px;
		48	+
		49	+ .box-top {
		50	+ text-transform: uppercase;
		51	+
		52	+ .box-title {
		53	+ font-size: 28px;
		54	+ }
		55	+
		56	+ b {
		57	+ color: #FFB91C;
		58	+ }
		59	+ }
		60	+
		61	+ .box-middle {
		62	+ margin: 0;
		63	+ padding: 0;
		64	+
		65	+ .video {
		66	+ width: 100%;
		67	+ min-height: 125px;
		68	+ background-color: #4A4A0E;
		69	+ background-size: cover;
		70	+ background-position: center;
		71	+ }
		72	+ }
		73	+
		74	+ .box-bottom {
		75	+ position: relative;
		76	+ padding: 10px 20px;
		77	+
		78	+ .date {
		79	+ font-weight: bold;
		80	+ text-transform: uppercase;
		81	+ }
		82	+
		83	+ .live {
		84	+ position: absolute;
		85	+ top: 10px;
		86	+ right: 10px;
		87	+ width: 80px;
		88	+ text-align: center;
		89	+ font-weight: bold;
		90	+
		91	+ color: #545454;
		92	+ background-color: #FFB91C;
		93	+
		94	+ border-radius: 20px;
		95	+ }
		96	+
		97	+ p { padding: 10px 0;}
		98	+ }
		99	+
		100	+ @media screen and (min-width: $screen-lg) {
		101	+
		102	+ }
		103	+
		104	+ @media screen and (min-width: $screen-md) {
		105	+ // width: 223px;
		106	+ width: 100%;
		107	+ height: 338px;
		108	+ }
		109	+
		110	+ @media screen and (min-width: $screen-sm) and (max-width: $screen-md) {
		111	+ width: 100%;
		112	+ height: 125px;
		113	+ margin: 30px 0 10px 0;
		114	+ }
		115	+
		116	+ @media screen and (min-width: $screen-xs) and (max-width: $screen-sm) {
		117	+ margin: 30px 30px 10px 30px;
		118	+
		119	+ .video {
		120	+ height: 290px;
		121	+ }
		122	+ }
		123	+
		124	+ @media screen and (max-width: $screen-xs) {
		125	+ margin: 15px;
		126	+
		127	+ .video {
		128	+ height: 290px;
		129	+ }
		130	+ }
		131	+ }
41	}	132	}
42		133
43	.section-gray {	134	.section-gray {
	@@ -60,6 +151,8 @@		@@ -60,6 +151,8 @@
60	.video-player {	151	.video-player {
61	position: relative;	152	position: relative;
62	border: 1px solid #333;	153	border: 1px solid #333;
		154	+ width: 600px;
		155	+ margin: 0 auto;
63		156
64	.video-background {	157	.video-background {
65	text-align: center;	158	text-align: center;
	@@ -124,8 +217,10 @@		@@ -124,8 +217,10 @@
124	}	217	}
125	}	218	}
126		219
127	- @media screen and (min-width: 992px) {
128	- width: 80%;
129	- margin: 0 auto;	220	+ // @media screen and ( min-width: $screen-md ) {
		221	+ // width: 480px;
		222	+ // }
		223	+ @media screen and (max-width: $screen-md) {
		224	+ width: 100%;
130	}	225	}
131	}	226	}