Sync before freeze and start into new layout

Leonardo Merlin
1 parent 43ca4ad7
Showing 4 changed files with 152 additions and 32 deletions Show diff stats
src/app/components/programa/programa.html
src/app/components/programa/programa.scss
src/app/components/programas/programas.html
src/app/components/programas/programas.scss
@@ -28,7 +28,7 @@
     </header>
     <section class="call-to-action--section">
-      <div class="row">
+      <div class="row show-content-row">
         <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
           <div class="button--themed">
             <button class="btn btn-block" ng-click="vm.showContent()">Conheça o programa</button>
@@ -42,6 +42,15 @@
               <div class="proposal-box make-proposal">
                 <h2 class="proposal-box--title">Faça uma proposta</h2>
                 <p class="proposal-box--text">Qual a sua sugestão para melhorar este programa?</p>
+                <div class="row">
+                  <div class="col-xs-8 col-xs-offset-2">
+                    <div class="button--themed">
+                      <button class="btn btn-block" ng-click="vm.goSendProposal()">
+                        Envie sua proposta
+                      </button>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -57,6 +66,43 @@
                   Lorem qual a sua sugestão para melhorar este programa
                   Lorem qual a sua sugestão para melhorar este programa?
                 </p>
+                <div class="col-lg-12">
+                  <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
+                    <div class="button--themed vote-buttons">
+                      <button class="btn btn-circle vote-buttons-up" ng-click="vm.vote(1)">
+                        <span class="sr-only">Eu <b>apoio</b> esta proposta.</span>
+                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+                      </button>
+
+                      <button class="btn btn-circle vote-buttons-down" ng-click="vm.vote(-1)">
+                        <span class="sr-only">Eu <b>não apoio</b> esta proposta.</span>
+                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+                      </button>
+
+                      <button class="btn btn-block vote-buttons-skip" ng-click="vm.vote(0)">
+                        <span class="sr-only">Pular esta proposta.</span>
+                        <span class="icon" aria-hidden="true"></span>
+                        Pular
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-lg-12">
+                  <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
+                    <div class="text-center">
+                      <button class="btn btn-link" ng-click="vm.showResults()">Resultados</button>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-12">
+                  <div class="col-xs-12">
+                    <div class="text-center">
+                      <span>Compartilhe esta proposta</span>
+                      <social-share></social-share>
+                    </div>
+                  </div>
+                </div>
+                <div class="clearfix"></div>
               </div>
             </div>
           </div>
@@ -42,8 +42,54 @@ $darken: 15%;
             background-color: #fff;
         }
     }
+
+    .btn-circle {
+        width: 64px;
+        height: 64px;
+        border-radius: 100%;
+    }
+
+    // &.vote-buttons {
+    //     padding-bottom: 40px;
+    // }
+
+    .btn.vote-buttons-up {
+        float: right;
+        margin-right: 10px;
+        background-color: #32dbb5;
+        border-bottom: 3px solid #1da485;
+
+        &:hover,
+        &:focus {
+            background-color: #1da485;
+        }
+    }
+
+    .btn.vote-buttons-down {
+        float: left;
+        margin-left: 10px;
+        background-color: #db4127;
+        border-bottom: 3px solid #9c2d1a;
+
+        &:hover,
+        &:focus {
+            background-color: #9c2d1a;
+        }
+
+
+        // @media (max-width: $screen-sm) {
+        //     margin-left:
+        // }
+    }
+
+    .vote-buttons-up,
+    .vote-buttons-down {
+        font-size: 30px;
+        margin-bottom: 20px;
+    }
 }
+
 .program-box {
     cursor: pointer;
     background-color: #fff;
@@ -231,7 +277,9 @@ $darken: 15%;
     .program-banner--abstract {
         padding-bottom: 10px;
     }
+}
+.show-content-row {
     .button--themed {
         .btn {
             font-size: 38px;
@@ -243,28 +291,24 @@ $darken: 15%;
     }
 }
-// .flexbox {
-//     .proposal-row {
-//         display: flex;
-//         flex-flow: row nowrap;
-//         // flex-direction: row;
-//         // flex-wrap: wrap;
-//     }
-
-//     .proposal-box {
-//         // flex: 1 100%;
-//         flex: 1 0 auto;
-//         // align-items: stretch;
-//     }
-// }
-// .flexboxlegacy {}
-
 .row-height {
-  display: table;
-  table-layout: fixed;
-  height: 100%;
-  width: 100%;
-  border-spacing: 20px;
+    display: table;
+    table-layout: fixed;
+    height: 100%;
+    width: 100%;
+    border-spacing: 20px;
+
+    @media (max-width: $screen-sm) {
+        display: block;
+    }
+
+    // @media (min-width: $screen-sm + 1) {
+    //     height: $hLine * 2;
+    // }
+
+    // @media (min-width: $screen-md + 1) {
+    //     height: $hLine * 2;
+    // }
 }
 .col-height {
@@ -281,6 +325,11 @@ $darken: 15%;
             border-color: $color;
         }
     }
+
+    @media (max-width: $screen-sm){
+        display: block;
+        border: none;
+    }
 }
 .inside {
@@ -292,8 +341,23 @@ $darken: 15%;
     height: 100%;
     margin-top: 0;
     margin-bottom: 0;
+
+
+    @media (max-width: $screen-sm) {
+        border: 1px solid;
+        border-radius: 3px;
+        padding: 20px;
+        margin: 10px 0;
+
+        @each $category, $color in $categories {
+            .#{$category} & {
+                border-color: $color;
+            }
+        }
+    }
 }
+
 .talk-proposal {
     margin-top: -20px;
 }
@@ -22,28 +22,31 @@
   <div class="col-sm-8 col-md-9">
     <article class="program-list">
       <header class="header">
-        <h2>Programas <span class="small">({{vm.filtredProgramList.length}}/{{::vm.programs.length}})</span></h2>
+        <h2>Conheça os programas <span class="small">({{vm.filtredProgramList.length}}/{{::vm.programs.length}})</span></h2>
         <button type="button" class="btn btn-link" ng-click="vm.showAll($event)">
-          <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas
+          <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os {{::vm.programs.length}} programas
         </button>
       </header>
       <div>
         <div class="col-sm-12">
           <aside class="form-inline">
-            <div class="form-group">
-              <label for="programListFilter" class="control-label sr-only">Filtrar programas:</label>
-              <input id="programListFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
+            <div class="row">
+              <div class="col-xs-6 col-sm-7 col-md-9">
+                <label for="programListFilter" class="control-label sr-only">Filtrar programas:</label>
+                <input id="programListFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
+              </div>
               <!-- <label for="selectCategoryFilter" class="control-label sr-only">Filtrar por tema:</label>
               <select id="selectCategoryFilter" name="selectCategoryFilter" class="form-control" ng-model="vm.categoryFilter" ng-options="category.name for category in vm.categories track by category.slug">
                 <option value="">-- Filtrar por tema --</option>
               </select> -->
-              <label for="selectOrderBy" class="control-label sr-only">Ordernar por:</label>
-              <select id="selectOrderBy" name="selectOrderBy" class="form-control" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
-                <option value="">-- Ordernar por: --</option>
-              </select>
-
+              <div class="col-xs-6 col-sm-5 col-md-3">
+                <label for="selectOrderBy" class="control-label sr-only">Ordernar por:</label>
+                <select id="selectOrderBy" name="selectOrderBy" class="form-control pull-right" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
+                  <option value="">-- Ordernar por: --</option>
+                </select>
+              </div>
               <!-- <div class="checkbox">
                 <label>
                   <input type="checkbox" ng-model="vm.reverse">
@@ -10,6 +10,13 @@
             top: 2px;
         }
     }
+
+    .form-inline {
+        input,
+        select {
+            width: 100%;
+        }
+    }
 }
 .category-list {
	@@ -28,7 +28,7 @@		@@ -28,7 +28,7 @@
28	</header>	28	</header>
29		29
30	<section class="call-to-action--section">	30	<section class="call-to-action--section">
31	- <div class="row">	31	+ <div class="row show-content-row">
32	<div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">	32	<div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
33	<div class="button--themed">	33	<div class="button--themed">
34	<button class="btn btn-block" ng-click="vm.showContent()">Conheça o programa</button>	34	<button class="btn btn-block" ng-click="vm.showContent()">Conheça o programa</button>
	@@ -42,6 +42,15 @@		@@ -42,6 +42,15 @@
42	<div class="proposal-box make-proposal">	42	<div class="proposal-box make-proposal">
43	<h2 class="proposal-box--title">Faça uma proposta</h2>	43	<h2 class="proposal-box--title">Faça uma proposta</h2>
44	<p class="proposal-box--text">Qual a sua sugestão para melhorar este programa?</p>	44	<p class="proposal-box--text">Qual a sua sugestão para melhorar este programa?</p>
		45	+ <div class="row">
		46	+ <div class="col-xs-8 col-xs-offset-2">
		47	+ <div class="button--themed">
		48	+ <button class="btn btn-block" ng-click="vm.goSendProposal()">
		49	+ Envie sua proposta
		50	+ </button>
		51	+ </div>
		52	+ </div>
		53	+ </div>
45	</div>	54	</div>
46	</div>	55	</div>
47	</div>	56	</div>
	@@ -57,6 +66,43 @@		@@ -57,6 +66,43 @@
57	Lorem qual a sua sugestão para melhorar este programa	66	Lorem qual a sua sugestão para melhorar este programa
58	Lorem qual a sua sugestão para melhorar este programa?	67	Lorem qual a sua sugestão para melhorar este programa?
59	</p>	68	</p>
		69	+ <div class="col-lg-12">
		70	+ <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
		71	+ <div class="button--themed vote-buttons">
		72	+ <button class="btn btn-circle vote-buttons-up" ng-click="vm.vote(1)">
		73	+ <span class="sr-only">Eu <b>apoio</b> esta proposta.</span>
		74	+ <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
		75	+ </button>
		76	+
		77	+ <button class="btn btn-circle vote-buttons-down" ng-click="vm.vote(-1)">
		78	+ <span class="sr-only">Eu <b>não apoio</b> esta proposta.</span>
		79	+ <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
		80	+ </button>
		81	+
		82	+ <button class="btn btn-block vote-buttons-skip" ng-click="vm.vote(0)">
		83	+ <span class="sr-only">Pular esta proposta.</span>
		84	+ <span class="icon" aria-hidden="true"></span>
		85	+ Pular
		86	+ </button>
		87	+ </div>
		88	+ </div>
		89	+ </div>
		90	+ <div class="col-lg-12">
		91	+ <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
		92	+ <div class="text-center">
		93	+ <button class="btn btn-link" ng-click="vm.showResults()">Resultados</button>
		94	+ </div>
		95	+ </div>
		96	+ </div>
		97	+ <div class="col-md-12">
		98	+ <div class="col-xs-12">
		99	+ <div class="text-center">
		100	+ <span>Compartilhe esta proposta</span>
		101	+ <social-share></social-share>
		102	+ </div>
		103	+ </div>
		104	+ </div>
		105	+ <div class="clearfix"></div>
60	</div>	106	</div>
61	</div>	107	</div>
62	</div>	108	</div>
	@@ -42,8 +42,54 @@ $darken: 15%;		@@ -42,8 +42,54 @@ $darken: 15%;
42	background-color: #fff;	42	background-color: #fff;
43	}	43	}
44	}	44	}
		45	+
		46	+ .btn-circle {
		47	+ width: 64px;
		48	+ height: 64px;
		49	+ border-radius: 100%;
		50	+ }
		51	+
		52	+ // &.vote-buttons {
		53	+ // padding-bottom: 40px;
		54	+ // }
		55	+
		56	+ .btn.vote-buttons-up {
		57	+ float: right;
		58	+ margin-right: 10px;
		59	+ background-color: #32dbb5;
		60	+ border-bottom: 3px solid #1da485;
		61	+
		62	+ &:hover,
		63	+ &:focus {
		64	+ background-color: #1da485;
		65	+ }
		66	+ }
		67	+
		68	+ .btn.vote-buttons-down {
		69	+ float: left;
		70	+ margin-left: 10px;
		71	+ background-color: #db4127;
		72	+ border-bottom: 3px solid #9c2d1a;
		73	+
		74	+ &:hover,
		75	+ &:focus {
		76	+ background-color: #9c2d1a;
		77	+ }
		78	+
		79	+
		80	+ // @media (max-width: $screen-sm) {
		81	+ // margin-left:
		82	+ // }
		83	+ }
		84	+
		85	+ .vote-buttons-up,
		86	+ .vote-buttons-down {
		87	+ font-size: 30px;
		88	+ margin-bottom: 20px;
		89	+ }
45	}	90	}
46		91
		92	+
47	.program-box {	93	.program-box {
48	cursor: pointer;	94	cursor: pointer;
49	background-color: #fff;	95	background-color: #fff;
	@@ -231,7 +277,9 @@ $darken: 15%;		@@ -231,7 +277,9 @@ $darken: 15%;
231	.program-banner--abstract {	277	.program-banner--abstract {
232	padding-bottom: 10px;	278	padding-bottom: 10px;
233	}	279	}
		280	+}
234		281
		282	+.show-content-row {
235	.button--themed {	283	.button--themed {
236	.btn {	284	.btn {
237	font-size: 38px;	285	font-size: 38px;
	@@ -243,28 +291,24 @@ $darken: 15%;		@@ -243,28 +291,24 @@ $darken: 15%;
243	}	291	}
244	}	292	}
245		293
246	-// .flexbox {
247	-// .proposal-row {
248	-// display: flex;
249	-// flex-flow: row nowrap;
250	-// // flex-direction: row;
251	-// // flex-wrap: wrap;
252	-// }
253	-
254	-// .proposal-box {
255	-// // flex: 1 100%;
256	-// flex: 1 0 auto;
257	-// // align-items: stretch;
258	-// }
259	-// }
260	-// .flexboxlegacy {}
261	-
262	.row-height {	294	.row-height {
263	- display: table;
264	- table-layout: fixed;
265	- height: 100%;
266	- width: 100%;
267	- border-spacing: 20px;	295	+ display: table;
		296	+ table-layout: fixed;
		297	+ height: 100%;
		298	+ width: 100%;
		299	+ border-spacing: 20px;
		300	+
		301	+ @media (max-width: $screen-sm) {
		302	+ display: block;
		303	+ }
		304	+
		305	+ // @media (min-width: $screen-sm + 1) {
		306	+ // height: $hLine * 2;
		307	+ // }
		308	+
		309	+ // @media (min-width: $screen-md + 1) {
		310	+ // height: $hLine * 2;
		311	+ // }
268	}	312	}
269		313
270	.col-height {	314	.col-height {
	@@ -281,6 +325,11 @@ $darken: 15%;		@@ -281,6 +325,11 @@ $darken: 15%;
281	border-color: $color;	325	border-color: $color;
282	}	326	}
283	}	327	}
		328	+
		329	+ @media (max-width: $screen-sm){
		330	+ display: block;
		331	+ border: none;
		332	+ }
284	}	333	}
285		334
286	.inside {	335	.inside {
	@@ -292,8 +341,23 @@ $darken: 15%;		@@ -292,8 +341,23 @@ $darken: 15%;
292	height: 100%;	341	height: 100%;
293	margin-top: 0;	342	margin-top: 0;
294	margin-bottom: 0;	343	margin-bottom: 0;
		344	+
		345	+
		346	+ @media (max-width: $screen-sm) {
		347	+ border: 1px solid;
		348	+ border-radius: 3px;
		349	+ padding: 20px;
		350	+ margin: 10px 0;
		351	+
		352	+ @each $category, $color in $categories {
		353	+ .#{$category} & {
		354	+ border-color: $color;
		355	+ }
		356	+ }
		357	+ }
295	}	358	}
296		359
		360	+
297	.talk-proposal {	361	.talk-proposal {
298	margin-top: -20px;	362	margin-top: -20px;
299	}	363	}
	@@ -10,6 +10,13 @@		@@ -10,6 +10,13 @@
10	top: 2px;	10	top: 2px;
11	}	11	}
12	}	12	}
		13	+
		14	+ .form-inline {
		15	+ input,
		16	+ select {
		17	+ width: 100%;
		18	+ }
		19	+ }
13	}	20	}
14		21
15	.category-list {	22	.category-list {