kopia lustrzana https://github.com/cloudflare/wildebeest
rodzic
f0c6126938
commit
66b4319bb3
|
@ -1,9 +1,30 @@
|
||||||
import { component$, Slot } from '@builder.io/qwik'
|
import { $, component$, Slot } from '@builder.io/qwik'
|
||||||
|
import { useNavigate } from '@builder.io/qwik-city'
|
||||||
|
|
||||||
|
export default component$<{ withBackButton?: boolean }>(({ withBackButton }) => {
|
||||||
|
const nav = useNavigate()
|
||||||
|
|
||||||
|
const goBack = $(() => {
|
||||||
|
if (window.history.length > 1) {
|
||||||
|
window.history.back()
|
||||||
|
} else {
|
||||||
|
nav('/explore')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
export default component$(() => {
|
|
||||||
return (
|
return (
|
||||||
<header class="bg-wildebeest-900 sticky top-[3.9rem] xl:top-0 xl:pt-2.5 z-10">
|
<header class="bg-wildebeest-900 sticky top-[3.9rem] xl:top-0 xl:pt-2.5 z-10">
|
||||||
<Slot />
|
<div class="flex bg-wildebeest-700 xl:rounded-t overflow-hidden">
|
||||||
|
{!!withBackButton && (
|
||||||
|
<div class="flex justify-between items-center bg-wildebeest-700">
|
||||||
|
<button class="text-semi no-underline text-wildebeest-vibrant-400 bg-transparent p-4" onClick$={goBack}>
|
||||||
|
<i class="fa fa-chevron-left mr-2 w-3 inline-block" />
|
||||||
|
<span class="hover:underline">Back</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Slot />
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
|
@ -48,14 +48,7 @@ export default component$(() => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<StickyHeader>
|
<StickyHeader withBackButton />
|
||||||
<div class="flex justify-between items-center xl:rounded-t header bg-wildebeest-700">
|
|
||||||
<Link class="text-semi no-underline text-wildebeest-vibrant-400 bg-transparent p-4" href="/explore">
|
|
||||||
<i class="fa fa-chevron-left mr-2 w-3 inline-block" />
|
|
||||||
<span class="hover:underline">Back</span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</StickyHeader>
|
|
||||||
<div class="bg-wildebeest-700 p-4">
|
<div class="bg-wildebeest-700 p-4">
|
||||||
<AccountCard status={loaderData.status} />
|
<AccountCard status={loaderData.status} />
|
||||||
<div class="leading-normal inner-html-content text-lg" dangerouslySetInnerHTML={loaderData.status.content} />
|
<div class="leading-normal inner-html-content text-lg" dangerouslySetInnerHTML={loaderData.status.content} />
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { $, component$, useStyles$ } from '@builder.io/qwik'
|
import { component$, useStyles$ } from '@builder.io/qwik'
|
||||||
import { loader$, useNavigate } from '@builder.io/qwik-city'
|
import { loader$ } from '@builder.io/qwik-city'
|
||||||
import { MastodonAccount } from 'wildebeest/backend/src/types'
|
import { MastodonAccount } from 'wildebeest/backend/src/types'
|
||||||
import StickyHeader from '~/components/StickyHeader/StickyHeader'
|
import StickyHeader from '~/components/StickyHeader/StickyHeader'
|
||||||
import { formatDateTime } from '~/utils/dateTime'
|
import { formatDateTime } from '~/utils/dateTime'
|
||||||
|
@ -34,18 +34,9 @@ export const accountLoader = loader$<{ DATABASE: D1Database }, Promise<MastodonA
|
||||||
|
|
||||||
export default component$(() => {
|
export default component$(() => {
|
||||||
useStyles$(styles)
|
useStyles$(styles)
|
||||||
const nav = useNavigate()
|
|
||||||
|
|
||||||
const accountDetails = accountLoader.use().value
|
const accountDetails = accountLoader.use().value
|
||||||
|
|
||||||
const goBack = $(() => {
|
|
||||||
if (window.history.length > 1) {
|
|
||||||
window.history.back()
|
|
||||||
} else {
|
|
||||||
nav('/explore')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const fields = [
|
const fields = [
|
||||||
{
|
{
|
||||||
name: 'Joined',
|
name: 'Joined',
|
||||||
|
@ -73,14 +64,7 @@ export default component$(() => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<StickyHeader>
|
<StickyHeader withBackButton />
|
||||||
<div class="flex justify-between items-center xl:rounded-t header bg-wildebeest-700">
|
|
||||||
<button class="text-semi no-underline text-wildebeest-vibrant-400 bg-transparent p-4" onClick$={goBack}>
|
|
||||||
<i class="fa fa-chevron-left mr-2 w-3 inline-block" />
|
|
||||||
<span class="hover:underline">Back</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</StickyHeader>
|
|
||||||
<div class="relative mb-16">
|
<div class="relative mb-16">
|
||||||
<img
|
<img
|
||||||
src={accountDetails.header}
|
src={accountDetails.header}
|
||||||
|
|
|
@ -42,7 +42,7 @@ export default component$(() => {
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-col flex-1">
|
||||||
<StickyHeader>
|
<StickyHeader>
|
||||||
<h2 class="text-reg text-md m-0 p-4 flex bg-wildebeest-700 xl:rounded-t">
|
<h2 class="text-reg text-md m-0 p-4 flex bg-wildebeest-700">
|
||||||
<i class="fa fa-hashtag fa-fw mr-3 w-5 leading-tight inline-block" />
|
<i class="fa fa-hashtag fa-fw mr-3 w-5 leading-tight inline-block" />
|
||||||
<span>Explore</span>
|
<span>Explore</span>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
|
@ -4,7 +4,7 @@ test('Navigation to and view of an individual toot', async ({ page }) => {
|
||||||
await page.goto('http://127.0.0.1:8788/explore')
|
await page.goto('http://127.0.0.1:8788/explore')
|
||||||
await page.locator('article').filter({ hasText: 'Ken White' }).locator('i.fa-globe + span').click()
|
await page.locator('article').filter({ hasText: 'Ken White' }).locator('i.fa-globe + span').click()
|
||||||
|
|
||||||
const backButtonLocator = page.locator('a', { hasText: 'Back' })
|
const backButtonLocator = page.getByRole('button', { name: 'Back' })
|
||||||
await expect(backButtonLocator).toBeVisible()
|
await expect(backButtonLocator).toBeVisible()
|
||||||
|
|
||||||
const avatarLocator = page.locator('img[alt="Avatar of Ken White"]')
|
const avatarLocator = page.locator('img[alt="Avatar of Ken White"]')
|
||||||
|
@ -19,7 +19,7 @@ test('Navigation to and view of an individual toot', async ({ page }) => {
|
||||||
await expect(tootContentLocator).toBeVisible()
|
await expect(tootContentLocator).toBeVisible()
|
||||||
})
|
})
|
||||||
|
|
||||||
test('Navigation to and view of a reply toot', async ({ page }) => {
|
test("Navigation to and view of a toot's replies", async ({ page }) => {
|
||||||
await page.goto('http://127.0.0.1:8788/explore')
|
await page.goto('http://127.0.0.1:8788/explore')
|
||||||
|
|
||||||
await page
|
await page
|
||||||
|
@ -43,4 +43,19 @@ test('Navigation to and view of a reply toot', async ({ page }) => {
|
||||||
await expect(page.getByRole('link', { name: 'Avatar of Zach Weinersmith' })).toBeVisible()
|
await expect(page.getByRole('link', { name: 'Avatar of Zach Weinersmith' })).toBeVisible()
|
||||||
await expect(page.getByRole('link', { name: 'Zach Weinersmith', exact: true })).toBeVisible()
|
await expect(page.getByRole('link', { name: 'Zach Weinersmith', exact: true })).toBeVisible()
|
||||||
await expect(page.getByText('Yes we did!')).toBeVisible()
|
await expect(page.getByText('Yes we did!')).toBeVisible()
|
||||||
|
|
||||||
|
await page.getByRole('button', { name: 'Back' }).click()
|
||||||
|
|
||||||
|
await page
|
||||||
|
.locator('article')
|
||||||
|
.filter({ hasText: 'nixCraft' })
|
||||||
|
.filter({
|
||||||
|
hasText: 'Yes you guys did it!',
|
||||||
|
})
|
||||||
|
.locator('i.fa-globe + span')
|
||||||
|
.click()
|
||||||
|
|
||||||
|
await expect(page.getByRole('link', { name: 'Avatar of nixCraft' })).toBeVisible()
|
||||||
|
await expect(page.getByRole('link', { name: 'nixCraft 🐧', exact: true })).toBeVisible()
|
||||||
|
await expect(page.getByText('Yes you guys did it!')).toBeVisible()
|
||||||
})
|
})
|
||||||
|
|
Ładowanie…
Reference in New Issue