fix fossasia#73 navbar dropdown fixed on small screen (fossasia#74)

* 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

* fix fossasia#52 clicking print on search attendee now opens the print modal and logs name of card

* fix fossasia#51 new layout for print modal

* changed to margin

* removed grow flex

* minor fixes

* fix fossasia#50 created success notification that shows on print

* removed redundant code

* fix  margin of print modal

* changed naming

* switched to camel case, moved some functions to inline

* minor changes

* changed some refs to computed

* fix fossasia#49 fossasia#46 ported everything to stores

* fix codacy

* fix fossasia#59 fossasia#53 search and logout attached to respective APIs

* fix netlify

* fix netlify

* fix netlify

* fix codacy

* fix codacy

* fix codacy

* fix build

* fix codacy

* fix codacy

* fix fossasia#61 implemented API for checking in attendees in registration via scan or search

* fixed error

* added dayjs

* remove moment

* fix comments

* fix comments

* fix comment

* fix fossasia#68 implemented better error handling for logout function

* Update auth.js

* Update auth.js

* fix fossasia#73 navbar dropdown fixed for small screen

* fix comment

---------

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

src/components/LoginForm.vue

@@ -44,7 +44,7 @@ async function submitLogin() {
 </script>
 
 <template>
- <div class="flex flex-1 flex-col justify-center my-auto h-screen">
+ <div class="flex flex-1 flex-col justify-center my-auto h-screen m-6">
  <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

src/components/Modals/PasswordModal.vue

@@ -78,7 +78,7 @@ async function checkPassword() {
 
  <div class="fixed inset-0 z-10 overflow-y-auto">
  <div
- class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+ class="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0"
  >
  <TransitionChild
  as="template"
@@ -90,26 +90,26 @@ async function checkPassword() {
  leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  >
  <DialogPanel
- class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+ class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all my-8 w-full max-w-sm p-6"
  >
  <div>
  <div
  class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gray-100"
  >
  <EllipsisHorizontalIcon class="h-6 w-6 text-gray-700" aria-hidden="true" />
  </div>
- <div class="mt-3 sm:mt-5 text-center">
+ <div class="mt-5 text-center">
  <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900"
  >Please Input Your Password</DialogTitle
  >
- <div class="mt-5 sm:mt-6">
+ <div class="mt-6">
  <input
  id="password"
  v-model="passwordField"
  type="password"
  name="password"
  autocomplete="password"
- class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+ class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-inset focus:ring-blue-600 text-sm leading-6"
  />
  </div>
  <p
@@ -120,7 +120,7 @@ async function checkPassword() {
  </p>
  </div>
  </div>
- <div class="mt-5 sm:mt-6">
+ <div class="mt-6">
  <StandardButton
  text="Sign Out"
  :disabled="disableButton"

src/components/NavBar.vue

@@ -140,7 +140,7 @@ const componentKey = ref(0)
  <MenuItem v-for="item in userNavigation" :key="item.name">
  <button
  :class="[
- item.name == 'Sign out'
+ item.name === 'Sign out'
  ? 'text-red-600 hover:bg-red-100 font-semibold'
  : 'text-gray-700 hover:bg-gray-100',
  'w-full text-left px-4 py-2 text-sm'
@@ -210,7 +210,13 @@ const componentKey = ref(0)
  :key="item.name"
  as="a"
  :href="item.href"
- class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
+ :class="[
+ item.name === 'Sign out'
+ ? 'text-red-600 hover:bg-red-100 font-semibold'
+ : 'text-gray-700 hover:bg-gray-100',
+ 'block rounded-md px-3 py-2 text-base cursor-pointer'
+ ]"
+ @click="item.action"
  >
  {{ item.name }}
  </DisclosureButton>