jivanrij/go-no-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds the whole disclaimer feature

Browse Source
This commit is contained in:
Jonathan van Rij
2026-03-16 15:22:17 +01:00
parent 29a94899da
commit 7f380303ab
12 changed files with 499 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
resources/js/Pages/Screening/Show.vue
View File

@@ -1,6 +1,7 @@
<script setup>
import { computed, watch } from 'vue'
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { Head, useForm } from '@inertiajs/vue3'
import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'
import RadioButtonGroup from '@/Components/RadioButtonGroup.vue'
@@ -47,14 +48,49 @@ watch(currentScore, (score) => {
const allAnswered = computed(() => {
return Object.values(form.answers).every(v => v !== null)
})
const bottomBackButtonRef = ref(null)
const showStickyBack = ref(false)
let observer = null
onMounted(() => {
if (!bottomBackButtonRef.value) return
observer = new IntersectionObserver(
([entry]) => { showStickyBack.value = !entry.isIntersecting },
{ threshold: 0 }
)
observer.observe(bottomBackButtonRef.value.$el || bottomBackButtonRef.value)
})
onUnmounted(() => {
observer?.disconnect()
})
</script>
<template>
<Head title="Pre-Screening Questions" />
<div class="max-w-4xl mx-auto px-4 py-8">
<!-- Sticky back button -->
<Transition
enter-active-class="transition-all duration-200 ease-out"
enter-from-class="opacity-0 translate-x-4"
enter-to-class="opacity-100 translate-x-0"
leave-active-class="transition-all duration-150 ease-in"
leave-from-class="opacity-100 translate-x-0"
leave-to-class="opacity-0 translate-x-4"
>
<div v-if="showStickyBack" class="fixed top-[88px] right-6 z-40">
<AppButton variant="ghost" size="lg" href="/" data-cy="sticky-back">
<ArrowLeftIcon class="h-5 w-5" />
Back
</AppButton>
</div>
</Transition>
<h1 class="text-3xl font-bold text-white mb-2">Pre-Screening Questions</h1>
<p class="text-gray-400 mb-8">Answer all 10 questions to proceed. Each "Yes" scores 1 point, "I don't know" scores half a point. You need at least 5 points to pass.</p>
<p class="text-gray-400 mb-8">Please answer all questions to proceed.</p>
<div class="space-y-4 mb-8">
<div
@@ -84,10 +120,17 @@ const allAnswered = computed(() => {
</div>
</div>
<div class="flex justify-end">
<AppButton size="lg" @click="handleSubmit" :loading="form.processing" :disabled="!allAnswered || form.processing" data-cy="submit-screening">
Submit
</AppButton>
<div class="mt-12 pt-8 border-t border-white/[0.06]">
<div class="flex justify-between items-center">
<AppButton ref="bottomBackButtonRef" variant="ghost" size="lg" href="/" data-cy="back-to-landing">
<ArrowLeftIcon class="h-5 w-5" />
Back
</AppButton>
<AppButton size="lg" @click="handleSubmit" :loading="form.processing" :disabled="!allAnswered || form.processing" data-cy="submit-screening">
Submit
</AppButton>
</div>
</div>
</div>
</template>