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

Adds styles for debate new

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2015-08-06 17:59:22 +02:00
parent c7cd29360d
commit 1067d2272e
6 changed files with 242 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
app/assets/stylesheets/debates.scss
View File

@@ -5,13 +5,16 @@
// 03. Header
// 04. Footer
// 05. Debates
// 05.1. Debates Index
// 05.2. Debates Show
// 05.1. Debates index
// 05.2. Debate show
// 05.3. Debate new
// 06. Comments
// 07. Tags
// 08. Login and Sign Up
// 08.1. Login
// 08.2. Sign Up
// 09. Forms
// 10. Alerts
//
// 01. Variables
@@ -162,6 +165,12 @@ header {
// 05. Debates
// - - - - - - - - - - - - - - - - - - - - - - - - -
@mixin back {
color: $text-light;
font-size: rem-calc(13);
line-height: $line-height;
}
@mixin votes {
border-top: 1px solid $votes-border;
padding: rem-calc(14) rem-calc(12);
@@ -244,7 +253,7 @@ header {
}
}
// 05.1. Debates Index
// 05.1. Debates index
// - - - - - - - - - - - -
.debate-featured {
@@ -414,7 +423,7 @@ header {
}
}
// 05.2. Debates Show
// 05.2. Debate show
// - - - - - - - - - - - -
.debate-show {
@@ -422,9 +431,7 @@ header {
padding: 0 rem-calc(12);
.back {
color: $text-light;
font-size: rem-calc(13);
line-height: $line-height;
@include back;
}
.icon-angle-left {
@@ -497,6 +504,61 @@ header {
}
}
// 05.3. Debate new
// - - - - - - - - - - - -
.debate-new {
background: white;
padding-top: $line-height;
.back {
@include back;
}
h1 {
clear: both;
font-size: rem-calc(36);
font-weight: bold;
line-height: $line-height*2;
margin-bottom: $line-height;
}
.icon-comment-quotes {
color: $debates;
font-size: rem-calc(60);
line-height: $line-height;
opacity: .5;
}
h2 {
clear: both;
font-size: rem-calc(20);
font-weight: bold;
line-height: $line-height;
margin: 0;
}
.recommendations {
list-style-type: none;
margin-left: 0;
margin-top: $line-height;
li {
font-size: rem-calc(12);
margin: rem-calc(12) 0;
&:before {
color: $debates;
content: "l ";
font-family: "icons" !important;
}
}
}
}
// 06. Comments
// - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -627,7 +689,71 @@ header {
}
}
// 09. Forms
// - - - - - - - - - - - - - - - - - - - - - - - - -
form {
label {
font-weight: bold;
line-height: $line-height;
}
input[type]:not([type=submit]) {
background: $input-bg;
height: $line-height*2;
margin-bottom: rem-calc(16);
}
.note {
display: block;
font-size: rem-calc(13);
margin-bottom: rem-calc(12);
}
.ckeditor {
margin-bottom: $line-height;
min-height: $line-height*14;
}
.checkbox {
display: inline-block;
font-size: rem-calc(14);
line-height: $line-height*2;
margin: 0 0 0 rem-calc(6);
vertical-align: top;
}
}
// 10. Alerts
// - - - - - - - - - - - - - - - - - - - - - - - - -
.alert-box {
&.success {
background-color: $success-bg;
border-color: $success-border;
color: $success-color;
}
&.info {
background-color: $info-bg;
border-color: $info-border;
color: $info-color;
}
&.warning {
background-color: $warning-bg;
border-color: $warning-border;
color: $warning-color;
}
&.alert {
background-color: $alert-bg;
border-color: $alert-border;
color: $alert-color;
}
}

34
app/assets/stylesheets/variables.scss
View File

@@ -2,21 +2,23 @@
//
// 01. Fonts
// 02. Colors
// 03. Forms
// 04. Alerts
//
// 01. Fonts
// - - - - - - - - - - - -
// - - - - - - - - - - - - - - - - - - - - - - - - -
$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$line-height: rem-calc(24);
// 02. Colors
// - - - - - - - - - - - -
// - - - - - - - - - - - - - - - - - - - - - - - - -
$background: #EDEFF0;
$border: #DEE0E3;
$brand: #0077B9;
$check: #46DB91;
$debates: #008CCF;
$comments-bg: #F1F1F1;
@@ -39,7 +41,31 @@ $votes-background: #0081B3;
$votes-border: #005b80;
$votes-like: #7BD2A8;
$votes-like-act: #5D9E7F;
$votes-neutral: #CCCCCC;
$votes-neutral: #CCCCCC;
$votes-text: #FFFFFF;
$votes-unlike: #EF8585;
$votes-unlike-act: #BD6A6A;
// 03. Forms
// - - - - - - - - - - - - - - - - - - - - - - - - -
$input-bg: #F8F8F8;
// 04. Alerts
// - - - - - - - - - - - - - - - - - - - - - - - - -
$success-bg: #DFF0D8;
$success-border: #D6E9C6;
$success-color: #3C763D;
$info-bg: #D9EDF7;
$info-border: #BCE8F1;
$info-color: #31708F;
$warning-bg: #FCF8E3;
$warning-border: #FAEBCC;
$warning-color: #8A6D3B;
$alert-bg: #F2DEDE;
$alert-border: #EBCCD1;
$alert-color: #A94442;

72
app/views/debates/_form.html.erb
View File

@@ -1,37 +1,47 @@
<%= form_for(@debate) do |f| %>
<% if @debate.errors.any? %>
<div id="error_explanation" class="alert-box alert radius">
<p><%= pluralize(@debate.errors.count, t("debates.form.one_error"), t("debates.form.multiple_errors")) %> <%= t("debates.form.not_saved") %>:</p>
<ul>
<% @debate.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<p><strong><%= t("debates.form.debate_title") %></strong></p>
<p><%= t("debates.form.title_instructions") %></p>
<%= f.text_field :title, maxlength: Debate::TITLE_LENGTH %>
<br/>
<p><strong><%= t("debates.form.debate_text") %></strong></p>
<p><%= t("debates.form.text_instructions") %></p>
<%= f.cktext_area :description, ckeditor: { language: I18n.locale } %>
<div>
<%= f.label :tag_list, t("debates.form.tags_label") %><br />
<%= f.text_field :tag_list, value: @debate.tag_list.to_s %>
</div>
<% if @debate.new_record? %>
<%= f.check_box :terms_of_service %>
<%= t("debates.form.accept_terms") %>
<% if @debate.errors.any? %>
<div id="error_explanation" class="alert-box alert radius">
<p><strong><%= pluralize(@debate.errors.count, t("debates.form.error"), t("debates.form.errors")) %> <%= t("debates.form.not_saved") %></strong></p>
<ul>
<% @debate.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<%= render 'shared/captcha', resource: @debate %>
<div class="row">
<div class="small-12 column">
<%= f.label :title, t("debates.form.debate_title") %>
<span class="note"><%= t("debates.form.title_instructions") %></span>
<%= f.text_field :title, maxlength: Debate::TITLE_LENGTH %>
</div>
<div class="actions">
<%= f.submit(class: "button radius") %>
<div class="ckeditor small-12 column">
<%= f.label :description, t("debates.form.debate_text") %>
<span class="note"><%= t("debates.form.text_instructions") %></span>
<%= f.cktext_area :description, ckeditor: { language: I18n.locale } %>
</div>
<div class="small-12 column">
<%= f.label :tag_list, t("debates.form.tags_label") %>
<span class="note"><%= t("debates.form.tags_instructions") %></span>
<%= f.text_field :tag_list, value: @debate.tag_list.to_s %>
</div>
<div class="small-12 column">
<% if @debate.new_record? %>
<%= f.check_box :terms_of_service %>
<span class="checkbox"><%= t("debates.form.accept_terms") %></span>
<% end %>
</div>
<div class="small-12 column">
<%= render 'shared/captcha', resource: @debate %>
</div>
<div class="actions small-12 column">
<%= f.submit(class: "button radius") %>
</div>
</div>
<br/>
<% end %>

22
app/views/debates/new.html.erb
View File

@@ -1,5 +1,21 @@
<h1><%= t("debates.new.publish_new") %></h1>
<div class="debate-new row">
<%= render "form" %>
<div class="small-12 medium-9 column">
<%= link_to debates_path, class: "left back" do %>
<i class="icon-angle-left left"></i>
<%= t("debates.new.back_link") %>
<% end %>
<h1><%= t("debates.new.publish_new") %></h1>
<%= render "form" %>
</div>
<%= link_to t("debates.new.back_link"), debates_path %>
<div class="small-12 medium-3 column">
<i class="icon-comment-quotes right"></i>
<h2><%= t("debates.new.recommendations_title") %></h2>
<ul class="recommendations">
<li><%= t("debates.new.recommendation_one") %></li>
<li><%= t("debates.new.recommendation_two") %></li>
<li><%= t("debates.new.recommendation_three") %></li>
</ul>
</div>
</div>

11
config/locales/en.yml
View File

@@ -24,14 +24,15 @@ en:
disagree: I disagree
leave_comment: Comment
form:
one_error: error
plural_errors: errors
error: error
errors: errors
not_saved: "prohibited this debate from being saved:"
debate_title: Debate title
title_instructions: "SBe clear and precise with the title, but make it informative"
debate_text: Ellaborate your opinion
text_instructions: "Explain your opinion, go into details, tell us what's the purpose of your idea"
tags_label: "Topics (comma separated)"
tags_label: Topics
tags_instructions: Comma separated
accept_terms: I accept the privacy policy and the legal terms
show:
back_link: Back
@@ -47,6 +48,10 @@ en:
new:
publish_new: Publish new debate
back_link: Back
recommendations_tite: Tips for creating a debate
recommendation_one: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"
recommendation_two: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"
recommendation_three: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"
comments_helper:
comment_link: Comment
comment_button: Publish comment

12
config/locales/es.yml
View File

@@ -22,15 +22,17 @@ es:
comments: Comentarios
agree: Estoy de acuerdo
disagree: No estoy de acuerdo
leave_comment: Comentar
form:
one_error: error
plural_errors: errores
error: error
errors: errores
not_saved: "impidieron guardar el debate:"
debate_title: Título del debate
title_instructions: "Sé claro y conciso a la hora de poner un título, pero recuerda que debe explicar bien tu idea, ¡es tu carta de entrada!"
debate_text: Describe tu opinión
text_instructions: "Explica con todo el detalle que puedas y de una manera sencilla la idea y que crees que conseguiríamos con ella"
tags_label: "Temas (separados por comas)"
tags_label: Temas
tags_instructions: Separados por comas
accept_terms: Acepto la política de privacidad y el aviso legal
show:
back_link: Volver
@@ -46,6 +48,10 @@ es:
new:
publish_new: Publicar debate nuevo
back_link: Volver
recommendations_title: Recomendaciones para crear un debate
recommendation_one: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"
recommendation_two: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"
recommendation_three: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"
comments_helper:
comment_link: Comentar
comment_button: Publicar comentario