add styles to accordion

openpoke · Jan 17, 2024 · 1551ba1 · 1551ba1
1 parent 459e51b
commit 1551ba1
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/app/cells/decidim/newsletter_templates/agenda_events_settings_form/show.erb b/app/cells/decidim/newsletter_templates/agenda_events_settings_form/show.erb
@@ -33,7 +33,7 @@
         <%= settings_fields.translated :text_field, :body_subtitle, label: t(".body_subtitle") unless theme == :capitalitat %>
         <ul id="box-container" class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true">
           <% (1..4).each do |num| %>
-            <li class="box accordion-item" id="box<%= num %>" data-accordion-item>
+            <li class="box accordion-item cursor-pointer" id="box<%= num %>" data-accordion-item>
               <a href="#" class="accordion-title body-box-title"><%= t(".boxes_number_title", number: num) %>:</a>
               <div class="accordion-content" data-tab-content>
                 <%= settings_fields.translated :text_field, "body_box_title_#{num}", label: t(".body_box_title") %>
@@ -111,3 +111,4 @@
 </div>
 
 <%= stylesheet_pack_tag "decidim_newsletter_agenda" %>
+<%= append_javascript_pack_tag "decidim_newsletter_agenda" %>
diff --git a/app/packs/entrypoints/decidim_newsletter_agenda.js b/app/packs/entrypoints/decidim_newsletter_agenda.js
@@ -3,3 +3,23 @@ import "./decidim_newsletter_agenda.scss";
 // Images
 require.context("../images", true)
 require.context("../fonts", true)
+
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    const accordionItems = document.querySelectorAll('.accordion-item');
+    console.log("hola");
+    accordionItems.forEach(function (item) {
+
+      const title = item.querySelector('.accordion-title');
+      let content = item.querySelector('.accordion-content');
+      console.log(content.style.display);
+      content.style.display = 'none';
+
+      title.addEventListener('click', function () {
+
+        content = item.querySelector('.accordion-content');
+        content.style.display = content.style.display === 'none' ? 'block' : 'none';
+      });
+    });
+});
diff --git a/app/packs/entrypoints/decidim_newsletter_agenda.scss b/app/packs/entrypoints/decidim_newsletter_agenda.scss
@@ -15,7 +15,7 @@
 }
 
 .tabs-title > a {
-  padding: 1.25rem 1.5rem;
+  padding: 1.15rem 1.5rem;
   font-size: 1rem;
   line-height: 1;
 }
@@ -95,6 +95,18 @@ button#newsletter_images_main_image_button {
   .accordion-item:last-child:not(.is-active) > .accordion-title {
     border-bottom: 1px solid #e6e6e6;
   }
+
+  .accordion-title::before {
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    margin-top: -0.5rem;
+    content: "+";
+  }
+
+  .is-active > .accordion-title::before {
+    content: "–";
+  }
 }
 
 .fieldset {