Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style: creation of header responsiveness #1

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

style: creation of header responsiveness #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ffea085
style: creation of header responsiveness
vitoropereira Aug 31, 2023
6f235c5
style: Creation of service page responsiveness
vitoropereira Aug 31, 2023
393e41d
style: creation of events page responsiveness and added @radix-ui/rea…
vitoropereira Aug 31, 2023
74e3d62
style: creation of events page responsiveness and added @radix-ui/rea…
vitoropereira Aug 31, 2023
8d0a20e
style: creation of monitoring page responsiveness
vitoropereira Aug 31, 2023
30af77e
style: creation of `settings page` responsiveness
vitoropereira Aug 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/web/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,5 @@ yarn-error.log*

# vercel
.vercel

.turbo
4 changes: 3 additions & 1 deletion apps/web/.prettierrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{
"plugins": ["prettier-plugin-tailwindcss"]
"plugins": [
"prettier-plugin-tailwindcss"
]
}
1 change: 1 addition & 0 deletions apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@hookform/resolvers": "3.3.0",
"@radix-ui/react-avatar": "1.0.3",
"@radix-ui/react-checkbox": "1.0.4",
"@radix-ui/react-collapsible": "^1.0.3",
"@radix-ui/react-dialog": "1.0.4",
"@radix-ui/react-dropdown-menu": "2.0.5",
"@radix-ui/react-icons": "1.3.0",
Expand Down
51 changes: 45 additions & 6 deletions apps/web/src/app/(app)/events/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ import {
CardTitle,
} from '@/components/ui/card'
import { Checkbox } from '@/components/ui/checkbox'
import {
Collapsible,
CollapsibleSubContent,
CollapsibleSubTrigger,
} from '@/components/ui/collapsible'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'
Expand All @@ -17,28 +22,28 @@ import Link from 'next/link'
export default async function Events() {
return (
<div className="space-y-8">
<div className="flex items-center justify-between">
<div className="flex flex-col items-center justify-between md:flex-row">
<div className="space-y-1">
<h1 className="text-3xl font-semibold">Events</h1>
<span className="block text-muted-foreground">
Manage events published or consumed by the services.
</span>
</div>

<div>
<Button asChild>
<div className="mt-3 w-full md:mt-0 md:w-28">
<Button className="flex items-center justify-center" asChild>
<Link href="/events/new">Add event</Link>
</Button>
</div>
</div>

<Separator />

<div className="grid grid-cols-[15rem_1fr] items-start gap-8">
<div className="grid grid-cols-1 items-start gap-8 md:grid-cols-[15rem_1fr]">
<nav className="flex flex-col gap-6">
<Input id="search" placeholder="Search events..." />
<Separator />
<div className="space-y-6">
<div className="hidden space-y-6 md:block">
<span className="block text-sm font-semibold">
Filter by services (7)
</span>
Expand Down Expand Up @@ -70,9 +75,43 @@ export default async function Events() {
</div>
</div>
</div>

<Collapsible className="group md:hidden">
<CollapsibleSubTrigger>
Filter by services (7)
</CollapsibleSubTrigger>
<CollapsibleSubContent>
<div className="ms-1 space-y-4">
<div className="flex items-center gap-2">
<Checkbox id="service-1" />
<Label htmlFor="service-1">Pluto</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-2" />
<Label htmlFor="service-2">Atlas</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-3" />
<Label htmlFor="service-3">Streaks</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-4" />
<Label htmlFor="service-4">Station</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-5" />
<Label htmlFor="service-5">Houston</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-6" />
<Label htmlFor="service-6">Jupiter</Label>
</div>
</div>
</CollapsibleSubContent>
</Collapsible>
</nav>

<div className="grid grid-cols-2 gap-3">
<div className="crig-cols-1 grid gap-3 md:grid-cols-2">
{Array.from({ length: 12 }).map((_, i) => {
return (
<Link
Expand Down
128 changes: 121 additions & 7 deletions apps/web/src/app/(app)/monitoring/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card'
import { Checkbox } from '@/components/ui/checkbox'
import {
Collapsible,
CollapsibleSubContent,
CollapsibleSubTrigger,
} from '@/components/ui/collapsible'

import { Label } from '@/components/ui/label'
import {
Select,
Expand All @@ -13,15 +18,13 @@ import { Separator } from '@/components/ui/separator'
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import { CubeIcon } from '@radix-ui/react-icons'
import { Split } from 'lucide-react'
import Link from 'next/link'

export default async function Monitoring() {
return (
Expand All @@ -35,7 +38,7 @@ export default async function Monitoring() {

<Separator />

<div className="grid grid-cols-[15rem_1fr] items-start gap-8">
<div className="grid grid-cols-1 items-start gap-8 md:grid-cols-[15rem_1fr]">
<nav className="flex flex-col gap-6">
<div className="space-y-2">
<Label htmlFor="timeline">Timeline</Label>
Expand All @@ -52,7 +55,7 @@ export default async function Monitoring() {
</div>

<Separator />
<div className="space-y-6">
<div className="hidden space-y-6 md:block">
<span className="block text-sm font-semibold">Status</span>

<div className="space-y-4">
Expand Down Expand Up @@ -103,8 +106,62 @@ export default async function Monitoring() {
</div>
</div>

<Collapsible className="group md:hidden">
<CollapsibleSubTrigger className="text-sm font-semibold">
Status
</CollapsibleSubTrigger>
<CollapsibleSubContent>
<div className="ms-1 space-y-4">
<div className="flex items-center gap-2">
<Checkbox id="service-1" />
<Label htmlFor="service-1" asChild>
<Badge
size="sm"
variant="secondary"
className="bg-emerald-400/20"
>
Success
</Badge>
</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-2" />
<Label htmlFor="service-1" asChild>
<Badge
size="sm"
variant="secondary"
className="bg-rose-400/20"
>
Error
</Badge>
</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-3" />
<Label htmlFor="service-1" asChild>
<Badge size="sm" variant="secondary">
Waiting
</Badge>
</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-3" />
<Label htmlFor="service-1" asChild>
<Badge
size="sm"
variant="secondary"
className="bg-amber-400/20"
>
Retrying
</Badge>
</Label>
</div>
</div>
</CollapsibleSubContent>
</Collapsible>

<Separator />
<div className="space-y-6">
<div className="hidden space-y-6 md:block">
<span className="block text-sm font-semibold">
Filter by services (7)
</span>
Expand Down Expand Up @@ -137,8 +194,43 @@ export default async function Monitoring() {
</div>
</div>

<Collapsible className="group md:hidden">
<CollapsibleSubTrigger className="text-sm font-semibold">
Filter by services (7)
</CollapsibleSubTrigger>
<CollapsibleSubContent>
<div className="ms-1 space-y-4">
<div className="flex items-center gap-2">
<Checkbox id="service-1" />
<Label htmlFor="service-1">Pluto</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-2" />
<Label htmlFor="service-2">Atlas</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-3" />
<Label htmlFor="service-3">Streaks</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-4" />
<Label htmlFor="service-4">Station</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-5" />
<Label htmlFor="service-5">Houston</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="service-6" />
<Label htmlFor="service-6">Jupiter</Label>
</div>
</div>
</CollapsibleSubContent>
</Collapsible>

<Separator />
<div className="space-y-6">

<div className="hidden space-y-6 md:block">
<span className="block text-sm font-semibold">
Filter by events (3)
</span>
Expand All @@ -158,6 +250,28 @@ export default async function Monitoring() {
</div>
</div>
</div>

<Collapsible className="group md:hidden">
<CollapsibleSubTrigger className="text-sm font-semibold">
Filter by events (3)
</CollapsibleSubTrigger>
<CollapsibleSubContent>
<div className="ms-1 space-y-4">
<div className="flex items-center gap-2">
<Checkbox id="event-1" />
<Label htmlFor="event-1">pluto.signature-created</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="event-2" />
<Label htmlFor="event-2">pluto.subscription-created</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="event-3" />
<Label htmlFor="event-3">pluto.subscription-renewed</Label>
</div>
</div>
</CollapsibleSubContent>
</Collapsible>
</nav>

<div className="">
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/(app)/services/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default async function Services() {

<Separator />

<div className="grid grid-cols-3 gap-3">
<div className="grid grid-cols-1 gap-3 md:grid-cols-3">
{Array.from({ length: 12 }).map((_, i) => {
return (
<Link href="/services/pluto" key={i} className="group">
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/(app)/settings/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Layout({ children }: { children: ReactNode }) {

<Separator />

<div className="grid grid-cols-[15rem_1fr] items-start gap-8">
<div className="grid grid-cols-1 items-start gap-8 md:grid-cols-[15rem_1fr]">
<SidebarNav />
{children}
</div>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/app/(app)/settings/profile-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,12 @@ export function ProfileForm({ user }: ProfileFormProps) {
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<Card>
<CardContent className="p-6">
<CardContent className="p-2 md:p-6">
<FormField
control={form.control}
name="avatar"
render={({ field }) => (
<div className="flex items-center gap-6">
<div className="flex items-center gap-4 md:gap-6">
<input
type="file"
className="sr-only"
Expand All @@ -85,7 +85,7 @@ export function ProfileForm({ user }: ProfileFormProps) {
className="h-16 w-16 rounded-full bg-primary/10"
/>
</label>
<div>
<div className="w-52 md:w-full">
<span className="text-lg font-medium">Your avatar</span>
<p className="text-sm text-muted-foreground">
Click on the avatar to upload a custom one from your
Expand Down
14 changes: 12 additions & 2 deletions apps/web/src/components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ import { Suspense } from 'react'
import { Skeleton } from './ui/skeleton'
import { NavLink } from './nav-link'
import { Notifications } from './notifications'
import { ToggleMenuHeader } from './toggle-menu'

export function Header() {
return (
<div className="flex h-16 items-center justify-between border-b px-6">
<div className="flex items-center gap-4">
<div className="hidden items-center gap-4 md:flex">
<Link href="/">
<Logo className="h-8 w-8" />
</Link>
Expand All @@ -31,7 +32,7 @@ export function Header() {
</nav>
</div>

<div className="flex items-center gap-4">
<div className="hidden items-center gap-4 md:flex">
<Button variant="outline" size="sm">
Feedback
</Button>
Expand All @@ -58,6 +59,15 @@ export function Header() {
<UserNav />
</Suspense>
</div>
<div className="flex w-full justify-between md:hidden">
<Link href="/">
<Logo className="h-8 w-8" />
</Link>
<div className="flex items-center justify-center gap-3 align-middle">
<Notifications />
<ToggleMenuHeader />
</div>
</div>
</div>
)
}
Loading