Fix fossasia#40 standardised all pages to p-6 except pages with scann…

…ers. also optimised search function for smaller screens (fossasia#56)

* Add Home, Room Check-in

* fixed codacy

* clear netlify build

* Update SearchAttendee.vue

* Update ScanSearch

* Fixed navabr

* Update BaseTemplate.vue

* Removed bottom navbar and updated dropdown menu

* Minor fixes

* Added checklist to printModal and simplified router

* Name changes

* Fixed passwordModal and removed password requirement for stats

* Switched to template refs

* minor fixes

* Rearranged and renamed

* Fix codacy issues

* Changed casing

* Fix fossasia#31 Added dropdown list that allows user to choose which details to show on search

* Fixed format

* Fix codacy

* Minor fixes and renaming

* Minor fixes and moved some code to inline

* Fix fossasia#41 and codacy

* fix codacy

* Simplified code

* fix fossasia#48 created standard button component and replaced some buttons

* fix format

* Converted all buttons to standard component

* fixed format

* fix codacy

* Fix fossasia#40 standardised all p-6 except pages with scanners, optimised search function for mobile

* changed prop name

* removed activated classes

* Minor UI fixes

* changed to margin

* removed grow flex

---------

Co-authored-by: cweitat <[email protected]>
Co-authored-by: lizardon <[email protected]>

src/App.vue

@@ -5,10 +5,6 @@ import LoadingView from '@/components/Utilities/LoadingView.vue'
 </script>
 
 <template>
- <div class="flex flex-col h-screen">
- <div class="mx-3 grow flex">
- <RouterView class="grow flex flex-col" />
- </div>
- </div>
+ <RouterView class="m-6 h-screen" />
  <LoadingView v-if="useLoadingStore().show"></LoadingView>
 </template>

src/AuthTemplate.vue

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

src/components/LoginForm.vue

@@ -46,9 +46,9 @@ async function submitLogin() {
 </script>
 
 <template>
- <div class="flex flex-1 flex-col justify-center p-6 my-auto">
- <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
- <h2 class="mt-0 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+ <div class="flex flex-1 flex-col justify-center my-auto">
+ <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+ <h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
  Sign in to your account
  </h2>
  <form class="space-y-6 mt-10" @submit.prevent="submitLogin">
@@ -90,7 +90,7 @@ async function submitLogin() {
  <StandardButton
  type="submit"
  text="Login"
- class="w-full justify-center bg-blue-600 text-white hover:bg-blue-500"
+ class="w-full mt-6 justify-center bg-blue-600 text-white hover:bg-blue-500"
  />
  </div>
 

src/components/Registration/Kiosk/ScannerCamera.vue

@@ -86,7 +86,7 @@ async function logErrors(promise) {
  @print="printFunction"
  />
  <div
- class="grid grid-cols-1 lg:grid-cols-2 w-full align-middle justify-center items-center place-items-center"
+ class="grid grid-cols-1 h-3/4 lg:h-auto gap-12 lg:gap-0 lg:grid-cols-2 w-full align-middle justify-center items-center place-items-center"
  >
  <div>
  <qrcode-stream

src/components/Registration/Manual/ScanSearch.vue

@@ -78,7 +78,7 @@ async function logErrors(promise) {
 </script>
 
 <template>
- <div class="mx-auto grid grid-cols-1 xl:flex items-center gap-16 w-3/4 h-full py-16">
+ <div class="mx-auto grid grid-cols-1 xl:flex items-center gap-16 lg:w-3/4 h-full my-16">
  <div class="xl:flex-none xl:w-96 flex flex-col items-start">
  <div class="w-full flex justify-center">
  <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-2xl">

src/components/Registration/Manual/SearchAttendee.vue

@@ -138,7 +138,7 @@ const filterOptions = [
  clip-rule="evenodd"
  />
  </svg>
- Filter
+ <span class="hidden sm:block">Filter</span>
  </button>
  </div>
 
@@ -178,22 +178,22 @@ const filterOptions = [
  </div>
  </div>
 
- <div v-if="items.length > 0" class="mt-5 h-96 overflow-scroll">
+ <div v-if="items.length > 0" class="mt-5 h-96 overflow-y-scroll">
  <ul role="list" class="flex flex-col gap-3">
  <li
  v-for="item in items"
  :key="item.id"
- class="rounded-md bg-white px-6 py-4 shadow border border-gray-300 last:mb-1"
+ class="rounded-md bg-white px-3 sm:px-6 py-3 sm:py-4 shadow border border-gray-300 last:mb-1"
  >
- <div class="flex items-center justify-between gap-8">
- <div class="flex flex-col gap-3">
+ <div class="grid grid-cols-1 sm:grid-cols-2 items-center justify-between gap-2 sm:gap-8">
+ <div class="flex flex-col sm:gap-3">
  <div class="flex flex-col gap-1">
  <span class="text-gray-900 font-bold">{{ item.name }}</span>
  <span class="text-gray-400 font-bold text-sm">{{ item.email }}</span>
  </div>
  <div
  v-if="filterOptions.some((obj) => obj.show.value)"
- class="flex flex-wrap text-normal gap-1"
+ class="flex flex-wrap text-normal gap-1 mt-1 sm:mt-0"
  >
  <span
  v-if="filterOptions[0].show.value"
@@ -213,20 +213,20 @@ const filterOptions = [
  </div>
  </div>
 
- <div class="flex items-center gap-2 flex-none">
+ <div class="flex items-center justify-end gap-2">
  <StandardButton
  @click="item.checkedIn.value = true"
  :text="item.checkedIn.value ? 'Checked-in' : 'Check-in'"
  :class="[
  item.checkedIn.value
- ? 'bg-blue-600/20 text-blue-700/70'
- : 'bg-blue-600 text-white hover:bg-blue-500'
+ ? 'bg-blue-600/20 text-blue-700/70 w-1/2 sm:w-auto justify-center min-w-fit'
+ : 'bg-blue-600 text-white hover:bg-blue-500 w-1/2 sm:w-auto justify-center'
  ]"
  />
  <StandardButton
  text="Print"
  :icon="PrinterIcon"
- class="bg-yellow-300 text-gray-900 hover:bg-yellow-200"
+ class="bg-yellow-300 text-gray-900 hover:bg-yellow-200 w-1/2 sm:w-auto justify-center"
  />
  </div>
  </div>

src/components/TypeSelector.vue

@@ -53,9 +53,9 @@ const selectedStation = ref(availableStations[1])
 </script>
 
 <template>
- <div class="flex flex-1 flex-col justify-center p-6 my-auto">
- <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
- <h2 class="mt-0 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+ <div class="flex flex-1 flex-col justify-center my-auto">
+ <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+ <h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
  Select Event
  </h2>
  <form class="space-y-6 mt-10" action="#" method="POST">
@@ -228,7 +228,7 @@ const selectedStation = ref(availableStations[1])
  <StandardButton
  type="submit"
  text="Go"
- class="bg-blue-600 text-white hover:bg-blue-500 w-full justify-center"
+ class="bg-blue-600 text-white hover:bg-blue-500 w-full mt-6 justify-center"
  />
  </RouterLink>
  </div>

src/views/Registration.vue

@@ -1,6 +1,6 @@
 <script setup></script>
 <template>
- <div class="p-6">
+ <div class="m-6">
  <RouterView />
  </div>
 </template>