mobile ux changes

danikova · Dec 3, 2023 · 29b0ffc · 29b0ffc
1 parent 1398dbd
commit 29b0ffc
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 62 deletions.
diff --git a/index.html b/index.html
@@ -3,10 +3,10 @@
 
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Event Horizon</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
       rel="stylesheet">
   </head>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,15 +1,9 @@
 import { useMemo } from "react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "./components/ui/tooltip";
 import { Helmet } from "react-helmet";
 import { useFormData } from "./lib/hooks";
+import { FloatingMenu } from "./components/floating-menu";
 import { Toaster } from "./components/ui/toaster";
-import { ModeToggle } from "./components/mode-toggle";
 import { MainContent } from "./components/main-content";
-import { SettingsToggle } from "./components/settings-toggle";
 import { BackgroundImage } from "./components/background-image";
 
 export default function App() {
@@ -20,27 +14,16 @@ export default function App() {
   );
 
   return (
-    <>
+    <div className="sm:h-[100lvh] sm:w-[100lvw] h-[100svh] w-[100svw] overflow-hidden">
       <Helmet>
         <title>{title}</title>
       </Helmet>
-      <BackgroundImage className="absolute top-0 left-0 h-[100vh] w-[100vw] overflow-hidden flex justify-center items-center opacity-40 z-[-1] blur-sm" />
-      <MainContent className="h-[100vh] w-[100vw] flex flex-col gap-y-10 justify-center items-center" />
-      <div className="absolute bottom-4 right-4 flex flex-col gap-y-4">
-        <Tooltip>
-          <TooltipTrigger>
-            <SettingsToggle />
-          </TooltipTrigger>
-          <TooltipContent side="left">Open settings modal</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger>
-            <ModeToggle />
-          </TooltipTrigger>
-          <TooltipContent side="left">Change color scheme</TooltipContent>
-        </Tooltip>
+      <div className="sm:h-[100lvh] sm:w-[100lvw] sm:rotate-0 sm:mt-0 h-[100svw] w-[100svh] rotate-[90deg] [transform-origin:bottom_left] [margin-top:-50svh]">
+        <BackgroundImage className="absolute top-0 left-0 h-[100%] w-[100%] overflow-hidden flex justify-center items-center opacity-40 z-[-1] blur-sm" />
+        <MainContent className="h-[100%] w-[100%] flex flex-col gap-y-10 justify-center items-center" />
       </div>
+      <FloatingMenu className="fixed bottom-4 right-4 flex flex-col gap-y-4" />
       <Toaster />
-    </>
+    </div>
   );
 }
diff --git a/src/components/floating-menu.tsx b/src/components/floating-menu.tsx
@@ -0,0 +1,23 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+import { ModeToggle } from "./mode-toggle";
+import { SettingsToggle } from "./settings-toggle";
+import { cn } from "../lib/utils";
+
+export function FloatingMenu({ className }: { className?: string }) {
+  return (
+    <div className={cn(className)}>
+      <Tooltip>
+        <TooltipTrigger>
+          <SettingsToggle />
+        </TooltipTrigger>
+        <TooltipContent side="left">Open settings modal</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger>
+          <ModeToggle />
+        </TooltipTrigger>
+        <TooltipContent side="left">Change color scheme</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/src/components/picture-upload.tsx b/src/components/picture-upload.tsx
@@ -40,7 +40,10 @@ export function PictureUpload({
       <DialogTrigger asChild>
         <Button variant="outline">{btnText}</Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent
+        autoFocus={false}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
         <DialogHeader>
           <DialogTitle>Picture upload</DialogTitle>
           <DialogDescription className="opacity-50">
@@ -53,7 +56,6 @@ export function PictureUpload({
           </DialogDescription>
         </DialogHeader>
         <Label>Picture</Label>
-        {/* <Input value="" type="file" /> */}
         <FileInput
           disabled={!!url.length}
           multiple={false}
@@ -67,6 +69,7 @@ export function PictureUpload({
         <div className="italic flex justify-center">OR</div>
         <Label>Url</Label>
         <Input
+          autoFocus={false}
           disabled={!!files.length}
           placeholder="Copy some urls"
           value={url}

diff --git a/src/components/settings-form.tsx b/src/components/settings-form.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+import { cn } from "@/lib/utils";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 import { Button } from "./ui/button";
@@ -10,16 +12,26 @@ import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group";
 export function SettingsForm({
   data,
   setDirtyData,
+  className,
 }: {
   data: FormData;
   setDirtyData: (data: Partial<FormData>) => void;
+  className?: string;
 }) {
   const { endDate, digits, title, imageId } = data;
+  const [isDateTimeOpen, setIsDateTimeOpen] = useState(false);
 
   return (
-    <div className="flex flex-col gap-4">
+    <div
+      className={cn(
+        isDateTimeOpen && "md:pb-0 pb-[300px]",
+        "flex flex-col gap-4",
+        className
+      )}
+    >
       <Label>Event title</Label>
       <Input
+        autoFocus={false}
         value={title}
         onChange={(e) => {
           setDirtyData({ title: e.target.value });
@@ -31,6 +43,9 @@ export function SettingsForm({
         setDate={(date) => {
           setDirtyData({ endDate: date });
         }}
+        popoverRootProps={{
+          onOpenChange: setIsDateTimeOpen,
+        }}
       />
       <Label>Toggle digits</Label>
       <ToggleGroup
@@ -57,7 +72,7 @@ export function SettingsForm({
         Background picture <span className="opacity-50">(imgur image id)</span>
       </Label>
       <div className="flex gap-x-4">
-        <Input value={imageId} readOnly={true} />
+        <Input autoFocus={false} value={imageId} readOnly={true} />
         <PictureUpload
           btnText={imageId ? "Replace" : "Upload"}
           onChange={(value) => {

diff --git a/src/components/settings-toggle.tsx b/src/components/settings-toggle.tsx
@@ -36,7 +36,10 @@ export function SettingsToggle() {
           <Settings2 className="h-[1.2rem] w-[1.2rem]" />
         </Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent
+        autoFocus={false}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
         <DialogHeader>
           <DialogTitle>Timer settings</DialogTitle>
           <DialogDescription className="opacity-50">

diff --git a/src/components/ui/datetime-picker.tsx b/src/components/ui/datetime-picker.tsx
@@ -1,21 +1,28 @@
 import * as React from "react";
+import { Label } from "./label";
+import { Input } from "./input";
 import { DateTime } from "luxon";
-import { Calendar as CalendarIcon } from "lucide-react";
-
+import { cn } from "@/lib/utils";
 import { Button } from "./button";
 import { Calendar } from "./calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-import { cn } from "@/lib/utils";
+import { Calendar as CalendarIcon } from "lucide-react";
 import { SelectSingleEventHandler } from "react-day-picker";
-import { Label } from "./label";
-import { Input } from "./input";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 interface DateTimePickerProps {
   date: DateTime;
   setDate: (date: DateTime) => void;
+  popoverRootProps?: React.ComponentPropsWithoutRef<
+    typeof PopoverPrimitive.Root
+  >;
 }
 
-export function DateTimePicker({ date, setDate }: DateTimePickerProps) {
+export function DateTimePicker({
+  date,
+  setDate,
+  popoverRootProps,
+}: DateTimePickerProps) {
   const [selectedDateTime, setSelectedDateTime] =
     React.useState<DateTime>(date);
 
@@ -45,6 +52,7 @@ export function DateTimePicker({ date, setDate }: DateTimePickerProps) {
       <div className="px-4 pt-0 pb-4">
         <Label>Time</Label>
         <Input
+          autoFocus={false}
           type="time"
           onChange={handleTimeChange}
           value={selectedDateTime.toFormat("HH:mm")}
@@ -55,7 +63,7 @@ export function DateTimePicker({ date, setDate }: DateTimePickerProps) {
   );
 
   return (
-    <Popover>
+    <Popover {...popoverRootProps}>
       <PopoverTrigger asChild className="z-10">
         <Button
           variant={"outline"}

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -26,8 +26,8 @@ const DialogOverlay = React.forwardRef<
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[100svh] overflow-auto",
         className
       )}
       {...props}
@@ -50,8 +50,8 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -64,8 +64,8 @@ const DialogHeader = ({
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
   className,
@@ -78,8 +78,8 @@ const DialogFooter = ({
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -93,8 +93,8 @@ const DialogTitle = React.forwardRef<
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -105,8 +105,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -119,4 +119,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};
diff --git a/src/main.tsx b/src/main.tsx
@@ -16,7 +16,7 @@ const router = createBrowserRouter([
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-      <TooltipProvider delayDuration={100}>
+      <TooltipProvider>
         <RouterProvider router={router} />
       </TooltipProvider>
     </ThemeProvider>

diff --git a/vite.config.ts b/vite.config.ts
@@ -10,4 +10,7 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  server: {
+    host: true,
+  },
 });