trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request 'fix/deep-link-views: use proper #Content wrapper' (#184) from deep-link-views-safe-area-inset into master

Browse Source 
Reviewed-on: trent_larson/crowd-funder-for-time-pwa#184
This commit is contained in:
Jose Olarte 3
2025-08-26 02:45:30 -04:00
parent 1b343b598c 7f499a0fc0
commit 716a23e76b
2 changed files with 76 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/DeepLinkErrorView.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="deep-link-error"> <!-- CONTENT -->
<div class="safe-area-spacer"></div> <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
<h1>Invalid Deep Link</h1> <h1>Invalid Deep Link</h1>
<div class="error-details"> <div class="error-details">
<div class="error-message"> <div class="error-message">
@@ -39,7 +39,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </section>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -114,18 +114,6 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
.deep-link-error {
padding-top: 60px;
padding-left: 20px;
padding-right: 20px;
max-width: 600px;
margin: 0 auto;
}
.safe-area-spacer {
height: env(safe-area-inset-top);
}
h1 { h1 {
color: #ff4444; color: #ff4444;
margin-bottom: 24px; margin-bottom: 24px;

154
src/views/DeepLinkRedirectView.vue
View File

@@ -1,95 +1,87 @@
<template> <template>
<!-- CONTENT --> <!-- CONTENT -->
<section id="Content" class="relative w-[100vw] h-[100vh]"> <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
<div <div class="mb-4">
class="p-6 bg-white w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto" <h1 class="text-2xl text-center font-semibold relative px-7">
> Redirecting to Time Safari
<div class="mb-4"> </h1>
<h1 class="text-xl text-center font-semibold relative mb-4">
Redirecting to Time Safari
</h1>
<div v-if="destinationUrl" class="space-y-4"> <div v-if="destinationUrl" class="space-y-4">
<!-- Platform-specific messaging --> <!-- Platform-specific messaging -->
<div class="text-center text-gray-600 mb-4"> <div class="text-center text-gray-600 mb-4">
<p v-if="isMobile"> <p v-if="isMobile">
{{ {{
isIOS isIOS
? "Opening Time Safari app on your iPhone..." ? "Opening Time Safari app on your iPhone..."
: "Opening Time Safari app on your Android device..." : "Opening Time Safari app on your Android device..."
}} }}
</p> </p>
<p v-else>Opening Time Safari app...</p> <p v-else>Opening Time Safari app...</p>
<p class="text-sm mt-2"> <p class="text-sm mt-2">
<span v-if="isMobile" <span v-if="isMobile"
>If the app doesn't open automatically, use one of these >If the app doesn't open automatically, use one of these
options:</span options:</span
>
<span v-else>Choose how you'd like to open this link:</span>
</p>
</div>
<!-- Deep Link Button -->
<div class="text-center">
<a
:href="deepLinkUrl || '#'"
class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
@click="handleDeepLinkClick"
> >
<span v-if="isMobile">Open in Time Safari App</span> <span v-else>Choose how you'd like to open this link:</span>
<span v-else>Try Opening in Time Safari App</span> </p>
</a> </div>
</div>
<!-- Web Fallback Link --> <!-- Deep Link Button -->
<div class="text-center"> <div class="text-center">
<a <a
:href="webUrl || '#'" :href="deepLinkUrl || '#'"
target="_blank" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
class="inline-block bg-gray-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-700 transition-colors" @click="handleDeepLinkClick"
@click="handleWebFallbackClick"
>
<span v-if="isMobile">Open in Web Browser Instead</span>
<span v-else>Open in Web Browser</span>
</a>
</div>
<!-- Manual Instructions -->
<div class="text-center text-sm text-gray-500 mt-4">
<p v-if="isMobile">
Or manually open:
<code class="bg-gray-100 px-2 py-1 rounded">{{
deepLinkUrl
}}</code>
</p>
<p v-else>
If you have the Time Safari app installed, you can also copy this
link:
<code class="bg-gray-100 px-2 py-1 rounded">{{
deepLinkUrl
}}</code>
</p>
</div>
<!-- Platform info for debugging -->
<div
v-if="isDevelopment"
class="text-center text-xs text-gray-400 mt-4"
> >
<p> <span v-if="isMobile">Open in Time Safari App</span>
Platform: {{ isMobile ? (isIOS ? "iOS" : "Android") : "Desktop" }} <span v-else>Try Opening in Time Safari App</span>
</p> </a>
<p>User Agent: {{ userAgent.substring(0, 50) }}...</p>
</div>
</div> </div>
<div v-else-if="pageError" class="text-center text-red-500 mb-4"> <!-- Web Fallback Link -->
{{ pageError }} <div class="text-center">
<a
:href="webUrl || '#'"
target="_blank"
class="inline-block bg-gray-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-700 transition-colors"
@click="handleWebFallbackClick"
>
<span v-if="isMobile">Open in Web Browser Instead</span>
<span v-else>Open in Web Browser</span>
</a>
</div> </div>
<div v-else class="text-center text-gray-600"> <!-- Manual Instructions -->
<p>Processing redirect...</p> <div class="text-center text-sm text-gray-500 mt-4">
<p v-if="isMobile">
Or manually open:
<code class="bg-gray-100 px-2 py-1 rounded">{{ deepLinkUrl }}</code>
</p>
<p v-else>
If you have the Time Safari app installed, you can also copy this
link:
<code class="bg-gray-100 px-2 py-1 rounded">{{ deepLinkUrl }}</code>
</p>
</div> </div>
<!-- Platform info for debugging -->
<div
v-if="isDevelopment"
class="text-center text-xs text-gray-400 mt-4"
>
<p>
Platform: {{ isMobile ? (isIOS ? "iOS" : "Android") : "Desktop" }}
</p>
<p>User Agent: {{ userAgent.substring(0, 50) }}...</p>
</div>
</div>
<div v-else-if="pageError" class="text-center text-red-500 mb-4">
{{ pageError }}
</div>
<div v-else class="text-center text-gray-600">
<p>Processing redirect...</p>
</div> </div>
</div> </div>
</section> </section>