From 1067d2272e059bcb72bc54d388604cf7e0ebb1e4 Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Thu, 6 Aug 2015 17:59:22 +0200 Subject: [PATCH] Adds styles for debate new --- app/assets/stylesheets/debates.scss | 140 ++++++++++++++++++++++++-- app/assets/stylesheets/variables.scss | 36 ++++++- app/views/debates/_form.html.erb | 74 ++++++++------ app/views/debates/new.html.erb | 22 +++- config/locales/en.yml | 11 +- config/locales/es.yml | 12 ++- 6 files changed, 242 insertions(+), 53 deletions(-) diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss index de42fa1ce..dfaf4629f 100644 --- a/app/assets/stylesheets/debates.scss +++ b/app/assets/stylesheets/debates.scss @@ -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; + } +} diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss index 79de3eaf9..f9607af9c 100644 --- a/app/assets/stylesheets/variables.scss +++ b/app/assets/stylesheets/variables.scss @@ -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; \ No newline at end of file +$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; diff --git a/app/views/debates/_form.html.erb b/app/views/debates/_form.html.erb index 28a0419a8..c38d2c476 100644 --- a/app/views/debates/_form.html.erb +++ b/app/views/debates/_form.html.erb @@ -1,37 +1,47 @@ <%= form_for(@debate) do |f| %> - <% if @debate.errors.any? %> -
-

<%= pluralize(@debate.errors.count, t("debates.form.one_error"), t("debates.form.multiple_errors")) %> <%= t("debates.form.not_saved") %>:

- -
- <% end %> - -

<%= t("debates.form.debate_title") %>

-

<%= t("debates.form.title_instructions") %>

- <%= f.text_field :title, maxlength: Debate::TITLE_LENGTH %> - -
-

<%= t("debates.form.debate_text") %>

-

<%= t("debates.form.text_instructions") %>

- <%= f.cktext_area :description, ckeditor: { language: I18n.locale } %> -
- <%= f.label :tag_list, t("debates.form.tags_label") %>
- <%= f.text_field :tag_list, value: @debate.tag_list.to_s %> -
- - <% if @debate.new_record? %> - <%= f.check_box :terms_of_service %> - <%= t("debates.form.accept_terms") %> + <% if @debate.errors.any? %> +
+

<%= pluralize(@debate.errors.count, t("debates.form.error"), t("debates.form.errors")) %> <%= t("debates.form.not_saved") %>

+ +
<% end %> - <%= render 'shared/captcha', resource: @debate %> +
+
+ <%= f.label :title, t("debates.form.debate_title") %> + <%= t("debates.form.title_instructions") %> + <%= f.text_field :title, maxlength: Debate::TITLE_LENGTH %> +
-
- <%= f.submit(class: "button radius") %> +
+ <%= f.label :description, t("debates.form.debate_text") %> + <%= t("debates.form.text_instructions") %> + <%= f.cktext_area :description, ckeditor: { language: I18n.locale } %> +
+ +
+ <%= f.label :tag_list, t("debates.form.tags_label") %> + <%= t("debates.form.tags_instructions") %> + <%= f.text_field :tag_list, value: @debate.tag_list.to_s %> +
+ +
+ <% if @debate.new_record? %> + <%= f.check_box :terms_of_service %> + <%= t("debates.form.accept_terms") %> + <% end %> +
+ +
+ <%= render 'shared/captcha', resource: @debate %> +
+ +
+ <%= f.submit(class: "button radius") %> +
-
-<% end %> +<% end %> \ No newline at end of file diff --git a/app/views/debates/new.html.erb b/app/views/debates/new.html.erb index 55ae3876f..c341d178d 100644 --- a/app/views/debates/new.html.erb +++ b/app/views/debates/new.html.erb @@ -1,5 +1,21 @@ -

<%= t("debates.new.publish_new") %>

+
-<%= render "form" %> +
+ <%= link_to debates_path, class: "left back" do %> + + <%= t("debates.new.back_link") %> + <% end %> +

<%= t("debates.new.publish_new") %>

+ <%= render "form" %> +
-<%= link_to t("debates.new.back_link"), debates_path %> +
+ +

<%= t("debates.new.recommendations_title") %>

+
    +
  • <%= t("debates.new.recommendation_one") %>
    • +
  • <%= t("debates.new.recommendation_two") %>
    • +
  • <%= t("debates.new.recommendation_three") %>
    • +
+
+
\ No newline at end of file diff --git a/config/locales/en.yml b/config/locales/en.yml index caf4bdbad..2a8562a6e 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -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 diff --git a/config/locales/es.yml b/config/locales/es.yml index 98f75bac7..d5869b284 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -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