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

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

@ -101,7 +101,10 @@ function handleSlideUpdated() {
</div> </div>
</div> </div>
<!-- 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) --> <!-- Slide uploader — information slides are GLOBAL (service_id = null) -->
<div class="lg:w-1/3">
<SlideUploader <SlideUploader
data-testid="information-block-uploader" data-testid="information-block-uploader"
type="information" type="information"
@ -109,8 +112,10 @@ function handleSlideUpdated() {
:show-expire-date="true" :show-expire-date="true"
@uploaded="handleSlideUploaded" @uploaded="handleSlideUploaded"
/> />
</div>
<!-- Slide grid with prominent expire dates --> <!-- Slide grid with prominent expire dates -->
<div class="flex-1 lg:w-2/3">
<SlideGrid <SlideGrid
data-testid="information-block-grid" data-testid="information-block-grid"
:slides="informationSlides" :slides="informationSlides"
@ -120,6 +125,8 @@ function handleSlideUpdated() {
@updated="handleSlideUpdated" @updated="handleSlideUpdated"
/> />
</div> </div>
</div>
</div>
</template> </template>
<style scoped> <style scoped>

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

@ -48,7 +48,10 @@ function handleSlideUpdated() {
</p> </p>
</div> </div>
<!-- Side-by-side: grid left (~70%), uploader right (~30%) -->
<div class="flex flex-col lg:flex-row-reverse gap-6">
<!-- Slide uploader --> <!-- Slide uploader -->
<div class="lg:w-1/3">
<SlideUploader <SlideUploader
data-testid="moderation-block-uploader" data-testid="moderation-block-uploader"
type="moderation" type="moderation"
@ -56,8 +59,10 @@ function handleSlideUpdated() {
:show-expire-date="false" :show-expire-date="false"
@uploaded="handleSlideUploaded" @uploaded="handleSlideUploaded"
/> />
</div>
<!-- Slide grid --> <!-- Slide grid -->
<div class="flex-1 lg:w-2/3">
<SlideGrid <SlideGrid
data-testid="moderation-block-grid" data-testid="moderation-block-grid"
:slides="moderationSlides" :slides="moderationSlides"
@ -67,6 +72,8 @@ function handleSlideUpdated() {
@updated="handleSlideUpdated" @updated="handleSlideUpdated"
/> />
</div> </div>
</div>
</div>
</template> </template>
<style scoped> <style scoped>

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

@ -48,7 +48,10 @@ function handleSlideUpdated() {
</p> </p>
</div> </div>
<!-- Side-by-side: grid left (~70%), uploader right (~30%) -->
<div class="flex flex-col lg:flex-row-reverse gap-6">
<!-- Slide uploader --> <!-- Slide uploader -->
<div class="lg:w-1/3">
<SlideUploader <SlideUploader
data-testid="sermon-block-uploader" data-testid="sermon-block-uploader"
type="sermon" type="sermon"
@ -56,8 +59,10 @@ function handleSlideUpdated() {
:show-expire-date="false" :show-expire-date="false"
@uploaded="handleSlideUploaded" @uploaded="handleSlideUploaded"
/> />
</div>
<!-- Slide grid --> <!-- Slide grid -->
<div class="flex-1 lg:w-2/3">
<SlideGrid <SlideGrid
data-testid="sermon-block-grid" data-testid="sermon-block-grid"
:slides="sermonSlides" :slides="sermonSlides"
@ -67,6 +72,8 @@ function handleSlideUpdated() {
@updated="handleSlideUpdated" @updated="handleSlideUpdated"
/> />
</div> </div>
</div>
</div>
</template> </template>
<style scoped> <style scoped>

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;
} }