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

style: spoiler and filter UI improvements (#378)

Browse source
This commit is contained in:
Ayo Ayco 2022-12-09 22:19:26 +01:00 committed by GitHub
parent 462e85dad0
commit deea8c0aab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/status/StatusCard.vue
View file

@ -125,7 +125,9 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="isFiltered" gap-2 px-4> <div v-else-if="isFiltered" gap-2 p-4>
<p>{{ filterPhrase && `${$t('status.filter_removed_phrase')}: ${filterPhrase}` }}</p> <p text-center text-secondary text-sm>
{{ filterPhrase && `${$t('status.filter_removed_phrase')}: ${filterPhrase}` }}
</p>
</div> </div>
</template> </template>

2
components/status/StatusDetails.vue
View file

@ -40,9 +40,9 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
v-if="status.mediaAttachments?.length" v-if="status.mediaAttachments?.length"
:status="status" :status="status"
/> />
<StatusPreviewCard v-if="status.card" :card="status.card" />
</StatusSpoiler> </StatusSpoiler>
</div> </div>
<StatusPreviewCard v-if="status.card" :card="status.card" />
<div flex="~ gap-1" items-center text-secondary text-sm> <div flex="~ gap-1" items-center text-secondary text-sm>
<div flex> <div flex>
<div>{{ createdAt }}</div> <div>{{ createdAt }}</div>

8
components/status/StatusSpoiler.vue
View file

@ -11,17 +11,15 @@ watchEffect(() => {
<template> <template>
<div v-if="enabled" flex flex-col items-start> <div v-if="enabled" flex flex-col items-start>
<div class="content-rich"> <div class="content-rich" px-4 pb-2 text-center text-secondary text-sm w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
<slot name="spoiler" /> <slot name="spoiler" />
</div> </div>
<div flex="~ gap-1 center" w-full> <div flex="~ gap-1 center" w-full mt="-3.5">
<div border="t base" w-5 h-1px /> <button btn-text px-2 py-1 text-3 bg-base flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
<button btn-text px-2 py-1 text-3 flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
<div v-if="showContent" i-ri:eye-line /> <div v-if="showContent" i-ri:eye-line />
<div v-else i-ri:eye-close-line /> <div v-else i-ri:eye-close-line />
{{ showContent ? $t('status.spoiler_show_less') : $t(filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more') }} {{ showContent ? $t('status.spoiler_show_less') : $t(filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more') }}
</button> </button>
<div border="t base" flex-auto h-1px />
</div> </div>
</div> </div>
<slot v-if="!enabled || showContent" /> <slot v-if="!enabled || showContent" />