pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-10 23:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve spacing and column layout on mobile

Browse Source
This commit is contained in:
Milo Schwartz
2024-12-29 22:07:12 -05:00
parent 152a62a27b
commit 32ffb33d98
20 changed files with 400 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Credenza.tsx
View File

@@ -12,7 +12,7 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
DialogTrigger
} from "@/components/ui/dialog";
import {
Drawer,
@@ -22,7 +22,7 @@ import {
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
DrawerTrigger
} from "@/components/ui/drawer";
interface BaseProps {
@@ -43,6 +43,7 @@ const desktop = "(min-width: 768px)";
const Credenza = ({ children, ...props }: RootCredenzaProps) => {
const isDesktop = useMediaQuery(desktop);
// const isDesktop = true;
const Credenza = isDesktop ? Dialog : Drawer;
return <Credenza {...props}>{children}</Credenza>;
@@ -50,6 +51,8 @@ const Credenza = ({ children, ...props }: RootCredenzaProps) => {
const CredenzaTrigger = ({ className, children, ...props }: CredenzaProps) => {
const isDesktop = useMediaQuery(desktop);
// const isDesktop = true;
const CredenzaTrigger = isDesktop ? DialogTrigger : DrawerTrigger;
return (
@@ -61,10 +64,12 @@ const CredenzaTrigger = ({ className, children, ...props }: CredenzaProps) => {
const CredenzaClose = ({ className, children, ...props }: CredenzaProps) => {
const isDesktop = useMediaQuery(desktop);
// const isDesktop = true;
const CredenzaClose = isDesktop ? DialogClose : DrawerClose;
return (
<CredenzaClose className={className} {...props}>
<CredenzaClose className={cn("mb-3 md:mb-0", className)} {...props}>
{children}
</CredenzaClose>
);
@@ -72,6 +77,8 @@ const CredenzaClose = ({ className, children, ...props }: CredenzaProps) => {
const CredenzaContent = ({ className, children, ...props }: CredenzaProps) => {
const isDesktop = useMediaQuery(desktop);
// const isDesktop = true;
const CredenzaContent = isDesktop ? DialogContent : DrawerContent;
return (
@@ -87,6 +94,8 @@ const CredenzaDescription = ({
...props
}: CredenzaProps) => {
const isDesktop = useMediaQuery(desktop);
// const isDesktop = true;
const CredenzaDescription = isDesktop
? DialogDescription
: DrawerDescription;
@@ -100,6 +109,8 @@ const CredenzaDescription = ({
const CredenzaHeader = ({ className, children, ...props }: CredenzaProps) => {
const isDesktop = useMediaQuery(desktop);
// const isDesktop = true;
const CredenzaHeader = isDesktop ? DialogHeader : DrawerHeader;
return (
@@ -111,6 +122,8 @@ const CredenzaHeader = ({ className, children, ...props }: CredenzaProps) => {
const CredenzaTitle = ({ className, children, ...props }: CredenzaProps) => {
const isDesktop = useMediaQuery(desktop);
// const isDesktop = true;
const CredenzaTitle = isDesktop ? DialogTitle : DrawerTitle;
return (
@@ -126,10 +139,19 @@ const CredenzaBody = ({ className, children, ...props }: CredenzaProps) => {
{children}
</div>
);
// return (
// <div className={cn("px-0 mb-4", className)} {...props}>
// {children}
// </div>
// );
};
const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
const isDesktop = useMediaQuery(desktop);
// const isDesktop = true;
const CredenzaFooter = isDesktop ? DialogFooter : DrawerFooter;
return (
@@ -148,5 +170,5 @@ export {
CredenzaHeader,
CredenzaTitle,
CredenzaBody,
CredenzaFooter,
CredenzaFooter
};

23
src/components/Enable2FaForm.tsx
View File

@@ -38,7 +38,7 @@ import {
import { useToast } from "@app/hooks/useToast";
import { formatAxiosError } from "@app/lib/utils";
import CopyTextBox from "@app/components/CopyTextBox";
import { QRCodeSVG } from "qrcode.react";
import { QRCodeCanvas, QRCodeSVG } from "qrcode.react";
import { useUserContext } from "@app/hooks/useUserContext";
const enableSchema = z.object({
@@ -221,15 +221,10 @@ export default function Enable2FaForm({ open, setOpen }: Enable2FaProps) {
Scan this QR code with your authenticator app or
enter the secret key manually:
</p>
<div className="w-64 h-64 mx-auto flex items-center justify-center">
<QRCodeSVG value={secretUri} size={256} />
</div>
<div className="max-w-md mx-auto">
<CopyTextBox
text={secretKey}
wrapText={false}
/>
<div className="h-[250px] mx-auto flex items-center justify-center">
<QRCodeCanvas value={secretUri} size={200} />
</div>
<CopyTextBox text={secretKey} wrapText={false} />
<Form {...confirmForm}>
<form
@@ -288,10 +283,16 @@ export default function Enable2FaForm({ open, setOpen }: Enable2FaProps) {
<CredenzaFooter>
{(step === 1 || step === 2) && (
<Button
type="submit"
form="form"
type="button"
loading={loading}
disabled={loading}
onClick={() => {
if (step === 1) {
enableForm.handleSubmit(request2fa)();
} else {
confirmForm.handleSubmit(confirm2fa)();
}
}}
>
Submit
</Button>

4
src/components/SidebarSettings.tsx
View File

@@ -21,9 +21,9 @@ export function SidebarSettings({
limitWidth,
}: SideBarSettingsProps) {
return (
<div className="space-y-8 0 pb-16k">
<div className="space-y-8 pb-16k">
<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-32 lg:space-y-0">
<aside className="-mx-4 lg:w-1/5">
<aside className="lg:w-1/5">
<SidebarNav items={sidebarNavItems} disabled={disabled} />
</aside>
<div className={`flex-1 ${limitWidth ? "lg:max-w-2xl" : ""}`}>

13
src/components/sidebar-nav.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import React from "react";
import React, { useEffect } from "react";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation";
import { cn } from "@/lib/utils";
@@ -35,6 +35,12 @@ export function SidebarNav({
const resourceId = params.resourceId as string;
const userId = params.userId as string;
const [selectedValue, setSelectedValue] = React.useState<string>(getSelectedValue());
useEffect(() => {
setSelectedValue(getSelectedValue());
}, [usePathname()]);
const router = useRouter();
const handleSelectChange = (value: string) => {
@@ -58,9 +64,10 @@ export function SidebarNav({
return (
<div>
<div className="block lg:hidden px-4">
<div className="block lg:hidden">
<Select
defaultValue={getSelectedValue()}
defaultValue={selectedValue}
value={selectedValue}
onValueChange={handleSelectChange}
disabled={disabled}
>

2
src/components/ui/command.tsx
View File

@@ -46,7 +46,7 @@ const CommandInput = React.forwardRef<
<CommandPrimitive.Input
ref={ref}
className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
"flex h-11 w-full rounded-md bg-transparent py-3 text-base md:text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}

2
src/components/ui/dialog.tsx
View File

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}

2
src/components/ui/input-otp.tsx
View File

@@ -41,7 +41,7 @@ const InputOTPSlot = React.forwardRef<
<div
ref={ref}
className={cn(
"relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
"relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-base md:text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
isActive && "z-10 ring-2 ring-ring ring-offset-background",
className
)}

4
src/components/ui/input.tsx
View File

@@ -15,7 +15,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={showPassword ? "text" : "password"}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
@@ -39,7 +39,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}

2
src/components/ui/select.tsx
View File

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className
)}
{...props}