fix complaints that ENTER GALLERY was not visible enough

LycheeOrg · Aug 18, 2024 · 2850d2c · 2850d2c
1 parent 21aa889
commit 2850d2c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 10 deletions.
diff --git a/resources/js/components/footers/LandingFooter.vue b/resources/js/components/footers/LandingFooter.vue
@@ -1,6 +1,6 @@
 <template>
 	<div id="footer" class="absolute bg-black z-10 left-0 right-0 bottom-0 text-center py-1 px-0 overflow-clip">
-		<div id="home_socials" class="fixed bottom-8 left-0 right-0 text-center z-10 opacity-0 translate-y-[300px] animate-ladningAnimateUp">
+		<div id="home_socials" class="fixed bottom-8 left-0 right-0 text-center z-10 opacity-0 translate-y-[300px] animate-landingAnimateUp">
 			<a
 				v-if="props.facebook !== ''"
 				:href="props.facebook"
@@ -44,11 +44,11 @@
 		</div>
 		<p
 			v-if="props.show_copy_right"
-			class="home_copyright uppercase text-surface-0 text-3xs font-normal translate-y-[300px] animate-ladningAnimateUp"
+			class="home_copyright uppercase text-surface-0 text-3xs font-normal translate-y-[300px] animate-landingAnimateUp"
 		>
 			{{ copyright }}
 		</p>
-		<p v-if="props.personalText !== ''" class="personal_text text-surface-0 text-3xs font-normal translate-y-[300px] animate-ladningAnimateUp">
+		<p v-if="props.personalText !== ''" class="personal_text text-surface-0 text-3xs font-normal translate-y-[300px] animate-landingAnimateUp">
 			{{ props.personalText }}
 		</p>
 	</div>

diff --git a/resources/js/components/modals/LoginModal.vue b/resources/js/components/modals/LoginModal.vue
@@ -11,7 +11,7 @@
 		}"
 	>
 		<template #container="{ closeCallback }">
-			<div v-focustrap class="flex flex-col gap-4 relative w-[500px] text-sm rounded-md pt-9">
+			<div v-focustrap class="flex flex-col gap-4 relative max-w-full text-sm rounded-md pt-9">
 				<div class="inline-flex flex-col gap-2 px-9">
 					<FloatLabel>
 						<InputText id="username" v-model="username" autofocus />

diff --git a/resources/js/views/Landing.vue b/resources/js/views/Landing.vue
@@ -1,7 +1,7 @@
 <template>
 	<main v-if="initdata" id="landing" class="w-screen h-screen bg-black roboto overflow-hidden">
 		<div id="header" class="fixed top-0 left-0 right-0 z-50 overflow-y-hidden">
-			<div id="logo" class="float-left p-4 text-surface-0 translate-y-[-300px] opacity-0 animate-ladningAnimateDown">
+			<div id="logo" class="float-left p-4 text-surface-0 translate-y-[-300px] opacity-0 animate-landingAnimateDown">
 				<a href="#">
 					<h1 class="text-lg font-bold uppercase text-center roboto">
 						{{ initdata.landing_title }}
@@ -12,7 +12,7 @@
 		</div>
 
 		<div id="menu_wrap" class="fixed top-0 right-0 z-50 w-4/5 overflow-y-hidden">
-			<div id="menu" class="w-full translate-y-[-300px] opacity-0 animate-ladningAnimateDown">
+			<div id="menu" class="w-full translate-y-[-300px] opacity-0 animate-landingAnimateDown">
 				<ul class="menu list-none">
 					<li class="menu-item relative block float-right pt-6 pb-5 px-3">
 						<RouterLink to="/gallery" class="cursor-pointer block text-xs uppercase font-normal text-surface-0 hover:text-muted-color">{{
@@ -48,6 +48,17 @@
 					</li>
 				</ul>
 			</div>
+			<div class="flex w-full h-1/2 absolute top-1/2 left-0 items-center justify-center animate-landingEnterPopIn opacity-0">
+			<RouterLink to="/gallery" class="
+				cursor-pointer block text-2xl uppercase text-surface-0
+				hover:scale-125
+				transition-all duration-300 filter-shadow p-10">
+				ACCESS THE {{ $t("lychee.GALLERY") }}
+				<i class="pi pi-angle-right animate-pulseTo0 text-2xl animate-infinite"></i>
+				<i class="pi pi-angle-right animate-pulseTo0 text-2xl animate-delay-500 animate-infinite -ml-1"></i>
+				<i class="pi pi-angle-right animate-pulseTo0 text-2xl animate-delay-1000 animate-infinite -ml-1"></i>
+			</RouterLink>
+			</div>
 		</div>
 		<LandingFooter
 			:show_socials="initdata.footer_show_social_media"

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -116,6 +116,9 @@ export default {
         width: ['width'],
       },
       keyframes: {
+        pulseTo0: {
+          '50%': { 'opacity': '0.1' },
+        },
         fadeIn: {
           '0%': { 'opacity': '0' },
           '100%': { 'opacity': '1' }
@@ -220,10 +223,12 @@ export default {
 
         'landingIntroPopIn': 'popIn 2s forwards ease-in-out',
         'landingIntroFadeOut': 'fadeOut 2s 2s forwards ease-in-out', // delayed by 2s
-        'landingSlidesPopIn': 'popIn 2s 3s forwards ease-in-out', // delayed by 2s
-        'ladningAnimateDown': 'animateDown 1s 3.1s forwards ease-in-out',
-        'ladningAnimateUp': 'animateUp 1s 3.1s forwards ease-in-out',
-        'delayedFadeOut': 'fadeOut 2s 2s forwards ease-in-out'
+        'landingSlidesPopIn': 'popIn 2s 3s forwards ease-in-out', // delayed by 3s
+        'landingEnterPopIn': 'zoomIn 2s 4s forwards ease-in-out', // delayed by 4s
+        'landingAnimateDown': 'animateDown 1s 3.1s forwards ease-in-out',
+        'landingAnimateUp': 'animateUp 1s 3.1s forwards ease-in-out',
+        'delayedFadeOut': 'fadeOut 2s 2s forwards ease-in-out',
+        'pulseTo0': 'pulseTo0 2s infinite',
       },
       aspectRatio: {
         '4/5': '4 / 5',