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): make cursor more pointer

Browse Source
This commit is contained in:
Ou 2024-10-18 03:02:42 +08:00
parent d4bd876437
commit c0d5fe6a2a
6 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,7 +41,7 @@ export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragg
<div
ref={ref}
className={clsx(
"flex flex-col h-500px rounded-2xl p-4",
"flex flex-col h-500px rounded-2xl p-4 cursor-default",
"bg-op-40 backdrop-blur-5 transition-opacity-300",
isDragged && "op-50",
`bg-${sources[id].color}`,
@ -98,7 +98,7 @@ function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
<>
<div className={clsx("flex justify-between mx-2 mt-0 mb-2 items-center")}>
<div className="flex gap-2 items-center">
<div
<a
className={clsx("w-8 h-8 rounded-full bg-cover")}
style={{
backgroundImage: `url(/icons/${id.split("-")[0]}.png)`,
@ -145,7 +145,7 @@ function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
defer
>
<div className={clsx("transition-opacity-500", isFreshFetching && "op-20")}>
{sources[id].type === "hottest" ? <NewsList query={query} /> : <NewsListTimeLine query={query} />}
{sources[id].type === "hottest" ? <NewsListHot query={query} /> : <NewsListTimeLine query={query} />}
</div>
</OverlayScrollbar>
</>
@ -168,26 +168,26 @@ function ExtraInfo({ item }: { item: NewsItem }) {
}
}
function NewsList({ query }: Query) {
function NewsListHot({ query }: Query) {
const items = query.data?.items
return (
<ol>
<>
{items?.map((item, i) => (
<li key={item.title} className="flex gap-2 items-center mb-2 items-stretch">
<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">
<span className={clsx("bg-neutral-400/10 min-w-6 flex justify-center items-center rounded-md text-sm")}>
{i + 1}
</span>
<a href={item.url} target="_blank" className="self-start line-height-none">
<span className="self-start line-height-none">
<span className="mr-2 text-base">
{item.title}
</span>
<span className="text-xs text-neutral-400/80 truncate align-middle">
<ExtraInfo item={item} />
</span>
</a>
</li>
</span>
</a>
))}
</ol>
</>
)
}
@ -201,21 +201,21 @@ function NewsListTimeLine({ query }: Query) {
return (
<ol className="relative border-s border-dash border-neutral-400/10">
{items?.map(item => (
<li key={item.title} className="flex gap-2 mb-2 ms-4">
<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")} />
<span className="flex flex-col">
<a href={item.url} target="_blank" className="flex flex-col pl-2 hover:bg-neutral-400/10 rounded-md w-full">
<span className="text-xs text-neutral-400/80 truncate align-middle">
<UpdatedTime item={item} />
</span>
<a href={item.url} target="_blank">
<span>
<span>
{item.title}
</span>
<span className="text-xs text-neutral-400/80 truncate align-middle">
<ExtraInfo item={item} />
</span>
</a>
</span>
</span>
</a>
</li>
))}
</ol>

6
src/components/column/index.tsx
View File

@ -18,7 +18,7 @@ export function Column({ id }: { id: ColumnID }) {
<>
<div className="w-full flex justify-center">
<span className={clsx([
"flex gap-2 mb-4 py-3 px-6 rounded-2xl bg-primary/1 shadow shadow-primary/20 hover:shadow-primary/50 transition-shadow duration-500",
"flex mb-4 p-3 rounded-2xl bg-primary/1 shadow shadow-primary/20 hover:shadow-primary/50 transition-shadow duration-500",
"md:(z-100 mb-6)",
])}
>
@ -28,8 +28,8 @@ export function Column({ id }: { id: ColumnID }) {
to="/c/$column"
params={{ column: columnId }}
className={clsx(
"text-sm",
id === columnId ? "color-primary font-bold" : "op-70 dark:op-90",
"text-sm px-2",
id === columnId ? "color-primary font-bold" : "op-70 dark:op-90 hover:(bg-primary/15 rounded-md)",
)}
>
{metadata[columnId].name}

15
src/components/footer.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Author, Homepage } from "@shared/consts"
export function Footer() {
return (
<>
<a href={`${Homepage}/LICENCE`} target="_blank">MIT LICENCE</a>
<span>
<span>NewsNow © 2024 By </span>
<a href={Author.url} target="_blank">
{Author.name}
</a>
</span>
</>
)
}

2
src/components/header.tsx
View File

@ -115,7 +115,7 @@ export function Header() {
</p>
</span>
</Link>
<a className="btn text-sm ml-1 font-mono">
<a target="_blank" className="btn text-sm ml-1 font-mono">
{`v${Version}`}
</a>
</span>

10
src/routes/__root.tsx
View File

@ -4,12 +4,12 @@ import { Outlet, createRootRouteWithContext } from "@tanstack/react-router"
import { TanStackRouterDevtools } from "@tanstack/router-devtools"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import type { QueryClient } from "@tanstack/react-query"
import { Author, Homepage } from "@shared/consts"
import clsx from "clsx"
import { Header } from "~/components/header"
import { useOnReload } from "~/hooks/useOnReload"
import { GlobalOverlayScrollbar } from "~/components/common/overlay-scrollbar"
import { useSync } from "~/hooks/useSync"
import { Footer } from "~/components/footer"
export const Route = createRootRouteWithContext<{
queryClient: QueryClient
@ -60,13 +60,7 @@ function RootComponent() {
<Outlet />
</main>
<footer className="py-6 flex flex-col items-center justify-center text-sm text-neutral-500 font-mono">
<a href={`${Homepage}/LICENCE`}>MIT LICENCE</a>
<span>
<span> © 2024 By </span>
<a href={Author.url}>
{Author.name}
</a>
</span>
<Footer />
</footer>
</GlobalOverlayScrollbar>
{import.meta.env.DEV && (

7
src/styles/globals.css
View File

@ -43,8 +43,7 @@ button:disabled {
}
.bg {
background-image: radial-gradient(ellipse 80% 80% at 50% -30%,
rgba(254, 94, 83, 0.3),
rgba(255, 255, 255, 0));
*, a, button {
cursor: default;
user-select: none;
}