Fix some issues with dropzone height and ensure field alignment settings are ignored unless used inside a form block
This commit is contained in:
parent
77cd723315
commit
e2c2f5e2a6
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue