feat: continue style experiments

This commit is contained in:
patak 2023-01-05 12:33:00 +01:00
parent 1c2c4a251e
commit 640075fed1
7 changed files with 17 additions and 16 deletions

View file

@ -14,7 +14,7 @@ defineProps<{
pt="[env(safe-area-inset-top,0)]" pt="[env(safe-area-inset-top,0)]"
border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]" border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
> >
<div flex justify-between px5 py2> <div :class="{ 'xl:hidden': !back }" flex justify-between px5 py2>
<div flex gap-3 items-center overflow-hidden py2> <div flex gap-3 items-center overflow-hidden py2>
<NuxtLink <NuxtLink
v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0

View file

@ -7,6 +7,9 @@ const { notifications } = useNotifications()
<template> <template>
<nav sm:px3 sm:py4 flex="~ col gap2" text-size-base leading-normal md:text-lg> <nav sm:px3 sm:py4 flex="~ col gap2" text-size-base leading-normal md:text-lg>
<SearchWidget lg:ms-1 lg:me-5 mb-5 hidden xl:block />
<NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" xl:hidden :command="command" mb-5 />
<NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" /> <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
<NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command"> <NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command">
<template #icon> <template #icon>
@ -20,7 +23,7 @@ const { notifications } = useNotifications()
</NavSideItem> </NavSideItem>
<!-- Use Search for small screens once the right sidebar is collapsed --> <!-- Use Search for small screens once the right sidebar is collapsed -->
<NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" xl:hidden :command="command" /> <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" sm:hidden :command="command" />
<NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" :command="command" /> <NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" :command="command" />
<NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " :command="command" /> <NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " :command="command" />

View file

@ -7,8 +7,8 @@ const { env } = buildInfo
<template> <template>
<!-- Use external to force refresh page and jump to top of timeline --> <!-- Use external to force refresh page and jump to top of timeline -->
<NuxtLink <NuxtLink
flex items-end gap-2 flex items-end gap-4
py2 px-2 xl:px-3 py2 px-5
text-2xl text-2xl
focus-visible:ring="2 current" focus-visible:ring="2 current"
to="/" to="/"

View file

@ -10,8 +10,8 @@ const disabledVisual = computed(() => isMastoInitialised.value && !currentUser.v
xl="w-auto h-auto" xl="w-auto h-auto"
rounded-3 rounded-3
cursor-pointer disabled:pointer-events-none cursor-pointer disabled:pointer-events-none
text-primary font-bold text-primary
border-1 border-primary-light border-1 border-primary
:class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'" :class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
:disabled="disabled" :disabled="disabled"
@click="openPublishDialog()" @click="openPublishDialog()"

View file

@ -52,14 +52,13 @@ const activate = () => {
</script> </script>
<template> <template>
<div ref="el" relative px4 py2 group> <div ref="el" relative group>
<div bg-base border="~ base" h10 rounded-3 flex="~ row" items-center relative focus-within:box-shadow-outline> <div bg-base border="~ base" h10 px-3 rounded-3 flex="~ row" items-center relative focus-within:box-shadow-outline gap-3>
<div i-ri:search-2-line mx4 absolute pointer-events-none text-secondary mt="1px" class="rtl-flip" /> <div i-ri:search-2-line pointer-events-none text-secondary mt="1px" class="rtl-flip" />
<input <input
ref="input" ref="input"
v-model="query" v-model="query"
h-full h-full
ps-10
rounded-3 rounded-3
w-full w-full
bg-transparent bg-transparent

View file

@ -7,12 +7,12 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
<template> <template>
<div h-full :class="{ zen: isZenMode }"> <div h-full :class="{ zen: isZenMode }">
<main flex w-full mxa lg:max-w-80rem> <main flex w-full mxa lg:max-w-80rem>
<aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end zen-hide" relative> <aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
<div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center> <div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center>
<slot name="left"> <slot name="left">
<NavTitle mt4 mb2 lg:mx-3 /> <div flex="~ col" overflow-y-auto justify-between h-full max-w-full mt-5>
<div flex="~ col" overflow-y-auto justify-between h-full max-w-full> <div flex flex-col gap-2>
<div flex flex-col> <NavTitle />
<NavSide command /> <NavSide command />
<PublishButton ms5.5 mt4 xl:me8 xl:ms4 /> <PublishButton ms5.5 mt4 xl:me8 xl:ms4 />
</div> </div>
@ -52,7 +52,6 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
<aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide"> <aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
<div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2> <div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2>
<slot name="right"> <slot name="right">
<SearchWidget />
<div flex-auto /> <div flex-auto />
<PwaPrompt /> <PwaPrompt />
<NavFooter /> <NavFooter />

View file

@ -21,6 +21,6 @@ useHeadFixed({
</NuxtLink> </NuxtLink>
</template> </template>
<TimelineHome v-if="isMastoInitialised" /> <TimelineHome v-if="isMastoInitialised" mt-4 />
</MainContent> </MainContent>
</template> </template>