teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix(ui): account info responsive design (#212)

Browse source
This commit is contained in:
webfansplz 2022-11-29 11:58:04 +08:00 committed by GitHub
parent 5ad1d7e2a5
commit 0ba7002d62
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/account/AccountInfo.vue
View file

@ -15,11 +15,11 @@ defineOptions({
<!-- TODO: Make this work for both buttons and links --> <!-- TODO: Make this work for both buttons and links -->
<!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items --> <!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
<template> <template>
<component :is="as" flex gap-3 v-bind="$attrs"> <component :is="as" flex gap-3 md:flex="col" v-bind="$attrs">
<AccountHoverWrapper :disabled="!hoverCard" :account="account"> <AccountHoverWrapper :disabled="!hoverCard" :account="account">
<AccountAvatar :account="account" w-12 h-12 /> <AccountAvatar :account="account" w-12 h-12 />
</AccountHoverWrapper> </AccountHoverWrapper>
<div flex="~ col"> <div flex="~ col" break-words>
<ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" /> <ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" text-sm /> <AccountHandle :account="account" text-sm />
</div> </div>

2
layouts/default.vue
View file

@ -29,6 +29,8 @@
<button <button
m5 p2 rounded-full text-start w-full m5 p2 rounded-full text-start w-full
hover:bg-active cursor-pointer transition-100 hover:bg-active cursor-pointer transition-100
md:m-0
md:p-5
> >
<AccountInfo :account="currentUser.account" /> <AccountInfo :account="currentUser.account" />
</button> </button>