chore: styling

This commit is contained in:
arashsheyda
2023-04-26 15:56:48 +03:00
parent a2cf4656eb
commit 798a324f17
3 changed files with 12 additions and 11 deletions

View File

@ -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>

View File

@ -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">

View File

@ -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>