Merge pull request #242 from maykinmedia/task-618-mob-questionnaire-a…

…nchors

[#618] Feature/autofocus in mobile questionnaire

src/open_inwoner/components/templates/components/Step/StepIndicator.html

@@ -4,7 +4,7 @@
     <aside class="step-indicator">
         <ol class="step-indicator__list">
             {% for step in steps %}
-                <li class="step-indicator__list-item{% if step.is_current %} step-indicator__list-item--active{% elif step.is_completed %} step-indicator__list-item--completed{% endif %} P">
+                <li class="step-indicator__list-item{% if step.is_current %} step-indicator__list-item--active{% elif step.is_completed %} step-indicator__list-item--completed{% endif %} P" data-step={{ step.step }}>
                     {% if step.object %}
                         {% link href=step.object.get_absolute_url secondary=True bold=True text=step.object_display %}
                     {% endif %}

src/open_inwoner/js/components/index.js

@@ -14,6 +14,7 @@ import './map'
 import './message-file'
 import './notifications'
 import './preview'
+import './questionnaire'
 import './search'
 import './toggle'
 import './session'

src/open_inwoner/js/components/questionnaire/index.js

@@ -0,0 +1,13 @@
+const question = document.getElementById('question')
+const stepIndicator = document.querySelector(
+  '.step-indicator__list-item--active'
+)
+
+if (stepIndicator && question) {
+  /*
+   * Focus on the question only if it's the not the first one and if it's accessed via a mobile phone
+   */
+  if (window.innerWidth < 768 && stepIndicator.dataset.step > 1) {
+    question.scrollIntoView()
+  }
+}

src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html

@@ -17,7 +17,7 @@ <h1 class="h1">
 
             {% step_indicator form.instance.depth form.instance.depth object_list=form.instance.get_tree_path object_list_str='question_subject' %}
 
-            <h4 class="h4">{{ form.instance.question }}</h4>
+            <h4 class="h4" id="question">{{ form.instance.question }}</h4>
 
             {% if form.instance.help_text %}
                 <p class="p p--compact">{{ form.instance.help_text }}</p>