chaulmark/mad-lawsuit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplify PDF viewer to match v1.0 - remove wrapper div for mobile scrolling

Browse source
This commit is contained in:
TheMaddax 2025-12-18 08:48:53 -07:00
parent 0273caca03
commit 7d792fe635
1 changed files with 19 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
resources/js/Components/PDFViewer.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue'; import { watch } from 'vue';
interface Props { interface Props {
isOpen: boolean; isOpen: boolean;
@ -12,26 +12,6 @@ const emit = defineEmits<{
close: []; close: [];
}>(); }>();
const isMobile = ref(false);
const isPortrait = ref(false);
// Check if device is mobile/tablet and orientation
const checkDevice = () => {
isMobile.value = window.innerWidth < 1024; // Less than 1024px = mobile/tablet
isPortrait.value = window.innerHeight > window.innerWidth; // Portrait mode
};
onMounted(() => {
checkDevice();
window.addEventListener('resize', checkDevice);
window.addEventListener('orientationchange', checkDevice);
});
onUnmounted(() => {
window.removeEventListener('resize', checkDevice);
window.removeEventListener('orientationchange', checkDevice);
});
// Handle body scroll lock when modal is open // Handle body scroll lock when modal is open
watch(() => props.isOpen, (isOpen) => { watch(() => props.isOpen, (isOpen) => {
if (isOpen) { if (isOpen) {
@ -55,44 +35,38 @@ const handleDownload = () => {
<template> <template>
<div <div
v-if="isOpen" v-if="isOpen"
class="fixed inset-0 bg-black/75 flex items-center justify-center z-50" class="fixed inset-0 bg-black/75 flex items-center justify-center z-50 p-4"
:class="isMobile ? 'p-2' : 'p-4'"
@click="handleBackdropClick" @click="handleBackdropClick"
> >
<div <div
class="bg-white rounded-lg flex flex-col shadow-2xl" class="bg-white rounded-lg w-[95%] h-[95%] max-w-[1200px] max-h-[900px] flex flex-col shadow-2xl"
:class="isMobile ? 'w-full h-full' : 'w-[95%] h-[95%] max-w-[1200px] max-h-[900px]'"
@click.stop @click.stop
> >
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between border-b bg-[#394053] rounded-t-lg" <div class="flex items-center justify-between px-6 py-4 border-b bg-[#394053] rounded-t-lg">
:class="isMobile ? 'px-3 py-2' : 'px-6 py-4'"> <div class="flex items-center gap-3">
<div class="flex items-center gap-2 min-w-0 flex-1"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-white flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg> </svg>
<h2 class="font-semibold text-white truncate" <h2 class="text-lg font-semibold text-white">
:class="isMobile ? 'text-sm' : 'text-lg'">
{{ documentTitle }} {{ documentTitle }}
</h2> </h2>
</div> </div>
<div class="flex items-center gap-1 flex-shrink-0"> <div class="flex items-center gap-2">
<button <button
@click="handleDownload" @click="handleDownload"
class="flex items-center gap-1 bg-[#7CAE7A] text-white rounded-md hover:bg-[#6b9c69] transition-colors font-medium" class="flex items-center gap-2 px-4 py-2 bg-[#7CAE7A] text-white rounded-md hover:bg-[#6b9c69] transition-colors text-sm font-medium"
:class="isMobile ? 'px-2 py-1 text-xs' : 'px-4 py-2 text-sm gap-2'"
> >
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg> </svg>
<span v-if="!isMobile || !isPortrait">Download</span> Download
</button> </button>
<button <button
@click="emit('close')" @click="emit('close')"
class="flex items-center justify-center text-white hover:bg-white/10 rounded-md transition-colors" class="flex items-center justify-center w-10 h-10 text-white hover:bg-white/10 rounded-md transition-colors"
:class="isMobile ? 'w-8 h-8' : 'w-10 h-10'"
> >
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
@ -100,17 +74,13 @@ const handleDownload = () => {
</div> </div>
<!-- PDF Content --> <!-- PDF Content -->
<div class="flex-1 bg-gray-50" <div class="flex-1 p-4 bg-gray-50">
:class="isMobile ? 'p-1' : 'p-4'">
<div class="w-full h-full overflow-auto rounded-md bg-white" style="-webkit-overflow-scrolling: touch;">
<iframe <iframe
:src="`${documentUrl}#view=FitH&toolbar=1&navpanes=0&scrollbar=1`" :src="`${documentUrl}#view=FitH&toolbar=1&navpanes=1&scrollbar=1`"
class="w-full border-0 bg-white" class="w-full h-full border-0 rounded-md bg-white"
:style="{ minHeight: isMobile ? '200vh' : '100%', height: isMobile ? 'auto' : '100%' }"
:title="documentTitle" :title="documentTitle"
/> />
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>