fix: responsive github cards, don't constrain height

zio/stable
patak 2022-12-18 14:22:28 +01:00
parent f5d0660d7a
commit 139a2ea3b6
3 changed files with 53 additions and 38 deletions

View File

@ -26,7 +26,9 @@ const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCa
</script> </script>
<template> <template>
<StatusPreviewGitHub v-if="gitHubCards && providerName === 'GitHub'" :card="card" />
<NuxtLink <NuxtLink
v-else
block block
of-hidden of-hidden
hover:bg-active hover:bg-active
@ -38,9 +40,8 @@ const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCa
}" }"
target="_blank" target="_blank"
> >
<StatusPreviewGitHub v-if="gitHubCards && providerName === 'GitHub'" :card="card" />
<div <div
v-else-if="card.image" v-if="card.image"
flex flex-col flex flex-col
display-block of-hidden display-block of-hidden
border="base" border="base"
@ -68,27 +69,6 @@ const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCa
> >
<div i-ri:profile-line w="30%" h="30%" text-secondary /> <div i-ri:profile-line w="30%" h="30%" text-secondary />
</div> </div>
<div <StatusPreviewCardInfo :root="root" :card="card" :provider="providerName" />
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>
</NuxtLink> </NuxtLink>
</template> </template>

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

View File

@ -5,13 +5,11 @@ const props = defineProps<{
card: Card card: Card
}>() }>()
const isSquare = false
const root = true
type UrlType = 'user' | 'repo' | 'issue' | 'pull' type UrlType = 'user' | 'repo' | 'issue' | 'pull'
interface Meta { interface Meta {
type: UrlType type: UrlType
user: string user: string
titleUrl: string
avatar: string avatar: string
details: string details: string
repo?: string repo?: string
@ -50,6 +48,7 @@ const meta = $computed(() => {
const info = $ref<Meta>({ const info = $ref<Meta>({
type, type,
user, user,
titleUrl: `https://github.com/${user}${repo ? `/${repo}` : ''}`,
details, details,
repo, repo,
number, number,
@ -83,22 +82,20 @@ const meta = $computed(() => {
bg-code bg-code
relative relative
border="base" border="base"
:class="{ w-full min-h-50 md:min-h-60 border-b
'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22 border-r': isSquare, justify-center
'w-full aspect-[1.91] border-b': !isSquare, rounded-lg
'rounded-lg': root,
}"
> >
<div p4 px-6 flex flex-col justify-between h-full> <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-4 h-full mb-2> <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> <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"> <template v-if="meta.repo">
<span>{{ meta.user }}</span><span text-secondary-light>/</span><span text-primary font-bold>{{ meta.repo }}</span> <span>{{ meta.user }}</span><span text-secondary-light>/</span><span text-primary font-bold>{{ meta.repo }}</span>
</template> </template>
<span v-else>{{ meta.user }}</span> <span v-else>{{ meta.user }}</span>
</a> </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> <span v-if="meta.type === 'issue'" text-secondary-light mr-2>
#{{ meta.number }} #{{ meta.number }}
</span> </span>
@ -106,10 +103,12 @@ const meta = $computed(() => {
PR #{{ meta.number }} PR #{{ meta.number }}
</span> </span>
<span text-secondary leading-tight>{{ meta.details }}</span> <span text-secondary leading-tight>{{ meta.details }}</span>
</div> </a>
</div> </div>
<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> </div>
<div flex justify-between> <div flex justify-between>