ohmj/ohmj2
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

[FIX] BUG] Le PDF viewer ne s'affiche pas correectement sur telephone.

Browse Source
This commit is contained in:
NADAL Jean-Baptiste
2026-02-26 15:01:38 +01:00
parent 2d585aa834
commit 9c6d3fec16
4 changed files with 92 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
partitions/src/lib/components/PdfViewer.svelte
View File

@@ -182,7 +182,7 @@
</div>
</div>
<div class="flex-1 overflow-auto bg-gray-800 flex items-start justify-center p-4">
<div class="flex-1 overflow-auto bg-gray-800 flex items-start justify-center p-2 md:p-4">
{#if loading}
<div class="text-white">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
@@ -194,7 +194,7 @@
<p>{error}</p>
</div>
{:else}
<canvas bind:this={canvas} class="shadow-2xl"></canvas>
<canvas bind:this={canvas} class="shadow-2xl max-w-full h-auto"></canvas>
{/if}
</div>

7
partitions/src/routes/+layout.svelte
View File

@@ -4,6 +4,7 @@
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { onMount } from 'svelte';
import { get } from 'svelte/store';
const publicRoutes = ['/'];
@@ -25,7 +26,11 @@
const path = $page.url.pathname;
const isPublic = publicRoutes.includes(path);
if (!isPublic && !isAuthenticated) {
// Get current auth state directly
const authState = get(auth);
const authenticated = !!authState.token;
if (!isPublic && !authenticated) {
goto('/');
}
});

24
partitions/src/routes/admin/+page.svelte
View File

@@ -141,7 +141,7 @@
number: i + 1,
name: name.trim() || `Partie ${i + 1}`
}));
const result = await apiService.createScore(newName, newCompositor, pieces, newRessource);
const result = await apiService.createScore(newName, newCompositor, pieces);
if (result.success) {
showForm = false;
newName = '';
@@ -222,7 +222,7 @@
<title>Admin - OHMJ</title>
</svelte:head>
<div class="container mx-auto px-4 py-8">
<div class="container mx-auto px-2 md:px-4 py-8">
<div class="mb-6 flex justify-between items-center">
<h1 class="text-3xl font-bold text-ohmj-primary">Administration</h1>
<a href="/scores" class="text-ohmj-primary hover:underline">← Retour aux partitions</a>
@@ -319,23 +319,23 @@
</div>
<!-- List of scores -->
<div class="bg-white rounded-lg shadow overflow-hidden">
<table class="min-w-full">
<div class="bg-white rounded-lg shadow overflow-x-auto">
<table class="w-full min-w-[700px]">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nom</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Compositeur</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase w-32">Actions</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap w-16">ID</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">Nom</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">Compositeur</th>
<th class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase whitespace-nowrap w-24">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
{#each scores as score}
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{score.id}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{score.name}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{score.compositor || '-'}</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
<td class="px-3 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{score.id}</td>
<td class="px-3 py-4 whitespace-nowrap text-sm text-gray-700">{score.name}</td>
<td class="px-3 py-4 whitespace-nowrap text-sm text-gray-500">{score.compositor || '-'}</td>
<td class="px-3 py-4 whitespace-nowrap text-right text-sm">
<div class="flex justify-end gap-3">
<a
href="/admin/{score.id}"

41
partitions/src/routes/scores/[id]/[piece]/[instrument]/+page.svelte
View File

@@ -137,21 +137,37 @@
</div>
</div>
{:else}
<div class="flex-1 flex overflow-hidden relative">
<!-- Toggle button -->
<div class="flex-1 flex flex-col overflow-hidden">
{#if !showSidebar}
<div class="bg-gray-100 border-b px-4 py-2 flex items-center gap-3">
<button
onclick={() => showSidebar = !showSidebar}
class="absolute left-0 top-1/2 transform -translate-y-1/2 z-10 bg-ohmj-primary text-white px-2 py-4 rounded-r shadow hover:bg-ohmj-secondary transition-colors"
title={showSidebar ? 'Masquer' : 'Afficher'}
onclick={() => showSidebar = true}
class="flex items-center gap-2 px-3 py-1.5 bg-ohmj-primary text-white rounded hover:bg-ohmj-secondary transition-colors text-sm"
>
{showSidebar ? '◀' : '▶'}
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
Afficher les parties
</button>
<span class="text-sm text-gray-500">{selectedFile ? pdfFileName : ''}</span>
</div>
{/if}
<!-- Liste des parties -->
<div class="flex-1 flex overflow-hidden">
{#if showSidebar}
<div class="w-64 min-w-[200px] max-w-xs bg-white border-r overflow-y-auto p-4 flex-shrink-0 ml-8">
<h2 class="font-semibold text-gray-700 mb-4">Parties disponibles</h2>
<div class="w-64 min-w-[200px] max-w-xs bg-white border-r overflow-y-auto p-4 flex-shrink-0">
<div class="flex items-center justify-between mb-4">
<h2 class="font-semibold text-gray-700">Parties disponibles</h2>
<button
onclick={() => showSidebar = false}
class="p-1 hover:bg-gray-100 rounded transition-colors"
title="Masquer"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
{#each parts as part}
<div class="mb-4">
{#if parts.length > 1}
@@ -180,15 +196,13 @@
</ul>
</div>
{/each}
{#if parts.length === 0}
<p class="text-gray-500">Aucune partie disponible.</p>
{/if}
</div>
{/if}
<!-- Visionneuse PDF -->
<div class="flex-1 bg-gray-800 flex flex-col ml-8">
<div class="flex-1 bg-gray-800 flex flex-col">
{#if selectedFile}
{#key selectedFile}
<PdfViewer pdfUrl={pdfViewerUrl} title={pdfFileName} />
@@ -200,5 +214,6 @@
{/if}
</div>
</div>
</div>
{/if}
</div>