Commit 743f20faea8f40102a75f621dfb5dfa89ac1f137
1 parent
ef444feb
Exists in
master
and in
11 other branches
Improve proposal detail
Showing
3 changed files
with
66 additions
and
11 deletions
Show diff stats
index.html
| @@ -78,11 +78,15 @@ | @@ -78,11 +78,15 @@ | ||
| 78 | <div class='make-proposal'> | 78 | <div class='make-proposal'> |
| 79 | <div class='title'>Faça Uma Proposta</div> | 79 | <div class='title'>Faça Uma Proposta</div> |
| 80 | <form class='make-proposal-form' id='make-proposal-form-{{id}}'> | 80 | <form class='make-proposal-form' id='make-proposal-form-{{id}}'> |
| 81 | - <input id="article_name" name="article[name]" type="text"> | ||
| 82 | - <textarea id="article_abstract" name="article[abstract]"></textarea> | ||
| 83 | - <label>Título</label> | 81 | + <div class="name"> |
| 82 | + <div><label>Título</label></div> | ||
| 83 | + <input id="article_name" name="article[name]" type="text" placeholder="Título"> | ||
| 84 | + </div> | ||
| 85 | + <div> | ||
| 86 | + <div><label>Descrição</label></div> | ||
| 87 | + <textarea id="article_abstract" name="article[abstract]" placeholder="Descrição"></textarea> | ||
| 88 | + </div> | ||
| 84 | <input id='private_token' name='private_token' value='{{../private_token}}' type='hidden'> | 89 | <input id='private_token' name='private_token' value='{{../private_token}}' type='hidden'> |
| 85 | - <label>Descrição</label> | ||
| 86 | <input id='content_type' name='content_type' value='ProposalsDiscussionPlugin::Proposal' type='hidden'> | 90 | <input id='content_type' name='content_type' value='ProposalsDiscussionPlugin::Proposal' type='hidden'> |
| 87 | <input type='submit' id='make-proposal-button' class='make-proposal-button' name='make-proposal-button' value='Nova Proposta'> | 91 | <input type='submit' id='make-proposal-button' class='make-proposal-button' name='make-proposal-button' value='Nova Proposta'> |
| 88 | </form> | 92 | </form> |
| @@ -109,18 +113,18 @@ | @@ -109,18 +113,18 @@ | ||
| 109 | <div class='support-proposal'> | 113 | <div class='support-proposal'> |
| 110 | <div class='title'> Apoie outras propostas</div> | 114 | <div class='title'> Apoie outras propostas</div> |
| 111 | <div class='subtitle'> Propostas da sociedade</div> | 115 | <div class='subtitle'> Propostas da sociedade</div> |
| 112 | - <div class='author'>{{author.name}}</div> | ||
| 113 | - <div class='abstract'><p>{{abstract}}</p></div> | 116 | + <div class='abstract'><p>"{{abstract}}"</p></div> |
| 114 | <div class="vote-actions"> | 117 | <div class="vote-actions"> |
| 115 | - <a href="#" class="like" data-vote-value="1">Gostei</a> | ||
| 116 | - <a href="#" class="like" data-vote-value="-1">Não Gostei</a> | 118 | + <a href="#" class="like dislike" data-vote-value="-1"></a> |
| 119 | + <a href="#" class="like" data-vote-value="1"></a> | ||
| 120 | + <a href="#" class="skip">Pular</a> | ||
| 117 | </div> | 121 | </div> |
| 118 | </div> | 122 | </div> |
| 119 | </script> | 123 | </script> |
| 120 | 124 | ||
| 121 | <div id='proposal-result'></div> | 125 | <div id='proposal-result'></div> |
| 122 | 126 | ||
| 123 | - <div id="login"> | 127 | + <div id="login" style="display: none"> |
| 124 | <a href="/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=2" target="_blank" class="google">Google</a> | 128 | <a href="/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=2" target="_blank" class="google">Google</a> |
| 125 | <a href="/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook">Facebook</a> | 129 | <a href="/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook">Facebook</a> |
| 126 | <a href="/plugin/oauth_client/noosfero_oauth2?oauth_client_popup=true&id=3" target="_blank" class="participa">Participa</a> | 130 | <a href="/plugin/oauth_client/noosfero_oauth2?oauth_client_popup=true&id=3" target="_blank" class="participa">Participa</a> |
js/main.js
| @@ -112,6 +112,11 @@ function loadRandomProposal(topic_id, private_token) { | @@ -112,6 +112,11 @@ function loadRandomProposal(topic_id, private_token) { | ||
| 112 | var article = data.articles[0]; | 112 | var article = data.articles[0]; |
| 113 | $('.support-proposal-container').html(supportProposalTemplate(article)); | 113 | $('.support-proposal-container').html(supportProposalTemplate(article)); |
| 114 | $(".abstract").dotdotdot(); | 114 | $(".abstract").dotdotdot(); |
| 115 | + $(document.body).off('click', '.vote-actions .skip'); | ||
| 116 | + $(document.body).on('click', '.vote-actions .skip', function(e) { | ||
| 117 | + loadRandomProposal(topic_id, private_token); | ||
| 118 | + e.preventDefault(); | ||
| 119 | + }); | ||
| 115 | $(document.body).off('click', '.vote-actions .like'); | 120 | $(document.body).off('click', '.vote-actions .like'); |
| 116 | $(document.body).on('click', '.vote-actions .like', function(e) { | 121 | $(document.body).on('click', '.vote-actions .like', function(e) { |
| 117 | $.ajax({ | 122 | $.ajax({ |
sass/_proposal_detail.scss
| @@ -6,7 +6,10 @@ | @@ -6,7 +6,10 @@ | ||
| 6 | } | 6 | } |
| 7 | .abstract{ | 7 | .abstract{ |
| 8 | text-align: center; | 8 | text-align: center; |
| 9 | - margin-top: 50px; | 9 | + color: #083e87; |
| 10 | + font-weight: bold; | ||
| 11 | + font-style: italic; | ||
| 12 | + margin: 50px 40px 30px 40px; | ||
| 10 | } | 13 | } |
| 11 | .body{ | 14 | .body{ |
| 12 | margin-bottom: 20px; | 15 | margin-bottom: 20px; |
| @@ -28,6 +31,9 @@ | @@ -28,6 +31,9 @@ | ||
| 28 | font-size: x-large; | 31 | font-size: x-large; |
| 29 | margin: 10px; | 32 | margin: 10px; |
| 30 | } | 33 | } |
| 34 | + .name { | ||
| 35 | + margin-bottom: 15px; | ||
| 36 | + } | ||
| 31 | width: 50%; | 37 | width: 50%; |
| 32 | height: 90%; | 38 | height: 90%; |
| 33 | float: left; | 39 | float: left; |
| @@ -46,6 +52,14 @@ | @@ -46,6 +52,14 @@ | ||
| 46 | height: 15%; | 52 | height: 15%; |
| 47 | border: none; | 53 | border: none; |
| 48 | margin-top: 8%; | 54 | margin-top: 8%; |
| 55 | + border-radius: 6px; | ||
| 56 | + } | ||
| 57 | + #article_abstract { | ||
| 58 | + width: 65%; | ||
| 59 | + height: 15%; | ||
| 60 | + } | ||
| 61 | + label { | ||
| 62 | + color: gray; | ||
| 49 | } | 63 | } |
| 50 | } | 64 | } |
| 51 | .support-proposal-container{ | 65 | .support-proposal-container{ |
| @@ -61,8 +75,40 @@ | @@ -61,8 +75,40 @@ | ||
| 61 | text-align: center; | 75 | text-align: center; |
| 62 | .support-proposal{ | 76 | .support-proposal{ |
| 63 | border: 1px solid $color; | 77 | border: 1px solid $color; |
| 64 | - height: 100%; | 78 | + height: 96%; |
| 65 | margin: 2% 2% 2% 2%; | 79 | margin: 2% 2% 2% 2%; |
| 80 | + padding: 10px; | ||
| 81 | + } | ||
| 82 | + .subtitle { | ||
| 83 | + color: rgb(163, 163, 163); | ||
| 84 | + } | ||
| 85 | + .vote-actions { | ||
| 86 | + .like { | ||
| 87 | + background-image: url(./images/like.png); | ||
| 88 | + background-repeat: no-repeat; | ||
| 89 | + display: inline-block; | ||
| 90 | + height: 72px; | ||
| 91 | + width: 76px; | ||
| 92 | + margin: 0 6%; | ||
| 93 | + } | ||
| 94 | + .dislike { | ||
| 95 | + background-image: url(./images/dislike.png); | ||
| 96 | + } | ||
| 97 | + .skip { | ||
| 98 | + display: block; | ||
| 99 | + font-weight: bolder; | ||
| 100 | + font-size: x-large; | ||
| 101 | + background-color: #00a9bd; | ||
| 102 | + color: white; | ||
| 103 | + width: 15%; | ||
| 104 | + margin-top: 4%; | ||
| 105 | + text-decoration: none; | ||
| 106 | + border-radius: 6px; | ||
| 107 | + text-align: center; | ||
| 108 | + margin-left: auto; | ||
| 109 | + padding: 10px; | ||
| 110 | + margin-right: auto; | ||
| 111 | + } | ||
| 66 | } | 112 | } |
| 67 | } | 113 | } |
| 68 | .experience-proposal-container{ | 114 | .experience-proposal-container{ |