Mirrors/Claper
1
0
Fork 0
mirror of https://github.com/ClaperCo/Claper.git synced 2026-02-24 12:09:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve preview section

Browse Source
This commit is contained in:
Alex Lion
2026-02-12 14:38:57 +01:00
parent d328ea1b0e
commit d0e88e136b
2 changed files with 50 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
lib/claper_web/live/event_live/manage.html.heex
View File

@@ -413,15 +413,8 @@
href={~p"/events"}
class="btn btn-circle bg-primary-50 border-none hover:bg-primary-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-secondary-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-secondary-500 rotate-180" viewBox="0 0 16 16" fill="none">
<path d="M-0.000155798 8.91984L-0.000155623 6.91984L11.9998 6.91984L6.49984 1.41984L7.91985 -0.000157095L15.8398 7.91984L7.91984 15.8398L6.49984 14.4198L11.9998 8.91984L-0.000155798 8.91984Z" fill="currentColor" />
</svg>
</a>
<div class="flex items-center gap-x-2">
@@ -537,7 +530,7 @@
<!-- Left Sidebar - Slide Thumbnails -->
<aside
:if={@event.presentation_file.length > 0}
class="hidden lg:flex w-56 flex-shrink-0 border-r border-gray-200 bg-white overflow-hidden"
class="hidden lg:flex w-56 flex-shrink-0 bg-white overflow-hidden"
data-tg-order="1"
data-tg-title={gettext("Your slides")}
data-tg-tour={"<p class='mb-3'>#{gettext("Navigate through your slides by clicking on the thumbnails.")}</p>"}
@@ -552,11 +545,11 @@
</aside>
<!-- Center Content -->
<main class="flex-1 flex flex-col min-w-0 overflow-hidden">
<main class="flex-1 flex flex-col min-w-0 overflow-hidden bg-white">
<!-- Slide Preview (only if presentation has slides) -->
<div
:if={@event.presentation_file.length > 0}
class="flex-shrink-0 h-1/3 border-b border-gray-200"
class="flex-shrink-0 h-1/3"
>
<.live_component
id="slide-preview"

141
lib/claper_web/live/event_live/manage_slide_preview_component.ex
View File

@@ -10,79 +10,45 @@ defmodule ClaperWeb.EventLive.ManageSlidePreviewComponent do
~H"""
<div class="flex flex-col h-full">
<div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
<div class="px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5 text-gray-500"
>
<path d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
<path
fill-rule="evenodd"
d="M.664 10.59a1.651 1.651 0 0 1 0-1.186A10.004 10.004 0 0 1 10 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0 1 10 17c-4.257 0-7.893-2.66-9.336-6.41ZM14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
clip-rule="evenodd"
/>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 5.25C7.69269 5.25 4.03598 8.04402 2.74785 11.9196L2.74777 11.9198C2.72991 11.9735 2.72991 12.0315 2.74777 12.0852C4.03886 15.9589 7.69466 18.75 12.0001 18.75C16.3076 18.75 19.9642 15.956 21.2514 12.0806L21.2523 12.0778C21.2702 12.0246 21.2698 11.969 21.2527 11.9183L21.2516 11.9151C19.9606 8.04115 16.3056 5.25 12.0001 5.25ZM1.32449 11.4462C2.81043 6.97587 7.02766 3.75 12.0001 3.75C16.9706 3.75 21.1857 6.97285 22.6747 11.4409C22.7963 11.8027 22.7957 12.1934 22.6744 12.5548C21.1892 17.0247 16.9721 20.25 12.0001 20.25C7.02973 20.25 2.81362 17.0272 1.3246 12.5591L1.32449 12.5588C1.20436 12.1977 1.20434 11.8075 1.32442 11.4464" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.75C11.4033 9.75 10.831 9.98705 10.409 10.409C9.98705 10.831 9.75 11.4033 9.75 12C9.75 12.5967 9.98705 13.169 10.409 13.591C10.831 14.0129 11.4033 14.25 12 14.25C12.5967 14.25 13.169 14.0129 13.591 13.591C14.0129 13.169 14.25 12.5967 14.25 12C14.25 11.4033 14.0129 10.831 13.591 10.409C13.169 9.98705 12.5967 9.75 12 9.75ZM9.34835 9.34835C10.0516 8.64509 11.0054 8.25 12 8.25C12.9946 8.25 13.9484 8.64509 14.6517 9.34835C15.3549 10.0516 15.75 11.0054 15.75 12C15.75 12.9946 15.3549 13.9484 14.6517 14.6517C13.9484 15.3549 12.9946 15.75 12 15.75C11.0054 15.75 10.0516 15.3549 9.34835 14.6517C8.64509 13.9484 8.25 12.9946 8.25 12C8.25 11.0054 8.64509 10.0516 9.34835 9.34835Z" fill="currentColor" />
</svg>
<span class="font-semibold text-gray-700">{gettext("Preview")}</span>
</div>
<div class="flex items-center gap-x-2 text-sm text-gray-500">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M1 2.75A.75.75 0 0 1 1.75 2h16.5a.75.75 0 0 1 0 1.5H18v8.75A2.75 2.75 0 0 1 15.25 15h-1.072l.798 3.06a.75.75 0 0 1-1.452.38L13.41 18H6.59l-.114.44a.75.75 0 0 1-1.452-.38L5.823 15H4.75A2.75 2.75 0 0 1 2 12.25V3.5h-.25A.75.75 0 0 1 1 2.75Z"
clip-rule="evenodd"
/>
<div class="flex items-center gap-x-2 bg-gray-100 rounded-full px-4 py-2 text-sm text-secondary-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="none">
<path d="M2.5 3.3335H17.5M3.33333 3.3335V11.6668C3.33333 12.1089 3.50893 12.5328 3.82149 12.8453C4.13405 13.1579 4.55797 13.3335 5 13.3335H15C15.442 13.3335 15.866 13.1579 16.1785 12.8453C16.4911 12.5328 16.6667 12.1089 16.6667 11.6668V3.3335M10 13.3335V16.6668M7.5 16.6668H12.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />
<path d="M6.66699 10.0003L9.16699 7.50033L10.8337 9.16699L13.3337 6.66699" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>{@current_position + 1}/{@total_slides}</span>
<span class="font-normal">{@current_position + 1}/ {@total_slides}</span>
</div>
</div>
<div class="flex-1 flex items-center justify-center p-2 bg-gray-100 relative overflow-hidden">
<button
:if={@current_position > 0}
phx-click="current-page"
phx-value-page={@current_position - 1}
class="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-lg flex items-center justify-center hover:bg-gray-50 transition-colors z-10"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5 text-gray-600"
<div class="flex-1 flex items-center justify-center gap-x-4 px-4 py-2 overflow-hidden">
<div class="flex-shrink-0">
<button
:if={@current_position > 0}
phx-click="current-page"
phx-value-page={@current_position - 1}
class="btn btn-circle bg-primary-50 border-none hover:bg-primary-100"
>
<path
fill-rule="evenodd"
d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
clip-rule="evenodd"
/>
</svg>
</button>
<div
:if={@current_position <= 0}
class="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center opacity-50 cursor-not-allowed"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5 text-gray-400"
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 rotate-180" viewBox="0 0 16 16" fill="none">
<path d="M-0.000155798 8.91984L-0.000155623 6.91984L11.9998 6.91984L6.49984 1.41984L7.91985 -0.000157095L15.8398 7.91984L7.91984 15.8398L6.49984 14.4198L11.9998 8.91984L-0.000155798 8.91984Z" fill="currentColor" />
</svg>
</button>
<div
:if={@current_position <= 0}
class="btn btn-circle bg-gray-100 border-none opacity-50 cursor-not-allowed"
>
<path
fill-rule="evenodd"
d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
clip-rule="evenodd"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400 rotate-180" viewBox="0 0 16 16" fill="none">
<path d="M-0.000155798 8.91984L-0.000155623 6.91984L11.9998 6.91984L6.49984 1.41984L7.91985 -0.000157095L15.8398 7.91984L7.91984 15.8398L6.49984 14.4198L11.9998 8.91984L-0.000155798 8.91984Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="h-full aspect-video bg-white rounded-lg shadow-lg overflow-hidden">
<div class="h-full aspect-video bg-white rounded-lg border border-gray-200 overflow-hidden">
<img
:if={@current_slide_url}
src={@current_slide_url}
@@ -97,42 +63,25 @@ defmodule ClaperWeb.EventLive.ManageSlidePreviewComponent do
</div>
</div>
<button
:if={@current_position < @total_slides - 1}
phx-click="current-page"
phx-value-page={@current_position + 1}
class="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-lg flex items-center justify-center hover:bg-gray-50 transition-colors z-10"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5 text-gray-600"
<div class="flex-shrink-0">
<button
:if={@current_position < @total_slides - 1}
phx-click="current-page"
phx-value-page={@current_position + 1}
class="btn btn-circle bg-primary-50 border-none hover:bg-primary-100"
>
<path
fill-rule="evenodd"
d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
</button>
<div
:if={@current_position >= @total_slides - 1}
class="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center opacity-50 cursor-not-allowed"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5 text-gray-400"
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 16 16" fill="none">
<path d="M-0.000155798 8.91984L-0.000155623 6.91984L11.9998 6.91984L6.49984 1.41984L7.91985 -0.000157095L15.8398 7.91984L7.91984 15.8398L6.49984 14.4198L11.9998 8.91984L-0.000155798 8.91984Z" fill="currentColor" />
</svg>
</button>
<div
:if={@current_position >= @total_slides - 1}
class="btn btn-circle bg-gray-100 border-none opacity-50 cursor-not-allowed"
>
<path
fill-rule="evenodd"
d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" viewBox="0 0 16 16" fill="none">
<path d="M-0.000155798 8.91984L-0.000155623 6.91984L11.9998 6.91984L6.49984 1.41984L7.91985 -0.000157095L15.8398 7.91984L7.91984 15.8398L6.49984 14.4198L11.9998 8.91984L-0.000155798 8.91984Z" fill="currentColor" />
</svg>
</div>
</div>
</div>
</div>