mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 12:19:08 +01:00
ui: fix left aside some buttons width (#588)
This commit is contained in:
parent
f4de4d3e3b
commit
107ac8a6b9
4 changed files with 31 additions and 10 deletions
|
@ -46,7 +46,14 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
|
||||||
<template>
|
<template>
|
||||||
<NuxtLink :to="to" :disabled="noUserDisable" :class="noUserVisual ? 'op25 pointer-events-none ' : ''" :active-class="activeClass" group focus:outline-none @click="$scrollToTop">
|
<NuxtLink :to="to" :disabled="noUserDisable" :class="noUserVisual ? 'op25 pointer-events-none ' : ''" :active-class="activeClass" group focus:outline-none @click="$scrollToTop">
|
||||||
<CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
|
<CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
|
||||||
<div flex w-fit px2 mx3 lg:mx0 lg:px5 py2 gap4 items-center transition-100 rounded-full group-hover:bg-active group-focus-visible:ring="2 current">
|
<div
|
||||||
|
flex items-center gap4
|
||||||
|
w-fit rounded-full
|
||||||
|
px2 py2 mx3 sm:mxa
|
||||||
|
lg="mx0 px5"
|
||||||
|
transition-100
|
||||||
|
group-hover:bg-active group-focus-visible:ring="2 current"
|
||||||
|
>
|
||||||
<slot name="icon">
|
<slot name="icon">
|
||||||
<div :class="icon" text-xl />
|
<div :class="icon" text-xl />
|
||||||
</slot>
|
</slot>
|
||||||
|
|
|
@ -5,8 +5,17 @@ const sub = env === 'local' ? 'dev' : env === 'staging' ? 'preview' : 'alpha'
|
||||||
|
|
||||||
<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 flex px3 py2 items-center text-2xl gap-2 hover:bg-active focus-visible:ring="2 current" rounded-full to="/" external>
|
<NuxtLink
|
||||||
<img :alt="$t('app_logo')" src="/logo.svg" w-10 h-10 height="40" width="40">
|
flex items-center gap-2
|
||||||
|
w-fit
|
||||||
|
py2 px-2 lg:px-3
|
||||||
|
text-2xl hover:bg-active
|
||||||
|
focus-visible:ring="2 current"
|
||||||
|
rounded-full
|
||||||
|
to="/"
|
||||||
|
external
|
||||||
|
>
|
||||||
|
<img :alt="$t('app_logo')" src="/logo.svg" shrink-0 aspect="1/1" sm:h-8 lg:h-10>
|
||||||
<div hidden lg:block>
|
<div hidden lg:block>
|
||||||
{{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ sub }}</sup>
|
{{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ sub }}</sup>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,10 +5,15 @@ const disabledVisual = computed(() => isMastoInitialised.value && !currentUser.v
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
color-primary rounded-full ml-7 lg:ml-3 w-9 lg:w-auto font-bold py2 lg:py4 flex="~ gap2 center"
|
flex="~ gap2 center"
|
||||||
|
w-9 h-9 py2
|
||||||
|
lg="w-auto h-auto py-4"
|
||||||
|
rounded-full
|
||||||
cursor-pointer disabled:pointer-events-none
|
cursor-pointer disabled:pointer-events-none
|
||||||
text-primary border-1 border-primary
|
text-primary font-bold
|
||||||
:disabled="disabled" :class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
|
border-1 border-primary
|
||||||
|
:class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
|
||||||
|
:disabled="disabled"
|
||||||
@click="openPublishDialog()"
|
@click="openPublishDialog()"
|
||||||
>
|
>
|
||||||
<div i-ri:quill-pen-line />
|
<div i-ri:quill-pen-line />
|
||||||
|
|
|
@ -8,13 +8,13 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
|
||||||
<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 justify-end lg:w-1/4 zen-hide" relative>
|
<aside class="hidden sm:flex w-1/8 md:w-1/6 justify-end lg:w-1/4 zen-hide" relative>
|
||||||
<div sticky top-0 w-20 lg:w-100 h-screen flex="~ col">
|
<div sticky top-0 w-20 lg:w-100 h-screen flex="~ col" lt-lg-items-center>
|
||||||
<slot name="left">
|
<slot name="left">
|
||||||
<NavTitle mx3 mt4 mb2 self-start />
|
<NavTitle mt4 mb2 lg:mx-3 />
|
||||||
<div flex="~ col" overflow-y-auto justify-between h-full>
|
<div flex="~ col" overflow-y-auto justify-between h-full max-w-full>
|
||||||
<div flex flex-col>
|
<div flex flex-col>
|
||||||
<NavSide />
|
<NavSide />
|
||||||
<PublishButton m5 />
|
<PublishButton m="y5 xa" lg:m="x5 l3" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isMastoInitialised" flex flex-col>
|
<div v-if="isMastoInitialised" flex flex-col>
|
||||||
<UserSignInEntry v-if="!currentUser" sm:hidden />
|
<UserSignInEntry v-if="!currentUser" sm:hidden />
|
||||||
|
|
Loading…
Reference in a new issue