improve questionaire edition UI

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bdlg-scheduler",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/Inscription.vue

@@ -6,7 +6,7 @@
     <div v-if="status == 'Loaded'" class="inscription-container">
       <questionnaire
         :competences="competences"
-        :introduction="intrtoduction"
+        :introduction="introduction"
         :questions="questions"
         :uuid="uuid"
         :evtName="evtName"
@@ -41,7 +41,6 @@ export default defineComponent({
       status: "Loading",
       data: null as StateJSON | null,
       registration: [] as Array<Benevole>,
-
       competences: [] as Array<Competence>,
     };
   },

src/components/EditeurQuestionnaire.vue

@@ -18,7 +18,6 @@
           @update:modelValue="updateQuestion($event, idx)"
           @delete="deleteQuestion(idx)"
         />
-        <hr />
       </div>
       <div class="actions">
         <button class="btn small success" @click="createQuestion">
@@ -202,8 +201,9 @@ export default defineComponent({
 <style scoped>
 .questionnaire-container {
   flex-direction: column;
+  gap: 32px;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   margin: 0 16px;
 }
 @media (min-width: 1000px) {
@@ -214,7 +214,7 @@ export default defineComponent({
 .questionnaire-editor {
   display: flex;
   flex-direction: column;
-  max-width: 800px;
+  max-width: 500px;
 }
 .v-questionnaire {
   box-shadow: 0 0 2px 2px var(--color-neutral-600);
@@ -223,7 +223,6 @@ export default defineComponent({
 }
 .editor {
   margin: 0;
-  height: 100%;
   font-family: "Helvetica Neue", Arial, sans-serif;
   color: #333;
 }
@@ -249,6 +248,8 @@ export default defineComponent({
 }
 .question {
   margin: 8px 0;
+  border: var(--color-neutral-600) solid 1px;
+  padding: 16px;
 }
 
 .actions {

src/components/EditeurQuestionnaireQuestion.vue

@@ -1,59 +1,64 @@
 <template>
-  <div>
-    <styled-input label="Titre" v-model="title" />
-    <styled-input label="Description" v-model="subTitle" />
-    <div>
-      <div class="formcontrol-label">Type de question</div>
-      <button
-        class="btn-group small left"
-        :class="{ selected: type == 'competence' }"
-        @click="type = 'competence'"
-      >
-        Options
-      </button>
-      <button
-        class="btn-group small right"
-        :class="{ selected: type == 'text' }"
-        @click="type = 'text'"
-      >
-        Text libre
-      </button>
-      <button
-        style="margin-left: 8px"
-        class="btn-group small left"
-        :class="{ selected: mandatory }"
-        @click="mandatory = true"
-      >
-        Obligatoire
-      </button>
-      <button
-        class="btn-group small right"
-        :class="{ selected: mandatory == false }"
-        @click="mandatory = false"
-      >
-        Facultative
-      </button>
+  <div style="position: relative">
+    <div class="expand-button" @click="collapse">
+      <i class="material-icons">expand_{{ collapsed ? "more" : "less" }}</i>
     </div>
-    <div v-if="type == 'competence'">
-      <chips-input
-        label="Ajouter une option"
-        placeholder="Choisir une option"
-        secondary-placeholder="+ option"
-        :autocompleteList="autocompleteList"
-        :strict-autocomplete="true"
-        v-model="competenceIdList"
-      />
-      <styled-input
-        v-for="(c, idx) in competences"
-        :key="idx"
-        :helpText="competenceLabel(c.id)"
-        :modelValue="c.text"
-        @input="updateCompetenceText($event, idx)"
-      />
-      <styled-input v-if="mandatory" helpText="Réponse par défaut" v-model="mandatoryText" />
-      <button class="btn small error" @click="$emit('delete')">
-        <i class="material-icons">delete_forever</i>Supprimer
-      </button>
+    <styled-input label="Titre" v-model="title" />
+    <div class="question-container" :class="{ collapsed }" ref="container">
+      <styled-input label="Description" v-model="subTitle" />
+      <div>
+        <div class="formcontrol-label">Type de question</div>
+        <button
+          class="btn-group small left"
+          :class="{ selected: type == 'competence' }"
+          @click="type = 'competence'"
+        >
+          Options
+        </button>
+        <button
+          class="btn-group small right"
+          :class="{ selected: type == 'text' }"
+          @click="type = 'text'"
+        >
+          Text libre
+        </button>
+        <button
+          style="margin-left: 8px"
+          class="btn-group small left"
+          :class="{ selected: mandatory }"
+          @click="mandatory = true"
+        >
+          Obligatoire
+        </button>
+        <button
+          class="btn-group small right"
+          :class="{ selected: mandatory == false }"
+          @click="mandatory = false"
+        >
+          Facultative
+        </button>
+      </div>
+      <div v-if="type == 'competence'">
+        <chips-input
+          label="Ajouter une option"
+          placeholder="Choisir une option"
+          secondary-placeholder="+ option"
+          :autocompleteList="autocompleteList"
+          :strict-autocomplete="true"
+          v-model="competenceIdList"
+        />
+        <styled-input
+          v-for="(c, idx) in competences"
+          :key="idx"
+          :helpText="competenceLabel(c.id)"
+          :modelValue="c.text"
+          @input="updateCompetenceText($event, idx)"
+        />
+        <styled-input v-if="mandatory" helpText="Réponse par défaut" v-model="mandatoryText" />
+        <button class="btn small error" @click="$emit('delete')">
+          <i class="material-icons">delete_forever</i>Supprimer
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -72,6 +77,7 @@ export default defineComponent({
   components: { styledInput, chipsInput },
   data() {
     return {
+      collapsed: false,
       title: "",
       subTitle: "",
       type: "competence" as QuestionType,
@@ -140,6 +146,14 @@ export default defineComponent({
     },
   },
   methods: {
+    collapse() {
+      const c = this.$refs.container as HTMLDivElement;
+      c.style.height = c.scrollHeight + "px";
+      setTimeout(() => {
+        c.style.height = "";
+      }, 100);
+      this.collapsed = !this.collapsed;
+    },
     updateValue() {
       const val = this.modelValue;
       if (this.title != val.title) this.title = val.title;
@@ -196,4 +210,21 @@ export default defineComponent({
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.question-container {
+  transition: all 300ms;
+  transform-origin: top;
+  opacity: 1;
+}
+.question-container.collapsed {
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+.expand-button {
+  position: absolute;
+  right: 8px;
+  cursor: pointer;
+  z-index: 1;
+}
+</style>

src/components/Questionaire.vue

@@ -42,7 +42,7 @@
       <h3 :class="{ invalid: !isQuestionValid(q) }">
         {{ q.title }} <span class="mandatory" v-if="q.mandatory">*</span>
       </h3>
-      <div v-if="q.subTitle">{{ q.subtitle }}</div>
+      <div class="question-subtitle" v-if="q.subTitle">{{ q.subTitle }}</div>
       <template v-if="q.type == 'competence'">
         <check-box
           v-for="c in q.competenceList"
@@ -248,6 +248,9 @@ span.mandatory {
   color: var(--color-primary-200);
   font-variant-position: super;
 }
+.question-subtitle {
+  margin-bottom: 4px;
+}
 .persona {
   display: flex;
   flex-wrap: wrap;