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

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

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

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

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

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

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