aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-01 19:59:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update shortcut frame

Browse Source
This commit is contained in:
Steven
2023-11-16 08:05:33 +08:00
parent 3da0e4720e
commit 0a62579814
6 changed files with 54 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/web/src/pages/CollectionDashboard.tsx
View File

@ -45,19 +45,6 @@ const CollectionDashboard: React.FC = () => {
return (
<>
<div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
<div className="w-full flex flex-row justify-start items-start mb-4">
<div className="bg-yellow-100 dark:bg-yellow-500 dark:opacity-70 py-2 px-3 rounded-full border dark:border-yellow-600 flex flex-row justify-start items-center cursor-pointer shadow">
<Icon.LibrarySquare className="w-5 h-auto opacity-60" />
<a
className="hover:underline hover:text-blue-600"
href="https://github.com/boojack/slash/blob/main/docs/getting-started/collections.md"
target="_blank"
>
<span className="mx-1 text-sm">Collection is in Beta. Learn more in docs</span>
<Icon.ExternalLink className="w-4 h-auto inline-block" />
</a>
</div>
</div>
<div className="w-full flex flex-row justify-between items-center mb-4">
<div>
<Input

30
frontend/web/src/pages/CollectionSpace.tsx
View File

@ -2,8 +2,9 @@ import { Divider } from "@mui/joy";
import classNames from "classnames";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { Link, useParams } from "react-router-dom";
import { useParams } from "react-router-dom";
import Icon from "@/components/Icon";
import ShortcutFrame from "@/components/ShortcutFrame";
import ShortcutView from "@/components/ShortcutView";
import useResponsiveWidth from "@/hooks/useResponsiveWidth";
import useCollectionStore from "@/stores/v1/collection";
@ -83,7 +84,7 @@ const CollectionSpace = () => {
return (
<ShortcutView
className={classNames(
"w-full py-2 cursor-pointer !px-2",
"w-full py-2 cursor-pointer sm:!px-2",
selectedShortcut?.id === shortcut.id
? "bg-gray-100 dark:bg-zinc-800"
: "sm:border-transparent dark:sm:border-transparent"
@ -100,30 +101,15 @@ const CollectionSpace = () => {
{sm && (
<div className="w-full h-full overflow-clip rounded-lg border dark:border-zinc-800 bg-white dark:bg-zinc-800">
{selectedShortcut ? (
<div className="w-full h-full flex flex-col justify-center items-center p-8">
<Link
className="w-72 max-w-full border dark:border-zinc-900 dark:bg-zinc-900 p-6 rounded-2xl shadow-xl dark:text-gray-400 hover:opacity-80"
to={`/s/${selectedShortcut.name}`}
target="_blank"
>
<Icon.Globe2Icon className="w-12 h-auto mb-1" strokeWidth={1} />
<p className="text-lg font-medium leading-8">{selectedShortcut.title || selectedShortcut.name}</p>
<p className="text-gray-500">{selectedShortcut.description}</p>
<Divider className="!my-2" />
<p className="text-gray-400 dark:text-gray-600 text-sm mt-2">
<span className="leading-4">Open this site in a new tab</span>
<Icon.ArrowUpRight className="inline-block ml-1 -mt-0.5 w-4 h-auto" />
</p>
</Link>
</div>
<ShortcutFrame key={selectedShortcut.id} shortcut={selectedShortcut} />
) : (
<div className="w-full h-full flex flex-col justify-center items-center p-8">
<div className="w-72 max-w-full border dark:border-zinc-900 dark:bg-zinc-900 dark:text-gray-400 p-6 rounded-2xl shadow-xl">
<Icon.AppWindow className="w-12 h-auto mb-2" strokeWidth={1} />
<div className="w-72 max-w-full border dark:border-zinc-900 dark:bg-zinc-900 dark:text-gray-400 p-6 pb-4 rounded-2xl shadow-xl">
<Icon.AppWindow className="w-12 h-auto mb-2 opacity-60" strokeWidth={1} />
<p className="text-lg font-medium">Click on a tab in the Sidebar to get started.</p>
<Divider className="!my-2" />
<p className="text-gray-400 dark:text-gray-600 text-sm mt-2">
Shared by <span className="italic font-medium">{creator.nickname}</span>
<p className="text-gray-400 dark:text-gray-600 text-sm mt-2 italic">
Shared by <span className="font-medium not-italic">{creator.nickname}</span>
</p>
</div>
</div>

2
frontend/web/src/pages/Home.tsx
View File

@ -63,7 +63,7 @@ const Home: React.FC = () => {
<div className="flex flex-row justify-end items-center">
<Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDrawer(true)}>
<Icon.Plus className="w-5 h-auto" />
<span className="hidden sm:block ml-0.5">{t("common.create")}</span>
<span className="ml-0.5">{t("common.create")}</span>
</Button>
</div>
</div>