gh_mirrors/newsnow
1
0
Fork 0
mirror of https://github.com/ourongxing/newsnow.git synced 2025-01-19 03:09:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): new timeline style

Browse Source
This commit is contained in:
Ou 2024-10-19 22:47:21 +08:00
parent 2b07f16514
commit edc3fa26f9
3 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/atoms/primitiveMetadataAtom.ts
View File

@ -2,7 +2,7 @@ import { metadata } from "@shared/metadata"
import { typeSafeObjectEntries, typeSafeObjectFromEntries } from "@shared/type.util"
import type { PrimitiveAtom } from "jotai"
import { atom } from "jotai"
import type { PrimitiveMetadata } from "@shared/types"
import type { ColumnID, PrimitiveMetadata, SourceID } from "@shared/types"
import { verifyPrimitiveMetadata } from "@shared/verify"
import { sources } from "@shared/sources"
import type { Update } from "./types"
@ -37,7 +37,7 @@ function createPrimitiveMetadataAtom(
return derivedAtom
}
const initialMetadata = typeSafeObjectFromEntries(typeSafeObjectEntries(metadata).map(([id, val]) => [id, val.sources]))
const initialMetadata = typeSafeObjectFromEntries(typeSafeObjectEntries(metadata).map(([id, val]) => [id, val.sources] as [ColumnID, SourceID[]]))
export function preprocessMetadata(target: PrimitiveMetadata) {
return {
data: {

30
src/components/column/card.tsx
View File

@ -179,7 +179,15 @@ function NewsListHot({ query }: Query) {
return (
<>
{items?.map((item, i) => (
<a href={item.url} target="_blank" key={item.title} className="flex gap-2 items-center mb-2 items-stretch hover:bg-neutral-400/10 rounded-md visited:(text-neutral-400)">
<a
href={item.url}
target="_blank"
key={item.id}
className={clsx(
"flex gap-2 items-center mb-2 items-stretch",
"hover:bg-neutral-400/10 rounded-md pr-1 visited:(text-neutral-400)",
)}
>
<span className={clsx("bg-neutral-400/10 min-w-6 flex justify-center items-center rounded-md text-sm")}>
{i + 1}
</span>
@ -200,22 +208,20 @@ function NewsListHot({ query }: Query) {
function NewsListTimeLine({ query }: Query) {
const items = query.data?.items
return (
<ol className="relative border-s border-dash border-neutral-400/10">
<ol className="border-s border-neutral-400/50 flex flex-col ml-1">
{items?.map(item => (
<li key={item.title} className="flex gap-2 mb-2 ms-2">
<div className={clsx("absolute w-2 h-2 bg-neutral-400/50 rounded-full ml-0.5 mt-1 -start-1.5")} />
<a href={item.url} target="_blank" className="flex flex-col pl-2 hover:bg-neutral-400/10 rounded-md w-full visited:(text-neutral-400/80)">
<li key={item.id} className="flex flex-col">
<span className="flex items-center gap-1 text-neutral-400/50 ml--1px">
<span className="">-</span>
<span className="text-xs text-neutral-400/80">
{item?.extra?.date && <NewsUpdatedTime date={item.extra.date} />}
</span>
<span>
<span>
{item.title}
</span>
<span className="text-xs text-neutral-400/80 truncate align-middle">
<ExtraInfo item={item} />
</span>
<span className="text-xs text-neutral-400/80">
<ExtraInfo item={item} />
</span>
</span>
<a className={clsx("ml-2 px-1 hover:bg-neutral-400/10 rounded-md visited:(text-neutral-400/80)")} href={item.url} target="_blank">
{item.title}
</a>
</li>
))}

2
src/components/header/menu.tsx
View File

@ -50,7 +50,7 @@ export function Menu() {
id="dropdown-menu"
className={clsx([
"absolute top-2rem right-0 z-99 w-200px",
"bg-primary p-1 backdrop-blur-5 bg-op-70! rounded-xl",
"bg-primary p-1px backdrop-blur-5 bg-op-70! rounded-lg",
])}
initial={{
scale: 0.9,