Feature/user feedback (#146)

frontend/src/assets/base.css

@@ -15,3 +15,10 @@
   color: var(--rvo-color-hemelblauw);
   font-weight: bold;
 }
+
+#progress-question-mobile {
+    @media only screen and (width <= 800px) {
+        display: flex;
+        align-items: center;
+    }
+}

frontend/src/components/BeslisboomForm.vue

@@ -87,28 +87,28 @@ onMounted(async () => {
   }
 })
 
-function handleVersions(question_or_conclusion_id: string){
+function handleVersions(question_or_conclusion_id: string) {
   let category: Category | undefined
-  let versions = question_or_conclusion_id.split(".")
+  let versions = question_or_conclusion_id.split('.')
   category = data_categories.value.find((q) => q.questionId === versions[0])
   if (versions.length >= 2) {
     // Only overwrite if we find something here
     let category_overwrite = data_categories.value.find((q) => q.questionId === versions[0] + '.' + versions[1])
-    if(category_overwrite != undefined){
+    if (category_overwrite != undefined) {
       category = category_overwrite
     }
   }
-  if (versions.length >= 3 ){
-    let category_overwrite = data_categories.value.find((q) => q.questionId === versions[0] + '.' + versions[1] + "." + versions[2])
-    if(category_overwrite != undefined){
+  if (versions.length >= 3) {
+    let category_overwrite = data_categories.value.find((q) => q.questionId === versions[0] + '.' + versions[1] + '.' + versions[2])
+    if (category_overwrite != undefined) {
       category = category_overwrite
     }
   }
   return category
 }
 
 const currentCategory = computed(() => {
-  if (questionId.value){
+  if (questionId.value) {
     return handleVersions(questionId.value)
   } else {
     questionStore.updateLabelsAtConclusion()
@@ -162,6 +162,7 @@ function reset() {
 
 function back() {
   questionStore.revertAnswer(previousCategory.value)
+  conclusionId.value = ''
   categoryStore.revertCurrentCategory()
 }
 
@@ -175,19 +176,21 @@ function acceptDisclaimer() {
   <div v-if="AcceptedDisclaimer == '0'">
     <HomePage @accept-disclaimer="acceptDisclaimer" />
   </div>
-  <div v-else>
+  <div class="rvo-layout-column rvo-layout-gap--2xl" v-else>
     <Header @reset-event="reset" />
-    <div class="rvo-max-width-layout rvo-max-width-layout--md flex justify-center px-10 py-10">
+    <div
+      id="progress-question-mobile"
+      class="rvo-layout-column rvo-max-width-layout rvo-layout-align-items-start rvo-max-width-layout-inline-padding--sm">
       <ProgressTracker
-        v-if="categoryState"
+        v-if="categoryState && !findConclusion"
         :soort_toepassing_state="categoryState.soort_toepassing_state"
         :open_source_state="categoryState.open_source_state"
         :publicatiecategorie_state="categoryState.publicatiecategorie_state"
         :systeemrisico_state="categoryState.systeemrisico_state"
         :transparantieverplichtingen_state="categoryState.transparantieverplichtingen_state"
         :rol_state="categoryState.rol_state"
       />
-      <div class="px-20">
+      <div class="rvo-layout-gap--md">
         <DefaultLoader :loading="isLoading" />
         <DefaultError :error="error" />
         <Conclusion
@@ -197,19 +200,18 @@ function acceptDisclaimer() {
           :sources="findConclusion.sources"
           :topic="currentCategory?.topic"
           :labels="questionStore.getLabelsByCategory()"
+          @back="back"
+        />
+        <Question v-if="currentQuestion && currentCategory"
+                  :question="currentQuestion.question"
+                  :id="currentQuestion.questionId"
+                  :sources="currentQuestion.sources"
+                  :answers="currentQuestion.answers"
+                  :topic="currentCategory.topic"
+                  :labels="questionStore.getLabelsByCategory()"
+                  @answered="givenAnswer"
+                  @back="back"
         />
-        <div v-if="currentQuestion && currentCategory">
-          <Question
-            :question="currentQuestion.question"
-            :id="currentQuestion.questionId"
-            :sources="currentQuestion.sources"
-            :answers="currentQuestion.answers"
-            :topic="currentCategory.topic"
-            :labels="questionStore.getLabelsByCategory()"
-            @answered="givenAnswer"
-            @back="back"
-          />
-        </div>
       </div>
     </div>
   </div>

frontend/src/components/Conclusion.vue

@@ -11,6 +11,7 @@ interface Props {
 }
 
 defineProps<Props>()
+defineEmits(['back'])
 </script>
 
 <template>
@@ -20,15 +21,17 @@ defineProps<Props>()
     <div as="h3" class="utrecht-heading-2">
       Resultaat
     </div>
-    <p class="rvo-alert rvo-alert--info rvo-alert--padding-md">
+    <p class="rvo-alert--success rvo-alert--padding-md">
       <span v-html="conclusion" class="rvo-text--italic rvo-text--xl --rvo-font-sans-serif-font-family"></span>
       <slot />
     </p>
 
     <!--   Labels section  -->
     <SubResult
       :topic="topic"
-      :labels="labels"/>
+      :labels="labels"
+      title="Resultaten"
+      conclusion="conclusion"/>
 
     <!--Obligation/Verplichtingen section-->
     <p style="white-space: pre-line" class="rvo-text--bold rvo-text--md --rvo-font-sans-serif-font-family">
@@ -37,15 +40,34 @@ defineProps<Props>()
     </p>
 
     <!--Contact section-->
-    <p class="rvo-text--md --rvo-font-sans-serif-font-family">
-      Mocht u vragen of opmerkingen hebben naar aanleiding van deze beslisboom, mail dan gerust naar
-      <a href="mailto:[email protected]" target="_blank"
-         class="text-blue-700 underline">[email protected]</a>.
-      <slot />
-    </p>
+    <div class="rvo-alert rvo-alert--info rvo-alert--padding-md">
+  <span
+    class="utrecht-icon rvo-icon rvo-icon-info rvo-icon--xl rvo-status-icon-info"
+    role="img"
+    aria-label="Info"
+  ></span>
+  <div class="rvo-alert-text">
+    <div>
+      <div>
+        Mocht u vragen of opmerkingen hebben naar aanleiding van deze beslisboom, mail dan gerust naar
+        <a href="mailto:[email protected]" class="rvo-link rvo-link--logoblauw">[email protected]</a>
+      </div>
+    </div>
+  </div>
+</div>
 
     <!--Sources section-->
     <Sources :sources="sources" />
 
+    <div class="rvo-layout-margin-vertical--2xl">
+      <button
+        @click="$emit('back')"
+        type="button"
+        class="flex utrecht-button utrecht-button--secondary-action rvo-layout-row rvo-layout-gap--md utrecht-button--rvo-md rvo-link--no-underline "
+      >
+        Vorige vraag
+      </button>
+    </div>
+
   </div>
 </template>

frontend/src/components/Header.vue

@@ -13,7 +13,7 @@ const emit = defineEmits(['reset-event'])
     </div>
     <div class="rvo-layout-column rvo-layout-gap--2xl">
       <div class="rvo-topnav__background rvo-topnav__background--horizontal-rule">
-        <div class="rvo-max-width-layout rvo-max-width-layout--md rvo-max-width-layout-inline-padding--none">
+        <div class="rvo-max-width-layout rvo-max-width-layout--md rvo-max-width-layout-inline-padding--sm">
           <nav class="rvo-topnav rvo-topnav--lg">
             <ul class="rvo-topnav__list">
               <li class="rvo-topnav__item">

frontend/src/components/Question.vue

@@ -18,17 +18,19 @@ defineEmits(['answered', 'back'])
 </script>
 
 <template>
-  <div class="flex-col">
+  <div class="rvo-max-width-layout--md">
     <div class="flex">
       <h1 class="utrecht-heading-1"><span>{{ topic }}</span></h1>
-        <BetaversionLabel />
+      <BetaversionLabel />
     </div>
     <Sources :sources="sources" />
     <!-- Question and Answer section -->
-    <fieldset class="rvo-layout-margin-vertical--2xl utrecht-form-fieldset rvo-form-fieldset">
+    <div class="rvo-layout-margin-vertical--2xl">
+    <fieldset class="rvo-max-width-layout--sm utrecht-form-fieldset rvo-form-fieldset"
+    style="width: 500px">
       <!-- Question section -->
       <div>
-        <p style="white-space: pre-line" class="utrecht-paragraph rvo-max-width-layout--md">
+        <p style="white-space: pre-line" class="utrecht-paragraph">
           <span v-html="question"></span>
           <slot />
         </p>
@@ -46,25 +48,37 @@ defineEmits(['answered', 'back'])
             class="utrecht-button utrecht-button--secondary-action utrecht-button--rvo-md rvo-link--no-underline rvo-link--hover"
             :for="index.toString()"
           >
-            {{answer.answer}}
+            {{ answer.answer }}
           </button>
         </div>
       </div>
     </fieldset>
-     <SubResult
-                   :topic="topic"
-                   :labels="labels"/>
 
-  <div class="rvo-layout-margin-vertical--2xl">
-    <button
-      @click="$emit('back')"
-      v-if="id !== '0'"
-      type="button"
-      class="flex utrecht-button utrecht-button--secondary-action rvo-layout-row rvo-layout-gap--md utrecht-button--rvo-md rvo-link--no-underline "
-    >
-      Vorige vraag
-    </button>
-  </div>
+    <div class="rvo-layout-margin-vertical--xl">
+      <button
+        @click="$emit('back')"
+        v-if="id !== '0'"
+        type="button"
+        class="flex utrecht-button utrecht-button--secondary-action rvo-layout-row rvo-layout-gap--md utrecht-button--rvo-md rvo-link--no-underline "
+      >
+        <span
+                  class="utrecht-icon rvo-icon rvo-icon-terug rvo-icon--lg rvo-icon--wit"
+                  role="img"
+                  aria-label="Terug"
+                ></span>
+        Vorige vraag
+      </button>
+    </div>
+      </div>
+
+    <SubResult class="rvo-layout-margin-vertical--2xl"
+      style="width: 500px"
+      :topic="topic"
+      :labels="labels"
+      title="Tussenresultaten"
+      conclusion=""/>
+
+
   </div>
 
 </template>

frontend/src/components/Sources.vue

@@ -9,8 +9,7 @@ defineProps<Props>()
 <template>
   <div>
     <ul>
-
-      <li v-for='(source, index) in sources' :key="index" class="relative top-5 text-sm flex items-center">
+      <li v-for='(source, index) in sources' :key="index" class="text-sm flex items-center">
         <!-- When source.url exists -->
         <span
           class="utrecht-icon rvo-icon rvo-icon-info rvo-icon--xl rvo-status-icon-info"

frontend/src/components/SubResult.vue

@@ -4,6 +4,8 @@ import BetaversionLabel from '@/components/betaversion-label.vue'
 interface Props {
   topic: string | undefined
   labels: { category: string; assigned_labels: string | undefined; }[] | undefined
+  title: string
+  conclusion: string
 }
 
 defineProps<Props>()
@@ -18,12 +20,12 @@ function get_background_color(label: string | undefined) {
 </script>
 
 <template>
-
+  <div v-if="conclusion == ''">
   <div class="rvo-accordion">
     <details class="rvo-accordion__item">
       <summary class="rvo-accordion__item-summary">
         <h3
-          class="utrecht-heading-3 rvo-accordion__item-title rvo-heading--no-margins rvo-heading--mixed"
+          class="utrecht-heading-3 rvo-accordion__item-title rvo-heading--no-margins rvo-heading--mixed items-center"
         >
                   <span
                     class="utrecht-icon rvo-icon rvo-icon-delta-omlaag rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--closed"
@@ -35,8 +37,9 @@ function get_background_color(label: string | undefined) {
             role="img"
             aria-label="Delta omhoog"
           ></span>
-          tussenresultaten
+          {{ title }}
         </h3>
+              <span class="rvo-accordion-teaser">Bekijk hier je profiel tot nu toe</span>
       </summary>
       <div class="rvo-accordion__content">
         <div class="rvo-table--responsive py-5">
@@ -68,4 +71,56 @@ function get_background_color(label: string | undefined) {
       </div>
     </details>
   </div>
+    </div>
+  <div v-else>
+    <div class="rvo-accordion">
+    <details class="rvo-accordion__item" open="">
+      <summary class="rvo-accordion__item-summary">
+        <h3
+          class="utrecht-heading-3 rvo-accordion__item-title rvo-heading--no-margins rvo-heading--mixed items-center"
+        >
+                  <span
+                    class="utrecht-icon rvo-icon rvo-icon-delta-omlaag rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--closed"
+                    role="img"
+                    aria-label="Delta omlaag"
+                  ></span>
+          <span
+            class="utrecht-icon rvo-icon rvo-icon-delta-omhoog rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--open"
+            role="img"
+            aria-label="Delta omhoog"
+          ></span>
+          {{ title }}
+        </h3>
+      </summary>
+      <div class="rvo-accordion__content">
+        <div class="rvo-table--responsive py-5">
+          <table class="rvo-table">
+            <thead class="rvo-table-head">
+            <tr class="rvo-table-row">
+              <th scope="col" class="rvo-table-header">Categorie</th>
+              <th
+                scope="col"
+                class="rvo-table-header rvo-table-header"
+              >
+                Resultaat
+              </th>
+            </tr>
+            </thead>
+            <tbody class="rvo-table-body">
+            <tr v-for='(assigned_labels, category) in labels' :key="category" class="rvo-table-row">
+              <td class="rvo-table-cell rvo-text--bold rvo-text--md">{{ category }}</td>
+              <td class="flex rvo-table-cell gap-x-3">
+                <div v-for='(label) in assigned_labels' :key="label"
+                     class="rvo-tag rvo-tag--default" :style="get_background_color(label)">
+                  {{ label }}
+                </div>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </details>
+  </div>
+  </div>
 </template>

frontend/src/components/betaversion-label.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="px-5">
     <div
-      class="flex justify-center rounded-md rvo-alert rvo-alert--padding-xs rvo-alert--warning">
+      class="rvo-tag rvo-tag--with-icon rvo-tag--active rvo-tag--warning">
             <span
-              class="utrecht-icon rvo-icon rvo-icon-waarschuwing rvo-icon--xl rvo-status-icon-waarschuwing"
+              class="utrecht-icon rvo-icon rvo-icon-waarschuwing rvo-icon--lg"
               role="img"
               aria-label="Waarschuwing"
             ></span>
-      <div class="flex utrecht-alert--warning utrecht-paragraph">
-        bètaversie
+      <div class="utrecht-alert--warning utrecht-paragraph">
+        Bètaversie
       </div>
     </div>
   </div>

frontend/src/stores/QuestionStore.ts

@@ -15,7 +15,7 @@ export const useQuestionStore = defineStore('question', () => {
   const initialAnswers = JSON.parse(localStorage.getItem('answers') ?? '[]')
   const initialLabels = JSON.parse(localStorage.getItem('labels') ?? '{}')
   const initialLabelsByCategory = JSON.parse(localStorage.getItem('labelsbycategory') ?? initialLabelsByCategoryNTB)
-  const initialQuestionId = JSON.parse(localStorage.getItem('currentquestion') ?? '0')
+  const initialQuestionId = localStorage.getItem('currentquestion') ?? '0'
   const initialConclusionId = localStorage.getItem('currentconclusion') ?? ''
 
   const AcceptedDisclaimer = ref(String(initialAcceptedDisclaimer))