forked from Mirrors/elk
fix: responsive github cards, don't constrain height
This commit is contained in:
patak
parent
f5d0660d7a
commit
139a2ea3b6
3 changed files with 53 additions and 38 deletions
|
|
@ -26,7 +26,9 @@ const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCa
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<StatusPreviewGitHub v-if="gitHubCards && providerName === 'GitHub'" :card="card" />
|
||||
<NuxtLink
|
||||
v-else
|
||||
block
|
||||
of-hidden
|
||||
hover:bg-active
|
||||
|
|
@ -38,9 +40,8 @@ const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCa
|
|||
}"
|
||||
target="_blank"
|
||||
>
|
||||
<StatusPreviewGitHub v-if="gitHubCards && providerName === 'GitHub'" :card="card" />
|
||||
<div
|
||||
v-else-if="card.image"
|
||||
v-if="card.image"
|
||||
flex flex-col
|
||||
display-block of-hidden
|
||||
border="base"
|
||||
|
|
@ -68,27 +69,6 @@ const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCa
|
|||
>
|
||||
<div i-ri:profile-line w="30%" h="30%" text-secondary />
|
||||
</div>
|
||||
<div
|
||||
px3 max-h-2xl
|
||||
flex flex-col
|
||||
:class="[
|
||||
root ? 'flex-gap-1 py1 sm:py3' : 'py1 justify-center sm:justify-start',
|
||||
]"
|
||||
my-auto
|
||||
>
|
||||
<p text-secondary ws-pre-wrap break-all line-clamp-1>
|
||||
{{ providerName }}
|
||||
</p>
|
||||
<strong
|
||||
v-if="card.title" font-normal sm:font-medium line-clamp-1
|
||||
break-all ws-pre-wrap
|
||||
>{{ card.title }}</strong>
|
||||
<p
|
||||
v-if="card.description"
|
||||
line-clamp-1 break-all sm:break-words text-secondary ws-pre-wrap :class="[root ? 'sm:line-clamp-2' : '']"
|
||||
>
|
||||
{{ card.description }}
|
||||
</p>
|
||||
</div>
|
||||
<StatusPreviewCardInfo :root="root" :card="card" :provider="providerName" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
|
|||
36
components/status/StatusPreviewCardInfo.vue
Normal file
36
components/status/StatusPreviewCardInfo.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<script setup lang="ts">
|
||||
import type { Card } from 'masto'
|
||||
|
||||
const props = defineProps<{
|
||||
card: Card
|
||||
/** When it is root card in the list, not appear as a child card */
|
||||
root?: boolean
|
||||
/** For the preview image, only the small image mode is displayed */
|
||||
provider?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
px3 max-h-2xl
|
||||
flex flex-col
|
||||
:class="[
|
||||
root ? 'flex-gap-1 py1 sm:py3' : 'py1 justify-center sm:justify-start',
|
||||
]"
|
||||
my-auto
|
||||
>
|
||||
<p text-secondary ws-pre-wrap break-all line-clamp-1>
|
||||
{{ provider }}
|
||||
</p>
|
||||
<strong
|
||||
v-if="card.title" font-normal sm:font-medium line-clamp-1
|
||||
break-all ws-pre-wrap
|
||||
>{{ card.title }}</strong>
|
||||
<p
|
||||
v-if="card.description"
|
||||
line-clamp-1 break-all sm:break-words text-secondary ws-pre-wrap :class="[root ? 'sm:line-clamp-2' : '']"
|
||||
>
|
||||
{{ card.description }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -5,13 +5,11 @@ const props = defineProps<{
|
|||
card: Card
|
||||
}>()
|
||||
|
||||
const isSquare = false
|
||||
const root = true
|
||||
|
||||
type UrlType = 'user' | 'repo' | 'issue' | 'pull'
|
||||
interface Meta {
|
||||
type: UrlType
|
||||
user: string
|
||||
titleUrl: string
|
||||
avatar: string
|
||||
details: string
|
||||
repo?: string
|
||||
|
|
@ -50,6 +48,7 @@ const meta = $computed(() => {
|
|||
const info = $ref<Meta>({
|
||||
type,
|
||||
user,
|
||||
titleUrl: `https://github.com/${user}${repo ? `/${repo}` : ''}`,
|
||||
details,
|
||||
repo,
|
||||
number,
|
||||
|
|
@ -83,22 +82,20 @@ const meta = $computed(() => {
|
|||
bg-code
|
||||
relative
|
||||
border="base"
|
||||
:class="{
|
||||
'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22 border-r': isSquare,
|
||||
'w-full aspect-[1.91] border-b': !isSquare,
|
||||
'rounded-lg': root,
|
||||
}"
|
||||
w-full min-h-50 md:min-h-60 border-b
|
||||
justify-center
|
||||
rounded-lg
|
||||
>
|
||||
<div p4 px-6 flex flex-col justify-between h-full>
|
||||
<div flex justify-between items-center gap-4 h-full mb-2>
|
||||
<div p4 sm:px-8 flex flex-col justify-between min-h-50 md:min-h-60 h-full>
|
||||
<div flex justify-between items-center gap-2 sm:gap-6 h-full mb-2 min-h-35 md:min-h-45>
|
||||
<div flex flex-col gap-2>
|
||||
<a flex gap-1 text-xl sm:text-3xl flex-wrap leading-none :href="card.url">
|
||||
<a flex gap-1 text-xl sm:text-3xl flex-wrap leading-none :href="meta.titleUrl" target="_blank">
|
||||
<template v-if="meta.repo">
|
||||
<span>{{ meta.user }}</span><span text-secondary-light>/</span><span text-primary font-bold>{{ meta.repo }}</span>
|
||||
</template>
|
||||
<span v-else>{{ meta.user }}</span>
|
||||
</a>
|
||||
<div sm:text-lg>
|
||||
<a sm:text-lg :href="card.url" target="_blank">
|
||||
<span v-if="meta.type === 'issue'" text-secondary-light mr-2>
|
||||
#{{ meta.number }}
|
||||
</span>
|
||||
|
|
@ -106,10 +103,12 @@ const meta = $computed(() => {
|
|||
PR #{{ meta.number }}
|
||||
</span>
|
||||
<span text-secondary leading-tight>{{ meta.details }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<img w-30 aspect-square width="20" height="20" rounded-2 :src="meta.avatar">
|
||||
<a :href="meta.titleUrl" target="_blank">
|
||||
<img w-30 aspect-square width="20" height="20" rounded-2 :src="meta.avatar">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div flex justify-between>
|
||||
|
|
|
|||
Loading…
Reference in a new issue