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

fix: layout fixes for RTL languages (#591)

Browse source 
* fix: rtl arrows on settings page

* fix: border on settings page for RTL languages

* fix: RTL fixes for logo, search box and logout icon

* fix: RTL layout bugs in conversations

* chore: remove rtl setting icon

* improve arabic locale

* add new entries to arabic locale

* chore: include number format

* fix: RTL layout on several pages

* fix: RTL layout of account header and sign in modal

* fix: always display account handle in LTR

* fix: move character counter in publish widget to left side for RTL

* fix: remove border-ss-none unocss rule

* fix: many RTL fixes

* fix: RTL fixes for many pages

* fix: use viewer's direction in all content

* chore: use new arabic plural rules

* chore: flip arrow on main content header

* chore: fix StatusPoll and show_new_items for zh-TW

* chore: StatusPoll tooltip on bottom

* chore: add `en` variants to i18n conf

* chore: update entry to use new plural rule

* fix: automatic content direction for status

* fix: direction for account handle

* fix: direction of polls

Co-authored-by: userquin <userquin@gmail.com>
Co-authored-by: Jean-Paul Khawam <jeanpaulkhawam@protonmail.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
Vjacheslav Trushkin 2023-01-01 16:29:11 +02:00 • committed by GitHub
parent c5304be775
commit 727d05915f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
50 changed files with 347 additions and 222 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/account/AccountBigCard.vue
View file

@ -24,7 +24,7 @@ defineOptions({
<!-- User info -->
<div flex sm:flex-row flex-col flex-gap-2>
<div flex items-center justify-between>
<div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ml--1>
<div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ms--1>
<AccountAvatar :account="account" />
</div>
<a block sm:hidden href="javascript:;" @click.stop>

2
components/account/AccountBigCardSkeleton.vue
View file

@ -7,7 +7,7 @@
<!-- User info -->
<div flex sm:flex-row flex-col flex-gap-2>
<div flex items-center justify-between>
<div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ml--1 of-hidden bg-base>
<div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ms--1 of-hidden bg-base>
<div class="flex skeleton-loading-bg" w-full h-full />
</div>
<div block sm:hidden class="skeleton-loading-bg" h-8 w-30 rounded-full />

2
components/account/AccountHandle.vue
View file

@ -9,7 +9,7 @@ const serverName = $computed(() => getServerName(account))
</script>
<template>
<p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light>
<p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light dir="ltr">
<!-- fix: #274 only line-clamp-1 can be used here, using text-ellipsis is not valid -->
<span text-secondary>{{ getShortHandle(account) }}</span>
<span v-if="serverName" text-secondary-light>@{{ serverName }}</span>

2
components/account/AccountHeader.vue
View file

@ -90,7 +90,7 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
<AccountHandle :account="account" />
</div>
</div>
<div absolute top-18 right-0 flex gap-2 items-center>
<div absolute top-18 inset-ie-0 flex gap-2 items-center>
<AccountMoreButton :account="account" :command="command" />
<AccountFollowButton :account="account" :command="command" />
<!-- Edit profile -->

2
components/account/AccountHoverCard.vue
View file

@ -11,7 +11,7 @@ const relationship = $(useRelationship(account))
<template>
<div v-show="relationship" flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
<div flex="~ gap2" items-center>
<NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pr5 mr-a>
<NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a>
<AccountInfo :account="account" />
</NuxtLink>
<AccountFollowButton text-sm :account="account" :relationship="relationship" />

2
components/account/AccountInlineInfo.vue
View file

@ -12,7 +12,7 @@ const { link = true, avatar = true } = defineProps<{
<AccountHoverWrapper :account="account">
<NuxtLink
:to="link ? getAccountRoute(account) : undefined"
:class="link ? 'text-link-rounded ml-0 pl-0' : ''"
:class="link ? 'text-link-rounded ms-0 ps-0' : ''"
min-w-0 flex gap-2 items-center
>
<AccountAvatar v-if="avatar" :account="account" w-5 h-5 />

6
components/account/AccountPostsFollowers.vue
View file

@ -26,7 +26,7 @@ const followersCountSR = $computed(() => forSR(props.account.followersCount))
<i18n-t keypath="account.posts_count" :plural="account.statusesCount">
<CommonTooltip v-if="statusesCountSR" :content="formatNumber(account.statusesCount)" placement="bottom">
<span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ statusesCount }}</span>
<span sr-only font-bold>{{ account.statusesCount }}</span>
<span sr-only font-bold>{{ formatNumber(account.statusesCount) }}</span>
</CommonTooltip>
<span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ statusesCount }}</span>
</i18n-t>
@ -41,7 +41,7 @@ const followersCountSR = $computed(() => forSR(props.account.followersCount))
<i18n-t keypath="account.following_count" :plural="account.followingCount">
<CommonTooltip v-if="followingCountSR" :content="formatNumber(account.followingCount)" placement="bottom">
<span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followingCount }}</span>
<span sr-only font-bold>{{ account.followingCount }}</span>
<span sr-only font-bold>{{ formatNumber(account.followingCount) }}</span>
</CommonTooltip>
<span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followingCount }}</span>
</i18n-t>
@ -56,7 +56,7 @@ const followersCountSR = $computed(() => forSR(props.account.followersCount))
<i18n-t keypath="account.followers_count" :plural="account.followersCount">
<CommonTooltip v-if="followersCountSR" :content="formatNumber(account.followersCount)" placement="bottom">
<span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followersCount }}</span>
<span sr-only font-bold>{{ account.followersCount }}</span>
<span sr-only font-bold>{{ formatNumber(account.followersCount) }}</span>
</CommonTooltip>
<span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followersCount }}</span>
</i18n-t>