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 2  
3 3 .breadcrumb {
4 4 background: none;
5   - padding: 15px 0;
  5 + padding: 0;
6 6 margin: 0;
7 7 }
8 8  
... ...
src/app/components/event-list/event-list.html
  Diff comments   View file @c07aafc
1 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 21 </div>
7   - <div class="event-tab--title">Bate-Papo com ministr@s</div>
8 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 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 121 </div>
28 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 124 </div>
... ...
src/app/components/event-list/event-list.scss
  Diff comments   View file @c07aafc
1 1 .event-list {
2 2 position: relative;
3   - background-color: #eeeeee;
4 3  
5 4 .contraste & {
6 5 background-color: #262626;
7 6 }
8 7  
  8 + .section-table {
  9 + background-color: #e1e1e1;
  10 + }
  11 +
9 12 .event-list--panel {
10 13 height: 310px;
11   - border: 1px solid #333333;
12 14 padding: 20px;
13 15 margin: 20px 0;
14 16 line-height: 20px;
... ... @@ -19,25 +21,25 @@
19 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 45 .event-tab--trigger {
... ... @@ -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 95 .table-responsive {
72   - height: 250px;
  96 + width: 100%;
  97 + height: 240px;
73 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 114 .event-tab--icon {
77 115 font-size: 25px;
78 116 }
  117 +
79 118 .event-tab--title {
80 119 font-weight: bold;
81 120 }
... ...
src/app/components/navbar/navbar.scss
  Diff comments   View file @c07aafc
1 1 .app-navbar {
2 2  
3 3 border-bottom: 2px solid #f1f1f1;
4   - margin-bottom: 40px;
  4 + margin-bottom: 20px;
5 5  
6 6 .navbar {
7 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 17 </div>
14 18 </div>
15 19 </div>
16 20 </div>
17 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 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 38 </div>
35 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 51 </div>
48 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 5 .section-gray {
2 6 background-color: $gray;
3 7  
... ...