Download as
Browse Code »

Commit 2c80344a036fc889a9698212460875f140995741

Authored by Victor Costa
1 parent 176c481f
Exists in master and in 11 other branches build, build2, capa, captcha, contigency_plan_recaptcha, jasmine-testing, make_harder_to_vote_twice, production, refactory-sass, session_cookie, staging

Improve results layout

Showing 4 changed files with 54 additions and 20 deletions   Show diff stats
index.html
  Diff comments   View file @2c80344
... ... @@ -173,26 +173,29 @@
173 173 <a href="#" class="like dislike" data-vote-value="-1"></a>
174 174 <a href="#" class="like" data-vote-value="1"></a>
175 175 <a href="#" class="skip">Pular</a>
176   - <a href="#" class="result">Resultado</a>
  176 + <a href="#" class="vote-result">Resultado</a>
177 177 </div>
178 178 </script>
179 179  
180 180 <script id="results" type='text/x-handlebars-template'>
181 181 <div class="results-content">
182   - <table>
183   - <tr class="header">
184   - <td class="abstract-text">Texto da Alternativa</td>
185   - <td class="votes-for">Gostei</td>
186   - <td class="votes-against">Não Gostei</td>
187   - </tr>
188   - {{#each articles}}
189   - <tr>
190   - <td class="abstract-text"><div class="truncate"><p class="truncated">{{abstract}}</p></div></td>
191   - <td class="votes-for">{{votes_for}}</td>
192   - <td class="votes-against">{{votes_against}}</td>
  182 + <a href="#" class="vote-result">Fechar</a>
  183 + <table>
  184 + <tr class="header">
  185 + <td class="abstract-text">Texto da Alternativa</td>
  186 + <td class="votes-for">Gostei</td>
  187 + <td class="votes-against">Não Gostei</td>
  188 + <td class="score">Pontuação</td>
193 189 </tr>
194   - {{/each}}
195   - </table>
  190 + {{#each articles}}
  191 + <tr>
  192 + <td class="abstract-text"><div class="truncate"><p class="truncated">{{abstract}}</p></div></td>
  193 + <td class="votes-for">{{votes_for}}</td>
  194 + <td class="votes-against">{{votes_against}}</td>
  195 + <td class="score">{{#score .}}{{/score}}</td>
  196 + </tr>
  197 + {{/each}}
  198 + </table>
196 199 </div>
197 200 </script>
198 201  
... ...
js/handlebars-helpers.js
  Diff comments   View file @2c80344
... ... @@ -48,3 +48,7 @@ Handlebars.registerHelper(&#39;proposal_detail&#39;, function(proposals, options) {
48 48 Handlebars.registerHelper('replace', function(string, to_replace, replacement) {
49 49 return (string || '').replace(new RegExp(to_replace, 'g'), replacement);
50 50 });
  51 +
  52 +Handlebars.registerHelper('score', function(article) {
  53 + return article.votes_for - article.votes_against;
  54 +});
... ...
js/main.js
  Diff comments   View file @2c80344
... ... @@ -158,8 +158,8 @@ function loadRandomProposal(topic_id, private_token) {
158 158 });
159 159 e.preventDefault();
160 160 });
161   - $(document.body).off('click', '.vote-actions .result');
162   - $(document.body).on('click', '.vote-actions .result', function(e) {
  161 + $(document.body).off('click', '.vote-result');
  162 + $(document.body).on('click', '.vote-result', function(e) {
163 163 $('.results-container').toggle();
164 164 if($('.results-container').is(":visible")) {
165 165 var url = host + '/api/v1/articles/' + topic_id + '/children' + '?private_token=' + private_token + '&limit=10&fields=id,name,abstract,votes_for,votes_against&content_type=ProposalsDiscussionPlugin::Proposal';
... ...
sass/_proposal_detail.scss
  Diff comments   View file @2c80344
... ... @@ -76,14 +76,33 @@
76 76 }
77 77 }
78 78 .results-container {
79   - th, td {
80   - border: 1px solid rgb(223, 223, 223);
  79 + &:before {
  80 + content:"";
  81 + display:table;
  82 + clear:both;
81 83 }
82 84 .results-content {
83 85 border: 1px solid #00a9bd;
  86 + margin-top: 20px;
  87 + .vote-result {
  88 + font-weight: bolder;
  89 + font-size: 12px;
  90 + text-transform: uppercase;
  91 + background-color: gray;
  92 + color: white;
  93 + width: 4%;
  94 + border: none;
  95 + margin: 10px;
  96 + border-radius: 6px;
  97 + text-align: center;
  98 + text-decoration: none;
  99 + padding: 9px;
  100 + display: block;
  101 + float: right;
  102 + }
84 103 }
85 104 table {
86   - border-collapse: collapse;
  105 + clear: both;
87 106 margin-top: 20px;
88 107 tbody tr:nth-child(odd) {
89 108 background-color: #e5e5e5;
... ... @@ -99,9 +118,14 @@
99 118 .votes-against {
100 119 @extend .votes-for;
101 120 }
  121 + .score {
  122 + @extend .votes-for;
  123 + }
102 124 .header {
  125 + line-height: 32px;
103 126 font-weight: bold;
104 127 text-align: center;
  128 + color: rgb(68, 68, 68);
105 129 }
106 130  
107 131 .truncate {
... ... @@ -114,6 +138,9 @@
114 138 text-overflow: ellipsis;
115 139 white-space: nowrap;
116 140 }
  141 + tr {
  142 + color: rgb(77, 77, 77);
  143 + }
117 144 }
118 145 }
119 146  
... ... @@ -287,7 +314,7 @@
287 314 padding: 20px;
288 315 display: block;
289 316 }
290   - .result {
  317 + .vote-result {
291 318 @extend .skip
292 319 }
293 320 }
... ...