desktop header, feed selector & page name in header
This commit is contained in:
parent
fdd8abc9fb
commit
b11482ede1
@ -2,22 +2,16 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.root-type > button {
|
||||
background: white;
|
||||
color: var(--bg-color);
|
||||
background: none;
|
||||
color: var(--font-color);
|
||||
font-size: 16px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 1000px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
border: 1px solid var(--gray-superdark);
|
||||
}
|
||||
|
||||
.light .root-type > button {
|
||||
color: var(--font-color);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
@ -57,7 +57,7 @@ export function TimelineRenderer(props: TimelineRendererProps) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="aspect-square bg-center bg-cover cursor-pointer"
|
||||
className="aspect-square bg-center bg-cover cursor-pointer hover:opacity-80"
|
||||
key={e.id}
|
||||
style={{ backgroundImage: `url(${proxy(images[0].content, 256)})` }}
|
||||
onClick={() => noteOnClick(e)}></div>
|
||||
|
@ -18,6 +18,8 @@ import { LogoHeader } from "./LogoHeader";
|
||||
import useLoginFeed from "@/Feed/LoginFeed";
|
||||
import ErrorBoundary from "@/Element/ErrorBoundary";
|
||||
import Footer from "@/Pages/Layout/Footer";
|
||||
import { RootTabs } from "@/Element/Feed/RootTabs";
|
||||
import classNames from "classnames";
|
||||
|
||||
export default function Index() {
|
||||
const location = useLocation();
|
||||
@ -45,10 +47,10 @@ export default function Index() {
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<div className="w-full max-w-screen-xl">
|
||||
{!shouldHideHeader && <Header />}
|
||||
<div className="flex flex-row w-full">
|
||||
<div className="flex flex-row">
|
||||
<NavSidebar />
|
||||
<div className="flex flex-1 flex-col overflow-x-hidden pb-footer-height md:pb-0">
|
||||
<div className="flex flex-1 flex-col pb-footer-height md:pb-0 w-full md:w-1/3">
|
||||
{!shouldHideHeader && <Header />}
|
||||
<ErrorBoundary>
|
||||
<Outlet />
|
||||
</ErrorBoundary>
|
||||
@ -65,10 +67,32 @@ export default function Index() {
|
||||
}
|
||||
|
||||
function Header() {
|
||||
const location = useLocation();
|
||||
const showRootTabs = location.pathname === "/";
|
||||
const pageName = location.pathname.split("/")[1];
|
||||
const scrollUp = useCallback(() => {
|
||||
window.scrollTo({ top: 0, behavior: "instant" });
|
||||
}, []);
|
||||
return (
|
||||
<header className="flex justify-between items-center self-stretch px-4 gap-6 sticky top-0 md:hidden z-10 bg-bg-color py-1">
|
||||
<LogoHeader showText={true} />
|
||||
<NotificationsHeader />
|
||||
<header
|
||||
className={classNames(
|
||||
{ "md:hidden": pageName === "messages" },
|
||||
"flex justify-between items-center self-stretch px-4 gap-6 sticky top-0 z-10 bg-bg-color py-1 md:bg-header md:bg-opacity-50 md:shadow-lg md:backdrop-blur-lg",
|
||||
)}>
|
||||
<div className="md:hidden">
|
||||
<LogoHeader showText={false} />
|
||||
</div>
|
||||
{showRootTabs && <RootTabs base="" />}
|
||||
{!showRootTabs && (
|
||||
<div
|
||||
onClick={scrollUp}
|
||||
className="capitalize cursor-pointer flex-1 text-center p-2 overflow-hidden whitespace-nowrap truncate">
|
||||
{pageName}
|
||||
</div>
|
||||
)}
|
||||
<div className="md:hidden">
|
||||
<NotificationsHeader />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
@ -97,12 +97,6 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="main-content p flex g12 items-center">
|
||||
<Icon name="bell" />
|
||||
<h3 className="my-0">
|
||||
<FormattedMessage defaultMessage="Notifications" id="NAidKb" />
|
||||
</h3>
|
||||
</div>
|
||||
<div className="main-content">
|
||||
<Suspense fallback={<PageSpinner />}>
|
||||
<NotificationGraph evs={myNotifications} />
|
||||
|
@ -16,7 +16,6 @@ import HashTagsPage from "@/Pages/HashTagsPage";
|
||||
import SuggestedProfiles from "@/Element/SuggestedProfiles";
|
||||
import { TaskList } from "@/Tasks/TaskList";
|
||||
import TimelineFollows from "@/Element/Feed/TimelineFollows";
|
||||
import { RootTabs } from "@/Element/Feed/RootTabs";
|
||||
import { DeckContext } from "@/Pages/DeckLayout";
|
||||
import { TopicsPage } from "./TopicsPage";
|
||||
import TrendingHashtags from "@/Element/Trending/TrendingHashtags";
|
||||
@ -33,9 +32,6 @@ export default function RootPage() {
|
||||
const code = getCurrentRefCode();
|
||||
return (
|
||||
<>
|
||||
<div className="main-content sm:px-4 sm:py-3">
|
||||
<RootTabs base="" />
|
||||
</div>
|
||||
<div className="main-content">
|
||||
<Outlet />
|
||||
</div>
|
||||
|
@ -95,9 +95,6 @@ const SearchPage = () => {
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="p flex flex-col g8">
|
||||
<h2>
|
||||
<FormattedMessage defaultMessage="Search" id="xmcVZ0" />
|
||||
</h2>
|
||||
<input
|
||||
type="text"
|
||||
className="w-max"
|
||||
|
@ -1,5 +1,4 @@
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { Outlet, RouteObject, useNavigate } from "react-router-dom";
|
||||
import { Outlet, RouteObject } from "react-router-dom";
|
||||
import SettingsIndex from "@/Pages/settings/Root";
|
||||
import Profile from "@/Pages/settings/Profile";
|
||||
import Relay from "@/Pages/settings/Relays";
|
||||
@ -12,19 +11,11 @@ import ExportKeys from "@/Pages/settings/Keys";
|
||||
import ModerationSettings from "@/Pages/settings/Moderation";
|
||||
import { CacheSettings } from "./settings/Cache";
|
||||
|
||||
import messages from "./messages";
|
||||
import { ReferralsPage } from "./settings/Referrals";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="main-content p">
|
||||
<h2 onClick={() => navigate("/settings")} className="pointer">
|
||||
<FormattedMessage {...messages.Settings} />
|
||||
</h2>
|
||||
</div>
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
|
@ -4,6 +4,7 @@
|
||||
|
||||
:root {
|
||||
--bg-color: #000;
|
||||
--header-bg-color: rgba(0, 0, 0, 0.3);
|
||||
--nearly-bg-color: #090909;
|
||||
--font-color: #fff;
|
||||
--font-secondary-color: #a7a7a7;
|
||||
@ -80,6 +81,7 @@ html {
|
||||
|
||||
html.light {
|
||||
--bg-color: #fff;
|
||||
--header-bg-color: rgba(255, 255, 255, 0.3);
|
||||
--nearly-bg-color: #f9f9f9;
|
||||
--font-color: #0f0f0f;
|
||||
--font-secondary-color: #5c6c92;
|
||||
|
@ -1406,9 +1406,6 @@
|
||||
"rT14Ow": {
|
||||
"defaultMessage": "Add Relays"
|
||||
},
|
||||
"rbrahO": {
|
||||
"defaultMessage": "Close"
|
||||
},
|
||||
"rfuMjE": {
|
||||
"defaultMessage": "(Default)"
|
||||
},
|
||||
@ -1466,9 +1463,6 @@
|
||||
"uc0din": {
|
||||
"defaultMessage": "Send sats splits to"
|
||||
},
|
||||
"ugyJnE": {
|
||||
"defaultMessage": "Sending notes and other stuff"
|
||||
},
|
||||
"un1nGw": {
|
||||
"defaultMessage": "{n} notes"
|
||||
},
|
||||
|
@ -463,7 +463,6 @@
|
||||
"r5srDR": "Enter wallet password",
|
||||
"rMgF34": "Back up now",
|
||||
"rT14Ow": "Add Relays",
|
||||
"rbrahO": "Close",
|
||||
"rfuMjE": "(Default)",
|
||||
"rmdsT4": "{n} days",
|
||||
"rx1i0i": "Short link",
|
||||
@ -483,7 +482,6 @@
|
||||
"uKqSN+": "Follows Feed",
|
||||
"uSV4Ti": "Reposts need to be manually confirmed",
|
||||
"uc0din": "Send sats splits to",
|
||||
"ugyJnE": "Sending notes and other stuff",
|
||||
"un1nGw": "{n} notes",
|
||||
"usAvMr": "Edit Profile",
|
||||
"v8lolG": "Start chat",
|
||||
|
@ -25,6 +25,9 @@ module.exports = {
|
||||
padding: {
|
||||
"footer-height": "calc(56px + env(safe-area-inset-bottom))",
|
||||
},
|
||||
backgroundColor: {
|
||||
header: "var(--header-bg-color)",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
Loading…
Reference in New Issue
Block a user