P 系列 width/height=null 不裁切保留原比例;blade 尺寸標示對 null 做防護 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
53 lines
2.9 KiB
PHP
53 lines
2.9 KiB
PHP
@extends('layouts.admin')
|
||
|
||
@section('content')
|
||
<div class="container mx-auto px-4 py-6">
|
||
@include('admin.app._tabs', ['active' => 'bundles'])
|
||
|
||
<div class="mb-4 flex items-center gap-2">
|
||
<a href="{{ route('admin.app.ui-bundles') }}" class="text-sm text-gray-500 hover:text-gray-700">← {{ __('Back') }}</a>
|
||
<span class="text-gray-300">/</span>
|
||
<h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ __('Content Settings') }}:{{ $bundle->name }}</h4>
|
||
</div>
|
||
|
||
<form action="{{ route('admin.app.ui-bundles.content.update', $bundle) }}" method="POST">
|
||
@csrf @method('PUT')
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
@foreach($parts as $key => $part)
|
||
@php
|
||
$currentId = optional($itemsByPart->get($key))->ui_element_id;
|
||
$currentThumb = optional(optional($itemsByPart->get($key))->element)->image_url ?? '';
|
||
@endphp
|
||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4" x-data="{ thumb: @js($currentThumb) }">
|
||
<label class="block text-sm font-semibold text-gray-800 dark:text-gray-100 mb-1">
|
||
{{ $part['label'] }}
|
||
@if($part['width'])<span class="text-xs font-normal text-gray-400">({{ $part['width'] }}x{{ $part['height'] }})</span>@endif
|
||
</label>
|
||
<select name="parts[{{ $key }}]"
|
||
@change="thumb = ($event.target.selectedOptions[0]?.dataset.thumb) || ''"
|
||
class="block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 py-2 px-3 text-sm">
|
||
<option value="">{{ __('Not set') }}</option>
|
||
@foreach($elementsByPart[$key] as $element)
|
||
<option value="{{ $element->id }}" data-thumb="{{ $element->image_url }}"
|
||
{{ (string)$currentId === (string)$element->id ? 'selected' : '' }}>
|
||
{{ $element->name }}
|
||
</option>
|
||
@endforeach
|
||
</select>
|
||
<div class="mt-3">
|
||
<img x-show="thumb" x-cloak :src="thumb"
|
||
class="h-28 w-auto max-w-full object-contain rounded border border-gray-200 dark:border-gray-700 bg-gray-50">
|
||
<p x-show="!thumb" x-cloak class="text-xs text-gray-400">{{ __('No image selected') }}</p>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
|
||
<div class="mt-6 flex justify-end">
|
||
<button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-2 px-6 rounded-lg">{{ __('Save') }}</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
@endsection
|