Fix presenter panel before calendar with better css styles

Michel Felipe
1 parent 5fdb7720
Showing 2 changed files with 51 additions and 24 deletions Show diff stats
index.html
sass/style.sass
@@ -583,14 +583,34 @@
           </div>
         {{/if}}
-        {{#compare event.setting.presenter event.title operator="!=="}}
-          <div class="col-sm-12">
-            <div class="row">
-              <p>{{event.setting.presenter}}</p>
-            </div>
-          </div>
-        {{^}}
           <div class="col-sm-12">
+            {{#compare event.setting.presenter event.title operator="!=="}}
+
+              <div class="row alert presenter-warning">
+                {{event.setting.presenter}}
+              </div>
+
+              <div class="row calendar__disabled">
+                <div class="calendar__column col-xs-12 col-sm-6">
+                  <div class="row">
+                    <div class="calendar__presenter">{{event.title}}</div>
+                    <div class="calendar__presenter-category">{{category}}</div>
+                  </div>
+                </div>
+                <div class="calendar__column col-xs-6 col-sm-3">
+                  <div class="row">
+                    <div class="calendar__date"><i class="fa fa-calendar" aria-hidden="true"></i> {{date}}</div>
+                  </div>
+                </div>
+                <div class="calendar__column col-xs-6 col-sm-3">
+                  <div class="row">
+                    <div class="calendar__time"><i class="fa fa-clock-o" aria-hidden="true"></i> {{time}}</div>
+                  </div>
+                </div>
+              </div>
+
+            {{^}}
+
             <div class="row">
               <div class="calendar__column col-xs-12 col-sm-6">
                 <div class="row">
 // ------------------------------------
 // Organização da folha de estilo:
-// 
+//
 // 0 - Dependências
 // 1 - Variaveis
 //   1.1 - espacamento
@@ -92,9 +92,9 @@ $darken: 15%
 //   1.7 - screens
 $screen-xs: 480px
-$screen-sm: 767px 
-$screen-md: 992px 
-$screen-lg: 1200px 
+$screen-sm: 767px
+$screen-md: 992px
+$screen-lg: 1200px
 // ------------------------------------
 // 2 - Mixins
@@ -439,7 +439,7 @@ h1
   margin-bottom: $gutter * 1.5
   .embed-responsive
     border: 1px solid #333
-  
+
   &.video-smaller
     @media (min-width: $screen-md)
       width: 60%
@@ -923,14 +923,14 @@ td
     float: right
     background: none
     border: none
-    
+
     @each $category, $color in $categories
       .#{$category} &
         color: $color
     .contraste &
       color: #fff
-      
+
   .updated-at
     @extend .vote-result
     margin-top: $gutter
@@ -965,7 +965,7 @@ td
       &:after
         display: block
         content: "[...]"
-        // content: "\e000" 
+        // content: "\e000"
         position: absolute
         top: 0
         right: 2px
@@ -995,12 +995,12 @@ td
         text-transform: uppercase
       .footable-row-detail-value
         display: block
-      
+
       // fix height
       .footable-row-detail-row:nth-child(1)
         .footable-row-detail-value:before
           height: 30px
-      
+
       // check icon
       .footable-row-detail-row:nth-child(2)
         .footable-row-detail-name
@@ -1117,8 +1117,15 @@ td
       content: "\f054"
   &-disabled
     opacity: 0.25
+    
+.presenter-warning
+  background-color: #D9D9DD
+  font-weight: bold
 // .calendar
+.calendar__disabled
+  opacity: 0.6
+
 .calendar__presenter
   font-weight: bold
   font-size: 20px
@@ -1127,12 +1134,12 @@ td
   height: 90px
   padding-top: 20px
   background-color: #eeeff1
-  
+
   &:not(:last-child)
     border-right: 2px solid #fff
   &:first-child
     padding-left: 40px
-  
+
   @media (max-width: $screen-sm)
     &:first-child
       border-bottom: 2px solid #fff
@@ -1144,14 +1151,14 @@ td
     &:not(:last-child)
       border-right: 2px solid #262626
-    
+
     @media (max-width: $screen-sm)
       &:first-child
         border-bottom: 2px solid #262626
         border-right: none
     // @media (max-width: $screen-sm)
-     
+
 .calendar__date,
 .calendar__time
   font-size: 20px
@@ -1208,7 +1215,7 @@ td
 // 6.20 - participe
 .talk__participate
-  .button 
+  .button
     position: relative
     z-index: 5
 .talk__counter
@@ -1228,7 +1235,7 @@ td
   @each $category, $color in $categories
     .#{$category} &
       color: $color
-  
+
   @media (max-width: $screen-sm)
     width: 100%
     margin-left: 0
@@ -1579,4 +1586,4 @@ h3.titulo-destaque
 // HACK IDG
 #barra-brasil .brasil-flag
-  height: 100% !important
 \ No newline at end of file
+  height: 100% !important
	@@ -583,14 +583,34 @@		@@ -583,14 +583,34 @@
583	</div>	583	</div>
584	{{/if}}	584	{{/if}}
585		585
586	- {{#compare event.setting.presenter event.title operator="!=="}}
587	- <div class="col-sm-12">
588	- <div class="row">
589	- <p>{{event.setting.presenter}}</p>
590	- </div>
591	- </div>
592	- {{^}}
593	<div class="col-sm-12">	586	<div class="col-sm-12">
		587	+ {{#compare event.setting.presenter event.title operator="!=="}}
		588	+
		589	+ <div class="row alert presenter-warning">
		590	+ {{event.setting.presenter}}
		591	+ </div>
		592	+
		593	+ <div class="row calendar__disabled">
		594	+ <div class="calendar__column col-xs-12 col-sm-6">
		595	+ <div class="row">
		596	+ <div class="calendar__presenter">{{event.title}}</div>
		597	+ <div class="calendar__presenter-category">{{category}}</div>
		598	+ </div>
		599	+ </div>
		600	+ <div class="calendar__column col-xs-6 col-sm-3">
		601	+ <div class="row">
		602	+ <div class="calendar__date"><i class="fa fa-calendar" aria-hidden="true"></i> {{date}}</div>
		603	+ </div>
		604	+ </div>
		605	+ <div class="calendar__column col-xs-6 col-sm-3">
		606	+ <div class="row">
		607	+ <div class="calendar__time"><i class="fa fa-clock-o" aria-hidden="true"></i> {{time}}</div>
		608	+ </div>
		609	+ </div>
		610	+ </div>
		611	+
		612	+ {{^}}
		613	+
594	<div class="row">	614	<div class="row">
595	<div class="calendar__column col-xs-12 col-sm-6">	615	<div class="calendar__column col-xs-12 col-sm-6">
596	<div class="row">	616	<div class="row">
1	// ------------------------------------	1	// ------------------------------------
2	// Organização da folha de estilo:	2	// Organização da folha de estilo:
3	-//	3	+//
4	// 0 - Dependências	4	// 0 - Dependências
5	// 1 - Variaveis	5	// 1 - Variaveis
6	// 1.1 - espacamento	6	// 1.1 - espacamento
	@@ -92,9 +92,9 @@ $darken: 15%		@@ -92,9 +92,9 @@ $darken: 15%
92		92
93	// 1.7 - screens	93	// 1.7 - screens
94	$screen-xs: 480px	94	$screen-xs: 480px
95	-$screen-sm: 767px
96	-$screen-md: 992px
97	-$screen-lg: 1200px	95	+$screen-sm: 767px
		96	+$screen-md: 992px
		97	+$screen-lg: 1200px
98		98
99	// ------------------------------------	99	// ------------------------------------
100	// 2 - Mixins	100	// 2 - Mixins
	@@ -439,7 +439,7 @@ h1		@@ -439,7 +439,7 @@ h1
439	margin-bottom: $gutter * 1.5	439	margin-bottom: $gutter * 1.5
440	.embed-responsive	440	.embed-responsive
441	border: 1px solid #333	441	border: 1px solid #333
442	-	442	+
443	&.video-smaller	443	&.video-smaller
444	@media (min-width: $screen-md)	444	@media (min-width: $screen-md)
445	width: 60%	445	width: 60%
	@@ -923,14 +923,14 @@ td		@@ -923,14 +923,14 @@ td
923	float: right	923	float: right
924	background: none	924	background: none
925	border: none	925	border: none
926	-	926	+
927	@each $category, $color in $categories	927	@each $category, $color in $categories
928	.#{$category} &	928	.#{$category} &
929	color: $color	929	color: $color
930		930
931	.contraste &	931	.contraste &
932	color: #fff	932	color: #fff
933	-	933	+
934	.updated-at	934	.updated-at
935	@extend .vote-result	935	@extend .vote-result
936	margin-top: $gutter	936	margin-top: $gutter
	@@ -965,7 +965,7 @@ td		@@ -965,7 +965,7 @@ td
965	&:after	965	&:after
966	display: block	966	display: block
967	content: "[...]"	967	content: "[...]"
968	- // content: "\e000"	968	+ // content: "\e000"
969	position: absolute	969	position: absolute
970	top: 0	970	top: 0
971	right: 2px	971	right: 2px
	@@ -995,12 +995,12 @@ td		@@ -995,12 +995,12 @@ td
995	text-transform: uppercase	995	text-transform: uppercase
996	.footable-row-detail-value	996	.footable-row-detail-value
997	display: block	997	display: block
998	-	998	+
999	// fix height	999	// fix height
1000	.footable-row-detail-row:nth-child(1)	1000	.footable-row-detail-row:nth-child(1)
1001	.footable-row-detail-value:before	1001	.footable-row-detail-value:before
1002	height: 30px	1002	height: 30px
1003	-	1003	+
1004	// check icon	1004	// check icon
1005	.footable-row-detail-row:nth-child(2)	1005	.footable-row-detail-row:nth-child(2)
1006	.footable-row-detail-name	1006	.footable-row-detail-name
	@@ -1117,8 +1117,15 @@ td		@@ -1117,8 +1117,15 @@ td
1117	content: "\f054"	1117	content: "\f054"
1118	&-disabled	1118	&-disabled
1119	opacity: 0.25	1119	opacity: 0.25
		1120	+
		1121	+.presenter-warning
		1122	+ background-color: #D9D9DD
		1123	+ font-weight: bold
1120		1124
1121	// .calendar	1125	// .calendar
		1126	+.calendar__disabled
		1127	+ opacity: 0.6
		1128	+
1122	.calendar__presenter	1129	.calendar__presenter
1123	font-weight: bold	1130	font-weight: bold
1124	font-size: 20px	1131	font-size: 20px
	@@ -1127,12 +1134,12 @@ td		@@ -1127,12 +1134,12 @@ td
1127	height: 90px	1134	height: 90px
1128	padding-top: 20px	1135	padding-top: 20px
1129	background-color: #eeeff1	1136	background-color: #eeeff1
1130	-	1137	+
1131	&:not(:last-child)	1138	&:not(:last-child)
1132	border-right: 2px solid #fff	1139	border-right: 2px solid #fff
1133	&:first-child	1140	&:first-child
1134	padding-left: 40px	1141	padding-left: 40px
1135	-	1142	+
1136	@media (max-width: $screen-sm)	1143	@media (max-width: $screen-sm)
1137	&:first-child	1144	&:first-child
1138	border-bottom: 2px solid #fff	1145	border-bottom: 2px solid #fff
	@@ -1144,14 +1151,14 @@ td		@@ -1144,14 +1151,14 @@ td
1144		1151
1145	&:not(:last-child)	1152	&:not(:last-child)
1146	border-right: 2px solid #262626	1153	border-right: 2px solid #262626
1147	-	1154	+
1148	@media (max-width: $screen-sm)	1155	@media (max-width: $screen-sm)
1149	&:first-child	1156	&:first-child
1150	border-bottom: 2px solid #262626	1157	border-bottom: 2px solid #262626
1151	border-right: none	1158	border-right: none
1152		1159
1153	// @media (max-width: $screen-sm)	1160	// @media (max-width: $screen-sm)
1154	-	1161	+
1155	.calendar__date,	1162	.calendar__date,
1156	.calendar__time	1163	.calendar__time
1157	font-size: 20px	1164	font-size: 20px
	@@ -1208,7 +1215,7 @@ td		@@ -1208,7 +1215,7 @@ td
1208		1215
1209	// 6.20 - participe	1216	// 6.20 - participe
1210	.talk__participate	1217	.talk__participate
1211	- .button	1218	+ .button
1212	position: relative	1219	position: relative
1213	z-index: 5	1220	z-index: 5
1214	.talk__counter	1221	.talk__counter
	@@ -1228,7 +1235,7 @@ td		@@ -1228,7 +1235,7 @@ td
1228	@each $category, $color in $categories	1235	@each $category, $color in $categories
1229	.#{$category} &	1236	.#{$category} &
1230	color: $color	1237	color: $color
1231	-	1238	+
1232	@media (max-width: $screen-sm)	1239	@media (max-width: $screen-sm)
1233	width: 100%	1240	width: 100%
1234	margin-left: 0	1241	margin-left: 0
	@@ -1579,4 +1586,4 @@ h3.titulo-destaque		@@ -1579,4 +1586,4 @@ h3.titulo-destaque
1579		1586
1580	// HACK IDG	1587	// HACK IDG
1581	#barra-brasil .brasil-flag	1588	#barra-brasil .brasil-flag
1582	- height: 100% !important
1583	\ No newline at end of file	1589	\ No newline at end of file
		1590	+ height: 100% !important