get styles closer

2024-04-08 13:55:30 -06:00
parent 5ab5cf62db
commit bc8454e597
4 changed files with 128 additions and 76 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -4,25 +4,25 @@ import HelloWorld from './components/HelloWorld.vue'
 </script>

 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+<!--  <header>-->
+<!--    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />-->

-    <div class="wrapper">
-      <HelloWorld msg="You are awesome!" />
+<!--    <div class="wrapper">-->
+<!--      <HelloWorld msg="You are awesome!" />-->

-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-        <RouterLink to="/wizard">Wizard</RouterLink>
-      </nav>
-    </div>
-  </header>
+<!--      <nav>-->
+<!--        <RouterLink to="/">Home</RouterLink>-->
+<!--        <RouterLink to="/about">About</RouterLink>-->
+<!--        <RouterLink to="/wizard">Wizard</RouterLink>-->
+<!--      </nav>-->
+<!--    </div>-->
+<!--  </header>-->

  <RouterView />
 </template>

 <style scoped>
-header {
+/* header {
  line-height: 1.5;
  max-height: 100vh;
 }
@ -82,5 +82,5 @@ nav a:first-of-type {
    padding: 1rem 0;
    margin-top: 1rem;
  }
-}
+}*/
 </style>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -1,35 +1,40 @@
@import './base.css';

 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
+  /*max-width: 1280px;*/
+  /*margin: 0 auto;*/
+  /*padding: 2rem;*/
+  /*font-weight: normal;*/
+    height: 100vh;
    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+    flex-direction: column;
+    justify-content: center;
+    padding: 1rem;
 }
+
+/*a,*/
+/*.green {*/
+/*  text-decoration: none;*/
+/*  color: hsla(160, 100%, 37%, 1);*/
+/*  transition: 0.4s;*/
+/*  padding: 3px;*/
+/*}*/
+
+/*@media (hover: hover) {*/
+/*  a:hover {*/
+/*    background-color: hsla(160, 100%, 37%, 0.2);*/
+/*  }*/
+/*}*/
+
+/*@media (min-width: 1024px) {*/
+/*  body {*/
+/*    display: flex;*/
+/*    place-items: center;*/
+/*  }*/
+
+/*  #app {*/
+/*    display: grid;*/
+/*    grid-template-columns: 1fr 1fr;*/
+/*    padding: 0 2rem;*/
+/*  }*/
+/*}*/
--- a/src/components/wizard-questions.vue
+++ b/src/components/wizard-questions.vue
@ -17,7 +17,7 @@ interface Question {
  options: string[];
 }

-const currentQuestionIndex = ref(1);
+const currentQuestionIndex = ref(0);
 const questions = ref<Question[]>([
  {
    id: 1,
@ -142,12 +142,16 @@ const questions = ref<Question[]>([
 ]);

 function previousQuestion() {
+  // TODO: notify the backend that the user navigated backwards
+
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--;
  }
 }

 function nextQuestion() {
+  // TODO: notify the backend the users progress
+
  if (currentQuestionIndex.value < questions.value.length - 1) {
    currentQuestionIndex.value++;
  }
@ -171,29 +175,77 @@ const isNextButtonDisabled = computed(() => {
 </script>

 <template>
-  <h1>Authentication Tool Wizard</h1>
-  <div>
-    <h2>{{ questions[currentQuestionIndex].question }}</h2>
-    <p v-if="questions[currentQuestionIndex].clarification">{{ questions[currentQuestionIndex].clarification }}</p>
-    <div v-if="questions[currentQuestionIndex].answerType === 'radio'">
-      <div v-for="(option, index) in questions[currentQuestionIndex].options" :key="index">
-        <input type="radio" :id="option" :value="option" v-model="questions[currentQuestionIndex].answer" />
-        <label :for="option">{{ option }}</label>
+<!--  <h1 class="">Authentication Tool Wizard</h1>-->
+  <div class="flex flex-col">
+    <h2 class="text-2xl">{{ questions[currentQuestionIndex].question }}</h2>
+    <p class="text-gray-500" v-if="questions[currentQuestionIndex].clarification">{{ questions[currentQuestionIndex].clarification }}</p>
+    <div class="mt-10 flex justify-center z-10">
+      <div v-if="questions[currentQuestionIndex].answerType === 'radio'">
+        <div v-for="(option, index) in questions[currentQuestionIndex].options" :key="index">
+          <input type="radio" :id="option" :value="option" v-model="questions[currentQuestionIndex].answer" />
+          <label :for="option">{{ option }}</label>
+        </div>
      </div>
-    </div>
-    <div v-else-if="questions[currentQuestionIndex].answerType === 'checkbox'">
-      <Listbox v-model="questions[currentQuestionIndex].answer" multiple>
+      <div v-else-if="questions[currentQuestionIndex].answerType === 'checkbox'">
+        <Listbox v-model="questions[currentQuestionIndex].answer" multiple>
+          <ListboxButton
+              class="relative cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
+          >
+            <span>{{ !!(questions[currentQuestionIndex].answer as string[]).length ? (questions[currentQuestionIndex].answer as string[]).join(', ') : 'Select options'}}</span>
+            <span
+                class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+            >
+              <ChevronUpDownIcon
+                  class="h-5 w-5 text-gray-400"
+                  aria-hidden="true"
+              />
+            </span>
+          </ListboxButton>
+          <ListboxOptions
+              class="absolute mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
+          >
+            <ListboxOption
+                v-slot="{ active, selected }"
+                v-for="(option, index) in questions[currentQuestionIndex].options"
+                :key="index"
+                :value="option"
+                as="template"
+            >
+              <li
+                  :class="[
+                        active ? 'bg-amber-100 text-amber-900' : 'text-gray-900',
+                    'relative cursor-default select-none py-2 pl-10 pr-4',
+                    ]">
+                <span
+                    :class="[
+                      selected ? 'font-medium' : 'font-normal',
+                      'block truncate',
+                    ]"
+                >{{ option }}</span>
+                <span
+                    v-if="selected"
+                    class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600"
+                >
+                    <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                  </span>
+              </li>
+            </ListboxOption>
+          </ListboxOptions>
+        </Listbox>
+      </div>
+      <div v-else-if="questions[currentQuestionIndex].answerType === 'select'">
+      <Listbox v-model="questions[currentQuestionIndex].answer">
        <ListboxButton
-            class="relative cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
-        >
-          <span>{{ !!(questions[currentQuestionIndex].answer as string[]).length ? (questions[currentQuestionIndex].answer as string[]).join(', ') : 'Select options'}}</span>
+          class="relative cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
+          >
+          <span>{{!!questions[currentQuestionIndex].answer ? questions[currentQuestionIndex].answer : 'Select an option'}}</span>
          <span
              class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
          >
-            <ChevronUpDownIcon
-                class="h-5 w-5 text-gray-400"
-                aria-hidden="true"
-            />
+             <ChevronUpDownIcon
+                 class="h-5 w-5 text-gray-400"
+                 aria-hidden="true"
+             />
          </span>
        </ListboxButton>
        <ListboxOptions
@ -227,26 +279,22 @@ const isNextButtonDisabled = computed(() => {
          </ListboxOption>
        </ListboxOptions>
      </Listbox>
-      <!--      <div v-for="(option, index) in questions[currentQuestionIndex].options" :key="index">-->
-      <!--        <input type="checkbox" :id="option" :value="option" v-model="questions[currentQuestionIndex].answer" />-->
-      <!--        <label :for="option">{{ option }}</label>-->
-      <!--      </div>-->
    </div>
-    <div v-else-if="questions[currentQuestionIndex].answerType === 'select'">
-      <select v-model="questions[currentQuestionIndex].answer">
-        <option v-for="(option, index) in questions[currentQuestionIndex].options" :key="index" :value="option">{{ option }}</option>
-      </select>
    </div>
-    <div class="button-container flex justify-center">
+    <div class="mt-20 button-container flex justify-center">
      <button
          type="button"
          class="nav-button rounded-md border border-transparent bg-amber-200 px-4 py-2 text-sm font-medium text-orange-950 hover:bg-amber-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
          @click="previousQuestion"
-          :disabled="currentQuestionIndex === 0">Previous</button>
+          :disabled="currentQuestionIndex === 0">
+        <span>Previous</span>
+      </button>
      <button
          class="nav-button ml-2 rounded-md border border-transparent bg-amber-500 px-4 py-2 text-sm font-medium text-orange-950 hover:bg-amber-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
          @click="nextQuestion"
-          :disabled="isNextButtonDisabled">Next</button>
+          :disabled="isNextButtonDisabled">
+        <span>Next</span>
+      </button>
    </div>
  </div>
 </template>
--- a/src/views/WizardView.vue
+++ b/src/views/WizardView.vue
@ -5,13 +5,12 @@ import WizardQuestions from "@/components/wizard-questions.vue";
 </script>

 <template>
-  <div>
-    <h1>Wizard</h1>
+  <div class="h-full w-full flex flex-col justify-center items-center">
    <enter-details-modal />

 <!--    <iframe src="https://mw.sa.vin/index.php/lists/zq107l51gw5fc/subscribe?output=embed&width=400&height=400" width="400" height="400" frameborder="0" scrolling="yes"></iframe>-->

-    <wizard-questions />
+    <wizard-questions class="" />

  </div>
 </template>