1
0
Fork 0
mirror of synced 2024-07-03 13:30:46 +12:00

Revert to a cleaner modal with no title or buttons for screen peeking

This commit is contained in:
Andrew Kingston 2021-07-30 18:16:37 +01:00
parent 952c27058a
commit 8e82a0efd9
2 changed files with 13 additions and 11 deletions

View file

@ -15,6 +15,6 @@
}
</script>
<ModalContent title="Create Layout" confirmText="Create" onConfirm={save}>
<Input thin label="Name" bind:value={name} />
<ModalContent title="Create Layout" confirmText="Create" onConfirm="{save}">
<input thin label="Name" bind:value="{name}" />
</ModalContent>

View file

@ -1,6 +1,6 @@
<script>
import { peekStore, dataSourceStore, routeStore } from "../store"
import { Modal, ModalContent, Button, Divider, Layout } from "@budibase/bbui"
import { Modal, ModalContent, Button } from "@budibase/bbui"
import { onDestroy } from "svelte"
let iframe
@ -51,28 +51,30 @@
{#if $peekStore.showPeek}
<Modal fixed on:cancel={handleCancel}>
<ModalContent
cancelText="Close"
showCancelButton={false}
showConfirmButton={false}
size="XL"
title="Screen Peek"
showDivider={false}
showCloseIcon={false}
>
<iframe title="Peek" bind:this={iframe} src={$peekStore.href} />
<div slot="footer">
<Button secondary quiet on:click={navigate}>Full screen</Button>
</div>
</ModalContent>
</Modal>
{/if}
<style>
iframe {
margin: 0 -40px;
margin: -40px;
border: none;
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
border-top: 1px solid var(--spectrum-global-color-gray-300);
width: calc(100% + 80px);
height: 640px;
transition: width 1s ease, height 1s ease, top 1s ease, left 1s ease;
border-radius: var(--spectrum-global-dimension-size-100);
}
@media (max-width: 600px) {
iframe {
max-height: calc(100vh - 80px);
}
}
</style>