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"
relative
>
<div v-bind="$attrs" lg="w-1/2">
<div
v-bind="$attrs"
lg="w-1/2"
>
<HeadlessListbox
v-model="selectedValue"
as="div"
@ -52,7 +55,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
>
<span
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 }}
</span>

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

@ -173,13 +173,12 @@ const transitionDone = ref(false)
gap-46px
lg="mt-24px"
>
<SelectBox
<ProjectCreateComponentsSelect
:model-value="selectedTab"
label="Choose category"
:options="tabsArray.map(t => ({ label: t.label, value: t.value }))"
:border-opacity="100"
:options="tabsArray.map((t, index) => ({ label: t.label, value: index }))"
w-full
lg:hidden
class="lg:hidden! block!"
block
mt-16px
@update:model-value="$event => jumpTo($event)"
@ -251,64 +250,72 @@ const transitionDone = ref(false)
</ClientOnly>
</div>
</div>
<div
flex
flex-col
gap-10px
justify-center
text-center
md:fixed
bottom-0
w-full
bg-app-bg-dark_grey
class="border-app-white/30"
lg="bg-app-black w-fit border-l-2 border-t-2 right-0 border-app-white"
p-12px
<Transition
name="fade"
mode="out-in"
appear
>
<Button
v-if="selectedTab !== tabsArray.length - 1"
<div
v-if="transitionDone"
flex
lg="w-fit hidden!"
border
@click="next()"
>
<span px-24px>NEXT SECTION</span>
</Button>
<span
v-if="selectedTab !== tabsArray.length - 1"
lg="hidden"
flex-col
gap-10px
justify-center
text-center
block
text="12px italic app-white/50"
>or you can submit changes by publishing them</span>
<div flex>
lg:fixed
bottom-0
w-full
bg-app-bg-dark_grey
class="border-app-white/30"
lg="bg-app-black w-fit border-l-2 border-t-2 right-0 border-app-white"
p-12px
>
<Button
w-full
lg="w-fit"
v-if="selectedTab !== tabsArray.length - 1"
flex
lg="w-fit hidden!"
border
@click="navigateTo(`/project/${route.params.id}`)"
@click="next()"
>
<span px-24px>CANCEL</span>
</Button>
<Button
w-full
lg="w-fit"
inverted-color
@click="publish()"
>
<UnoIcon
v-if="isPublishing"
w-108px
i-eos-icons-loading
text-black
text-18px
/>
<span
v-else
px-24px
>PUBLISH</span>
<span px-24px>NEXT SECTION</span>
</Button>
<span
v-if="selectedTab !== tabsArray.length - 1"
lg="hidden"
block
text="12px italic app-white/50"
>or you can submit changes by publishing them</span>
<div flex>
<Button
w-full
lg="w-fit"
border
@click="navigateTo(`/project/${route.params.id}`)"
>
<span px-24px>CANCEL</span>
</Button>
<Button
w-full
lg="w-fit"
inverted-color
@click="publish()"
>
<UnoIcon
v-if="isPublishing"
w-108px
i-eos-icons-loading
text-black
text-18px
/>
<span
v-else
px-24px
>PUBLISH</span>
</Button>
</div>
</div>
</div>
</Transition>
</div>
</template>

117
pages/project/create.vue
View file

@ -160,14 +160,12 @@ const transitionDone = ref(false)
gap-46px
lg="mt-24px"
>
<SelectBox
<ProjectCreateComponentsSelect
:model-value="selectedTab"
label="Choose category"
:options="tabsArray.map(t => ({ label: t.label, value: t.value }))"
:border-opacity="30"
:options="tabsArray.map((t, index) => ({ label: t.label, value: index }))"
w-full
lg:hidden
block
class="lg:hidden! block!"
mt-16px
@update:model-value="$event => jumpTo($event)"
/>
@ -194,7 +192,6 @@ const transitionDone = ref(false)
>
<div
app-container
mb-170px
lg="mb-55px"
>
<ClientOnly>
@ -238,64 +235,72 @@ const transitionDone = ref(false)
</ClientOnly>
</div>
</div>
<div
flex
flex-col
gap-16px
justify-center
text-center
fixed
bottom-0
w-full
bg-app-bg-dark_grey
class="border-app-white/30"
lg="bg-app-black w-fit border-l-2 border-t-2 right-0 border-app-white"
p-12px
<Transition
name="fade"
mode="out-in"
appear
>
<Button
v-if="selectedTab !== tabsArray.length - 1"
<div
v-if="transitionDone"
flex
lg="w-fit hidden!"
border
@click="next()"
>
<span px-24px>NEXT SECTION</span>
</Button>
<span
v-if="selectedTab !== tabsArray.length - 1"
lg="hidden"
flex-col
gap-16px
justify-center
text-center
block
text="12px italic app-white/50"
>or you can submit changes by publishing them</span>
<div flex>
lg:fixed
bottom-0
w-full
bg-app-bg-dark_grey
class="border-app-white/30"
lg="bg-app-black w-fit border-l-2 border-t-2 right-0 border-app-white"
p-12px
>
<Button
w-full
lg="w-fit"
v-if="selectedTab !== tabsArray.length - 1"
flex
lg="w-fit hidden!"
border
@click="navigateTo('/')"
@click="next()"
>
<span px-24px>CANCEL</span>
</Button>
<Button
w-full
lg="w-fit"
inverted-color
@click="publish(true)"
>
<UnoIcon
v-if="isPublishing"
w-108px
i-eos-icons-loading
text-black
text-18px
/>
<span
v-else
px-24px
>PUBLISH</span>
<span px-24px>NEXT SECTION</span>
</Button>
<span
v-if="selectedTab !== tabsArray.length - 1"
lg="hidden"
block
text="12px italic app-white/50"
>or you can submit changes by publishing them</span>
<div flex>
<Button
w-full
lg="w-fit"
border
@click="navigateTo('/')"
>
<span px-24px>CANCEL</span>
</Button>
<Button
w-full
lg="w-fit"
inverted-color
@click="publish(true)"
>
<UnoIcon
v-if="isPublishing"
w-108px
i-eos-icons-loading
text-black
text-18px
/>
<span
v-else
px-24px
>PUBLISH</span>
</Button>
</div>
</div>
</div>
</Transition>
</div>
</template>