public/pp-planer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: reposition upload area to the right of slides grid

Browse source
This commit is contained in:
Thorsten Bus 2026-03-02 10:55:47 +01:00
parent 3225e47fe7
commit 78ea9459c2
4 changed files with 74 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
resources/js/Components/Blocks/InformationBlock.vue
View file

@ -101,24 +101,31 @@ function handleSlideUpdated() {
</div>
</div>
<!-- Slide uploader — information slides are GLOBAL (service_id = null) -->
<SlideUploader
data-testid="information-block-uploader"
type="information"
:service-id="null"
:show-expire-date="true"
@uploaded="handleSlideUploaded"
/>
<!-- Side-by-side: grid left (~70%), uploader right (~30%) -->
<div class="flex flex-col lg:flex-row-reverse gap-6">
<!-- Slide uploader — information slides are GLOBAL (service_id = null) -->
<div class="lg:w-1/3">
<SlideUploader
data-testid="information-block-uploader"
type="information"
:service-id="null"
:show-expire-date="true"
@uploaded="handleSlideUploaded"
/>
</div>
<!-- Slide grid with prominent expire dates -->
<SlideGrid
data-testid="information-block-grid"
:slides="informationSlides"
type="information"
:show-expire-date="true"
@deleted="handleSlideDeleted"
@updated="handleSlideUpdated"
/>
<!-- Slide grid with prominent expire dates -->
<div class="flex-1 lg:w-2/3">
<SlideGrid
data-testid="information-block-grid"
:slides="informationSlides"
type="information"
:show-expire-date="true"
@deleted="handleSlideDeleted"
@updated="handleSlideUpdated"
/>
</div>
</div>
</div>
</template>

41
resources/js/Components/Blocks/ModerationBlock.vue
View file

@ -48,24 +48,31 @@ function handleSlideUpdated() {
</p>
</div>
<!-- Slide uploader -->
<SlideUploader
data-testid="moderation-block-uploader"
type="moderation"
:service-id="serviceId"
:show-expire-date="false"
@uploaded="handleSlideUploaded"
/>
<!-- Side-by-side: grid left (~70%), uploader right (~30%) -->
<div class="flex flex-col lg:flex-row-reverse gap-6">
<!-- Slide uploader -->
<div class="lg:w-1/3">
<SlideUploader
data-testid="moderation-block-uploader"
type="moderation"
:service-id="serviceId"
:show-expire-date="false"
@uploaded="handleSlideUploaded"
/>
</div>
<!-- Slide grid -->
<SlideGrid
data-testid="moderation-block-grid"
:slides="moderationSlides"
type="moderation"
:show-expire-date="false"
@deleted="handleSlideDeleted"
@updated="handleSlideUpdated"
/>
<!-- Slide grid -->
<div class="flex-1 lg:w-2/3">
<SlideGrid
data-testid="moderation-block-grid"
:slides="moderationSlides"
type="moderation"
:show-expire-date="false"
@deleted="handleSlideDeleted"
@updated="handleSlideUpdated"
/>
</div>
</div>
</div>
</template>

41
resources/js/Components/Blocks/SermonBlock.vue
View file

@ -48,24 +48,31 @@ function handleSlideUpdated() {
</p>
</div>
<!-- Slide uploader -->
<SlideUploader
data-testid="sermon-block-uploader"
type="sermon"
:service-id="serviceId"
:show-expire-date="false"
@uploaded="handleSlideUploaded"
/>
<!-- Side-by-side: grid left (~70%), uploader right (~30%) -->
<div class="flex flex-col lg:flex-row-reverse gap-6">
<!-- Slide uploader -->
<div class="lg:w-1/3">
<SlideUploader
data-testid="sermon-block-uploader"
type="sermon"
:service-id="serviceId"
:show-expire-date="false"
@uploaded="handleSlideUploaded"
/>
</div>
<!-- Slide grid -->
<SlideGrid
data-testid="sermon-block-grid"
:slides="sermonSlides"
type="sermon"
:show-expire-date="false"
@deleted="handleSlideDeleted"
@updated="handleSlideUpdated"
/>
<!-- Slide grid -->
<div class="flex-1 lg:w-2/3">
<SlideGrid
data-testid="sermon-block-grid"
:slides="sermonSlides"
type="sermon"
:show-expire-date="false"
@deleted="handleSlideDeleted"
@updated="handleSlideUpdated"
/>
</div>
</div>
</div>
</template>

4
resources/js/Components/SlideUploader.vue
View file

@ -256,8 +256,8 @@ function dismissError() {
border: 2px dashed rgb(229 231 235);
border-radius: 1rem;
background: linear-gradient(135deg, rgb(255 251 235 / 0.5), rgb(254 243 199 / 0.3));
padding: 2rem 1.5rem;
min-height: 160px;
padding: 1.5rem 1rem;
min-height: 120px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}