Flex UI fixed (#20)

* fix #14 Password Prompt added

* Update NavBar.vue

* Update App.vue

* Renamed and Relocated Modal Files

* Update SearchAttendee.vue

* Flex UI fixed

* Update SearchAttendee.vue

src/App.vue

@@ -6,8 +6,8 @@ import NavBar from '@/components/NavBar.vue'
 <template>
  <div class="flex flex-col h-screen">
  <NavBar />
- <div class="mx-3 grow">
- <RouterView class="h-full" />
+ <div class="mx-3 grow flex">
+ <RouterView class="grow flex flex-col" />
  </div>
  </div>
 </template>

src/components/QRScanner/ScannedStats.vue

@@ -21,7 +21,7 @@ const trackStats = [
 </script>
 
 <template>
- <div>
+ <div class="grow">
  <div class="py-2 space-y-3">
  <h2 class="text-center text-xl font-bold capitalize">Stats</h2>
  </div>

src/components/QRScanner/ScannerCamera.vue

@@ -72,7 +72,7 @@ async function logErrors(promise) {
 </script>
 
 <template>
- <div>
+ <div class="grow">
  <div class="py-2 space-y-3">
  <h2 class="text-center text-xl font-bold capitalize">{{ scannerType }} Scan</h2>
  <p class="text-center text-lg font-medium">Scan QR on badge</p>

src/components/Registration/Manual/RegistrationStats.vue

@@ -15,7 +15,7 @@ const overallStats = [
 </script>
 
 <template>
- <div>
+ <div class="grow">
  <div class="py-2">
  <h2 class="text-center text-xl font-bold capitalize">Stats</h2>
  </div>

src/components/Registration/Manual/ScanSearch.vue

@@ -76,13 +76,13 @@ async function logErrors(promise) {
 </script>
 
 <template>
- <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+ <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 grow">
  <div
- class="mx-auto flex max-w-2xl flex-col gap-16 bg-white/5 px-6 py-16 ring-1 ring-white/10 sm:rounded-3xl sm:p-8 lg:mx-0 lg:max-w-none lg:flex-row lg:items-center lg:py-20 xl:gap-x-20 xl:px-20"
+ class="mx-auto flex h-full max-w-2xl flex-col gap-16 bg-white/5 px-6 py-16 ring-1 ring-white/10 sm:rounded-3xl sm:p-8 lg:mx-0 lg:max-w-none lg:flex-row lg:items-center lg:py-20 xl:gap-x-20 xl:px-20"
  >
  <qrcode-stream
  :key="componentKey"
- class="h-96 w-full flex-none rounded-2xl shadow-xl aspect-square lg:h-auto lg:max-w-sm"
+ class="w-full aspect-square sm:!w-3/4 sm:!p-0 md:!h-2/3 md:!w-auto"
  :track="selected.value"
  @init="logErrors"
  :camera="camera"

src/components/Registration/Manual/SearchAttendee.vue

@@ -38,6 +38,24 @@ const items = [
  organisation: 'SUSS AI-IG',
  checkedIn: ref(false)
  },
+ {
+ id: 3,
+ name: 'Don Chia',
+ position: 'Chairperson',
+ role: 'Organiser',
+ email: '[email protected]',
+ organisation: 'SUSS AI-IG',
+ checkedIn: ref(false)
+ },
+ {
+ id: 3,
+ name: 'Don Chia',
+ position: 'Chairperson',
+ role: 'Organiser',
+ email: '[email protected]',
+ organisation: 'SUSS AI-IG',
+ checkedIn: ref(false)
+ },
  {
  id: 3,
  name: 'Don Chia',
@@ -54,7 +72,7 @@ const items = [
  <div class="mx-auto max-w-2xl sm:px-6 lg:px-8">
  <label
  for="search"
- class="block flex items-center justify-center text-lg font-medium leading-10 text-gray-900"
+ class="flex items-center justify-center text-lg font-medium leading-10 text-gray-900"
  >
  <MagnifyingGlassIcon class="h-6 mr-2" aria-hidden="true" />
  <span>Enter my information</span>
@@ -80,11 +98,11 @@ const items = [
  </div>
 
  <div class="mx-auto max-w-2xl sm:px-6 lg:px-8 overflow-visible mt-6">
- <ul role="list" class="space-y-3">
+ <ul role="list" class="space-y-3 h-96 overflow-scroll">
  <li
  v-for="item in items"
  :key="item.id"
- class="overflow-hidden rounded-2xl bg-white px-6 py-4 shadow border border-gray-300 space-y-2"
+ class="rounded-2xl bg-white px-6 py-4 shadow border border-gray-300 space-y-2"
  >
  <div class="flex items-center justify-between gap-2">
  <div class="flex flex-col gap-2">