From 2a0d0191b2f1487a30ca368cde8bdd6f80244557 Mon Sep 17 00:00:00 2001 From: mutantsan Date: Mon, 11 Sep 2023 18:13:07 +0300 Subject: [PATCH] feature: put steps into accordions --- ckanext/tour/assets/css/style.css | 19 ++++++++ ckanext/tour/assets/css/style.css.map | 2 +- ckanext/tour/assets/js/tour-steps.js | 4 +- ckanext/tour/templates/base.html | 4 ++ .../templates/tour/snippets/tour_step.html | 45 +++++++++++++------ ckanext/tour/theme/elements.scss | 23 ++++++++++ 6 files changed, 80 insertions(+), 17 deletions(-) diff --git a/ckanext/tour/assets/css/style.css b/ckanext/tour/assets/css/style.css index 134f93f..39c9fad 100644 --- a/ckanext/tour/assets/css/style.css +++ b/ckanext/tour/assets/css/style.css @@ -3,6 +3,9 @@ } .tour-steps .tour-steps__steps { margin-bottom: 16px; + display: flex; + flex-direction: column; + gap: 12px; } .tour-steps .tour-steps__steps .tour-step { border: 1px solid #e3e3e3; @@ -26,4 +29,20 @@ margin-bottom: 0; } +.accordion.tour-accordion .accordion-header { + display: flex; + align-items: center; + gap: 8px; +} +.accordion.tour-accordion .accordion-header .accordion-header--text { + margin-right: auto; +} +.accordion.tour-accordion .accordion-header .accordion-button { + width: fit-content; + padding: 0.5rem; +} +.accordion.tour-accordion .accordion-header .remove-step { + height: 38px; +} + /*# sourceMappingURL=style.css.map */ diff --git a/ckanext/tour/assets/css/style.css.map b/ckanext/tour/assets/css/style.css.map index 3b48845..7203db6 100644 --- a/ckanext/tour/assets/css/style.css.map +++ b/ckanext/tour/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../theme/elements.scss","../../theme/variables.scss"],"names":[],"mappings":"AAAA;EACI;;AAEA;EACI;;AAEA;EACI;EACA,eCPS;EDQT;EACA;EAEA;;AAEA;EACI;;AAIA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../theme/elements.scss","../../theme/variables.scss"],"names":[],"mappings":"AAAA;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA,eCVS;EDWT;EACA;EAEA;;AAEA;EACI;;AAIA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;;;AAOZ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI","file":"style.css"} \ No newline at end of file diff --git a/ckanext/tour/assets/js/tour-steps.js b/ckanext/tour/assets/js/tour-steps.js index 3a1da8c..db87b1b 100644 --- a/ckanext/tour/assets/js/tour-steps.js +++ b/ckanext/tour/assets/js/tour-steps.js @@ -40,9 +40,7 @@ ckan.module("tour-steps", function ($) { _onRemoveStep: function (e) { e.preventDefault(); - var stepId = $(e.target).closest(".tour-step").data("stepId"); - - $(`#step_${stepId}`).remove(); + $(e.target).closest(".tour-accordion").remove(); this._toggleRemoveBtns(); this._updateLastStepId(); diff --git a/ckanext/tour/templates/base.html b/ckanext/tour/templates/base.html index 641bc06..f2192ec 100644 --- a/ckanext/tour/templates/base.html +++ b/ckanext/tour/templates/base.html @@ -6,6 +6,10 @@ {% asset 'tour/tour-js' %} + + + + {% endblock %} {% block styles %} diff --git a/ckanext/tour/templates/tour/snippets/tour_step.html b/ckanext/tour/templates/tour/snippets/tour_step.html index aa521b4..ff7d41c 100644 --- a/ckanext/tour/templates/tour/snippets/tour_step.html +++ b/ckanext/tour/templates/tour/snippets/tour_step.html @@ -1,21 +1,40 @@ {% import 'macros/form.html' as form %} {% from "tour/snippets/tour_image_upload.html" import image_upload %} -
- +{% set step_id = step.step_id or step.id %} - {{ form.hidden("step_id", value=step.step_id or step.id) }} - {{ form.input("step_title", label=_("Tour title"), value=step.step_title or step.title) }} +
+
+

+
+ Step 0 +
+ + +

+
+
+
+ {{ form.hidden("step_id", value=step.step_id or step.id) }} + {{ form.input("step_title", label=_("Tour title"), value=step.step_title or step.title) }} - {% call form.input("step_element", label=_("HTML element query"), value=step.step_element or step.element, attrs={'required': 1, 'class': 'form-control'}) %} - {{ form.info(_('Example: .dataset-list or #map')) }} - {% endcall %} + {% call form.input("step_element", label=_("HTML element query"), value=step.step_element or step.element, attrs={'required': 1, 'class': 'form-control'}) %} + {{ form.info(_('Example: .dataset-list or #map')) }} + {% endcall %} - {% call form.input("step_intro", label=_("Intro"), value=step.step_intro or step.intro) %} - {{ form.info(_('Supports HTML')) }} - {% endcall %} + {% call form.input("step_intro", label=_("Intro"), value=step.step_intro or step.intro) %} + {{ form.info(_('Supports HTML')) }} + {% endcall %} - {{ form.select('step_position', label=_('Position'), options=h.tour_get_position_options(), selected=step.step_position or step.position, error=error or {}) }} + {{ form.select('step_position', label=_('Position'), options=h.tour_get_position_options(), selected=step.step_position or step.position, error=error or {}) }} - {{ image_upload(step) }} -
+ {{ image_upload(step) }} +
+ + + + + diff --git a/ckanext/tour/theme/elements.scss b/ckanext/tour/theme/elements.scss index 16c6324..f7938d3 100644 --- a/ckanext/tour/theme/elements.scss +++ b/ckanext/tour/theme/elements.scss @@ -3,6 +3,9 @@ .tour-steps__steps { margin-bottom: 16px; + display: flex; + flex-direction: column; + gap: 12px; .tour-step { border: 1px solid $step-border-color; @@ -33,5 +36,25 @@ } } } +} + +.accordion.tour-accordion { + .accordion-header { + display: flex; + align-items: center; + gap: 8px; + + .accordion-header--text { + margin-right: auto; + } + .accordion-button { + width: fit-content; + padding: 0.5rem; + } + + .remove-step { + height: 38px; + } + } }