LOOP-1099: Added document dropdown

config/sync/core.entity_form_display.paragraph.os2loop_documents_step.default.yml

@@ -18,7 +18,7 @@ mode: default
 content:
   os2loop_documents_step_image:
     type: media_library_widget
-    weight: 3
+    weight: 1
     settings:
       media_types: {  }
     third_party_settings: {  }

config/sync/field.storage.paragraph.os2loop_documents_step_image.yml

@@ -13,7 +13,7 @@ settings:
   target_type: media
 module: core
 locked: false
-cardinality: 1
+cardinality: -1
 translatable: true
 indexes: {  }
 persist_with_no_fields: false

web/profiles/custom/os2loop/themes/os2loop_theme/assets/paragraphs/step-by-step.scss

@@ -24,9 +24,8 @@
         justify-content: center;
         align-items: center;
         position: absolute;
-        top: $spacer/2;
         left: -$spacer/2;
-        padding: $spacer * 1.5;
+        padding: $spacer * 1.25;
         width: 15px;
         height: 15px;
         border-radius: 50%;
@@ -41,7 +40,7 @@
       &.paragraph-step {
         &::before {
           content: counters(item, ".") " ";
-          padding: $spacer * 1.25;
+          padding: $spacer * 1.1;
           font-size: 1em;
           background-color: $gray-500;
           left: 0;
@@ -51,13 +50,34 @@
   }
 }
 
-.indented-step {
-  padding-left: $spacer * 1.5;
-}
-
 .step {
   min-height: $spacer * 4;
   padding: $spacer/2 $spacer/2 $spacer/2 $spacer;
   background-color: $light-background;
   margin-bottom: $spacer/2;
+
+  &--collapse-toggle {
+    .show-steps {
+      display: none;
+    }
+    .hide-steps {
+      display: block;
+    }
+    &.collapsed {
+      .show-steps {
+        display: block;
+      }
+      .hide-steps {
+        display: none;
+      }
+    }
+  }
+}
+
+.indented-step {
+  padding-left: $spacer * 1.1;
+
+  img {
+    margin-bottom: 2em;
+  }
 }

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/paragraph--os2loop-documents-step.html.twig

@@ -54,20 +54,26 @@
 
 {% block paragraph %}
     {% block content %}
-        <li {{ attributes.addClass(classes) }}>
-        <div class="step">
-          <div class="row">
-            <div class="col offset-1">
-              {{ content.os2loop_documents_step_text }}
-            </div>
-            <div class="col-auto">
-              {{ content.os2loop_documents_step_image }}
-            </div>
+      <li {{ attributes.addClass(classes) }}>
+        <div class="row">
+          <div class="col offset-1">
+            {{ content.os2loop_documents_step_text }}
           </div>
+          <div class="col-auto">
+            {{ content.os2loop_documents_step_image }}
           </div>
-          {% if content.os2loop_documents_steps['#title'] is not null %}
-            <ol class="indented">{{ content.os2loop_documents_steps }}</ol>
-          {% endif %}
-        </li>
+        </div>
+        {% if content.os2loop_documents_steps['#title'] is not null %}
+          <button class="d-print-none btn btn-sm my-2 btn-primary collapsed step--collapse-toggle" type="button" data-toggle="collapse" data-target="#paragraph-id-{{ paragraph.id() }}">
+            <span class="show-steps"><span>{{ 'Show steps'|t }}</span><i class="bi bi-caret-down-fill ml-1"></i></span>
+            <span class="hide-steps"><span>{{ 'Hide steps'|t }}</span><i class="bi bi-caret-up-fill ml-1"></i></span>
+          </button>
+          <div class="step collapse" id="paragraph-id-{{ paragraph.id() }}">
+            <ol class="indented">
+              {{ content.os2loop_documents_steps }}
+            </ol>
+          </div>
+        {% endif %}
+      </li>
     {% endblock %}
 {% endblock paragraph %}

web/profiles/custom/os2loop/translations/translations.da.po

@@ -29812,4 +29812,8 @@ msgstr "Vedhæft"
 msgid "Which profession do you think can answer your question?"
 msgstr "Hvilke(n) faggruppe(r) tror du kan svare på dit spørgsmål?"
 
+msgid "Show steps"
+msgstr "Vis underpunkter"
 
+msgid "Hide steps"
+msgstr "Skjul underpunkter"