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 { typeSafeObjectEntries, typeSafeObjectFromEntries } from "@shared/type.util"
import type { PrimitiveAtom } from "jotai" import type { PrimitiveAtom } from "jotai"
import { atom } 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 { verifyPrimitiveMetadata } from "@shared/verify"
import { sources } from "@shared/sources" import { sources } from "@shared/sources"
import type { Update } from "./types" import type { Update } from "./types"
@ -37,7 +37,7 @@ function createPrimitiveMetadataAtom(
return derivedAtom 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) { export function preprocessMetadata(target: PrimitiveMetadata) {
return { return {
data: { data: {

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

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

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

@ -50,7 +50,7 @@ export function Menu() {
id="dropdown-menu" id="dropdown-menu"
className={clsx([ className={clsx([
"absolute top-2rem right-0 z-99 w-200px", "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={{ initial={{
scale: 0.9, scale: 0.9,