trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 20 Releases 5 Wiki Activity
Browse Source

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

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/pulls/184
pull/186/head
Jose Olarte 3 2 weeks ago
parent
1b343b598c 7f499a0fc0
commit
716a23e76b
2 changed files with 78 additions and 98 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/views/DeepLinkErrorView.vue
  2. 158
      src/views/DeepLinkRedirectView.vue

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;

158
src/views/DeepLinkRedirectView.vue
View File

@ -1,96 +1,88 @@
<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 <div v-if="destinationUrl" class="space-y-4">
</h1> <!-- Platform-specific messaging -->
<div class="text-center text-gray-600 mb-4">
<div v-if="destinationUrl" class="space-y-4"> <p v-if="isMobile">
<!-- Platform-specific messaging --> {{
<div class="text-center text-gray-600 mb-4"> isIOS
<p v-if="isMobile"> ? "Opening Time Safari app on your iPhone..."
{{ : "Opening Time Safari app on your Android device..."
isIOS }}
? "Opening Time Safari app on your iPhone..." </p>
: "Opening Time Safari app on your Android device..." <p v-else>Opening Time Safari app...</p>
}} <p class="text-sm mt-2">
</p> <span v-if="isMobile"
<p v-else>Opening Time Safari app...</p> >If the app doesn't open automatically, use one of these
<p class="text-sm mt-2"> options:</span
<span v-if="isMobile"
>If the app doesn't open automatically, use one of these
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>
<!-- Deep Link Button -->
<!-- Web Fallback Link --> <div class="text-center">
<div class="text-center"> <a
<a :href="deepLinkUrl || '#'"
:href="webUrl || '#'" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
target="_blank" @click="handleDeepLinkClick"
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 Time Safari App</span>
> <span v-else>Try Opening in Time Safari App</span>
<span v-if="isMobile">Open in Web Browser Instead</span> </a>
<span v-else>Open in Web Browser</span> </div>
</a>
</div> <!-- Web Fallback Link -->
<div class="text-center">
<!-- Manual Instructions --> <a
<div class="text-center text-sm text-gray-500 mt-4"> :href="webUrl || '#'"
<p v-if="isMobile"> target="_blank"
Or manually open: class="inline-block bg-gray-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-700 transition-colors"
<code class="bg-gray-100 px-2 py-1 rounded">{{ @click="handleWebFallbackClick"
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 Web Browser Instead</span>
Platform: {{ isMobile ? (isIOS ? "iOS" : "Android") : "Desktop" }} <span v-else>Open in Web Browser</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"> <!-- Manual Instructions -->
{{ pageError }} <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>
<div v-else class="text-center text-gray-600"> <!-- Platform info for debugging -->
<p>Processing redirect...</p> <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> </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>
</section> </section>
</template> </template>

Write Preview
Loading…
Cancel
Save