Adds styles for debate new

app/assets/stylesheets/debates.scss

@@ -5,13 +5,16 @@
 // 03. Header
 // 04. Footer
 // 05. Debates
-//   05.1. Debates Index
+//   05.1. Debates index
-//   05.2. Debates Show
+//   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;
+    @include back;
-    font-size: rem-calc(13);
-    line-height: $line-height;
   }
 
   .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;
+  }
+}
 
 

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;
+
+// 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;

app/views/debates/_form.html.erb

@@ -1,37 +1,47 @@
 <%= form_for(@debate) do |f| %>
-    <% if @debate.errors.any? %>
+  <% if @debate.errors.any? %>
-        <div id="error_explanation" class="alert-box alert radius">
+    <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>
+      <p><strong><%= pluralize(@debate.errors.count, t("debates.form.error"), t("debates.form.errors")) %> <%= t("debates.form.not_saved") %></strong></p>
-            <ul>
+      <ul>
-                <% @debate.errors.full_messages.each do |message| %>
+          <% @debate.errors.full_messages.each do |message| %>
-                    <li><%= message %></li>
+              <li><%= message %></li>
-                <% end %>
+          <% end %>
-            </ul>
+      </ul>
-        </div>
+    </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") %>
   <% 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">
+    <div class="ckeditor small-12 column">
-    <%= f.submit(class: "button radius") %>
+      <%= 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 %>

app/views/debates/new.html.erb

@@ -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>

config/locales/en.yml

@@ -24,14 +24,15 @@ en:
       disagree: I disagree
       leave_comment: Comment
     form:
-      one_error: error
+      error: error
-      plural_errors: errors
+      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

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
+      error: error
-      plural_errors: errores
+      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