web3privacy/explorer-app
1
0
Fork 0
mirror of https://github.com/web3privacy/explorer-app.git synced 2024-10-15 16:46:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: styles and transitions

Browse source
This commit is contained in:
DomWane 2024-10-01 15:43:53 +02:00
parent 9a43af8b7a
commit 5269c46557
3 changed files with 127 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/Project/Create/Components/Select.vue
View file

@ -24,7 +24,10 @@ const selectedValue = useVModel(props, 'modelValue', emits)
lg="flex flex-row gap-24px" lg="flex flex-row gap-24px"
relative relative
> >
<div v-bind="$attrs" lg="w-1/2"> <div
v-bind="$attrs"
lg="w-1/2"
>
<HeadlessListbox <HeadlessListbox
v-model="selectedValue" v-model="selectedValue"
as="div" as="div"
@ -52,7 +55,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
> >
<span <span
class="block truncate mr-8px" class="block truncate mr-8px"
:class="[selectedValue ? 'text-app-white' : 'font-400 text-white/50']" :style="[selectedValue ? 'text-app-white' : 'font-400 text-white/50']"
> >
{{ props.options.find(option => option.value === selectedValue)?.label || props.placeholder }} {{ props.options.find(option => option.value === selectedValue)?.label || props.placeholder }}
</span> </span>

17
pages/project/[id]/edit.vue
View file

@ -173,13 +173,12 @@ const transitionDone = ref(false)
gap-46px gap-46px
lg="mt-24px" lg="mt-24px"
> >
<SelectBox <ProjectCreateComponentsSelect
:model-value="selectedTab" :model-value="selectedTab"
label="Choose category" label="Choose category"
:options="tabsArray.map(t => ({ label: t.label, value: t.value }))" :options="tabsArray.map((t, index) => ({ label: t.label, value: index }))"
:border-opacity="100"
w-full w-full
lg:hidden class="lg:hidden! block!"
block block
mt-16px mt-16px
@update:model-value="$event => jumpTo($event)" @update:model-value="$event => jumpTo($event)"
@ -251,13 +250,20 @@ const transitionDone = ref(false)
</ClientOnly> </ClientOnly>
</div> </div>
</div> </div>
<Transition
name="fade"
mode="out-in"
appear
>
<div <div
v-if="transitionDone"
flex flex
flex-col flex-col
gap-10px gap-10px
justify-center justify-center
text-center text-center
md:fixed block
lg:fixed
bottom-0 bottom-0
w-full w-full
bg-app-bg-dark_grey bg-app-bg-dark_grey
@ -309,6 +315,7 @@ const transitionDone = ref(false)
</Button> </Button>
</div> </div>
</div> </div>
</Transition>
</div> </div>
</template> </template>

19
pages/project/create.vue
View file

@ -160,14 +160,12 @@ const transitionDone = ref(false)
gap-46px gap-46px
lg="mt-24px" lg="mt-24px"
> >
<SelectBox <ProjectCreateComponentsSelect
:model-value="selectedTab" :model-value="selectedTab"
label="Choose category" label="Choose category"
:options="tabsArray.map(t => ({ label: t.label, value: t.value }))" :options="tabsArray.map((t, index) => ({ label: t.label, value: index }))"
:border-opacity="30"
w-full w-full
lg:hidden class="lg:hidden! block!"
block
mt-16px mt-16px
@update:model-value="$event => jumpTo($event)" @update:model-value="$event => jumpTo($event)"
/> />
@ -194,7 +192,6 @@ const transitionDone = ref(false)
> >
<div <div
app-container app-container
mb-170px
lg="mb-55px" lg="mb-55px"
> >
<ClientOnly> <ClientOnly>
@ -238,13 +235,20 @@ const transitionDone = ref(false)
</ClientOnly> </ClientOnly>
</div> </div>
</div> </div>
<Transition
name="fade"
mode="out-in"
appear
>
<div <div
v-if="transitionDone"
flex flex
flex-col flex-col
gap-16px gap-16px
justify-center justify-center
text-center text-center
fixed block
lg:fixed
bottom-0 bottom-0
w-full w-full
bg-app-bg-dark_grey bg-app-bg-dark_grey
@ -296,6 +300,7 @@ const transitionDone = ref(false)
</Button> </Button>
</div> </div>
</div> </div>
</Transition>
</div> </div>
</template> </template>