zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: continue style experiments

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
components/main/MainContent.vue
View file

@ -14,7 +14,7 @@ defineProps<{
pt="[env(safe-area-inset-top,0)]"
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>
<NuxtLink
v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0

5
components/nav/NavSide.vue
View file

@ -7,6 +7,9 @@ const { notifications } = useNotifications()
<template>
<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.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command">
<template #icon>
@ -20,7 +23,7 @@ const { notifications } = useNotifications()
</NavSideItem>
<!-- 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.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " :command="command" />

4
components/nav/NavTitle.vue
View file

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

4
components/publish/PublishButton.vue
View file

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

7
components/search/SearchWidget.vue
View file

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