consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1308 from consul/polls-design

Browse Source 
polls design
This commit is contained in:
Juanjo Bazán
2016-12-27 10:06:22 +01:00
committed by GitHub
parent f0156c5b5a 0d5d082e68
commit 122fd5f9ff
10 changed files with 164 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/assets/stylesheets/participation.scss
View File

@@ -1024,7 +1024,7 @@
color: white;
.title {
color: #FFD200;
color: #92BA48;
}
.info {
@@ -1032,7 +1032,7 @@
padding: $line-height;
@include breakpoint(medium) {
border-top: rem-calc(6) solid #FFD200;
border-top: rem-calc(6) solid #92BA48;
}
a {
@@ -1049,12 +1049,15 @@
.poll, .poll-question {
background: white;
border-bottom: 1px solid $border;
border-radius: rem-calc(6);
margin-bottom: $line-height/2;
}
.poll {
padding: $line-height;
.date {
color: $brand;
.dates {
color: $text-medium;
font-size: $small-font-size;
}
@@ -1062,3 +1065,47 @@
color: $text;
}
}
h2.questions-callout {
font-size: $base-font-size;
}
.poll-question {
padding: 0 $line-height;
h3 {
padding-top: $line-height;
a {
color: $text;
}
}
}
.poll-question-answers {
.button {
margin-right: $line-height/4;
min-width: rem-calc(168);
&.answered {
background: #F4F8EC;
border: 2px solid #92BA48;
color: $text;
position: relative;
&:after {
background: #92BA48;
border-radius: rem-calc(20);
content: "\6c";
color: white;
font-family: "icons" !important;
font-size: rem-calc(12);
padding: $line-height/4;
position: absolute;
right: -6px;
top: -6px;
}
}
}
}

22
app/views/polls/_callout.html.erb Normal file
View File

@@ -0,0 +1,22 @@
<% unless can?(:answer, @poll) %>
<% if current_user.nil? %>
<div class="callout primary">
<%= t("polls.show.cant_answer_not_logged_in",
signin: link_to(t("polls.show.signin"), new_user_session_path, class: "probe-message"),
signup: link_to(t("polls.show.signup"), new_user_registration_path, class: "probe-message")).html_safe %>
</div>
<% elsif current_user.unverified? %>
<div class="callout warning">
<%= t('polls.show.cant_answer_verify_html',
verify_link: link_to(t('polls.show.verify_link'), verification_path)) %>
</div>
<% elsif @poll.incoming? %>
<div class="callout primary">
<%= t('polls.show.cant_answer_incoming') %>
</div>
<% elsif @poll.expired? %>
<div class="callout alert">
<%= t('polls.show.cant_answer_expired') %>
</div>
<% end %>
<% end %>

18
app/views/polls/index.html.erb
View File

@@ -17,12 +17,18 @@
<div class="small-12 medium-9 column margin-top">
<% @polls.each do |poll| %>
<div class="poll">
<h3><%= poll.name %></h3>
<p><%= poll_dates(poll) %></p>
<%= link_to t("polls.index.button"),
poll,
class: "button",
title: t("polls.index.button") + " " + (poll.name) %>
<div class="row">
<div class="small-12 medium-6 column">
<h3><%= poll.name %></h3>
<p class="dates"><%= poll_dates(poll) %></p>
</div>
<div class="small-12 medium-6 column text-right">
<%= link_to t("polls.index.button"),
poll,
class: "button",
title: t("polls.index.button") + ": " + (poll.name) %>
</div>
</div>
</div>
<% end %>

4
app/views/polls/questions/_answers.html.erb
View File

@@ -2,7 +2,7 @@
<% if can? :answer, question %>
<% question.valid_answers.each do |answer| %>
<% if @answers_by_question_id[question.id] == answer %>
<span class="button" title="<%= t("poll_questions.show.voted", answer: answer)%>">
<span class="button answered" title="<%= t("poll_questions.show.voted", answer: answer)%>">
<%= answer %>
</span>
<% else %>
@@ -16,7 +16,7 @@
<% end %>
<% else %>
<% question.valid_answers.each do |answer| %>
<span class="button disabled"><%= answer %></span>
<span class="button secondary hollow disabled"><%= answer %></span>
<% end %>
<% end %>
</div>

2
app/views/polls/questions/_question.html.erb
View File

@@ -3,7 +3,7 @@
<%= link_to question.title, question_path(question) %>
</h3>
<div id="<%= dom_id(question) %>_answers">
<div id="<%= dom_id(question) %>_answers" class="padding">
<%= render 'polls/questions/answers', question: question %>
</div>
</div>

77
app/views/polls/questions/show.html.erb
View File

@@ -27,52 +27,67 @@
<span class="title">
<strong><%= t('poll_questions.show.author') %></strong>
</span>
</p>
<p>
<%= link_to @question.author.name, @question.author, class: "margin-bottom" %>
<br>
<%= link_to @question.author.name, @question.author %>
</p>
<p>
<span class="title">
<strong><%= t('poll_questions.show.dates_title') %></strong>
<span class="title">
<strong><%= t('poll_questions.show.poll') %></strong>
</span>
<br>
<%= link_to @question.poll.name, @question.poll %>
</p>
<p>
<span class="title">
<strong><%= t('poll_questions.show.dates_title') %></strong>
</span>
<br>
<%= poll_dates(@question.poll) %>
</p>
<p><%= poll_dates(@question.poll) %></p>
</div>
</div>
</div>
<% if @question.poll.current? %>
<div class="row margin-top">
<div class="small-12 column">
<% if current_user.nil? %>
<% if @question.poll.current? %>
<% if current_user.nil? %>
<div class="callout primary">
<%= t("poll_questions.show.not_logged_in",
signin: link_to(t("poll_questions.show.signin"), new_user_session_path, class: "probe-message"),
signup: link_to(t("poll_questions.show.signup"), new_user_registration_path, class: "probe-message")).html_safe %>
</div>
<% elsif current_user.unverified? %>
<div class="callout warning">
<%= t('poll_questions.show.cant_answer_verify_html',
verify_link: link_to(t('poll_questions.show.verify_link'), verification_path)) %>
</div>
<% else %>
<div class="callout warning">
<%= t('poll_questions.show.cant_answer_wrong_geozone') %>
</div>
<% end %>
<div class="small-12 small-centered text-center column">
<div id="<%= dom_id(@question) %>_answers">
<%= render "answers", question: @question %>
</div>
</div>
<% elsif @question.poll.incoming? %>
<div class="callout alert">
<%= t('poll_questions.show.cant_answer_expired') %>
</div>
<% elsif @question.poll.expired? %>
<div class="callout primary">
<%= t("poll_questions.show.not_logged_in",
signin: link_to(t("poll_questions.show.signin"), new_user_session_path, class: "probe-message"),
signup: link_to(t("poll_questions.show.signup"), new_user_registration_path, class: "probe-message")).html_safe %>
</div>
<% elsif current_user.unverified? %>
<div class="callout warning">
<%= t('poll_questions.show.cant_answer_verify_html',
verify_link: link_to(t('poll_questions.show.verify_link'), verification_path)) %>
</div>
<% else %>
<div class="callout warning">
<%= t('poll_questions.show.cant_answer_wrong_geozone') %>
<%= t('poll_questions.show.cant_answer_incoming') %>
</div>
<% end %>
</div>
<div id="<%= dom_id(@question) %>_answers">
<div class="small-12 small-centered text-center column">
<%= render "answers", question: @question %>
</div>
</div>
</div>
<% elsif @question.poll.incoming? %>
<%= t('poll_questions.show.cant_answer_expired') %>
<% elsif @question.poll.expired? %>
<%= t('poll_questions.show.cant_answer_incoming') %>
<% end %>
<div class="row margin-top">
<div class="small-12 medium-9 column">

55
app/views/polls/show.html.erb
View File

@@ -3,55 +3,44 @@
<div class="expanded no-margin-top dark-heading poll-show">
<div class="row">
<div class="small-12 medium-6 column padding">
<div class="small-12 medium-9 column padding">
<%= render "shared/back_link" %>
<h2><%= @poll.name %></h2>
</div>
<div class="small-12 medium-4 column padding info">
<p class="title">
<strong><%= t("polls.show.dates_title") %></strong>
</p>
<p>
<strong><%= poll_dates(@poll) %></strong>
<%= t("polls.show.question_count_html",
count: @poll.questions.count) %>
</p>
<%= render "callout" %>
</div>
<div class="small-12 medium-3 column">
<div class="info">
<p>
<span class="title">
<strong><%= t("polls.show.dates_title") %></strong>
</span>
<br>
<%= poll_dates(@poll) %>
</p>
</div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="small-12 column">
<% unless can?(:answer, @poll) %>
<% if current_user.nil? %>
<div class="callout primary">
<%= t("polls.show.cant_answer_not_logged_in",
signin: link_to(t("polls.show.signin"), new_user_session_path, class: "probe-message"),
signup: link_to(t("polls.show.signup"), new_user_registration_path, class: "probe-message")).html_safe %>
</div>
<% elsif current_user.unverified? %>
<div class="callout warning">
<%= t('polls.show.cant_answer_verify_html',
verify_link: link_to(t('polls.show.verify_link'), verification_path)) %>
</div>
<% elsif @poll.incoming? %>
<div class="callout primary">
<%= t('polls.show.cant_answer_incoming') %>
</div>
<% elsif @poll.expired? %>
<div class="callout alert">
<%= t('polls.show.cant_answer_expired') %>
</div>
<% end %>
<% end %>
<div class="small-12 medium-9 column">
<% @answerable_questions.each do |question| %>
<%= render 'polls/questions/question', question: question %>
<% end %>
<% if can?(:answer, @poll) &&
@non_answerable_questions.present? %>
<div class="callout warning">
<%= t('polls.show.cant_answer_wrong_geozone') %>
<div class="callout warning margin-top">
<h2 class="questions-callout">
<%= t("polls.show.cant_answer_wrong_geozone",
count: @non_answerable_questions.count) %>
</h2>
</div>
<% end %>

4
config/locales/en.yml
View File

@@ -398,7 +398,8 @@ en:
verify_link: "verify your account"
cant_answer_incoming: "This poll has not yet started."
cant_answer_expired: "This poll has finished."
cant_answer_wrong_geozone: "The following questions are not available in your geozone."
cant_answer_wrong_geozone: "You can't answers the following %{count} questions because are not available in your geozone."
question_count_html: "This poll has a total of <strong>%{count} qeustions</strong>."
poll_questions:
create_question: "Create question"
default_valid_answers: "Yes, No"
@@ -417,6 +418,7 @@ en:
cant_answer_wrong_geozone: "This question is not available on your geozone."
vote_answer: "Vote %{answer}"
voted: "You have voted %{answer}"
poll: "Poll"
banner:
featured_title: "#NextVoting"
info: "New proposals that have reached the voting phase."

4
config/locales/es.yml
View File

@@ -398,7 +398,8 @@ es:
verify_link: "verifica tu cuenta"
cant_answer_incoming: "Esta votación todavía no ha comenzado."
cant_answer_expired: "Esta votación ha terminado."
cant_answer_wrong_geozone: "Esta votación no está disponible en tu zona."
cant_answer_wrong_geozone: "No puedes responder a las siguientes %{count} preguntas porque no están disponibles en tu zona:"
question_count_html: "Esta votación tiene un total de <strong>%{count} preguntas</strong>."
poll_questions:
create_question: "Crear pregunta para votación"
default_valid_answers: "Sí, No"
@@ -417,6 +418,7 @@ es:
cant_answer_wrong_geozone: "Esta votación no está disponible en tu zona."
vote_answer: "Votar %{answer}"
voted: "Has votado %{answer}"
poll: "Votación"
banner:
featured_title: "#PróximaVotación"
info: "Nuevas propuestas ciudadanas han llegado a la fase de votación."

2
spec/features/polls/polls_spec.rb
View File

@@ -131,7 +131,7 @@ feature 'Polls' do
visit poll_path(poll)
expect(page).to have_content('The following questions are not available in your geozone')
expect(page).to have_content("You can't answers the following 1 questions because are not available in your geozone.")
expect(page).to have_content('Vader')
expect(page).to have_content('Palpatine')