Fix some issues with dropzone height and ensure field alignment settings are ignored unless used inside a form block

This commit is contained in:
Andrew Kingston 2023-10-27 08:50:26 +01:00
parent 77cd723315
commit e2c2f5e2a6
4 changed files with 26 additions and 33 deletions

View File

@ -384,7 +384,7 @@
}
.compact .placeholder,
.compact img {
margin: 10px 16px;
margin: 8px 16px;
}
.compact img {
height: 90px;
@ -454,6 +454,12 @@
color: var(--red);
}
.spectrum-Dropzone {
height: 220px;
}
.compact .spectrum-Dropzone {
height: 40px;
}
.spectrum-Dropzone.disabled {
pointer-events: none;
background-color: var(--spectrum-global-color-gray-200);
@ -461,10 +467,6 @@
.disabled .spectrum-Heading--sizeL {
color: var(--spectrum-alias-text-color-disabled);
}
.compact .spectrum-Dropzone {
padding-top: 8px;
padding-bottom: 8px;
}
.compact .spectrum-IllustratedMessage-description {
margin: 0;
}
@ -475,7 +477,6 @@
flex-wrap: wrap;
justify-content: center;
}
.tag {
margin-top: 8px;
}

View File

@ -233,7 +233,7 @@
{/if}
{#key fields}
<BlockComponent type="container">
<div class="fields" class:mobile={$context.device.mobile}>
<div class="form-block fields" class:mobile={$context.device.mobile}>
{#each fields as field, idx}
{#if getComponentForField(field) && field.active}
<BlockComponent

View File

@ -79,27 +79,19 @@
bind:fieldApi
defaultValue={[]}
>
<div class="minHeightWrapper">
{#if fieldState}
<CoreDropzone
value={fieldState.value}
disabled={fieldState.disabled}
error={fieldState.error}
on:change={handleChange}
{processFiles}
{deleteAttachments}
{handleFileTooLarge}
{handleTooManyFiles}
{maximum}
{extensions}
{compact}
/>
{/if}
</div>
{#if fieldState}
<CoreDropzone
value={fieldState.value}
disabled={fieldState.disabled}
error={fieldState.error}
on:change={handleChange}
{processFiles}
{deleteAttachments}
{handleFileTooLarge}
{handleTooManyFiles}
{maximum}
{extensions}
{compact}
/>
{/if}
</Field>
<style>
.minHeightWrapper {
min-height: 80px;
}
</style>

View File

@ -102,13 +102,13 @@
</div>
<style>
.spectrum-Form-item.span-2 {
:global(.form-block .spectrum-Form-item.span-2) {
grid-column: span 2;
}
.spectrum-Form-item.span-3 {
:global(.form-block .spectrum-Form-item.span-3) {
grid-column: span 3;
}
.spectrum-Form-item.span-6 {
:global(.form-block .spectrum-Form-item.span-6) {
grid-column: span 6;
}
.spectrum-Form-item.above {