Download as
Browse Code »

Commit c07aafc1f91a83ec48a428f769ea4148f264b3fe

Authored by Leonardo Merlin
1 parent 1110f5a4
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Refact event list at home

Showing 6 changed files with 221 additions and 159 deletions   Show diff stats
src/app/components/breadcrumb/breadcrumb.scss
  Diff comments   View file @c07aafc
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 2
3 .breadcrumb { 3 .breadcrumb {
4 background: none; 4 background: none;
5 - padding: 15px 0; 5 + padding: 0;
6 margin: 0; 6 margin: 0;
7 } 7 }
8 8
src/app/components/event-list/event-list.html
  Diff comments   View file @c07aafc
1 <div class="event-list"> 1 <div class="event-list">
2 - <div class="event-tab--trigger" ng-show="!eventListCtrl.isListVisible" ng-click="eventListCtrl.toggleView()">  
3 - <div class="event-tab--header">  
4 - <div class="event-tab--icon">  
5 - <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 2 +
  3 + <section class="color-theme-common-bg">
  4 +
  5 + <div class="container">
  6 + <div class="event-bar--trigger">
  7 + <div class="event-bar--trigger-top">
  8 + <div class="col-sm-6">
  9 + <h1 class="title">
  10 + <span class="glyphicon glyphicon-calendar icon-circle color-theme-common-fg"></span>
  11 + Agenda <b>Dialoga Brasil</b>
  12 + </h1>
  13 + </div>
  14 + <div class="col-sm-6">
  15 + <h2 class="event-bar--trigger-toggle text-right" ng-click="eventListCtrl.toggleView()">
  16 + <span><b>18</b> bate papos <b>agendados</b></span>
  17 + <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
  18 + </h2>
  19 + </div>
  20 + </div>
6 </div> 21 </div>
7 - <div class="event-tab--title">Bate-Papo com ministr@s</div>  
8 </div> 22 </div>
9 - <button class="btn btn-link event-tab--button">  
10 - <span class="event-tab--total-scheduled">18</span>  
11 - <span>bate-papos agendados</span>  
12 - <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>  
13 - </button>  
14 - </div> 23 + </section>
15 24
16 - <div class="event-list--panel ng-hide" ng-show="eventListCtrl.isListVisible">  
17 - <div class="event-list--header">  
18 - <div class="event-list--icon">  
19 - <div class="glyphicon glyphicon-calendar" aria-hidden="true"></div>  
20 - </div>  
21 - <h2 class="event-list--title">Bate-papo com ministr@s</h2>  
22 - <div class="event-list--minimize">  
23 - <button type="button" class="btn btn-link" ng-click="eventListCtrl.toggleView()">  
24 - <span>Minimizar</span>  
25 - <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> 25 + <section class="section-table">
  26 + <div class="container">
  27 + <!-- <div class="event-tab--trigger" ng-show="!eventListCtrl.isListVisible" ng-click="eventListCtrl.toggleView()">
  28 + <div class="event-tab--header">
  29 + <div class="event-tab--icon">
  30 + <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
  31 + </div>
  32 + <div class="event-tab--title">Bate-Papo com ministr@s</div>
  33 + </div>
  34 + <button class="btn btn-link event-tab--button">
  35 + <span class="event-tab--total-scheduled">18</span>
  36 + <span>bate-papos agendados</span>
  37 + <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
26 </button> 38 </button>
  39 + </div> -->
  40 +
  41 + <div class="event-list--panel ng-hide" ng-show="eventListCtrl.isListVisible">
  42 + <div class="event-list--table-wrapper">
  43 + <div class="table-responsive">
  44 + <table class="table event-list--table">
  45 + <!-- <thead></thead> -->
  46 + <tbody>
  47 + <tr>
  48 + <td>
  49 + <span class="date">dd/mm/aaaa</span>
  50 + <span class="separator">-</span>
  51 + <span class="time">HH:mm</span>
  52 + <span class="separator">-</span>
  53 + <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
  54 + <button type="button" class="btn color-theme-common-bg" ng-click="eventListCtrl.subscribe('EVENT_ID')">
  55 + Inscreva-se
  56 + <span class="sr-only">no bate-papo com (ministro) no dia (date) as (hh:mm) horas</span>
  57 + </button>
  58 + <span class="subscribers">123 inscritos</span>
  59 + </td>
  60 + </tr>
  61 + <tr>
  62 + <td>
  63 + <span class="date">dd/mm/aaaa</span>
  64 + <span class="separator">-</span>
  65 + <span class="time">HH:mm</span>
  66 + <span class="separator">-</span>
  67 + <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
  68 + <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
  69 + <span class="subscribers">123 inscritos</span>
  70 + </td>
  71 + </tr>
  72 + <tr>
  73 + <td>
  74 + <span class="date">dd/mm/aaaa</span>
  75 + <span class="separator">-</span>
  76 + <span class="time">HH:mm</span>
  77 + <span class="separator">-</span>
  78 + <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
  79 + <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
  80 + <span class="subscribers">123 inscritos</span>
  81 + </td>
  82 + </tr>
  83 + <tr>
  84 + <td>
  85 + <span class="date">dd/mm/aaaa</span>
  86 + <span class="separator">-</span>
  87 + <span class="time">HH:mm</span>
  88 + <span class="separator">-</span>
  89 + <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
  90 + <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
  91 + <span class="subscribers">123 inscritos</span>
  92 + </td>
  93 + </tr>
  94 + <tr>
  95 + <td>
  96 + <span class="date">dd/mm/aaaa</span>
  97 + <span class="separator">-</span>
  98 + <span class="time">HH:mm</span>
  99 + <span class="separator">-</span>
  100 + <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
  101 + <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
  102 + <span class="subscribers">123 inscritos</span>
  103 + </td>
  104 + </tr>
  105 + <tr>
  106 + <td>
  107 + <span class="date">dd/mm/aaaa</span>
  108 + <span class="separator">-</span>
  109 + <span class="time">HH:mm</span>
  110 + <span class="separator">-</span>
  111 + <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
  112 + <button type="button" class="btn color-theme-common-bg">Inscreva-se</button>
  113 + <span class="subscribers">123 inscritos</span>
  114 + </td>
  115 + </tr>
  116 + </tbody>
  117 + <!-- <tfooter></tfooter> -->
  118 + </table>
  119 + </div>
  120 + </div>
27 </div> 121 </div>
28 </div> 122 </div>
29 - <div class="event-list--table-wrapper">  
30 - <div class="table-responsive">  
31 - <table class="table event-list--table">  
32 - <!-- <thead></thead> -->  
33 - <tbody>  
34 - <tr>  
35 - <td>  
36 - <span class="date">dd/mm/aaaa</span>  
37 - <span class="separator">-</span>  
38 - <span class="time">HH:mm</span>  
39 - <span class="separator">-</span>  
40 - <span class="description">Mais médicos, Segurança Nacional, SAMU</span>  
41 - <button type="button" class="btn" ng-click="eventListCtrl.subscribe('EVENT_ID')">  
42 - Inscreva-se  
43 - <span class="sr-only">no bate-papo com (ministro) no dia (date) as (hh:mm) horas</span>  
44 - </button>  
45 - <span class="subscribers">123 inscritos</span>  
46 - </td>  
47 - </tr>  
48 - <tr>  
49 - <td>  
50 - <span class="date">dd/mm/aaaa</span>  
51 - <span class="separator">-</span>  
52 - <span class="time">HH:mm</span>  
53 - <span class="separator">-</span>  
54 - <span class="description">Mais médicos, Segurança Nacional, SAMU</span>  
55 - <button type="button" class="btn">Inscreva-se</button>  
56 - <span class="subscribers">123 inscritos</span>  
57 - </td>  
58 - </tr>  
59 - <tr>  
60 - <td>  
61 - <span class="date">dd/mm/aaaa</span>  
62 - <span class="separator">-</span>  
63 - <span class="time">HH:mm</span>  
64 - <span class="separator">-</span>  
65 - <span class="description">Mais médicos, Segurança Nacional, SAMU</span>  
66 - <button type="button" class="btn">Inscreva-se</button>  
67 - <span class="subscribers">123 inscritos</span>  
68 - </td>  
69 - </tr>  
70 - <tr>  
71 - <td>  
72 - <span class="date">dd/mm/aaaa</span>  
73 - <span class="separator">-</span>  
74 - <span class="time">HH:mm</span>  
75 - <span class="separator">-</span>  
76 - <span class="description">Mais médicos, Segurança Nacional, SAMU</span>  
77 - <button type="button" class="btn">Inscreva-se</button>  
78 - <span class="subscribers">123 inscritos</span>  
79 - </td>  
80 - </tr>  
81 - <tr>  
82 - <td>  
83 - <span class="date">dd/mm/aaaa</span>  
84 - <span class="separator">-</span>  
85 - <span class="time">HH:mm</span>  
86 - <span class="separator">-</span>  
87 - <span class="description">Mais médicos, Segurança Nacional, SAMU</span>  
88 - <button type="button" class="btn">Inscreva-se</button>  
89 - <span class="subscribers">123 inscritos</span>  
90 - </td>  
91 - </tr>  
92 - <tr>  
93 - <td>  
94 - <span class="date">dd/mm/aaaa</span>  
95 - <span class="separator">-</span>  
96 - <span class="time">HH:mm</span>  
97 - <span class="separator">-</span>  
98 - <span class="description">Mais médicos, Segurança Nacional, SAMU</span>  
99 - <button type="button" class="btn">Inscreva-se</button>  
100 - <span class="subscribers">123 inscritos</span>  
101 - </td>  
102 - </tr>  
103 - </tbody>  
104 - <!-- <tfooter></tfooter> -->  
105 - </table>  
106 - </div>  
107 - </div>  
108 - </div> 123 + </section>
109 </div> 124 </div>
src/app/components/event-list/event-list.scss
  Diff comments   View file @c07aafc
1 .event-list { 1 .event-list {
2 position: relative; 2 position: relative;
3 - background-color: #eeeeee;  
4 3
5 .contraste & { 4 .contraste & {
6 background-color: #262626; 5 background-color: #262626;
7 } 6 }
8 7
  8 + .section-table {
  9 + background-color: #e1e1e1;
  10 + }
  11 +
9 .event-list--panel { 12 .event-list--panel {
10 height: 310px; 13 height: 310px;
11 - border: 1px solid #333333;  
12 padding: 20px; 14 padding: 20px;
13 margin: 20px 0; 15 margin: 20px 0;
14 line-height: 20px; 16 line-height: 20px;
@@ -19,25 +21,25 @@ @@ -19,25 +21,25 @@
19 line-height: 0px; 21 line-height: 0px;
20 } 22 }
21 23
22 - .event-list--header {  
23 - border-bottom: 1px solid #333333;  
24 - } 24 + // .event-list--header {
  25 + // border-bottom: 1px solid #333333;
  26 + // }
25 27
26 - .event-list--icon {  
27 - font-size: 25px;  
28 - display: inline-block;  
29 - } 28 + // .event-list--icon {
  29 + // font-size: 25px;
  30 + // display: inline-block;
  31 + // }
30 32
31 - .event-list--title {  
32 - margin: 0 10px;  
33 - display: inline-block;  
34 - } 33 + // .event-list--title {
  34 + // margin: 0 10px;
  35 + // display: inline-block;
  36 + // }
35 37
36 - .event-list--minimize {  
37 - display: inline-block;  
38 - float: right;  
39 - width: 100px;  
40 - } 38 + // .event-list--minimize {
  39 + // display: inline-block;
  40 + // float: right;
  41 + // width: 100px;
  42 + // }
41 } 43 }
42 44
43 .event-tab--trigger { 45 .event-tab--trigger {
@@ -68,14 +70,51 @@ @@ -68,14 +70,51 @@
68 } 70 }
69 } 71 }
70 72
  73 + .event-bar--trigger {
  74 + color: #fff;
  75 +
  76 + h1 {
  77 + margin-bottom: 20px;
  78 + }
  79 +
  80 + .icon-circle {
  81 + font-size: 28px;
  82 + border-radius: 100%;
  83 + padding: 8px 8px 8px 10px;
  84 + background-color: #fff;
  85 + }
  86 +
  87 + &-toggle {
  88 + .glyphicon {
  89 + position: relative;
  90 + top: 5px;
  91 + }
  92 + }
  93 + }
  94 +
71 .table-responsive { 95 .table-responsive {
72 - height: 250px; 96 + width: 100%;
  97 + height: 240px;
73 overflow-y: scroll; 98 overflow-y: scroll;
  99 +
  100 + .btn {
  101 + color: #fff;
  102 + text-transform: uppercase;
  103 + font-weight: bold;
  104 + }
  105 +
  106 + tr > td {
  107 + border-top: 1px solid #ccc;
  108 + }
  109 + tr:last-child > td {
  110 + border-bottom: 1px solid #ccc;
  111 + }
74 } 112 }
75 113
76 .event-tab--icon { 114 .event-tab--icon {
77 font-size: 25px; 115 font-size: 25px;
78 } 116 }
  117 +
79 .event-tab--title { 118 .event-tab--title {
80 font-weight: bold; 119 font-weight: bold;
81 } 120 }
src/app/components/navbar/navbar.scss
  Diff comments   View file @c07aafc
1 .app-navbar { 1 .app-navbar {
2 2
3 border-bottom: 2px solid #f1f1f1; 3 border-bottom: 2px solid #f1f1f1;
4 - margin-bottom: 40px; 4 + margin-bottom: 20px;
5 5
6 .navbar { 6 .navbar {
7 margin-bottom: 0; 7 margin-bottom: 0;
src/app/pages/inicio/inicio.html
  Diff comments   View file @c07aafc
1 -<section class="container" role="main">  
2 - <div class="row">  
3 - <div class="col-sm-10 col-sm-offset-1">  
4 - <div class="video-wrapper">  
5 - <div class="video-player js-youtube">  
6 - <div class="embed-responsive embed-responsive-16by9">  
7 - <div class="js-iframe" ng-show="pageInicio.content" ng-bind-html="pageInicio.content"></div>  
8 - <div class="video-background" ng-click="pageInicio.showVideo()">  
9 - <div class="video-thumbnail" aria-hidden="true" style="background-image:url(/assets/images/youtube-background.png)"></div>  
10 - <button class="video-play-button" aria-live="assertive" aria-label="Assistir o vídeo tutorial Dialoga Brasil">  
11 - <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#1f1f1e" fill-opacity="0.9"></path><path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path><path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path></svg>  
12 - </button> 1 +<div class="page--inicio">
  2 + <section class="section-video" role="main">
  3 + <div class="container">
  4 + <div class="row">
  5 + <div class="col-sm-10 col-sm-offset-1">
  6 + <div class="video-wrapper">
  7 + <div class="video-player js-youtube">
  8 + <div class="embed-responsive embed-responsive-16by9">
  9 + <div class="js-iframe" ng-show="pageInicio.content" ng-bind-html="pageInicio.content"></div>
  10 + <div class="video-background" ng-click="pageInicio.showVideo()">
  11 + <div class="video-thumbnail" aria-hidden="true" style="background-image:url(/assets/images/youtube-background.png)"></div>
  12 + <button class="video-play-button" aria-live="assertive" aria-label="Assistir o vídeo tutorial Dialoga Brasil">
  13 + <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#1f1f1e" fill-opacity="0.9"></path><path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path><path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path></svg>
  14 + </button>
  15 + </div>
  16 + </div>
13 </div> 17 </div>
14 </div> 18 </div>
15 </div> 19 </div>
16 </div> 20 </div>
17 </div> 21 </div>
18 - </div>  
19 - <!-- <div class="js-event-wrapper hide" ng-show="inicio.eventListIsVisible"> -->  
20 - <div class="js-event-wrapper"> 22 + </section>
  23 +
  24 + <section class="section-event">
21 <event-list></event-list> 25 <event-list></event-list>
22 - </div>  
23 -</section> 26 + </section>
24 27
25 -<section class="info-section" ng-if="pageInicio.loading || pageInicio.error">  
26 - <div class="container">  
27 - <div class="col-md-12">  
28 - <div ng-if="pageInicio.loading && !pageInicio.error">  
29 - <div class="alert alert-info">Carregando conteúdo...</div>  
30 - </div> 28 + <section class="section-info" ng-if="pageInicio.loading || pageInicio.error">
  29 + <div class="container">
  30 + <div class="col-md-12">
  31 + <div ng-if="pageInicio.loading && !pageInicio.error">
  32 + <div class="alert alert-info">Carregando conteúdo...</div>
  33 + </div>
31 34
32 - <div ng-if="pageInicio.error">  
33 - <div class="alert alert-danger">{{pageInicio.error}}</div> 35 + <div ng-if="pageInicio.error">
  36 + <div class="alert alert-danger">{{pageInicio.error}}</div>
  37 + </div>
34 </div> 38 </div>
35 </div> 39 </div>
36 - </div>  
37 -</section> 40 + </section>
38 41
39 -<section class="section-gray section-space-up" ng-if="pageInicio.article">  
40 - <div class="container">  
41 - <div id="lista-de-programas" class="row">  
42 - <div class="col-sm-4 col-md-3">  
43 - <category-list></category-list>  
44 - </div>  
45 - <div class="col-sm-8 col-md-9">  
46 - <article-grid></article-grid> 42 + <section class="section-gray section-space-up" ng-if="pageInicio.article">
  43 + <div class="container">
  44 + <div id="lista-de-programas" class="row">
  45 + <div class="col-sm-4 col-md-3">
  46 + <category-list></category-list>
  47 + </div>
  48 + <div class="col-sm-8 col-md-9">
  49 + <article-grid></article-grid>
  50 + </div>
47 </div> 51 </div>
48 </div> 52 </div>
49 - </div>  
50 -</section> 53 + </section>
  54 +</div>
src/app/pages/inicio/inicio.scss
  Diff comments   View file @c07aafc
  1 +.page--inicio {
  2 + margin-top: 20px;
  3 +}
  4 +
1 .section-gray { 5 .section-gray {
2 background-color: $gray; 6 background-color: $gray;
3 7