mirror/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-11-03 18:18:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): Fix and improve mobile display of submission form (#1291)

Browse Source 
* feat(web): Fix and improve mobile display of submission form

* fix(web): Run Biome checks and apply fixes

* Update web/src/components/icon-search.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Bjorn Lammers <bjorn@lammers.media>

---------

Signed-off-by: Bjorn Lammers <bjorn@lammers.media>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Bjorn Lammers
2025-04-26 22:56:39 +02:00
committed by GitHub
parent 09a30fd4fa
commit e7284241c9
3 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/header.tsx
View File

@@ -5,7 +5,7 @@ import { ThemeSwitcher } from "@/components/theme-switcher"
import { REPO_PATH } from "@/constants"
import { getIconsArray } from "@/lib/api"
import type { IconWithName } from "@/types/icons"
import { Github, Search } from "lucide-react"
import { Github, PlusCircle, Search } from "lucide-react"
import Link from "next/link"
import { useEffect, useState } from "react"
import { CommandMenu } from "./command-menu"
@@ -74,7 +74,20 @@ export function Header() {
</Button>
</div>
{/* Mobile Submit Button -> triggers IconSubmissionForm dialog */}
<div className="md:hidden">
<IconSubmissionForm
trigger={
<Button variant="ghost" size="icon" className="rounded-lg cursor-pointer transition-all duration-300 hover:ring-2 ">
<PlusCircle className="h-5 w-5 transition-all duration-300" />
<span className="sr-only">Submit icon(s)</span>
</Button>
}
/>
</div>
<div className="hidden md:flex items-center gap-2 md:gap-4">
{/* Desktop Submit Button */}
<IconSubmissionForm />
<TooltipProvider>
<Tooltip>

12
web/src/components/icon-search.tsx
View File

@@ -397,17 +397,19 @@ export function IconSearch({ icons }: IconSearchProps) {
</div>
{filteredIcons.length === 0 ? (
<div className="flex flex-col gap-8 py-12 max-w-2xl mx-auto items-center">
<div className="text-center">
<div className="flex flex-col gap-8 py-12 px-2 w-full max-w-full sm:max-w-2xl mx-auto items-center overflow-x-hidden">
<div className="text-center w-full">
<h2 className="text-3xl sm:text-5xl font-semibold">Icon not found</h2>
<p className="text-lg text-muted-foreground mt-2">Help us expand our collection</p>
</div>
<div className="flex flex-col gap-4 items-center w-full">
<IconSubmissionContent />
<div className="mt-4 flex items-center gap-2 justify-center">
<div id="icon-submission-content" className="w-full">
<IconSubmissionContent />
</div>
<div className="mt-4 flex flex-col sm:flex-row items-center gap-2 justify-center w-full">
<span className="text-sm text-muted-foreground">Can't submit it yourself?</span>
<Button
className="cursor-pointer"
className="cursor-pointer w-full sm:w-auto truncate whitespace-nowrap"
variant="outline"
size="sm"
onClick={() => {

28
web/src/components/icon-submission-form.tsx
View File

@@ -52,12 +52,12 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
className="w-full flex flex-col items-start gap-1 h-auto p-4 text-left cursor-pointer transition-all duration-300"
asChild
>
<div>
<div className="w-full">
<div className="flex w-full items-center justify-between">
<span className="font-medium transition-all duration-300">{template.name}</span>
<ExternalLink className="h-4 w-4 text-muted-foreground transition-all duration-300" />
<span className="font-medium transition-all duration-300 whitespace-normal text-wrap">{template.name}</span>
<ExternalLink className="h-4 w-4 text-muted-foreground transition-all duration-300 flex-shrink-0 ml-2" />
</div>
<span className="text-xs text-muted-foreground">{template.description}</span>
<span className="text-xs text-muted-foreground whitespace-normal text-wrap break-words">{template.description}</span>
</div>
</Button>
</Link>
@@ -66,22 +66,26 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
</div>
)
}
export function IconSubmissionForm() {
export function IconSubmissionForm({ trigger }: { trigger?: React.ReactNode }) {
const [open, setOpen] = useState(false)
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="outline" className="hidden md:inline-flex cursor-pointer transition-all duration-300">
<PlusCircle className="h-4 w-4 transition-all duration-300" /> Submit icon(s)
</Button>
</DialogTrigger>
<DialogContent className="md:max-w-4xl backdrop-blur-2xl bg-background">
{trigger ? (
<DialogTrigger asChild>{trigger}</DialogTrigger>
) : (
<DialogTrigger asChild>
<Button variant="outline" className="hidden md:inline-flex cursor-pointer transition-all duration-300 items-center gap-2">
<PlusCircle className="h-4 w-4 transition-all duration-300" /> Submit icon(s)
</Button>
</DialogTrigger>
)}
<DialogContent className="w-[calc(100%-2rem)] max-w-sm md:w-full md:max-w-4xl p-6 backdrop-blur-2xl bg-background flex flex-col gap-4">
<DialogHeader>
<DialogTitle>Submit an icon</DialogTitle>
<DialogDescription>Select an option below to submit or update an icon.</DialogDescription>
</DialogHeader>
<div className="mt-4">
<div className="overflow-y-auto max-h-[calc(85vh-10rem)] pr-2">
<IconSubmissionContent onClose={() => setOpen(false)} />
</div>
</DialogContent>