Merge pull request #6041 from consuldemocracy/align_radio_buttons

Correctly align radio buttons with their labels

app/assets/stylesheets/admin.scss

@@ -168,6 +168,10 @@ $table-header:   #ecf1f6;
       font-weight: bold;
     }
 
+    .radio {
+      @include radio-or-checkbox-and-label-alignment;
+    }
+
     select {
       height: $input-height;
     }
@@ -587,112 +591,6 @@ table {
   }
 }
 
-.legislation-draft-versions-form {
-
-  .control {
-    cursor: pointer;
-    margin-bottom: 1rem;
-
-    small {
-      color: $text-medium;
-      display: block;
-      margin-top: -1rem;
-
-      @include breakpoint(medium) {
-        display: inline-block;
-        margin-left: 0.25rem;
-        margin-top: 0;
-      }
-    }
-  }
-
-  .fullscreen-container {
-    background: #ccdbe6;
-    text-align: center;
-
-    .markdown-editor-header,
-    .markdown-editor-buttons {
-      display: none;
-    }
-
-    span {
-      font-size: $small-font-size;
-      text-decoration: none;
-    }
-
-    .icon-expand {
-      line-height: 0;
-      margin-left: 0.25rem;
-      text-decoration: none;
-      vertical-align: sub;
-    }
-  }
-
-  .markdown-preview {
-    border: 1px solid #cacaca;
-    font-family: $font-family-serif;
-    margin-bottom: 2rem;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-family: $font-family-serif !important;
-      font-size: 1rem;
-      line-height: 1.625rem;
-      margin-bottom: 0;
-    }
-
-    p {
-      font-size: 1rem;
-      line-height: 1.625rem;
-    }
-  }
-
-  .fullscreen {
-
-    .markdown-area,
-    .markdown-preview {
-      display: block;
-    }
-
-    .column {
-      padding: 0;
-    }
-
-    .fullscreen-container {
-      background: $admin-color;
-      margin-bottom: 0;
-      padding: 0.5rem 1rem;
-      text-align: left;
-    }
-
-    .legislation-draft-version-body {
-      border-radius: 0;
-
-      @include breakpoint(medium) {
-        padding-left: 2rem;
-        padding-right: 2rem;
-      }
-
-      &:focus {
-        box-shadow: inset 0 1px 2px rgba(34, 34, 34, 0.1);
-      }
-    }
-
-    .markdown-preview {
-      border: 0;
-      padding: 1rem;
-
-      @include breakpoint(medium) {
-        padding: 1rem 2rem;
-      }
-    }
-  }
-}
-
 // 10. Budgets
 // -----------------
 

app/assets/stylesheets/admin/dashboard/actions/form.scss

@@ -0,0 +1,11 @@
+.dashboard-action-form {
+  .collection-radio-buttons {
+    column-gap: $line-height;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .radio-and-label {
+    @include radio-or-checkbox-and-label-alignment;
+  }
+}

app/assets/stylesheets/admin/legislation/draft_versions/form.scss

@@ -0,0 +1,96 @@
+.legislation-draft-versions-form {
+
+  .fullscreen-container {
+    background: #ccdbe6;
+    text-align: center;
+
+    .markdown-editor-header,
+    .markdown-editor-buttons {
+      display: none;
+    }
+
+    span {
+      font-size: $small-font-size;
+      text-decoration: none;
+    }
+
+    .icon-expand {
+      line-height: 0;
+      margin-left: 0.25rem;
+      text-decoration: none;
+      vertical-align: sub;
+    }
+  }
+
+  .markdown-preview {
+    border: 1px solid #cacaca;
+    font-family: $font-family-serif;
+    margin-bottom: 2rem;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-family: $font-family-serif !important;
+      font-size: 1rem;
+      line-height: 1.625rem;
+      margin-bottom: 0;
+    }
+
+    p {
+      font-size: 1rem;
+      line-height: 1.625rem;
+    }
+  }
+
+  .fullscreen {
+
+    .markdown-area,
+    .markdown-preview {
+      display: block;
+    }
+
+    .column {
+      padding: 0;
+    }
+
+    .fullscreen-container {
+      background: $admin-color;
+      margin-bottom: 0;
+      padding: 0.5rem 1rem;
+      text-align: left;
+    }
+
+    .legislation-draft-version-body {
+      border-radius: 0;
+
+      @include breakpoint(medium) {
+        padding-left: 2rem;
+        padding-right: 2rem;
+      }
+
+      &:focus {
+        box-shadow: inset 0 1px 2px rgba(34, 34, 34, 0.1);
+      }
+    }
+
+    .markdown-preview {
+      border: 0;
+      padding: 1rem;
+
+      @include breakpoint(medium) {
+        padding: 1rem 2rem;
+      }
+    }
+  }
+
+  .radio-and-label {
+    @include radio-or-checkbox-and-label-alignment;
+
+    span {
+      margin-left: 1ch;
+    }
+  }
+}

app/assets/stylesheets/admin/locales/form.scss

@@ -1,6 +1,6 @@
 .admin .locales-form {
   label {
-    display: table;
+    @include radio-or-checkbox-and-label-alignment;
   }
 
   select {

app/assets/stylesheets/admin/site_customization/pages/form.scss

@@ -0,0 +1,5 @@
+.site-customization-pages-form {
+  .radio-and-label {
+    @include radio-or-checkbox-and-label-alignment;
+  }
+}

app/assets/stylesheets/admin/tenants/form.scss

@@ -5,7 +5,7 @@
   }
 
   .radio-and-label {
-    display: flex;
+    @include radio-or-checkbox-and-label-alignment;
     margin-bottom: calc($line-height / 3);
 
     &:last-of-type {

app/assets/stylesheets/layout.scss

@@ -909,7 +909,6 @@ form {
   }
 
   [type="radio"] {
-    height: $line-height !important;
     vertical-align: top;
 
     + label {

app/assets/stylesheets/mixins/forms.scss

@@ -199,3 +199,9 @@
     text-transform: uppercase;
   }
 }
+
+@mixin radio-or-checkbox-and-label-alignment {
+  align-items: baseline;
+  display: flex;
+  max-width: max-content;
+}

app/components/admin/dashboard/actions/form_component.html.erb

@@ -0,0 +1,82 @@
+<div class="dashboard-action-form">
+  <%= form_for dashboard_action, url: { action: url_action } do |f| %>
+    <%= render "shared/errors" %>
+
+    <div class="row expanded">
+      <fieldset class="small-12 column">
+        <legend><%= attribute_name(:action_type) %></legend>
+        <div class="collection-radio-buttons">
+          <% ::Dashboard::Action.action_types.keys.each do |action_type_value| %>
+            <span class="radio-and-label">
+              <%= f.radio_button :action_type, action_type_value %>
+            </span>
+          <% end %>
+        </div>
+      </fieldset>
+
+      <div class="small-12 column margin-top">
+        <%= f.check_box :active %>
+      </div>
+
+      <div id="request_to_administrators" class="small-12 column margin-bottom">
+        <%= f.check_box :request_to_administrators %>
+      </div>
+
+    </div>
+
+    <div class="row expanded">
+      <div class="small-12 column">
+        <%= f.text_field :title %>
+
+        <div id="short_description">
+          <%= f.text_field :short_description %>
+        </div>
+
+        <%= f.text_area :description, class: "html-area" %>
+      </div>
+    </div>
+
+    <div class="row expanded margin-top">
+      <div class="small-12 column">
+        <%= f.check_box :published_proposal %>
+        <p class="help-text"><%= t("admin.dashboard.actions.form.published_proposal_help_text") %></p>
+      </div>
+    </div>
+
+    <div class="row expanded margin-top">
+      <div class="small-12 medium-4 column">
+        <%= f.number_field :day_offset, step: 1,
+                                        min: 0,
+                                        hint: t("admin.dashboard.actions.form.help_text") %>
+      </div>
+
+      <div class="small-12 medium-4 column">
+        <%= f.number_field :required_supports, step: 1,
+                                               min: 0,
+                                               hint: t("admin.dashboard.actions.form.help_text") %>
+      </div>
+
+      <div class="small-12 medium-4 column">
+        <%= f.number_field :order, step: 1,
+                                   min: 0,
+                                   hint: t("admin.dashboard.actions.form.help_text") %>
+      </div>
+    </div>
+
+    <% if feature?(:allow_attached_documents) %>
+      <div class="small-12 column">
+        <%= render Documents::NestedComponent.new(f) %>
+      </div>
+    <% end %>
+
+    <div class="links small-12 column">
+      <%= render "links/nested_links", linkable: dashboard_action, f: f %>
+    </div>
+
+    <div class="row expanded">
+      <div class="small-12 medium-6 large-4 column">
+        <%= f.submit(class: "button expanded", value: t("admin.dashboard.actions.form.submit_button")) %>
+      </div>
+    </div>
+  <% end %>
+</div>

app/components/admin/dashboard/actions/form_component.rb

@@ -0,0 +1,14 @@
+class Admin::Dashboard::Actions::FormComponent < ApplicationComponent
+  attr_reader :dashboard_action, :url_action
+
+  def initialize(dashboard_action, url_action:)
+    @dashboard_action = dashboard_action
+    @url_action = url_action
+  end
+
+  private
+
+    def attribute_name(attribute)
+      Dashboard::Action.human_attribute_name(attribute)
+    end
+end

app/components/admin/legislation/draft_versions/form_component.html.erb

@@ -1,12 +1,7 @@
-<%= render "shared/globalize_locales", resource: @draft_version %>
+<%= render "shared/globalize_locales", resource: draft_version %>
 
-<%= translatable_form_for [:admin, @process, @draft_version], url: url,
-                                                              html: {
-                                                                data: {
-                                                                  markdown_changes_message: I18n.t("admin.legislation.draft_versions.edit.markdown_changes_message")
-                                                                }
-                                                              } do |f| %>
-  <%= render "shared/errors", resource: @draft_version %>
+<%= translatable_form_for [:admin, process, draft_version], form_attributes do |f| %>
+  <%= render "shared/errors", resource: draft_version %>
 
   <div class="row">
     <%= f.translatable_fields do |translations_form| %>
@@ -35,12 +30,12 @@
         <div class="small-12 medium-8 column fullscreen-container">
           <div class="markdown-editor-header truncate">
             <%= sanitize(t("admin.legislation.draft_versions.form.title",
-                           draft_version_title: @draft_version.title,
-                           process_title: @process.title)) %>
+                           draft_version_title: draft_version.title,
+                           process_title: process.title)) %>
           </div>
 
           <div class="markdown-editor-buttons">
-            <%= f.submit(class: "button", value: t("admin.legislation.draft_versions.#{admin_submit_action(@draft_version)}.submit_button")) %>
+            <%= f.submit(class: "button", value: t("admin.legislation.draft_versions.#{admin_submit_action(draft_version)}.submit_button")) %>
           </div>
 
           <%= link_to "#", class: "fullscreen-toggle" do %>
@@ -65,14 +60,15 @@
   </div>
 
   <div class="row">
-    <div class="small-12 medium-9 column">
-      <%= f.label :status %>
+    <fieldset class="small-12 column">
+      <legend><%= attribute_name(:status) %></legend>
       <% ::Legislation::DraftVersion::VALID_STATUSES.each do |status| %>
-        <%= f.radio_button :status, status %>
-        <span class="help-text"><%= t("admin.legislation.draft_versions.form.hints.status.#{status}") %></span>
-        <br>
+        <span class="radio-and-label">
+          <%= f.radio_button :status, status %>
+          <span class="help-text"><%= t("admin.legislation.draft_versions.form.hints.status.#{status}") %></span>
+        </span>
       <% end %>
-    </div>
+    </fieldset>
 
     <div class="small-12 medium-9 column">
       <%= f.check_box :final_version %>
@@ -80,7 +76,7 @@
     </div>
 
     <div class="small-12 medium-3 column clear end margin-top">
-      <%= f.submit(class: "button success expanded", value: t("admin.legislation.draft_versions.#{admin_submit_action(@draft_version)}.submit_button")) %>
+      <%= f.submit(class: "button success expanded", value: submit_button_text) %>
     </div>
   </div>
 <% end %>

app/components/admin/legislation/draft_versions/form_component.rb

@@ -0,0 +1,39 @@
+class Admin::Legislation::DraftVersions::FormComponent < ApplicationComponent
+  include TranslatableFormHelper
+  include GlobalizeHelper
+  attr_reader :draft_version, :url
+  use_helpers :admin_submit_action
+
+  def initialize(draft_version, url:)
+    @draft_version = draft_version
+    @url = url
+  end
+
+  private
+
+    def attribute_name(attribute)
+      Legislation::DraftVersion.human_attribute_name(attribute)
+    end
+
+    def process
+      draft_version.process
+    end
+
+    def form_attributes
+      {
+        url: url,
+        html: {
+          data: { markdown_changes_message: markdown_changes_message },
+          class: "legislation-draft-versions-form"
+        }
+      }
+    end
+
+    def markdown_changes_message
+      I18n.t("admin.legislation.draft_versions.edit.markdown_changes_message")
+    end
+
+    def submit_button_text
+      t("admin.legislation.draft_versions.#{admin_submit_action(draft_version)}.submit_button")
+    end
+end

app/components/admin/site_customization/pages/edit_component.html.erb

@@ -11,4 +11,4 @@
   ) %>
 <% end %>
 
-<%= render "form" %>
+<%= render Admin::SiteCustomization::Pages::FormComponent.new(page) %>

app/components/admin/site_customization/pages/form_component.html.erb

@@ -1,7 +1,7 @@
-<%= render "shared/globalize_locales", resource: @page %>
+<%= render "shared/globalize_locales", resource: page %>
 
-<%= translatable_form_for [:admin, @page], html: { class: "edit_page" } do |f| %>
-  <%= render "shared/errors", resource: @page %>
+<%= translatable_form_for [:admin, page], html: { class: "site-customization-pages-form" } do |f| %>
+  <%= render "shared/errors", resource: page %>
 
   <div class="row">
     <div class="small-12 column">
@@ -10,11 +10,14 @@
 
     <div class="small-12 medium-4 column">
       <h3><%= t("admin.site_customization.pages.form.options") %></h3>
-      <%= f.label :status %>
-      <% ::SiteCustomization::Page::VALID_STATUSES.each do |status| %>
-        <%= f.radio_button :status, status %>
-        <br>
-      <% end %>
+      <fieldset>
+        <legend><%= attribute_name(:status) %></legend>
+        <% ::SiteCustomization::Page::VALID_STATUSES.each do |status| %>
+          <span class="radio-and-label">
+            <%= f.radio_button :status, status %>
+          </span>
+        <% end %>
+      </fieldset>
 
       <%= f.check_box :more_info_flag, class: "small" %>
       <%= f.check_box :print_content_flag %>

app/components/admin/site_customization/pages/form_component.rb

@@ -0,0 +1,15 @@
+class Admin::SiteCustomization::Pages::FormComponent < ApplicationComponent
+  include TranslatableFormHelper
+  include GlobalizeHelper
+  attr_reader :page
+
+  def initialize(page)
+    @page = page
+  end
+
+  private
+
+    def attribute_name(attribute)
+      SiteCustomization::Page.human_attribute_name(attribute)
+    end
+end

app/components/admin/site_customization/pages/new_component.html.erb

@@ -3,4 +3,4 @@
 
 <%= header %>
 
-<%= render "form" %>
+<%= render Admin::SiteCustomization::Pages::FormComponent.new(page) %>

app/views/admin/dashboard/actions/_form.html.erb

@@ -1,76 +0,0 @@
-<%= render "shared/errors" %>
-
-<div class="row expanded">
-  <div class="small-12 medium-4 column">
-    <%= f.label :action_type %>
-    <% ::Dashboard::Action.action_types.keys.each do |action_type_value| %>
-      <span class="margin-right">
-        <%= f.radio_button :action_type, action_type_value %>
-      </span>
-    <% end %>
-  </div>
-
-  <div class="small-12 column margin-top">
-    <%= f.check_box :active %>
-  </div>
-
-  <div id="request_to_administrators" class="small-12 column margin-bottom">
-    <%= f.check_box :request_to_administrators %>
-  </div>
-
-</div>
-
-<div class="row expanded">
-  <div class="small-12 column">
-    <%= f.text_field :title %>
-
-    <div id="short_description">
-      <%= f.text_field :short_description %>
-    </div>
-
-    <%= f.text_area :description, class: "html-area" %>
-  </div>
-</div>
-
-<div class="row expanded margin-top">
-  <div class="small-12 column">
-    <%= f.check_box :published_proposal %>
-    <p class="help-text"><%= t("admin.dashboard.actions.form.published_proposal_help_text") %></p>
-  </div>
-</div>
-
-<div class="row expanded margin-top">
-  <div class="small-12 medium-4 column">
-    <%= f.number_field :day_offset, step: 1,
-                                    min: 0,
-                                    hint: t("admin.dashboard.actions.form.help_text") %>
-  </div>
-
-  <div class="small-12 medium-4 column">
-    <%= f.number_field :required_supports, step: 1,
-                                           min: 0,
-                                           hint: t("admin.dashboard.actions.form.help_text") %>
-  </div>
-
-  <div class="small-12 medium-4 column">
-    <%= f.number_field :order, step: 1,
-                               min: 0,
-                               hint: t("admin.dashboard.actions.form.help_text") %>
-  </div>
-</div>
-
-<% if feature?(:allow_attached_documents) %>
-  <div class="small-12 column">
-    <%= render Documents::NestedComponent.new(f) %>
-  </div>
-<% end %>
-
-<div class="links small-12 column">
-  <%= render "links/nested_links", linkable: dashboard_action, f: f %>
-</div>
-
-<div class="row expanded">
-  <div class="small-12 medium-6 large-4 column">
-    <%= f.submit(class: "button expanded", value: t("admin.dashboard.actions.form.submit_button")) %>
-  </div>
-</div>

app/views/admin/dashboard/actions/edit.html.erb

@@ -3,8 +3,4 @@
   <h2><%= t("admin.dashboard.actions.edit.editing") %></h2>
 </div>
 
-<div class="dashboard-action-form ">
-  <%= form_for dashboard_action, url: { action: "update" } do |f| %>
-    <%= render "form", f: f %>
-  <% end %>
-</div>
+<%= render Admin::Dashboard::Actions::FormComponent.new(dashboard_action, url_action: "update") %>

app/views/admin/dashboard/actions/new.html.erb

@@ -3,8 +3,4 @@
   <h2><%= t("admin.dashboard.actions.new.creating") %></h2>
 </div>
 
-<div class="dashboard-action-form ">
-  <%= form_for dashboard_action, url: { action: "create" } do |f| %>
-    <%= render "form", f: f %>
-  <% end %>
-</div>
+<%= render Admin::Dashboard::Actions::FormComponent.new(dashboard_action, url_action: "create") %>

app/views/admin/legislation/draft_versions/edit.html.erb

@@ -2,7 +2,7 @@
   <%= t("admin.header.title") %> - <%= t("admin.menu.legislation") %> - <%= @process.title %> - <%= t("admin.legislation.draft_versions.index.title") %> - <%= @draft_version.title %>
 <% end %>
 
-<div class="legislation-draft-versions-edit legislation-draft-versions-form">
+<div class="legislation-draft-versions-edit">
   <div class="small-12 column">
     <%= back_link_to admin_legislation_process_draft_versions_path(@process),
                      t("admin.legislation.draft_versions.edit.back") %>
@@ -24,6 +24,9 @@
       </div>
     </div>
 
-    <%= render "form", url: admin_legislation_process_draft_version_path(@process, @draft_version) %>
+    <%= render Admin::Legislation::DraftVersions::FormComponent.new(
+      @draft_version,
+      url: admin_legislation_process_draft_version_path(@process, @draft_version)
+    ) %>
   </div>
 </div>

app/views/admin/legislation/draft_versions/new.html.erb

@@ -2,7 +2,7 @@
   <%= t("admin.header.title") %> - <%= t("admin.menu.legislation") %> - <%= @process.title %> - <%= t("admin.legislation.draft_versions.index.title") %> - <%= t("admin.legislation.draft_versions.new.title") %>
 <% end %>
 
-<div class="legislation-draft-versions-new legislation-draft-versions-form">
+<div class="legislation-draft-versions-new">
   <div class="small-12 column">
     <%= back_link_to admin_legislation_process_draft_versions_path(@process),
                      t("admin.legislation.draft_versions.new.back") %>
@@ -13,6 +13,9 @@
 
     <h3><%= t("admin.legislation.draft_versions.new.title") %></h3>
 
-    <%= render "form", url: admin_legislation_process_draft_versions_path(@process) %>
+    <%= render Admin::Legislation::DraftVersions::FormComponent.new(
+      @draft_version,
+      url: admin_legislation_process_draft_versions_path(@process)
+    ) %>
   </div>
 </div>