Merge pull request #107 from AyuntamientoMadrid/forms

Forms design

app/assets/fonts/icons.svg

@@ -18,4 +18,5 @@
 <glyph unicode="&#105;" d="M453 425c-1 9-8 16-17 16l-360 0 0 0c-9 0-16-7-17-16l0 0 0-288 0 0c2-8 9-14 17-14l0 0 59 0 0-35c0-9 8-17 17-17 6 0 11 3 14 8l45 44 225 0c8 0 15 6 17 14l0 0 0 288z m-308-172c-15 0-29 12-29 34 0 25 13 47 34 61l0 0c1 1 1 1 2 1 1 0 1 0 2-1l0 0 14-9 0 0c1 0 1-1 1-3 0-1 0-2-2-3l0 0c0 0 0 0 0 0 0 0 0 0 0 0-10-6-22-19-25-31 2 1 4 1 7 1 13 0 23-10 23-24 0-14-12-26-27-26z m68 0c-15 0-29 12-29 34 0 25 13 47 34 61l0 0c0 1 1 1 2 1 0 0 1 0 2-1l0 0 14-9 0 0c1 0 1-1 1-3 0-1-1-2-2-3l0 0c0 0 0 0 0 0 0 0 0 0 0 0-11-6-22-19-25-31 1 1 4 1 7 1 12 0 22-10 22-24 0-14-12-26-26-26z m81-37l0 0c0 0-1-1-2-1 0 0-1 1-2 1l0 0-14 9 0 0c-1 1-1 2-1 3 0 1 1 3 2 3l0 0c0 0 0 0 0 0 0 0 0 0 0 0 11 6 22 20 25 31-1 0-4-1-7-1-12 0-22 10-22 24 0 15 12 27 26 27 15 0 29-13 29-34 0-25-13-48-34-62z m68 0l0 0c-1 0-1-1-2-1-1 0-1 1-2 1l0 0-14 9 0 0c-1 1-1 2-1 3 0 1 0 3 2 3l0 0c0 0 0 0 0 0 0 0 0 0 0 0 10 6 22 20 25 31-2 0-4-1-7-1-13 0-23 10-23 24 0 15 12 27 27 27 15 0 29-13 29-34 0-25-13-48-34-62z"/>
 <glyph unicode="&#106;" d="M91 347c0-5-1-9-5-12-4-4-8-6-13-6-5 0-9 2-13 6-3 3-5 7-5 12 0 6 2 10 5 13 4 4 8 6 13 6 5 0 9-2 13-6 4-3 5-7 5-13z m46-146l0 183c0 5-2 9-5 13-4 3-8 5-13 5l-82 0c-5 0-10-2-13-5-4-4-6-8-6-13l0-183c0-5 2-9 6-13 3-3 8-5 13-5l82 0c5 0 9 2 13 5 3 4 5 8 5 13z m323 43c10-12 15-26 15-43 0-15-5-28-16-38-11-11-24-17-38-17l-80 0c1-2 2-5 3-7 0-1 2-4 3-6 1-2 2-4 3-5 3-7 6-12 7-16 2-4 4-10 6-17 2-7 3-15 3-22 0-4 0-8 0-11-1-3-1-7-2-13-1-6-2-10-3-14-2-4-4-8-7-13-3-5-7-9-12-12-4-3-10-5-17-7-7-2-15-3-23-3-5 0-10 2-13 5-4 4-7 9-10 15-3 5-4 10-5 15-1 4-3 10-4 17-2 8-3 14-4 17-1 4-2 8-5 14-2 6-5 10-9 14-6 6-16 18-29 34-9 12-19 24-28 35-10 11-18 16-22 17-5 0-9 2-12 5-4 4-6 8-6 13l0 183c0 5 2 9 6 13 3 3 8 5 13 5 6 0 21 5 45 13 15 5 26 9 34 11 9 3 20 5 35 8 15 3 29 5 41 5l37 0c25-1 44-8 56-22 11-14 16-31 14-52 8-7 13-16 16-27 3-12 3-23 0-33 8-12 13-25 12-40 0-6-1-13-4-21z"/>
 <glyph unicode="&#107;" d="M91 128c0 5-1 9-5 13-4 3-8 5-13 5-5 0-9-2-13-5-3-4-5-8-5-13 0-5 2-9 5-13 4-4 8-5 13-5 5 0 9 1 13 5 4 4 5 8 5 13z m46 146l0-183c0-5-2-9-5-12-4-4-8-6-13-6l-82 0c-5 0-10 2-13 6-4 3-6 7-6 12l0 183c0 5 2 10 6 13 3 4 8 6 13 6l82 0c5 0 9-2 13-6 3-3 5-8 5-13z m338 0c0-16-5-30-15-42 3-9 4-16 4-22 1-14-4-28-12-39 3-11 3-22 0-34-3-10-8-19-16-26 2-22-3-39-14-52-12-15-31-22-56-22l-37 0c-12 0-26 1-41 4-15 3-26 6-35 8-8 3-19 7-34 12-24 8-39 12-45 12-5 0-10 2-13 6-4 3-6 7-6 12l0 184c0 4 2 8 6 12 3 4 7 5 12 6 4 0 12 6 22 17 9 11 19 22 28 34 13 17 23 28 29 35 4 3 7 8 9 13 3 6 4 11 5 14 1 4 2 9 4 17 1 8 3 14 4 18 1 4 2 9 5 15 3 5 6 10 10 14 3 4 8 5 13 5 8 0 16-1 23-3 7-2 13-4 17-7 5-3 9-7 12-12 3-4 5-9 7-12 1-4 2-9 3-15 1-5 1-10 2-13 0-2 0-6 0-11 0-7-1-14-3-21-2-8-4-13-5-18-2-4-5-9-8-16-1-1-2-2-3-5-1-2-3-4-3-6-1-2-2-4-3-7l80 0c14 0 27-5 38-16 11-11 16-24 16-39z"/>
+<glyph unicode="&#108;" d="M477 350c0-7-2-14-8-19l-206-207-39-39c-6-5-12-8-20-8-7 0-14 3-19 8l-142 142c-6 6-8 12-8 20 0 7 2 14 8 19l38 39c6 5 12 8 20 8 7 0 14-3 19-8l84-84 188 188c5 5 12 8 19 8 8 0 14-3 20-8l38-39c6-6 8-12 8-20z"/>
 </font></defs></svg>

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

app/assets/stylesheets/icons.scss

@@ -69,4 +69,7 @@
 }
 .icon-like:before {
   content: "k";
+}
+.icon-check:before {
+  content: "l";
 }

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;
+$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? %>
-        <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 %>
+<% 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
-      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

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