chore: minor ui improvements to modal
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col space-y-2">
|
||||||
<HoppSmartItem
|
<HoppSmartItem
|
||||||
v-for="source in sources"
|
v-for="source in sources"
|
||||||
:key="source.id"
|
:key="source.id"
|
||||||
|
|||||||
@@ -32,18 +32,22 @@
|
|||||||
<Transition name="bounce" appear>
|
<Transition name="bounce" appear>
|
||||||
<div
|
<div
|
||||||
class="inline-block w-full transform overflow-hidden border-dividerDark bg-primary text-left align-bottom shadow-lg transition-all sm:rounded-xl sm:border sm:align-middle"
|
class="inline-block w-full transform overflow-hidden border-dividerDark bg-primary text-left align-bottom shadow-lg transition-all sm:rounded-xl sm:border sm:align-middle"
|
||||||
:class="[{ 'mt-24 md:mb-8': placement === 'top' }, styles]"
|
:class="[{ 'mt-16 md:mb-8': placement === 'top' }, styles]"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="title"
|
v-if="title"
|
||||||
class="flex items-center justify-between border-b border-dividerLight"
|
class="flex items-center justify-between border-b border-dividerLight"
|
||||||
:class="{ 'p-4': !fullWidth }"
|
:class="{ 'p-4': !fullWidth }"
|
||||||
>
|
>
|
||||||
<h3 class="heading" :class="{ 'ml-4': !fullWidth }">
|
<div class="flex items-center flex-1 justify-start">
|
||||||
{{ title }}
|
|
||||||
</h3>
|
|
||||||
<span class="flex items-center">
|
|
||||||
<slot name="actions"></slot>
|
<slot name="actions"></slot>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-center">
|
||||||
|
<h3 class="heading">
|
||||||
|
{{ title }}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center flex-1 justify-end">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
v-if="dimissible"
|
v-if="dimissible"
|
||||||
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
|
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
|
||||||
@@ -51,10 +55,10 @@
|
|||||||
:icon="IconX"
|
:icon="IconX"
|
||||||
@click="close"
|
@click="close"
|
||||||
/>
|
/>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col overflow-y-auto max-h-[50vh]"
|
class="flex flex-col overflow-y-auto max-h-[55vh]"
|
||||||
:class="{ 'p-4': !fullWidth }"
|
:class="{ 'p-4': !fullWidth }"
|
||||||
>
|
>
|
||||||
<slot name="body"></slot>
|
<slot name="body"></slot>
|
||||||
|
|||||||
Reference in New Issue
Block a user