decidim-meetings 0.27.8 → 0.28.0.rc4

data/app/views/decidim/meetings/admin/meetings/index.html.erb

@@ -1,160 +1,164 @@
 <% add_decidim_page_title(t(".title")) %>
 <div class="card">
-  <div class="card-divider">
-    <h2 class="card-title">
+  <div class="item_show__header">
+    <h2 class="item_show__header-title">
       <%= t(".title") %>
-      <div class="button--title">
-        <%= link_to t("actions.new", scope: "decidim.meetings", name: t("models.meeting.name", scope: "decidim.meetings.admin")), new_meeting_path, class: "button tiny button--simple" if allowed_to? :create, :meeting %>
-        <%= export_dropdown %>
-      </div>
+      <%= export_dropdowns(query) %>
+      <%= link_to t("actions.new_meeting", scope: "decidim.meetings"), new_meeting_path, class: "button button__sm button__secondary" if allowed_to? :create, :meeting %>
+      <%= render partial: "decidim/admin/components/resource_action" %>
     </h2>
   </div>
 
   <%= admin_filter_selector(:meetings) %>
-  <div class="card-section">
-    <div class="table-scroll">
-      <table class="table-list">
-        <thead>
-          <tr>
-            <th>
-              <%= sort_link(query, :id, t("models.meeting.fields.id", scope: "decidim.meetings"), default_order: :desc ) %>
-            </th>
-            <th>
-              <%= sort_link(query, :translated_title, t("models.meeting.fields.title", scope: "decidim.meetings"), default_order: :desc ) %>
-            </th>
-            <th>
-              <%= sort_link(query, :start_time, t("models.meeting.fields.start_time", scope: "decidim.meetings"), default_order: :desc ) %>
-            </th>
-            <th>
-              <%= sort_link(query, :end_time, t("models.meeting.fields.end_time", scope: "decidim.meetings"), default_order: :desc ) %>
-            </th>
+  <div class="table-scroll">
+    <table class="table-list">
+      <thead>
+        <tr>
+          <th>
+            <%= sort_link(query, :id, t("models.meeting.fields.id", scope: "decidim.meetings"), default_order: :desc ) %>
+          </th>
+          <th>
+            <%= sort_link(query, :translated_title, t("models.meeting.fields.title", scope: "decidim.meetings"), default_order: :desc ) %>
+          </th>
+          <th>
+            <%= sort_link(query, :start_time, t("models.meeting.fields.start_time", scope: "decidim.meetings"), default_order: :desc ) %>
+          </th>
+          <th>
+            <%= sort_link(query, :end_time, t("models.meeting.fields.end_time", scope: "decidim.meetings"), default_order: :desc ) %>
+          </th>
+          <th>
+            <%= sort_link(query, :closed, t("models.meeting.fields.closed", scope: "decidim.meetings"), default_order: :desc ) %>
+          </th>
+          <% if maps_enabled? && Decidim::Map.available?(:static, :geocoding) %>
+            <th><%= t("models.meeting.fields.map", scope: "decidim.meetings") %></th>
+          <% end %>
+          <% if resource_with_scopes_enabled? %>
             <th>
-              <%= sort_link(query, :closed, t("models.meeting.fields.closed", scope: "decidim.meetings"), default_order: :desc ) %>
+              <%= sort_link(query, :scope_name, t("models.proposal.fields.scope", scope: "decidim.proposals") ) %>
             </th>
-            <% if maps_enabled? && Decidim::Map.available?(:static, :geocoding) %>
-              <th><%= t("models.meeting.fields.map", scope: "decidim.meetings") %></th>
-            <% end %>
-            <% if resource_with_scopes_enabled? %>
-              <th>
-                <%= sort_link(query, :scope_name, t("models.proposal.fields.scope", scope: "decidim.proposals") ) %>
-              </th>
-            <% end %>
-            <th class="actions"><%= t("actions.title", scope: "decidim.meetings") %></th>
-          </tr>
-        </thead>
-        <tbody>
-          <% meetings.each do |meeting| %>
-            <tr data-id="<%= meeting.id %>">
-              <td>
-                <%= meeting.id %><br>
-              </td>
-              <td>
+          <% end %>
+          <th class="actions"><%= t("actions.title", scope: "decidim.meetings") %></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% meetings.each do |meeting| %>
+          <tr data-id="<%= meeting.id %>">
+            <td>
+              <%= meeting.id %><br>
+            </td>
+            <td>
+              <% if allowed_to? :update, :meeting, meeting: meeting %>
+                <%= link_to present(meeting).title(html_escape: true), edit_meeting_path(meeting) %>
+              <% else %>
                 <%= present(meeting).title(html_escape: true) %><br>
-              </td>
-              <td>
-                <% if meeting.start_time %>
-                  <%= l meeting.start_time, format: :long %>
-                <% end %>
-              </td>
-              <td>
-                <% if meeting.end_time %>
-                  <%= l meeting.end_time, format: :long %>
-                <% end %>
-              </td>
+              <% end %>
+            </td>
+            <td>
+              <% if meeting.start_time %>
+                <%= l meeting.start_time, format: :long %>
+              <% end %>
+            </td>
+            <td>
+              <% if meeting.end_time %>
+                <%= l meeting.end_time, format: :long %>
+              <% end %>
+            </td>
+            <td>
+              <%= humanize_boolean meeting.closed? %>
+            </td>
+            <% if maps_enabled? && Decidim::Map.available?(:static, :geocoding) %>
               <td>
-                <%= humanize_boolean meeting.closed? %>
+                <%= static_map_link(meeting, {}, { class: "static-map__admin" }) unless meeting.online? %>
               </td>
-              <% if maps_enabled? && Decidim::Map.available?(:static, :geocoding) %>
-                <td>
-                  <%= static_map_link(meeting) %>
-                </td>
+            <% end %>
+            <%= td_resource_scope_for(meeting.scope) %>
+            <td class="table-list__actions">
+              <% if allowed_to? :update, :meeting, meeting: meeting %>
+                <%= icon_link_to "pencil-line", edit_meeting_path(meeting), t("actions.edit", scope: "decidim.meetings"), class: "action-icon--edit" %>
+              <% else %>
+                <span class="action-space icon"></span>
               <% end %>
-              <%= td_resource_scope_for(meeting.scope) %>
-              <td class="table-list__actions">
-                <% if allowed_to? :update, :meeting, meeting: meeting %>
-                  <% if meeting.published? %>
-                    <%= icon_link_to "x", unpublish_meeting_path(meeting), t("actions.unpublish", scope: "decidim.admin"), method: :put, class: "action-icon--unpublish", data: { confirm: t("actions.unpublish", scope: "decidim.admin") } %>
-                  <% else %>
-                    <%= icon_link_to "check", publish_meeting_path(meeting), t("actions.publish", scope: "decidim.admin"), method: :put, class: "action-icon--publish" %>
-                  <% end %>
-                <% else %>
-                  <span class="action-space icon"></span>
-                <% end %>
 
-                <%= icon_link_to "eye", resource_locator(meeting).path, t("actions.preview", scope: "decidim.meetings"), class: "action-icon--preview", target: :blank %>
+              <% if allowed_to? :copy, :meeting, meeting: meeting %>
+                <%= icon_link_to "file-copy-line", new_meeting_copy_path(meeting), t("actions.duplicate", scope: "decidim.admin"), class: "action-icon--copy" %>
+              <% else %>
+                <span class="action-space icon"></span>
+              <% end %>
 
-                <% if allowed_to? :copy, :meeting, meeting: meeting %>
-                  <%= icon_link_to "clipboard", new_meeting_copy_path(meeting), t("actions.duplicate", scope: "decidim.admin"), class: "action-icon--copy" %>
-                <% else %>
-                  <span class="action-space icon"></span>
-                <% end %>
+              <% if allowed_to? :update, :meeting, meeting: meeting %>
+                <%= icon_link_to "folder-line", meeting_attachment_collections_path(meeting), t("actions.attachment_collections", scope: "decidim.meetings"), class: "action-icon--attachment_collections" %>
+              <% else %>
+                <span class="action-space icon"></span>
+              <% end %>
 
-                <% if allowed_to? :update, :meeting, meeting: meeting %>
-                  <% if meeting.registration_disabled? %>
-                    <%= icon "people", class: "action-icon action-icon--disabled", role: "img", aria_label: t("actions.registrations", scope: "decidim.meetings") %>
-                  <% else %>
-                    <%= icon_link_to "people", meeting.on_this_platform? ? edit_meeting_registrations_path(meeting) : meeting.registration_url, t("actions.registrations", scope: "decidim.meetings"), class: "action-icon--registrations" %>
-                  <% end %>
-                <% end %>
+              <% if allowed_to? :update, :meeting, meeting: meeting %>
+                <%= icon_link_to "attachment-line", meeting_attachments_path(meeting), t("actions.attachments", scope: "decidim.meetings"), class: "action-icon--attachments" %>
+              <% else %>
+                <span class="action-space icon"></span>
+              <% end %>
 
-                <% if allowed_to? :update, :meeting, meeting: meeting %>
-                  <%= icon_link_to "pencil", edit_meeting_path(meeting), t("actions.edit", scope: "decidim.meetings"), class: "action-icon--edit" %>
-                  <%= icon_link_to "calendar", meeting.agenda.present? ? edit_meeting_agenda_path(meeting, meeting.agenda) : new_meeting_agenda_path(meeting), t("actions.agenda", scope: "decidim.meetings"), class: "action-icon--agenda" %>
-                  <%= icon_link_to "list", edit_meeting_poll_path(meeting), t("actions.manage_poll", scope: "decidim.meetings"), class: "action-icon--manage-poll-questionnaire" %>
+              <% if allowed_to? :update, :meeting, meeting: meeting %>
+                <% if meeting.registration_disabled? %>
+                  <%= icon "group-line", class: "action-icon action-icon--disabled", role: "img", aria_label: t("actions.registrations", scope: "decidim.meetings") %>
                 <% else %>
-                  <span class="action-space icon"></span>
-                  <span class="action-space icon"></span>
-                  <span class="action-space icon"></span>
+                  <%= icon_link_to "group-line", meeting.on_this_platform? ? edit_meeting_registrations_path(meeting) : meeting.registration_url, t("actions.registrations", scope: "decidim.meetings"), class: "action-icon--registrations" %>
                 <% end %>
+              <% end %>
 
-                <% if allowed_to? :close, :meeting, meeting: meeting %>
-                  <%= icon_link_to "lock-locked", edit_meeting_meeting_close_path(meeting_id: meeting.id, id: meeting.id), t("actions.close", scope: "decidim.meetings"), class: "action-icon--close" %>
-                <% else %>
-                    <span class="action-space icon"></span>
-                <% end %>
+              <% if allowed_to? :update, :meeting, meeting: meeting %>
+                <%= icon_link_to "calendar-line", meeting.agenda.present? ? edit_meeting_agenda_path(meeting, meeting.agenda) : new_meeting_agenda_path(meeting), t("actions.agenda", scope: "decidim.meetings"), class: "action-icon--agenda" %>
+                <%= icon_link_to "list-check", edit_meeting_poll_path(meeting), t("actions.manage_poll", scope: "decidim.meetings"), class: "action-icon--manage-poll-questionnaire" %>
+              <% else %>
+                <span class="action-space icon"></span>
+              <% end %>
 
-                <% if allowed_to? :update, :meeting, meeting: meeting %>
-                    <%= icon_link_to "folder", meeting_attachment_collections_path(meeting), t("actions.attachment_collections", scope: "decidim.meetings"), class: "action-icon--attachment_collections" %>
-                <% else %>
-                    <span class="action-space icon"></span>
-                <% end %>
+              <% if allowed_to? :close, :meeting, meeting: meeting %>
+                <%= icon_link_to "lock-line" , edit_meeting_meeting_close_path(meeting_id: meeting.id, id: meeting.id), t("actions.close", scope: "decidim.meetings"), class: "action-icon--close" %>
+              <% else %>
+                <span class="action-space icon"></span>
+              <% end %>
 
-                <% if allowed_to? :update, :meeting, meeting: meeting %>
-                  <%= icon_link_to "paperclip", meeting_attachments_path(meeting), t("actions.attachments", scope: "decidim.meetings"), class: "action-icon--attachments" %>
+              <% if allowed_to? :update, :meeting, meeting: meeting %>
+                <% if meeting.published? %>
+                  <%= icon_link_to "close-circle-line", unpublish_meeting_path(meeting), t("actions.unpublish", scope: "decidim.admin"), method: :put, class: "action-icon--unpublish", data: { confirm: t("actions.unpublish", scope: "decidim.admin") } %>
                 <% else %>
-                  <span class="action-space icon"></span>
+                  <%= icon_link_to "check-line", publish_meeting_path(meeting), t("actions.publish", scope: "decidim.admin"), method: :put, class: "action-icon--publish" %>
                 <% end %>
+              <% else %>
+                <span class="action-space icon"></span>
+              <% end %>
 
-                <%= resource_permissions_link(meeting) %>
+              <%= icon_link_to "eye-line", resource_locator(meeting).path, t("actions.preview", scope: "decidim.meetings"), class: "action-icon--preview", target: :blank, data: { "external-link": false } %>
 
-                <% if allowed_to? :destroy, :meeting, meeting: meeting %>
-                  <% if present(meeting).authored_proposals.empty? %>
-                    <%= icon_link_to "circle-x", meeting_path(meeting), t("actions.destroy", scope: "decidim.meetings"), method: :delete, class: "action-icon--remove", data: { confirm: t("actions.confirm_destroy", scope: "decidim.meetings") } %>
-                  <% else %>
-                    <%=
-                      content_tag(:button,
-                                  class: ["action-icon", "action-icon--remove", "destroy-meeting-alert"],
-                                  "data-invalid-destroy-message" => t("actions.invalid_destroy.proposals_count", count: present(meeting).authored_proposals.size, scope: "decidim.meetings"),
-                                  "data-proposal-titles" => present(meeting).formatted_proposals_titles) do
-                        content_tag(:span,
-                                    data: { tooltip: true, disable_hover: false, click_open: false },
-                                    title: t("actions.destroy", scope: "decidim.meetings")) do
-                          icon("circle-x")
-                        end
-                      end
-                    %>
-                  <% end %>
+              <%= resource_permissions_link(meeting) %>
+
+              <% if allowed_to? :destroy, :meeting, meeting: meeting %>
+                <% if present(meeting).authored_proposals.empty? %>
+                  <%= icon_link_to "delete-bin-line", meeting_path(meeting), t("actions.destroy", scope: "decidim.meetings"), method: :delete, class: "action-icon--remove", data: { confirm: t("actions.confirm_destroy", scope: "decidim.meetings") } %>
                 <% else %>
-                  <span class="action-space icon"></span>
+                  <%=
+                    content_tag(:button,
+                                class: ["action-icon", "action-icon--remove", "destroy-meeting-alert"],
+                                "data-invalid-destroy-message" => t("actions.invalid_destroy.proposals_count", count: present(meeting).authored_proposals.size, scope: "decidim.meetings"),
+                                "data-proposal-titles" => present(meeting).formatted_proposals_titles) do
+                      content_tag(:span,
+                                  data: { tooltip: true, disable_hover: false, click_open: false },
+                                  title: t("actions.destroy", scope: "decidim.meetings")) do
+                        icon("delete-bin-line")
+                      end
+                    end
+                  %>
                 <% end %>
-              </td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-      <%= paginate meetings, theme: "decidim" %>
-    </div>
+              <% else %>
+                <span class="action-space icon"></span>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
   </div>
 </div>
 
-<%= javascript_pack_tag "decidim_meetings_admin" %>
+<%= decidim_paginate meetings %>
+<%= append_javascript_pack_tag "decidim_meetings_admin" %>

data/app/views/decidim/meetings/admin/meetings/new.html.erb

@@ -1,8 +1,18 @@
 <% add_decidim_page_title(t(".title")) %>
-<%= decidim_form_for(@form, html: { class: "form meetings_form new_meeting" }) do |f| %>
-  <%= render partial: "form", object: f, locals: { title: t(".title") } %>
-
-  <div class="button--double form-general-submit">
-    <%= f.submit t(".create") %>
+<div class="item_show__header">
+  <h2 class="item_show__header-title">
+    <%= t(".title") %>
+  </h2>
+</div>
+<div class="item__edit item__edit-1col">
+  <div class="item__edit-form">
+    <%= decidim_form_for(@form, html: { class: "form-defaults form meetings_form new_meeting" }) do |f| %>
+      <%= render partial: "form", object: f %>
+      <div class="item__edit-sticky">
+        <div class="item__edit-sticky-container">
+          <%= f.submit t(".create"), class: "button button__sm button__secondary" %>
+        </div>
+      </div>
+    <% end %>
   </div>
-<% end %>
+</div>

data/app/views/decidim/meetings/admin/poll/_answer_option.html.erb

@@ -5,7 +5,7 @@
     <h2 class="card-title">
     <span><%= t("answer_option", scope: "decidim.forms.admin.questionnaires.answer_option") %></span>
     <% if editable %>
-      <button class="button small alert hollow remove-answer-option button--title">
+      <button class="button button__sm button__secondary small alert hollow remove-answer-option button--title">
         <%= t("remove", scope: "decidim.forms.admin.questionnaires.answer_option") %>
       </button>
     <% end %>

data/app/views/decidim/meetings/admin/poll/_answer_option_template.html.erb

@@ -2,6 +2,6 @@
 
 <script type="text/template" class="decidim-answer-option-template decidim-template" id="<%= template_id %>">
   <%= fields_for "questionnaire[questions][#{question.to_param}][answer_options][]", blank_answer_option do |answer_option_form| %>
-    <%= render "decidim/meetings/admin/poll/answer_option", form: answer_option_form, question: question, editable: editable %>
+    <%= render "decidim/meetings/admin/poll/answer_option", form: answer_option_form, question:, editable: %>
   <% end %>
 </script>

data/app/views/decidim/meetings/admin/poll/_form.html.erb

@@ -1,63 +1,48 @@
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title">
-      <%= edit_questionnaire_title %>
-      <% if questionnaire.answers.any? %>
-        <div class="button--title">
-          <%= export_dropdown(current_component, questionnaire.id) if allowed_to?(:export_answers, :questionnaire) %>
-        </div>
-      <% else %>
-        <button class="button tiny button--title" disabled><%= t("empty", scope: "decidim.forms.admin.questionnaires.answers") %></button>
-      <% end %>
-    </h2>
-  </div>
-</div>
-
 <div class="questionnaire-questions">
   <div class="row column text-center">
-    <button type="button" class="button collapse-all"><%= t("collapse", scope: "decidim.forms.admin.questionnaires.form") %></button>
-    <button type="button" class="button expand-all"><%= t("expand", scope: "decidim.forms.admin.questionnaires.form") %></button>
+    <button type="button" class="button button__sm button__secondary collapse-all"><%= t("collapse", scope: "decidim.forms.admin.questionnaires.form") %></button>
+    <button type="button" class="button button__sm button__secondary expand-all"><%= t("expand", scope: "decidim.forms.admin.questionnaires.form") %></button>
   </div>
 
   <% if questionnaire.questions_editable? %>
     <%= fields_for "questionnaire[questions][#{blank_question.to_param}]", blank_question do |question_form| %>
       <script type="text/template" class="decidim-question-template decidim-template" id="question-template">
         <%= render "decidim/meetings/admin/poll/question",
-              form: question_form,
-              id: tabs_id_for_question(blank_question),
-              editable: questionnaire.questions_editable?,
-              answer_option_template_selector: "#answer-option-template-dummy" %>
+                   form: question_form,
+                   id: tabs_id_for_question(blank_question),
+                   editable: questionnaire.questions_editable?,
+                   answer_option_template_selector: "#answer-option-template-dummy" %>
       </script>
       <%= render "decidim/meetings/admin/poll/answer_option_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "answer-option-template-dummy" %>
     <% end %>
   <% else %>
-    <div class="callout warning">
-      <%= t("already_answered_warning", scope: "decidim.forms.admin.questionnaires.form") %>
-    </div>
+    <%= cell("decidim/announcement", t("already_answered_warning", scope: "decidim.forms.admin.questionnaires.form"), callout_class: "warning" ) %>
   <% end %>
 
-  <div class="questionnaire-questions-list">
+  <div class="questionnaire-questions-list flex flex-col py-6 gap-6 last:pb-0">
     <% @form.questions.each_with_index do |question, index| %>
       <%= fields_for "questionnaire[questions][]", question do |question_form| %>
         <%= render "decidim/meetings/admin/poll/question",
-              form: question_form,
-              id: tabs_id_for_question(question),
-              editable: questionnaire.questions_editable?,
-              answer_option_template_selector: "#answer-option-template-#{index}" %>
+                   form: question_form,
+                   id: tabs_id_for_question(question),
+                   editable: questionnaire.questions_editable?,
+                   answer_option_template_selector: "#answer-option-template-#{index}" %>
         <%= render "decidim/meetings/admin/poll/answer_option_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "answer-option-template-#{index}" %>
       <% end %>
     <% end %>
   </div>
 
   <% if questionnaire.questions_editable? %>
-    <button class="button add-question"><%= t("add_question", scope: "decidim.forms.admin.questionnaires.form") %></button>
+    <button class="button button__sm button__secondary add-question"><%= t("add_question", scope: "decidim.forms.admin.questionnaires.form") %></button>
   <% end %>
 </div>
 
-<%= javascript_pack_tag "decidim_forms_admin", defer: false %>
+<%= append_javascript_pack_tag "decidim_forms_admin" %>
 
 <% if questionnaire.questions_editable? %>
   <script>
-    window.Decidim.createEditableForm()
+    document.addEventListener("DOMContentLoaded", function () {
+      window.Decidim.createEditableForm()
+    })
   </script>
 <% end %>

data/app/views/decidim/meetings/admin/poll/_question.html.erb

@@ -1,96 +1,102 @@
 <% question = form.object %>
 <% is_expanded = question.errors.any? %>
-
 <div class="card questionnaire-question" id="<%= id %>-field">
-  <div class="card-divider question-divider">
-    <h2 class="card-title">
-      <span>
-        <% if editable %>
-          <%== icon("move") %>
-        <% end %>
-        <%= dynamic_title(translated_attribute(question.body), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t("question", scope: "decidim.forms.admin.questionnaires.question")) %>
-      </span>
-
-      <button type="button" class="button small secondary button--title question--collapse" data-toggle="<%= id %>-question-card button--collapse-question-<%= id %> button--expand-question-<%= id %>">
-        <span id="button--collapse-question-<%= id %>" data-toggler=".hide" class="icon-collapse <%= "hide" unless is_expanded %>">
-          <%== icon("caret-top", aria_label: t("collapse", scope: "decidim.forms.admin.questionnaires.question"), role: "img") %>
+  <div class="form__wrapper" data-component="accordion">
+    <div class="card-divider question-divider">
+      <h2 class="card-title">
+        <span>
+          <% if editable %>
+            <%== icon("drag-move-2-fill") %>
+          <% end %>
+          <%= dynamic_title(translated_attribute(question.body), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t("question", scope: "decidim.forms.admin.questionnaires.question")) %>
         </span>
 
-        <span id="button--expand-question-<%= id %>" data-toggler=".hide" class="icon-expand <%= "hide" if is_expanded %>">
-          <%== icon("caret-bottom", aria_label: t("expand", scope: "decidim.forms.admin.questionnaires.question"), role: "img") %>
-        </span>
-      </button>
+        <span class="ml-auto flex flex-row-reverse items-center gap-2">
+          <button id="<%= id %>-button" type="button" class="question--collapse <%= "question-error" if is_expanded %>" data-controls="panel-<%= id %>-question-card">
+            <span class="icon-collapse">
+              <%== icon "arrow-up-s-line", aria_label: t("collapse", scope: "decidim.forms.admin.questionnaires.question"), role: "img" %>
+            </span>
 
-      <% if editable %>
-        <button class="button small alert hollow move-up-question button--title">
-          <%== "#{icon("arrow-top")} #{t("up", scope: "decidim.forms.admin.questionnaires.question")}" %>
-        </button>
+            <span class="icon-expand">
+              <%== icon "arrow-down-s-line", aria_label: t("expand", scope: "decidim.forms.admin.questionnaires.question"), role: "img" %>
+            </span>
+          </button>
 
-        <button class="button small alert hollow move-down-question button--title">
-          <%== "#{icon("arrow-bottom")} #{t("down", scope: "decidim.forms.admin.questionnaires.question")}" %>
-        </button>
+          <% if editable %>
+            <button class="button button__sm button__transparent-secondary small alert hollow move-up-question button--title">
+              <%= icon "arrow-up-line" %>
+              <span><%= t("up", scope: "decidim.forms.admin.questionnaires.question") %></span>
+            </button>
 
-        <button class="button small alert hollow remove-question button--title">
-          <%= t("remove", scope: "decidim.forms.admin.questionnaires.question") %>
-        </button>
-      <% end %>
-    </h2>
-  </div>
+            <button class="button button__sm button__transparent-secondary small alert hollow move-down-question button--title">
+              <%= icon "arrow-down-line" %>
+              <span><%= t("down", scope: "decidim.forms.admin.questionnaires.question") %></span>
+            </button>
 
-  <div class="card-section collapsible <%= "hide" unless is_expanded %>" data-toggler=".hide" id="<%= id %>-question-card">
-    <div class="row column">
-      <%=
-        form.translated(
-          :text_field,
-          :body,
-          tabs_id: id,
-          label: t("statement", scope: "decidim.forms.admin.questionnaires.question"),
-          disabled: !editable
-        )
-      %>
+            <button class="button button__sm button__transparent-secondary small alert hollow remove-question button--title">
+              <%= t("remove", scope: "decidim.forms.admin.questionnaires.question") %>
+            </button>
+          <% end %>
+        </span>
+      </h2>
     </div>
 
-    <div class="row column">
-      <%=
-        form.select(
-          :question_type,
-          options_from_collection_for_select(question_types, :first, :last, question.question_type),
-          {},
-          disabled: !editable
-        )
-      %>
-    </div>
+    <div id="panel-<%= id %>-question-card" class="panel-question-card card-section collapsible <%= "panel-error" if is_expanded %>">
+      <div class="row column">
+        <%=
+          form.translated(
+            :text_field,
+            :body,
+            tabs_id: id,
+            label: t("statement", scope: "decidim.forms.admin.questionnaires.question"),
+            disabled: !editable
+          )
+        %>
+      </div>
 
-    <% if question.persisted? %>
-      <%= form.hidden_field :id, disabled: !editable %>
-    <% end %>
+      <div class="row column">
+        <%=
+          form.select(
+            :question_type,
+            options_from_collection_for_select(question_types, :first, :last, question.question_type),
+            {},
+            disabled: !editable
+          )
+        %>
+      </div>
+
+      <% if question.persisted? %>
+        <%= form.hidden_field :id, disabled: !editable %>
+      <% end %>
 
-    <%= form.hidden_field :position, value: question.position || 0, disabled: !editable %>
-    <%= form.hidden_field :deleted, disabled: !editable %>
+      <%= form.hidden_field :position, value: question.position || 0, disabled: !editable %>
+      <%= form.hidden_field :deleted, disabled: !editable %>
 
-    <div class="questionnaire-question-answer-options" data-template="<%= answer_option_template_selector %>">
-      <div class="questionnaire-question-answer-options-list">
-        <% question.answer_options.each do |answer_option| %>
-          <%= fields_for "questionnaire[questions][#{question.to_param}][answer_options][]", answer_option do |answer_option_form| %>
-            <%= render "decidim/meetings/admin/poll/answer_option", form: answer_option_form, question: question, editable: editable %>
+      <div class="questionnaire-question-answer-options" data-template="<%= answer_option_template_selector %>">
+        <div class="questionnaire-question-answer-options-list">
+          <% question.answer_options.each do |answer_option| %>
+            <%= fields_for "questionnaire[questions][#{question.to_param}][answer_options][]", answer_option do |answer_option_form| %>
+              <%= render "decidim/meetings/admin/poll/answer_option", form: answer_option_form, question:, editable: %>
+            <% end %>
           <% end %>
+        </div>
+        <% if editable %>
+          <div class="row column">
+            <button type="button" class="button button__sm button__secondary add-answer-option"><%= t("add_answer_option", scope: "decidim.forms.admin.questionnaires.question") %></button>
+          </div>
         <% end %>
       </div>
 
-      <% if editable %>
-        <button class="button add-answer-option"><%= t("add_answer_option", scope: "decidim.forms.admin.questionnaires.question") %></button>
-      <% end %>
-    </div>
-
-    <div class="row column questionnaire-question-max-choices">
-      <%=
-        form.select(
-          :max_choices,
-          (2..question.number_of_options),
-          { include_blank: t("any", scope: "decidim.forms.admin.questionnaires.question") },
-          disabled: !editable
-        )
-      %>
+      <div class="row column questionnaire-question-max-choices">
+        <%=
+          form.select(
+            :max_choices,
+            (2..question.number_of_options),
+            { include_blank: t("any", scope: "decidim.forms.admin.questionnaires.question") },
+            disabled: !editable
+          )
+        %>
+      </div>
     </div>
   </div>
 </div>