chore: styling
This commit is contained in:
@ -155,8 +155,8 @@ const toggleSchema = computed({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div relative h-full of-hidden>
|
<div relative h-full>
|
||||||
<div sticky top-0 px8 py4 n-bg-base>
|
<div sticky top-0 px8 py4 glass-effect z-1>
|
||||||
<div mb2 flex items-center>
|
<div mb2 flex items-center>
|
||||||
<span text-2xl font-bold mt1>
|
<span text-2xl font-bold mt1>
|
||||||
<NCheckbox v-model="hasBread" n="green">
|
<NCheckbox v-model="hasBread" n="green">
|
||||||
@ -210,8 +210,8 @@ const toggleSchema = computed({
|
|||||||
</NCheckbox>
|
</NCheckbox>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="schema" px8 h-full of-auto>
|
<div v-if="schema" px8>
|
||||||
<div grid="~ cols-1" gap-2 mt4 mb4>
|
<div grid="~ cols-1" gap-2 my4>
|
||||||
<div grid="~ cols-6" text-center>
|
<div grid="~ cols-6" text-center>
|
||||||
<div v-for="label in fieldsLabels" :key="label">
|
<div v-for="label in fieldsLabels" :key="label">
|
||||||
{{ label }}
|
{{ label }}
|
||||||
@ -252,7 +252,7 @@ const toggleSchema = computed({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<NButton absolute right-8 bottom-8 px8 py2 icon="carbon-magic-wand-filled" n="green" @click="generate">
|
<NButton glass-effect fixed right-10 bottom-8 px8 py2 icon="carbon-magic-wand-filled" n="green" @click="generate">
|
||||||
Create
|
Create
|
||||||
</NButton>
|
</NButton>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -16,7 +16,9 @@ const { height: top } = useElementSize(() => props.navbar, undefined, { box: 'bo
|
|||||||
onClickOutside(el, () => {
|
onClickOutside(el, () => {
|
||||||
if (props.modelValue && props.autoClose)
|
if (props.modelValue && props.autoClose)
|
||||||
emit('close')
|
emit('close')
|
||||||
}, {})
|
}, {
|
||||||
|
ignore: ['#open-drawer-right'],
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|||||||
@ -3,8 +3,6 @@ const route = useRoute()
|
|||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
const selectedCollection = ref()
|
const selectedCollection = ref()
|
||||||
// TODO: check connection
|
|
||||||
const connected = ref(true)
|
|
||||||
const drawer = ref(false)
|
const drawer = ref(false)
|
||||||
const search = ref('')
|
const search = ref('')
|
||||||
|
|
||||||
@ -34,6 +32,7 @@ async function dropCollection(table: any) {
|
|||||||
|
|
||||||
async function refresh() {
|
async function refresh() {
|
||||||
collections.value = await rpc.listCollections()
|
collections.value = await rpc.listCollections()
|
||||||
|
drawer.value = false
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -43,9 +42,9 @@ async function refresh() {
|
|||||||
<div px4>
|
<div px4>
|
||||||
<Navbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2>
|
<Navbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2>
|
||||||
<div flex items-center gap2>
|
<div flex items-center gap2>
|
||||||
<NIconButton w-full mb1.5 icon="carbon-reset" title="Refresh" />
|
<NIconButton w-full mb1.5 icon="carbon-reset" title="Refresh" @click="refresh" />
|
||||||
<NIconButton w-full mb1.5 icon="carbon-data-base" title="Connection Name" :class="connected ? 'text-green-5' : 'text-orange-5'" />
|
<NIconButton w-full mb1.5 icon="carbon-data-base" title="Default" text-green-5 />
|
||||||
<NIconButton w-full mb1.5 icon="carbon-add" title="Create Table" @click="drawer = !drawer" />
|
<NIconButton id="open-drawer-right" w-full mb1.5 icon="carbon-add" title="Create Collection" @click="drawer = true" />
|
||||||
</div>
|
</div>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
<div grid gird-cols-1 my2 mx1>
|
<div grid gird-cols-1 my2 mx1>
|
||||||
|
|||||||
Reference in New Issue
Block a user