feat: improve mobile experience (#180)

avitorio · Feb 3, 2024 · 2a45807 · 2a45807
1 parent 61c35ff
commit 2a45807
Show file tree

Hide file tree

Showing 8 changed files with 238 additions and 198 deletions.
diff --git a/.changeset/nasty-mice-lie.md b/.changeset/nasty-mice-lie.md
@@ -0,0 +1,5 @@
+---
+'outstatic': minor
+---
+
+Editor now works on mobile (for the most part)
diff --git a/packages/outstatic/src/client/pages/collections.tsx b/packages/outstatic/src/client/pages/collections.tsx
@@ -147,7 +147,7 @@ export default function Collections() {
               </div>
             </Link>
           </div>
-          <div className="max-w-5xl w-full grid grid-cols-3 gap-6">
+          <div className="max-w-5xl w-full grid md:grid-cols-3 gap-6">
             {collections.map((collection) => (
               <div
                 key={collection}

diff --git a/packages/outstatic/src/components/AdminHeader/index.tsx b/packages/outstatic/src/components/AdminHeader/index.tsx
@@ -1,3 +1,4 @@
+import { Menu } from 'lucide-react'
 import { useState } from 'react'
 import { useOstSignOut } from '../../utils/auth/hooks'
 import Link from '../Link'
@@ -27,36 +28,13 @@ const AdminHeader = ({
           <button
             data-collapse-toggle="mobile-menu-2"
             type="button"
-            className="ml-1 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 md:hidden"
+            className="ml-1 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 lg:hidden"
             aria-controls="mobile-menu-2"
             aria-expanded="false"
             onClick={toggleSidebar}
           >
             <span className="sr-only">Open main menu</span>
-            <svg
-              className="h-6 w-6"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                clipRule="evenodd"
-              ></path>
-            </svg>
-            <svg
-              className="hidden h-6 w-6"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                clipRule="evenodd"
-              ></path>
-            </svg>
+            <Menu />
           </button>
           <Link href="/outstatic" aria-label="Outstatic">
             <div className="cursor-pointer flex items-center">

diff --git a/packages/outstatic/src/components/AdminLayout/index.tsx b/packages/outstatic/src/components/AdminLayout/index.tsx
@@ -2,10 +2,10 @@ import { ApolloError } from '@apollo/client'
 import Head from 'next/head'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
+import { Toaster } from 'sonner'
 import { useOstSession } from '../../utils/auth/hooks'
 import AdminHeader from '../AdminHeader'
 import Sidebar from '../Sidebar'
-import { Toaster } from 'sonner'
 
 export type AdminLayoutProps = {
   error?: string | ApolloError
@@ -48,9 +48,9 @@ export default function AdminLayout({
               status={status}
               toggleSidebar={toggleSidebar}
             />
-            <div className="flex grow flex-col-reverse justify-between md:flex-row">
+            <div className="flex md:grow flex-col-reverse justify-between md:flex-row">
               <Sidebar isOpen={openSidebar} />
-              <main className="w-auto flex-auto p-5 md:p-10 bg-white max-h-[calc(100vh-53px)] overflow-y-scroll scrollbar-hide">
+              <main className="w-auto flex-auto p-5 md:p-10 bg-white h-dvh max-h-[calc(100vh-128px)] md:max-h-[calc(100vh-53px)] overflow-y-scroll scrollbar-hide">
                 {error && (
                   <div className="mb-6 border border-red-500 p-2">
                     Something went wrong{' '}

diff --git a/packages/outstatic/src/components/DeleteDocumentButton/index.tsx b/packages/outstatic/src/components/DeleteDocumentButton/index.tsx
@@ -1,3 +1,4 @@
+import { Trash2 } from 'lucide-react'
 import { useContext, useState } from 'react'
 import { OutstaticContext } from '../../context'
 import {
@@ -103,15 +104,7 @@ const DeleteDocumentButton = ({
         title="Delete document"
       >
         <span className="sr-only">Delete document</span>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          width="24"
-          height="24"
-        >
-          <path fill="none" d="M0 0h24v24H0z" />
-          <path d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zm-9 3h2v6H9v-6zm4 0h2v6h-2v-6zM9 4v2h6V4H9z" />
-        </svg>
+        <Trash2 />
       </button>
       {showDeleteModal && (
         <Modal title="Delete Document" close={() => setShowDeleteModal(false)}>