Merge branch 'merlin' into rafael

Leonardo Merlin
2 parents 8820112c 95c326d0
Showing 10 changed files with 209 additions and 58 deletions Show diff stats
.nvmrc
script-staging.sh
src/app/components/navbar/navbar.html
src/app/components/navbar/navbar.scss
src/app/components/proposal-carousel/proposal-carousel.scss
src/app/components/proposal-stats/proposal-stats.scss
src/app/components/social-share/social-share.html
src/app/components/social-share/social-share.scss
src/app/layout.scss
src/app/pages/programas/programa.html
@@ -0,0 +1 @@
+v0.12.7
@@ -0,0 +1,6 @@
+#!/usr/bin/bash
+
+gulp clean && gulp build --staging
+git add --all -f dist/
+git commit -m "Update dist"
+git push upstream staging && wget -qO- --no-check-certificate 'ci.serpro/view/Noosfero/job/DialogaApp-Deploy-Homologa%C3%A7%C3%A3o/build?token=DIALOGA_TOKEN' &> /dev/null
 <div class="app-navbar">
   <nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation">
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
-        <span class="sr-only">Alternar menu de navegação</span>
-        <span class="icon-bar" aria-hidden="true"></span>
-        <span class="icon-bar" aria-hidden="true"></span>
-        <span class="icon-bar" aria-hidden="true"></span>
-      </button>
-      <a class="navbar-brand" ui-sref="inicio">
-        <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" />
-      </a>
+      <div class="row">
+        <div class="row-height">
+          <div class="col-xs-10 col-xs-height col-middle">
+            <a class="navbar-brand" ui-sref="inicio">
+              <img src="/assets/images/logo.png" class="img-responsive" alt="Dialoga Brasil | O país fica melhor quando você participa" />
+            </a>
+          </div>
+          <div class="col-xs-2 col-xs-height col-middle">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
+              <span class="sr-only">Alternar menu de navegação</span>
+              <span class="icon-bar" aria-hidden="true"></span>
+              <span class="icon-bar" aria-hidden="true"></span>
+              <span class="icon-bar" aria-hidden="true"></span>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
     <div id="navbar-collapse" class="collapse navbar-collapse">
@@ -28,7 +36,7 @@
     </div>
   </nav>
-  <div id="dialoga-nas-redes">
+  <div id="dialoga-nas-redes" class="hidden-xs">
     <div class="text text-right">
       <p>DIALOGA<br><b>NAS REDES</b></p>
     </div>
@@ -19,8 +19,6 @@
     }
     .navbar-toggle {
-        padding: 12px 10px;
-        margin-top: 20px;
         border-radius: 100%;
         background-color: #5e749d;
@@ -30,13 +28,12 @@
         }
         @media screen and (max-width: $screen-md) {
-            margin-top: 45px;
+            padding: 12px 10px;
+            margin: 0;
         }
     }
     .navbar-nav .divider span {
-        padding: 0 0 10px 0;
-        margin: 53px 10px 0 10px;
         display: block;
         @media screen and (max-width: $screen-md) {
@@ -48,11 +45,9 @@
         padding: 0;
     }
-    .navbar-nav > li {
+    .navbar-nav {
-        & > a {
-            padding: 0 0 10px 0;
-            margin: 55px 10px 0 10px;
+        li > a {
             text-transform: uppercase;
             color: #616161;
             font-weight: bold;
@@ -65,41 +60,149 @@
             .contraste & {
                 color: #fff;
             }
+        }
+
+        li.active > a {
+            border-bottom: 2px solid #77BB34;
+        }
+    }
-            @media screen and (max-width: $screen-md) {
-                margin-top: 5px;
+    .contraste & {
+        .nav > li > a:hover,
+        .nav > li > a:focus {
+            color: #fff;
+        }
+
+        .active a {
+            border-bottom-color: #fff;
+        }
+    }
+
+    // <= Mobile
+    @media screen and (max-width: ($screen-sm - 1)) {
+        .navbar-collapse {
+            margin: 0 -15px;
+        }
+
+        .navbar-nav {
+            background-color: #eee;
+
+            & > li {
+                // border-top: 1px solid #ccc;
+                -moz-border-image: -moz-linear-gradient(left, #eee 0%, #ccc 100%);
+                -webkit-border-image: -webkit-linear-gradient(left, #eee 0%, #ccc 100%);
+                border-image: linear-gradient(to right, #eee 0%, #ccc 100%);
+                border-image-slice: 1;
+
+                border-top: 1px solid #ccc;
+                border-bottom: 0px solid #ccc;
+                border-left: 0px solid #ccc;
+                border-right: 0px solid #ccc;
+                &:last-child {
+                    border-bottom: 1px solid #ccc;
+                }
+            }
+
+            & > li > a {
+                padding: 12px 20px;
+                margin: 0;
                 text-align: right;
             }
+
+            & > li.active > a {
+                border-bottom: none;
+                border-right: 4px solid #77BB34;
+            }
+
+            .dropdown-toggle {
+                margin-top: 0px;
+
+            }
+            .dropdown-menu {
+                position: relative;
+                margin-right: 10px;
+            }
+
+            .social-share {
+                float: right;
+            }
+        }
+
+    }
+
+    // >= Table, < Destop
+    @media screen and (min-width: $screen-sm) and (max-width: ($screen-md - 1)) {
+        .navbar-brand {
+            padding-top: 0;
+            margin-top: 0;
+            margin-bottom: 60px;
         }
-        &.active > a {
-            border-bottom: 3px solid #77BB34;
+        .navbar-collapse {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
-            @media screen and (max-width: $screen-md) {
-                border: none;
-                background-color: #eee;
-                padding: 10px 30px 10px 0px;
-                border-right: 3px solid #77BB34;
+            ul.navbar-nav {
+                width: 100%;
+                float: none;
+            }
+
+            li > a {
+                margin: 0 10px;
+                padding: 0 0 10px 0;
+            }
+
+            li.dropdown {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+
+                .dropdown-toggle {
+                    position: relative;
+                    width: 160px;
+                    margin: 0 5px 5px 0;
+                    padding: 0;
+                }
             }
         }
+    }
+    // >= Desktop
+    @media screen and (min-width: $screen-md) {
-        .dropdown-toggle {
-            margin-top: 50px;
+        li > a {
+            padding: 15px 0;
+            margin: 0 9px;
+        }
-            @media screen and (max-width: $screen-md) {
-                margin-top: 0px;
+        li.divider span{
+            padding: 12px 0;
+            line-height: 20px;
+        }
+
+        li.dropdown {
+            .dropdown-toggle {
+                padding: 6px 10px;
+                margin: 0;
             }
         }
     }
-    .contraste & {
-        .nav > li > a:hover,
-        .nav > li > a:focus {
-            color: #fff;
+    // > Desktop Large
+    @media screen and (min-width: $screen-lg) {
+        .navbar-brand {
+            margin-bottom: 30px;
         }
-        .active a {
-            border-bottom-color: #fff;
+        ul.navbar-nav {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+        }
+
+        li.divider span{
+            padding: 12px 6px;
         }
     }
 }
@@ -116,4 +219,4 @@
         right: 210px;
         width: 100px;
     }
-}
 \ No newline at end of file
+}
@@ -16,6 +16,14 @@
             right: 15px;
             top: 8px;
+            li {
+                padding-left: 15px;
+
+                &:first-child {
+                    padding-left: 0;
+                }
+            }
+
             button {
                 border: 1px solid #fff;
                 border-radius: 100%;
@@ -7,6 +7,11 @@
     li {
         margin: 0 5px;
+        padding-left: 15px;
+
+        &:first-child {
+            padding-left: 0px;
+        }
     }
     &-views {}
@@ -3,12 +3,13 @@
 </div>
 <ul class="social-share list-inline">
   <li>
-      <!-- socialshare-via="687948707977695" -->
+      <!-- socialshare-via="687948707977695" dialoga -->
+      <!-- socialshare-via="476168325877872" MyApp / Test -->
     <a href="#" role="button"
       socialshare
       socialshare-provider="facebook"
       socialshare-type="feed"
-      socialshare-via="476168325877872"
+      socialshare-via="687948707977695"
       socialshare-url="http://dialoga.gov.br"
       socialshare-redirect-uri="https://dialoga.gov.br/"
       socialshare-media="http://dialoga.gov.br/images/logo.png"
@@ -10,6 +10,7 @@
     &.list-inline {
         margin: 0;
     }
+
     li {
         float: left;
         padding: 0;
@@ -33,7 +34,7 @@
         background-color: #E0E0E0;
         border-radius: 5px;
-        @media screen and (max-width: $screen-xs) {
+        @media screen and (max-width: $screen-sm) {
             background-color: #fff;
         }
@@ -58,6 +59,11 @@
         right: 20px;
         border-width: 0 10px 10px;
         border-bottom-color: #E0E0E0;
+
+
+        @media screen and (max-width: $screen-sm) {
+            border-bottom-color: #fff;
+        }
     }
     @media screen and (max-width: $screen-xs) {
@@ -24,28 +24,28 @@
   vertical-align: bottom;
 }
-@media (min-width: 480px) {
-  .row-xs-height {
+// @media (min-width: 480px) {
+.row-xs-height {
     display: table;
     table-layout: fixed;
     height: 100%;
     width: 100%;
-  }
-  .col-xs-height {
+}
+.col-xs-height {
     display: table-cell;
     float: none;
     height: 100%;
-  }
-  .col-xs-top {
+}
+.col-xs-top {
     vertical-align: top;
-  }
-  .col-xs-middle {
+}
+.col-xs-middle {
     vertical-align: middle;
-  }
-  .col-xs-bottom {
+}
+.col-xs-bottom {
     vertical-align: bottom;
-  }
 }
+// }
 @media (min-width: 768px) {
   .row-sm-height {
@@ -228,10 +228,24 @@ ul.list-color li:before {
   color: #2a9677;
 }
-ul li {
-  padding-left: 2em;
-  padding-bottom: 15px;
-  text-indent: -0.7em;
+.page--program {
+    .program-content {
+        ul li {
+          padding-left: 2em;
+          padding-bottom: 15px;
+          text-indent: -0.7em;
+        }
+
+        .col-middle {
+            vertical-align: top;
+        }
+
+        @media screen and (min-width: $screen-lg) {
+            img {
+                width: 100%;
+            }
+        }
+    }
 }
 .destaque-bg-cinza {
@@ -40,7 +40,6 @@
                   </div>
                   <div class="program-preview--abstract-details">
                     <div ng-bind-html="pagePrograma.article.summaryExtended"></div>
-                    <p>Lorem ipsum dolor sit amet, ea veniam mucius ocurreret vix, ius ex nisl vidisse partiendo. Blandit nominavi cum ei, paulo quaestio his ei, eum minim salutandi in. Civibus albucius in quo, et eam posse facilisis. Debet suavitate sea ut, his ei feugiat fastidii eleifend. Quo ex quando maiestatis voluptatum, mel te perpetua maiestatis, sit ceteros legendos deserunt ea. Enim dolores moderatius eu pro, ad quo ignota aliquid meliore.</p>
                   </div>
                   <div class="program-preview--share">
                     <div class="program-preview--share-label">COMPARTILHE ESTE <b>PROGRAMA</b></div>
@@ -0,0 +1,6 @@		@@ -0,0 +1,6 @@
	1	+#!/usr/bin/bash
	2	+
	3	+gulp clean && gulp build --staging
	4	+git add --all -f dist/
	5	+git commit -m "Update dist"
	6	+git push upstream staging && wget -qO- --no-check-certificate 'ci.serpro/view/Noosfero/job/DialogaApp-Deploy-Homologa%C3%A7%C3%A3o/build?token=DIALOGA_TOKEN' &> /dev/null
	@@ -19,8 +19,6 @@		@@ -19,8 +19,6 @@
19	}	19	}
20		20
21	.navbar-toggle {	21	.navbar-toggle {
22	- padding: 12px 10px;
23	- margin-top: 20px;
24	border-radius: 100%;	22	border-radius: 100%;
25	background-color: #5e749d;	23	background-color: #5e749d;
26		24
	@@ -30,13 +28,12 @@		@@ -30,13 +28,12 @@
30	}	28	}
31		29
32	@media screen and (max-width: $screen-md) {	30	@media screen and (max-width: $screen-md) {
33	- margin-top: 45px;	31	+ padding: 12px 10px;
		32	+ margin: 0;
34	}	33	}
35	}	34	}
36		35
37	.navbar-nav .divider span {	36	.navbar-nav .divider span {
38	- padding: 0 0 10px 0;
39	- margin: 53px 10px 0 10px;
40	display: block;	37	display: block;
41		38
42	@media screen and (max-width: $screen-md) {	39	@media screen and (max-width: $screen-md) {
	@@ -48,11 +45,9 @@		@@ -48,11 +45,9 @@
48	padding: 0;	45	padding: 0;
49	}	46	}
50		47
51	- .navbar-nav > li {	48	+ .navbar-nav {
52		49
53	- & > a {
54	- padding: 0 0 10px 0;
55	- margin: 55px 10px 0 10px;	50	+ li > a {
56	text-transform: uppercase;	51	text-transform: uppercase;
57	color: #616161;	52	color: #616161;
58	font-weight: bold;	53	font-weight: bold;
	@@ -65,41 +60,149 @@		@@ -65,41 +60,149 @@
65	.contraste & {	60	.contraste & {
66	color: #fff;	61	color: #fff;
67	}	62	}
		63	+ }
		64	+
		65	+ li.active > a {
		66	+ border-bottom: 2px solid #77BB34;
		67	+ }
		68	+ }
68		69
69	- @media screen and (max-width: $screen-md) {
70	- margin-top: 5px;	70	+ .contraste & {
		71	+ .nav > li > a:hover,
		72	+ .nav > li > a:focus {
		73	+ color: #fff;
		74	+ }
		75	+
		76	+ .active a {
		77	+ border-bottom-color: #fff;
		78	+ }
		79	+ }
		80	+
		81	+ // <= Mobile
		82	+ @media screen and (max-width: ($screen-sm - 1)) {
		83	+ .navbar-collapse {
		84	+ margin: 0 -15px;
		85	+ }
		86	+
		87	+ .navbar-nav {
		88	+ background-color: #eee;
		89	+
		90	+ & > li {
		91	+ // border-top: 1px solid #ccc;
		92	+ -moz-border-image: -moz-linear-gradient(left, #eee 0%, #ccc 100%);
		93	+ -webkit-border-image: -webkit-linear-gradient(left, #eee 0%, #ccc 100%);
		94	+ border-image: linear-gradient(to right, #eee 0%, #ccc 100%);
		95	+ border-image-slice: 1;
		96	+
		97	+ border-top: 1px solid #ccc;
		98	+ border-bottom: 0px solid #ccc;
		99	+ border-left: 0px solid #ccc;
		100	+ border-right: 0px solid #ccc;
		101	+ &:last-child {
		102	+ border-bottom: 1px solid #ccc;
		103	+ }
		104	+ }
		105	+
		106	+ & > li > a {
		107	+ padding: 12px 20px;
		108	+ margin: 0;
71	text-align: right;	109	text-align: right;
72	}	110	}
		111	+
		112	+ & > li.active > a {
		113	+ border-bottom: none;
		114	+ border-right: 4px solid #77BB34;
		115	+ }
		116	+
		117	+ .dropdown-toggle {
		118	+ margin-top: 0px;
		119	+
		120	+ }
		121	+ .dropdown-menu {
		122	+ position: relative;
		123	+ margin-right: 10px;
		124	+ }
		125	+
		126	+ .social-share {
		127	+ float: right;
		128	+ }
		129	+ }
		130	+
		131	+ }
		132	+
		133	+ // >= Table, < Destop
		134	+ @media screen and (min-width: $screen-sm) and (max-width: ($screen-md - 1)) {
		135	+ .navbar-brand {
		136	+ padding-top: 0;
		137	+ margin-top: 0;
		138	+ margin-bottom: 60px;
73	}	139	}
74		140
75	- &.active > a {
76	- border-bottom: 3px solid #77BB34;	141	+ .navbar-collapse {
		142	+ position: absolute;
		143	+ left: 0;
		144	+ bottom: 0;
		145	+ width: 100%;
77		146
78	- @media screen and (max-width: $screen-md) {
79	- border: none;
80	- background-color: #eee;
81	- padding: 10px 30px 10px 0px;
82	- border-right: 3px solid #77BB34;	147	+ ul.navbar-nav {
		148	+ width: 100%;
		149	+ float: none;
		150	+ }
		151	+
		152	+ li > a {
		153	+ margin: 0 10px;
		154	+ padding: 0 0 10px 0;
		155	+ }
		156	+
		157	+ li.dropdown {
		158	+ position: absolute;
		159	+ right: 0;
		160	+ bottom: 0;
		161	+
		162	+ .dropdown-toggle {
		163	+ position: relative;
		164	+ width: 160px;
		165	+ margin: 0 5px 5px 0;
		166	+ padding: 0;
		167	+ }
83	}	168	}
84	}	169	}
		170	+ }
		171	+ // >= Desktop
		172	+ @media screen and (min-width: $screen-md) {
85		173
86	- .dropdown-toggle {
87	- margin-top: 50px;	174	+ li > a {
		175	+ padding: 15px 0;
		176	+ margin: 0 9px;
		177	+ }
88		178
89	- @media screen and (max-width: $screen-md) {
90	- margin-top: 0px;	179	+ li.divider span{
		180	+ padding: 12px 0;
		181	+ line-height: 20px;
		182	+ }
		183	+
		184	+ li.dropdown {
		185	+ .dropdown-toggle {
		186	+ padding: 6px 10px;
		187	+ margin: 0;
91	}	188	}
92	}	189	}
93	}	190	}
94		191
95	- .contraste & {
96	- .nav > li > a:hover,
97	- .nav > li > a:focus {
98	- color: #fff;	192	+ // > Desktop Large
		193	+ @media screen and (min-width: $screen-lg) {
		194	+ .navbar-brand {
		195	+ margin-bottom: 30px;
99	}	196	}
100		197
101	- .active a {
102	- border-bottom-color: #fff;	198	+ ul.navbar-nav {
		199	+ position: absolute;
		200	+ right: 0;
		201	+ bottom: 0;
		202	+ }
		203	+
		204	+ li.divider span{
		205	+ padding: 12px 6px;
103	}	206	}
104	}	207	}
105	}	208	}
	@@ -116,4 +219,4 @@		@@ -116,4 +219,4 @@
116	right: 210px;	219	right: 210px;
117	width: 100px;	220	width: 100px;
118	}	221	}
119	-}
120	\ No newline at end of file	222	\ No newline at end of file
		223	+}
	@@ -16,6 +16,14 @@		@@ -16,6 +16,14 @@
16	right: 15px;	16	right: 15px;
17	top: 8px;	17	top: 8px;
18		18
		19	+ li {
		20	+ padding-left: 15px;
		21	+
		22	+ &:first-child {
		23	+ padding-left: 0;
		24	+ }
		25	+ }
		26	+
19	button {	27	button {
20	border: 1px solid #fff;	28	border: 1px solid #fff;
21	border-radius: 100%;	29	border-radius: 100%;