mirrors/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2024-11-22 01:15:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

feat: style experiments

Browse source
This commit is contained in:
patak 2023-01-05 00:17:30 +01:00
parent 1ff584bf8b
commit fc48f8b90c
24 changed files with 37 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/nav/NavSideItem.vue
View file

@ -58,11 +58,11 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
<CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
<div
flex items-center gap4
w-fit rounded-full
w-fit rounded-3
px2 py2 mx3 sm:mxa
xl="mx0 px5"
xl="ml0 mr5 px5 w-auto"
transition-100
group-hover:bg-active group-focus-visible:ring="2 current"
group-hover="bg-active" group-focus-visible:ring="2 current"
>
<slot name="icon">
<div :class="icon" text-xl />

4
components/nav/NavTitle.vue
View file

@ -8,11 +8,9 @@ const { env } = buildInfo
<!-- Use external to force refresh page and jump to top of timeline -->
<NuxtLink
flex items-end gap-2
w-fit
py2 px-2 xl:px-3
text-2xl hover:bg-active
text-2xl
focus-visible:ring="2 current"
rounded-full
to="/"
external
>

6
components/publish/PublishButton.vue
View file

@ -7,11 +7,11 @@ const disabledVisual = computed(() => isMastoInitialised.value && !currentUser.v
<button
flex="~ gap2 center"
w-9 h-9 py2
xl="w-auto h-auto py-4"
rounded-full
xl="w-auto h-auto"
rounded-3
cursor-pointer disabled:pointer-events-none
text-primary font-bold
border-1 border-primary
border-1 border-primary-light
:class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
:disabled="disabled"
@click="openPublishDialog()"

2
components/publish/PublishWidget.vue
View file

@ -343,7 +343,7 @@ defineExpose({
</PublishVisibilityPicker>
<button
btn-solid rounded-full text-sm w-full md:w-fit
btn-solid rounded-3 text-sm w-full md:w-fit
:disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status)"
@click="publish"
>

6
components/search/SearchWidget.vue
View file

@ -53,14 +53,14 @@ const activate = () => {
<template>
<div ref="el" relative px4 py2 group>
<div bg-base border="~ base" h10 rounded-full flex="~ row" items-center relative focus-within:box-shadow-outline>
<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" />
<input
ref="input"
v-model="query"
h-full
ps-10
rounded-full
rounded-3
w-full
bg-transparent
outline="focus:none"
@ -75,7 +75,7 @@ const activate = () => {
</div>
<!-- Results -->
<div p4 left-0 top-10 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
<div w-full bg-base border="~ base" rounded max-h-100 overflow-auto py2>
<div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
<span v-if="query.length === 0" block text-center text-sm text-secondary>
{{ t('search.search_desc') }}
</span>

5
components/status/StatusCard.vue
View file

@ -90,13 +90,14 @@ const isDM = $computed(() => status.visibility === 'direct')
ref="el"
relative flex flex-col gap-1 pl-3 pr-4 pt-1
class="pb-1.5"
:class="{ 'hover:bg-active': hover, 'border-t border-base': newer && !directReply }"
:class="{ 'hover:bg-active': hover }"
tabindex="0"
focus:outline-none focus-visible:ring="2 primary"
:lang="status.language ?? undefined"
@click="onclick"
@keydown.enter="onclick"
>
<div v-if="newer && !directReply" w-auto h-1px bg-border />
<div flex justify-between>
<slot name="meta">
<div v-if="rebloggedBy && !collapseRebloggedBy" relative text-secondary ws-nowrap flex="~" items-center pt1 pb0.5 px-1px bg-base>
@ -125,7 +126,7 @@ const isDM = $computed(() => status.visibility === 'direct')
</NuxtLink>
</AccountHoverWrapper>
<div v-if="connectReply" w-full h-full flex justify-center>
<div h-full class="w-2.5px" bg-border />
<div class="w-2.5px" bg-primary-light />
</div>
</div>
<div flex="~ col 1" min-w-0>

2
error.vue
View file

@ -35,7 +35,7 @@ const reload = async () => {
<NuxtLayout>
<MainContent>
<template #title>
<span text-lg font-bold>Error</span>
<span timeline-title-style>Error</span>
</template>
<slot>
<form p5 grid gap-y-4 @submit="reload">

8
layouts/default.vue
View file

@ -14,7 +14,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
<div flex="~ col" overflow-y-auto justify-between h-full max-w-full>
<div flex flex-col>
<NavSide command />
<PublishButton m="y5 xa" xl:m="r5 l3" xl:rtl-m="l5 r3" />
<PublishButton ms5.5 mt4 xl:me8 xl:ms4 />
</div>
<div v-if="isMastoInitialised" flex flex-col>
<UserSignInEntry v-if="!currentUser" sm:hidden />
@ -24,7 +24,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
<div v-else flex="~" items-center justify-between>
<NuxtLink
hidden xl:block
rounded-full text-start w-full
rounded-3 text-primary text-start w-full
hover:bg-active cursor-pointer transition-100
:to="getAccountRoute(currentUser.account)"
>
@ -40,7 +40,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
</slot>
</div>
</aside>
<div w-full min-h-screen :class="wideLayout ? 'xl:w-full sm:w-600px' : 'sm:w-600px md:shrink-0'" sm:border-l sm:border-r border-base>
<div w-full min-h-screen :class="wideLayout ? 'xl:w-full sm:w-600px' : 'sm:w-600px md:shrink-0'" border-base>
<div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
<slot />
</div>
@ -50,7 +50,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
</div>
</div>
<aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
<div sticky top-0 h-screen flex="~ col" py3>
<div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2>
<slot name="right">
<SearchWidget />
<div flex-auto />

2
pages/[[server]]/@[account]/index.vue
View file

@ -21,7 +21,7 @@ onReactivated(() => {
<template>
<MainContent back>
<template #title>
<ContentRich text-lg font-bold :content="account ? getDisplayName(account) : t('nav.profile')" />
<ContentRich timeline-title-style :content="account ? getDisplayName(account) : t('nav.profile')" />
</template>
<template v-if="pending" />

2
pages/[[server]]/explore.vue
View file

@ -28,7 +28,7 @@ const tabs = $computed(() => [
<template>
<MainContent>
<template #title>
<span text-lg font-bold flex items-center gap-2 cursor-pointer @click="$scrollToTop">
<span timeline-title-style flex items-center gap-2 cursor-pointer @click="$scrollToTop">
<div i-ri:hashtag />
<span>{{ t('nav.explore') }}</span>
</span>

2
pages/[[server]]/public/index.vue
View file

@ -11,7 +11,7 @@ useHeadFixed({
<template>
<MainContent>
<template #title>
<NuxtLink to="/public" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<NuxtLink to="/public" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
<div i-ri:group-2-line />
<span>{{ t('title.federated_timeline') }}</span>
</NuxtLink>

2
pages/[[server]]/public/local.vue
View file

@ -10,7 +10,7 @@ useHeadFixed({
<template>
<MainContent>
<template #title>
<NuxtLink to="/public/local" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<NuxtLink to="/public/local" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
<div i-ri:group-2-line />
<span>{{ t('title.local_timeline') }}</span>
</NuxtLink>

2
pages/blocks.vue
View file

@ -13,7 +13,7 @@ useHeadFixed({
<template>
<MainContent back>
<template #title>
<span text-lg font-bold>{{ $t('nav.blocked_users') }}</span>
<span timeline-title-style>{{ $t('nav.blocked_users') }}</span>
</template>
<TimelineBlocks v-if="isMastoInitialised" />

2
pages/bookmarks.vue
View file

@ -13,7 +13,7 @@ useHeadFixed({
<template>
<MainContent>
<template #title>
<NuxtLink to="/bookmarks" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<NuxtLink to="/bookmarks" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
<div i-ri:bookmark-line />
<span>{{ t('nav.bookmarks') }}</span>
</NuxtLink>

2
pages/conversations.vue
View file

@ -13,7 +13,7 @@ useHeadFixed({
<template>
<MainContent>
<template #title>
<NuxtLink to="/conversations" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<NuxtLink to="/conversations" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
<div i-ri:at-line />
<span>{{ t('nav.conversations') }}</span>
</NuxtLink>

2
pages/domain_blocks.vue
View file

@ -13,7 +13,7 @@ useHeadFixed({
<template>
<MainContent back>
<template #title>
<span text-lg font-bold>{{ $t('nav.blocked_domains') }}</span>
<span timeline-title-style>{{ $t('nav.blocked_domains') }}</span>
</template>
<TimelineDomainBlocks v-if="isMastoInitialised" />

2
pages/favourites.vue
View file

@ -13,7 +13,7 @@ useHeadFixed({
<template>
<MainContent>
<template #title>
<NuxtLink to="/favourites" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<NuxtLink to="/favourites" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
<div i-ri:heart-3-line />
<span>{{ t('nav.favourites') }}</span>
</NuxtLink>

2
pages/home.vue
View file

@ -15,7 +15,7 @@ useHeadFixed({
<template>
<MainContent>
<template #title>
<NuxtLink to="/home" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<NuxtLink to="/home" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
<div i-ri:home-5-line />
<span>{{ $t('nav.home') }}</span>
</NuxtLink>

2
pages/mutes.vue
View file

@ -13,7 +13,7 @@ useHeadFixed({
<template>
<MainContent back>
<template #title>
<span text-lg font-bold>{{ $t('nav.muted_users') }}</span>
<span timeline-title-style>{{ $t('nav.muted_users') }}</span>
</template>
<TimelineMutes v-if="isMastoInitialised" />

2
pages/notifications.vue
View file

@ -28,7 +28,7 @@ onActivated(() => {
<template>
<MainContent>
<template #title>
<NuxtLink to="/notifications" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<NuxtLink to="/notifications" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
<div i-ri:notification-4-line />
<span>{{ t('nav.notifications') }}</span>
</NuxtLink>

2
pages/pinned.vue
View file

@ -13,7 +13,7 @@ useHeadFixed({
<template>
<MainContent>
<template #title>
<NuxtLink to="/public/pinned" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<NuxtLink to="/public/pinned" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
<div i-ri:pushpin-line />
<span>{{ t('account.pinned') }}</span>
</NuxtLink>

2
pages/search.vue
View file

@ -10,7 +10,7 @@ useHeadFixed({
<template>
<MainContent>
<template #title>
<NuxtLink to="/search" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<NuxtLink to="/search" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
<div i-ri:search-line class="rtl-flip" />
<span>{{ $t('nav.search') }}</span>
</NuxtLink>

2
pages/settings.vue
View file

@ -20,7 +20,7 @@ const isRootPath = computedEager(() => route.name === 'settings')
<div border="e base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
<MainContent>
<template #title>
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<div timeline-title-style flex items-center gap-2 @click="$scrollToTop">
<div i-ri:settings-3-line />
<span>{{ $t('nav.settings') }}</span>
</div>

3
unocss.config.ts
View file

@ -22,6 +22,7 @@ export default defineConfig({
'bg-base': 'bg-$c-bg-base',
'bg-border': 'bg-$c-border',
'bg-active': 'bg-$c-bg-active',
'bg-primary-light': 'bg-$c-primary-light',
'bg-code': 'bg-$c-bg-code',
'bg-fade': 'bg-$c-bg-fade',
@ -55,6 +56,8 @@ export default defineConfig({
'flex-v-center': 'items-center',
'flex-h-center': 'justify-center',
'bg-hover-overflow': 'relative z-0 transition-colors duration-250 after-content-empty after:(absolute inset--2px bg-transparent rounded-lg z--1 transition-colors duration-250) hover:after:(bg-active)',
'timeline-title-style': 'text-primary text-lg font-bold',
},
],
presets: [