Update styles and layout for new debates form

app/assets/stylesheets/budgets/investments/form.scss

@@ -1,57 +1,3 @@
 .budget-investment-form {
-
+  @extend %public-form;
-  .required-fields {
-    @include full-width-background($adjust-padding: true);
-    background: $light;
-    margin-bottom: $line-height;
-    padding-top: $line-height;
-  }
-
-  > fieldset > legend {
-    float: left;
-    font-size: rem-calc(36);
-    font-weight: bold;
-    margin-bottom: $line-height;
-    text-transform: uppercase;
-
-    + * {
-      clear: left;
-    }
-  }
-
-  select {
-    min-height: $line-height * 2;
-
-    @include breakpoint(medium) {
-      &:not(.js-add-language):not(.js-select-language) {
-        width: 50%;
-      }
-    }
-  }
-
-  .globalize-languages,
-  .translatable-fields {
-    @include grid-row-nest;
-    @include grid-column-gutter;
-  }
-
-  [type="submit"] {
-    @include regular-button;
-    font-size: map-get($button-sizes, large);
-    margin-top: $line-height;
-  }
-
-  .actions {
-    border: 6px solid $border;
-    border-radius: rem-calc(12);
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: $line-height * 2;
-    padding: $line-height * 2 $line-height;
-    text-align: center;
-
-    @include breakpoint(medium) {
-      width: 75%;
-    }
-  }
 }

app/assets/stylesheets/budgets/investments/new.scss

@@ -1,105 +1,7 @@
 .budget-investment-new {
-  $border-width: 4px;
+  @extend %public-form-header;
 
   h1 {
-    margin-bottom: 0;
-  }
-
-  header {
-    $icon-size: $line-height * 4;
-    $padding-right: rem-calc(20);
-    $icon-size-with-padding: $icon-size + $padding-right;
-    $polygon-size: $icon-size / 2;
-    @include background-till-left-of-screen;
-    @include brand-background($brand-secondary);
-    border: $border-width solid $brand-secondary;
-    border-bottom-right-radius: rem-calc(12);
-    border-top-right-radius: rem-calc(12);
-    margin-top: $line-height * 2;
-    padding: $line-height * 2 0;
-    position: relative;
-
-    @include breakpoint(small) {
-      &::after {
-        display: none;
-      }
-    }
-
-    @include breakpoint(large) {
-      $rounding-error: 6px;
-      padding-right: $icon-size-with-padding;
-      background-image: linear-gradient(
-        to right,
-        #{$brand-secondary} 0,
-        #{$brand-secondary} calc(100% - #{$icon-size-with-padding} - 1px),
-        #{$body-background} calc(100% - #{$icon-size-with-padding}),
-        #{$body-background} 100%
-      );
-
-      &::after {
-        background: $body-background;
-        content: "";
-        clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%);
-        display: block;
-        position: absolute;
-        right: calc(#{$icon-size-with-padding} - #{$rounding-error});
-        top: 0;
-        height: 100%;
-        width: $polygon-size;
-      }
-    }
-
-    &::before {
-      top: -$border-width;
-      height: calc(100% + #{$border-width * 2});
-    }
-
-    h1 {
-      $heading-icon-size: $icon-size * 0.85;
-      @include has-fa-icon(building, regular);
     @include has-fa-icon(chart-pie, solid, after);
-      font-size: rem-calc(36);
-
-      @include breakpoint(small) {
-        &::after,
-        &::before {
-          display: none;
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
-
-      @include breakpoint(medium) {
-        padding-right: $heading-icon-size * 2.5;
-
-        &::after {
-          display: block;
-          font-size: $heading-icon-size;
-          right: $heading-icon-size;
-        }
-      }
-
-      @include breakpoint(large) {
-        font-size: rem-calc(44);
-
-        &::after {
-          right: $icon-size-with-padding + $polygon-size + $heading-icon-size / 2;
-        }
-
-        &::before {
-          color: $brand-secondary;
-          display: block;
-          font-size: $icon-size;
-          right: $padding-right;
-        }
-      }
-
-      span {
-        display: block;
-        font-size: 0.75em;
-        margin-top: $line-height / 2;
-      }
-    }
   }
 }

app/assets/stylesheets/debates/form.scss

@@ -1,8 +1,3 @@
 .debate-form {
-
+  @extend %public-form;
-  .globalize-languages,
-  .translatable-fields {
-    @include grid-row-nest;
-    @include grid-column-gutter;
-  }
 }

app/assets/stylesheets/debates/new.scss

@@ -0,0 +1,15 @@
+.debate-new {
+  @extend %public-form-header;
+
+  h1 {
+    @include has-fa-icon(comment-alt, regular, after);
+  }
+
+  aside {
+    margin-top: $line-height;
+  }
+
+  .recommendations li::before {
+    color: $debates;
+  }
+}

app/assets/stylesheets/layout.scss

@@ -68,6 +68,7 @@ main {
   display: block;
 
   &.budget-investment-new,
+  &.debate-new,
   &.sdg-goals-index,
   &.sdg-goal-show {
     @include grid-column-gutter;

app/assets/stylesheets/mixins/forms.scss

@@ -0,0 +1,178 @@
+@import "mixins/icons";
+@import "mixins/layouts";
+
+@mixin public-form-header {
+  $border-width: 4px;
+
+  h1 {
+    margin-bottom: 0;
+  }
+
+  header {
+    $icon-size: $line-height * 4;
+    $padding-right: rem-calc(20);
+    $icon-size-with-padding: $icon-size + $padding-right;
+    $polygon-size: $icon-size / 2;
+    @include background-till-left-of-screen;
+    @include brand-background($brand-secondary);
+    border: $border-width solid $brand-secondary;
+    border-bottom-right-radius: rem-calc(12);
+    border-top-right-radius: rem-calc(12);
+    margin-top: $line-height * 2;
+    padding: $line-height * 2 0;
+    position: relative;
+
+    @include breakpoint(small) {
+      &::after {
+        display: none;
+      }
+    }
+
+    @include breakpoint(large) {
+      $rounding-error: 6px;
+      padding-right: $icon-size-with-padding;
+      background-image: linear-gradient(
+        to right,
+        #{$brand-secondary} 0,
+        #{$brand-secondary} calc(100% - #{$icon-size-with-padding} - 1px),
+        #{$body-background} calc(100% - #{$icon-size-with-padding}),
+        #{$body-background} 100%
+      );
+
+      &::after {
+        background: $body-background;
+        content: "";
+        clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%);
+        display: block;
+        position: absolute;
+        right: calc(#{$icon-size-with-padding} - #{$rounding-error});
+        top: 0;
+        height: 100%;
+        width: $polygon-size;
+      }
+    }
+
+    &::before {
+      top: -$border-width;
+      height: calc(100% + #{$border-width * 2});
+    }
+
+    h1 {
+      $heading-icon-size: $icon-size * 0.85;
+      @include has-fa-icon(building, regular);
+      font-size: rem-calc(36);
+
+      @include breakpoint(small) {
+        &::after,
+        &::before {
+          display: none;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+
+      @include breakpoint(medium) {
+        padding-right: $heading-icon-size * 2.5;
+
+        &::after {
+          display: block;
+          font-size: $heading-icon-size;
+          right: $heading-icon-size;
+        }
+      }
+
+      @include breakpoint(large) {
+        font-size: rem-calc(44);
+
+        &::after {
+          right: $icon-size-with-padding + $polygon-size + $heading-icon-size / 2;
+        }
+
+        &::before {
+          color: $brand-secondary;
+          display: block;
+          font-size: $icon-size;
+          right: $padding-right;
+        }
+      }
+
+      span {
+        display: block;
+        font-size: 0.75em;
+        margin-top: $line-height / 2;
+      }
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+}
+
+%public-form-header {
+  @include public-form-header;
+}
+
+@mixin public-form {
+
+  .required-fields {
+    @include full-width-background($adjust-padding: true);
+    background: $light;
+    margin-bottom: $line-height;
+    padding-top: $line-height;
+  }
+
+  > fieldset > legend {
+    float: left;
+    font-size: rem-calc(36);
+    font-weight: bold;
+    margin-bottom: $line-height;
+    text-transform: uppercase;
+
+    + * {
+      clear: left;
+    }
+  }
+
+  select {
+    min-height: $line-height * 2;
+
+    @include breakpoint(medium) {
+      &:not(.js-add-language):not(.js-select-language) {
+        width: 50%;
+      }
+    }
+  }
+
+  .globalize-languages,
+  .translatable-fields {
+    @include grid-row-nest;
+    @include grid-column-gutter;
+  }
+
+  [type="submit"] {
+    @include regular-button;
+    font-size: map-get($button-sizes, large);
+    margin-top: $line-height;
+  }
+
+  .actions {
+    border: 6px solid $border;
+    border-radius: rem-calc(12);
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: $line-height * 2;
+    padding: $line-height * 2 $line-height;
+    text-align: center;
+
+    @include breakpoint(medium) {
+      width: 75%;
+    }
+  }
+}
+
+%public-form {
+  @include public-form;
+}

app/assets/stylesheets/participation.scss

@@ -244,20 +244,14 @@
 // 02. New participation
 // ---------------------
 
-.debate-new,
 .proposal-new {
 
-  .icon-debates,
   .icon-proposals {
     font-size: rem-calc(50);
     line-height: $line-height;
     opacity: 0.5;
   }
 
-  .icon-debates {
-    color: $debates;
-  }
-
   .icon-proposals {
     color: $proposals;
   }
@@ -279,13 +273,6 @@
   }
 }
 
-.debate-new {
-
-  .recommendations li::before {
-    color: $debates;
-  }
-}
-
 .proposal-new {
 
   .recommendations li::before {

app/components/debates/form_component.html.erb

@@ -1,6 +1,9 @@
 <%= translatable_form_for(debate, html: { class: "debate-form" }) do |f| %>
   <%= render "shared/errors", resource: debate %>
 
+  <fieldset class="required-fields">
+    <legend><%= t("shared.required") %></legend>
+
     <%= render "shared/globalize_locales", resource: debate %>
 
     <%= f.translatable_fields do |translations_form| %>
@@ -17,9 +20,13 @@
               class: "html-area" %>
       </div>
     <% end %>
+  </fieldset>
 
   <%= f.invisible_captcha :subtitle %>
 
+  <fieldset>
+    <legend><%= t("shared.optional") %></legend>
+
     <div>
       <%= f.text_field :tag_list, value: debate.tag_list.to_s,
                         hint: t("debates.form.tags_instructions"),
@@ -29,19 +36,20 @@
     </div>
 
     <%= render SDG::RelatedListSelectorComponent.new(f) %>
+  </fieldset>
 
-  <div>
+  <div class="actions">
     <% if debate.new_record? %>
+      <div>
         <%= f.check_box :terms_of_service,
           title: t("form.accept_terms_title"),
           label: t("form.accept_terms",
                    policy: link_to(t("form.policy"), "/privacy", target: "blank"),
                    conditions: link_to(t("form.conditions"), "/conditions", target: "blank")
                   ) %>
-    <% end %>
       </div>
+    <% end %>
 
-  <div class="actions">
     <%= f.submit(class: "button", value: t("debates.#{action_name}.form.submit_button")) %>
   </div>
 <% end %>

app/components/debates/new_component.html.erb

@@ -1,30 +1,22 @@
-<div class="debate-new">
+<main class="debate-new">
+  <%= back_link_to debates_path, t("debates.index.section_header.title") %>
 
-  <div class="small-12 medium-9 column">
+  <%= header do %>
-    <%= back_link_to debates_path %>
+    <%= link_to help_path(anchor: "debates"), title: t("shared.target_blank"), target: "_blank" do %>
-
+      <%= t("debates.new.more_info") %>
-    <h1><%= t("debates.new.start_new") %></h1>
-    <div data-alert class="callout primary">
-      <%= sanitize(t("debates.new.info",
-      info_link: link_to(t("debates.new.info_link"), new_proposal_path))) %>
-
-      <% if feature?(:help_page) %>
-        <%= link_to help_path, title: t("shared.target_blank"), target: "_blank" do %>
-          <strong><%= t("debates.new.more_info") %></strong>
     <% end %>
   <% end %>
-    </div>
-    <%= render Debates::FormComponent.new(debate) %>
-  </div>
 
-  <div class="small-12 medium-3 column">
+  <aside>
-    <span class="icon-debates float-right"></span>
     <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>
       <li><%= t("debates.new.recommendation_four") %></li>
     </ul>
-  </div>
+  </aside>
-</div>
+
+  <%= render Debates::FormComponent.new(debate) %>
+</main>

app/components/debates/new_component.rb

@@ -1,7 +1,12 @@
 class Debates::NewComponent < ApplicationComponent
+  include Header
   attr_reader :debate
 
   def initialize(debate)
     @debate = debate
   end
+
+  def title
+    t("debates.new.start_new")
+  end
 end

config/locales/en/general.yml

@@ -127,9 +127,7 @@ en:
     new:
       form:
         submit_button: Start a debate
-      info: If you want to make a proposal, this is the wrong section, enter %{info_link}.
+      more_info: How do debates work?
-      info_link: create new proposal
-      more_info: More information
       recommendation_four: Enjoy this space and the voices that fill it. It belongs to you too.
       recommendation_one: Do not use capital letters for the debate title or for whole sentences. On the internet, this is considered shouting. And nobody likes being shouted at.
       recommendation_three: Ruthless criticism is very welcome. This is a space for reflection. But we recommend that you stick to elegance and intelligence. The world is a better place with these virtues in it.

config/locales/es/general.yml

@@ -127,9 +127,7 @@ es:
     new:
       form:
         submit_button: Empieza un debate
-      info: Si lo que quieres es hacer una propuesta, esta es la sección incorrecta, entra en %{info_link}.
+      more_info: "¿Cómo funcionan los debates?"
-      info_link: crear nueva propuesta
-      more_info: Más información
       recommendation_four: Disfruta de este espacio, de las voces que lo llenan, también es tuyo.
       recommendation_one: No escribas el título del debate o frases enteras en mayúsculas. En internet eso se considera gritar. Y a nadie le gusta que le griten.
       recommendation_three: Las críticas despiadadas son muy bienvenidas. Este es un espacio de pensamiento. Pero te recomendamos conservar la elegancia y la inteligencia. El mundo es mejor con ellas presentes.

spec/system/ckeditor_spec.rb

@@ -9,7 +9,10 @@ describe "CKEditor" do
 
     expect(page).to have_css ".translatable-fields[data-locale='en'] .cke_wysiwyg_frame"
 
+    within ".subnavigation" do
       click_link "Debates"
+    end
+
     click_link "Start a debate"
 
     expect(page).to have_css ".translatable-fields[data-locale='en'] .cke_wysiwyg_frame"