ui: fix left aside some buttons width (#588)

This commit is contained in:
Chris 2022-12-28 15:00:49 +08:00 committed by GitHub
parent f4de4d3e3b
commit 107ac8a6b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 10 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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 />

View file

@ -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 />