Skip to content

Commit

Permalink
#36 add: simple mobile editing
Browse files Browse the repository at this point in the history
  • Loading branch information
@NiklasBuchfink
NiklasBuchfink committed Mar 22, 2023
1 parent fc73544 commit 6c39492
Show file tree
Hide file tree
Showing 5 changed files with 174 additions and 69 deletions.
1 change: 0 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,5 +77,4 @@ All the others are used in CI or by those three main scripts, but you should onl

---


For more information, check out [the in-depth docs](./docs/README.md)
2 changes: 1 addition & 1 deletion src/client/components/Container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ interface ContainerProps {

const Container: FC<ContainerProps> = ({ children }) => {
return (
<div className="mx-auto flex min-h-screen w-full flex-col items-start justify-start px-2 sm:w-full sm:px-4 md:w-[750] lg:w-[1200px]">
<div className="mx-auto flex min-h-screen w-full flex-col items-start justify-start px-4 sm:w-full sm:px-4 md:w-[750] lg:w-[1200px]">
{children}
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions src/client/components/DashboardHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function DashboardHeader() {
const gradient = generateGradient(user?.firstName ? user.firstName : "Horst");

return (
<div className="mx-auto w-full px-2 sm:w-full sm:px-4 md:w-[750] lg:w-[1200px]">
<div className="mx-auto w-full px-4 sm:w-full sm:px-4 md:w-[750] lg:w-[1200px]">
<Disclosure as="div" className="relative w-full">
{({ open }) => (
<>
Expand Down Expand Up @@ -154,7 +154,7 @@ export default function DashboardHeader() {
</div>
</div>

<Disclosure.Panel className="lg:hidden">
<Disclosure.Panel className="md:hidden">
<div className="pt-4 pb-3">
<div className="flex items-center px-4">
{user.image && (
Expand All @@ -166,7 +166,7 @@ export default function DashboardHeader() {
/>
</div>
)}
<div className="ml-3">
<div className="ml-1">
<div className="text-base font-medium text-zinc-800">
{user.name}
</div>
Expand Down
225 changes: 166 additions & 59 deletions src/client/components/studio/Navigation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { Popover, Transition } from "@headlessui/react";
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
import { Bars2Icon, XMarkIcon } from "@heroicons/react/24/solid";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import clsx from "clsx";
import { Fragment } from "react";
import { toast } from "react-hot-toast";
import { useNavigate } from "react-router-dom";
import { useRecoilState, useRecoilValue } from "recoil";
Expand Down Expand Up @@ -71,70 +74,174 @@ export default function Navigation() {
];

return (
<TooltipPrimitive.Provider>
<div className="flex w-16 flex-col items-center overflow-y-auto border-r border-zinc-300 bg-white pt-5 pb-4 dark:border-zinc-600 dark:bg-zinc-900">
<div className="flex h-full flex-col">
<div className="px-2">
<button
onClick={() => navigate("/s")}
aria-label={"Back to all sites"}
className={clsx(
"cursor-pointer text-zinc-600 hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-700",
"group m-0 flex items-center justify-center rounded-md px-2 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:focus:ring-zinc-300"
)}
>
<ArrowLeftIcon
className={clsx(
"text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700",
"h-6 w-6 flex-shrink-0"
)}
aria-hidden="true"
/>
</button>
<>
<div className="absolute top-3 left-4 z-10 block sm:hidden">
<button
onClick={() => navigate("/s")}
aria-label={"Back to all sites"}
className={clsx(
"cursor-pointer text-zinc-600 hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-700",
"group m-0 flex items-center justify-center rounded-md px-2 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:focus:ring-zinc-300"
)}
>
<ArrowLeftIcon
className={clsx(
"text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700",
"h-6 w-6 flex-shrink-0"
)}
aria-hidden="true"
/>
</button>
</div>
<div className="absolute top-3 right-4 z-10 block sm:hidden">
<div className="w-full">
<div className="relative z-10 flex items-center md:hidden">
{/* Mobile menu button */}
</div>
<nav
className="flex h-full flex-col justify-center gap-4 px-2 pb-12"
aria-label="Sidebar"
>
{navigation.map((item) => (
<TooltipPrimitive.Root key={item.name}>
<TooltipPrimitive.Trigger asChild>
<button
key={item.name}
aria-label={item.name}
onClick={() => item.action()}
className={clsx(
"cursor-pointer dark:text-zinc-300 dark:hover:bg-zinc-700",
"group flex items-center rounded-md p-1 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:focus:ring-zinc-300",
item.name === "Add block"
? "border border-zinc-200 bg-zinc-800 text-zinc-100 hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:focus:ring-zinc-300 dark:focus:ring-offset-zinc-900"
: "text-zinc-600 hover:bg-zinc-100"
)}

<Popover className="relative">
{({ open }) => (
<>
<Popover.Button className="group m-0 flex cursor-pointer items-center justify-center rounded-md px-2 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700 dark:focus:ring-zinc-300">
<span className="sr-only">Open menu</span>
{open ? (
<XMarkIcon
className={clsx(
"text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700",
"h-6 w-6 flex-shrink-0"
)}
/>
) : (
<Bars2Icon
className={clsx(
"text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700",
"h-6 w-6 flex-shrink-0"
)}
/>
)}
</Popover.Button>

<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
as="div"
className="absolute right-0 z-10 mt-5 w-screen max-w-min rounded bg-white shadow-lg dark:bg-zinc-800 dark:shadow-none"
>
<item.icon aria-hidden="true" />
</button>
</TooltipPrimitive.Trigger>
<TooltipPrimitive.Content
sideOffset={4}
side="right"
{navigation.map(
(item) =>
item.name !== "Add block" && (
<Popover.Button
as="div"
key={item.name}
onClick={item.action}
className="block rounded-md py-2 px-3 text-base font-medium text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
>
{item.name}
</Popover.Button>
)
)}
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
</div>
<div className="absolute bottom-12 right-12 z-10 block sm:hidden">
{navigation.map(
(item) =>
item.name === "Add block" && (
<button
key={item.name}
aria-label={item.name}
onClick={() => item.action()}
className={clsx(
"cursor-pointer shadow-lg dark:text-zinc-300 dark:shadow-none dark:hover:bg-zinc-700",
"group flex items-center rounded-md p-1 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:focus:ring-zinc-300",
item.name === "Add block"
? "border border-zinc-200 bg-zinc-800 text-zinc-100 hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:focus:ring-zinc-300 dark:focus:ring-offset-zinc-900"
: "text-zinc-600 hover:bg-zinc-100"
)}
>
<item.icon aria-hidden="true" />
</button>
)
)}
</div>
<div className="hidden sm:flex">
<TooltipPrimitive.Provider>
<div className="flex w-16 flex-col items-center overflow-y-auto border-r border-zinc-300 bg-white pt-5 pb-4 dark:border-zinc-600 dark:bg-zinc-900">
<div className="flex h-full flex-col">
<div className="px-2">
<button
onClick={() => navigate("/s")}
aria-label={"Back to all sites"}
className={clsx(
"radix-side-top:animate-slide-down-fade",
"radix-side-right:animate-slide-left-fade",
"radix-side-bottom:animate-slide-up-fade",
"radix-side-left:animate-slide-right-fade",
"inline-flex items-center rounded-md px-2.5 py-2",
"z-10 bg-zinc-800 font-semibold hover:text-zinc-100"
"cursor-pointer text-zinc-600 hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-700",
"group m-0 flex items-center justify-center rounded-md px-2 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:focus:ring-zinc-300"
)}
>
<span className="block text-sm leading-none text-zinc-100">
{item.name}
</span>
</TooltipPrimitive.Content>
</TooltipPrimitive.Root>
))}
</nav>
</div>
<ArrowLeftIcon
className={clsx(
"text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700",
"h-6 w-6 flex-shrink-0"
)}
aria-hidden="true"
/>
</button>
</div>
<nav
className="flex h-full flex-col justify-center gap-4 px-2 pb-12"
aria-label="Sidebar"
>
{navigation.map((item) => (
<TooltipPrimitive.Root key={item.name}>
<TooltipPrimitive.Trigger asChild>
<button
key={item.name}
aria-label={item.name}
onClick={() => item.action()}
className={clsx(
"cursor-pointer dark:text-zinc-300 dark:hover:bg-zinc-700",
"group flex items-center rounded-md p-1 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:focus:ring-zinc-300",
item.name === "Add block"
? "border border-zinc-200 bg-zinc-800 text-zinc-100 hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:focus:ring-zinc-300 dark:focus:ring-offset-zinc-900"
: "text-zinc-600 hover:bg-zinc-100"
)}
>
<item.icon aria-hidden="true" />
</button>
</TooltipPrimitive.Trigger>
<TooltipPrimitive.Content
sideOffset={4}
side="right"
className={clsx(
"radix-side-top:animate-slide-down-fade",
"radix-side-right:animate-slide-left-fade",
"radix-side-bottom:animate-slide-up-fade",
"radix-side-left:animate-slide-right-fade",
"inline-flex items-center rounded-md px-2.5 py-2",
"z-10 bg-zinc-800 font-semibold hover:text-zinc-100"
)}
>
<span className="block text-sm leading-none text-zinc-100">
{item.name}
</span>
</TooltipPrimitive.Content>
</TooltipPrimitive.Root>
))}
</nav>
</div>
</div>
</TooltipPrimitive.Provider>
</div>
</TooltipPrimitive.Provider>
</>
);
}
9 changes: 4 additions & 5 deletions src/client/components/studio/StudioEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { PageHeader } from "../PageHeader";
import EmptyState from "./EmptyState";
import { useDropImage } from "./hooks/useDropImage";
import { useHandleLayoutChange } from "./hooks/useHandleLayoutChange";
import MobileEditor from "./MobileEditor";

const ResponsiveGridLayout = WidthProvider(Responsive);

Expand Down Expand Up @@ -135,10 +134,10 @@ const StudioEditor = () => {
<meta property="og:description" content={site.bio ? site.bio : ""} />
<meta property="og:url" content={getBaseUrl() + "/" + site.subdomain} />
</Head>
<div className="h-full w-full sm:hidden">
{/* <div className="h-full w-full sm:hidden">
<MobileEditor />
</div>
<div className="hidden h-full w-full sm:block">
</div> */}
<div className="block h-full w-full">
<div
{...getRootProps({
className: "h-full w-full",
Expand All @@ -147,7 +146,7 @@ const StudioEditor = () => {
})}
>
<div className="flex h-full flex-col justify-between overflow-x-hidden overflow-y-scroll bg-white @container dark:bg-zinc-900">
<div className="h-fit w-full max-w-[1200px] pb-24 sm:p-4 lg:mx-auto">
<div className="h-fit w-full max-w-[1200px] p-8 pb-24 sm:p-16 lg:mx-auto xl:p-4">
<div className="py-8">
<PageHeader />
</div>
Expand Down

0 comments on commit 6c39492

Please sign in to comment.