Skip to content

Commit

Permalink
some ui changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@VijeshVS
VijeshVS committed Jul 23, 2024
1 parent c40eede commit c338671
Show file tree
Hide file tree
Showing 9 changed files with 43 additions and 46 deletions.
34 changes: 17 additions & 17 deletions app/app/(dashboard)/home/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,26 +45,26 @@ export default function HomePage() {
if(loading) return <Loading/>

return (
<div className="pt-8 pl-2 md:pl-4 w-full pr-4">
<div className="pt-8 pl-2 lg:pl-4 w-full pr-4">
<div>
<div className="flex flex-col md:flex-row justify-between">
<h1 className="text-2xl text-center md:text-left md:text-3xl font-bold ml-6">
<div className="flex flex-col lg:flex-row justify-between">
<h1 className="text-2xl text-center lg:text-left lg:text-3xl font-bold ml-6">
Your connections platform
</h1>
<div className="flex justify-center mt-2 md:mt-0">
<div className="flex justify-center mt-2 lg:mt-0">
<div className="flex drop-shadow-2 xl border-[0.5px] p-2 rounded-xl">
<Sparkles />
<h1 className="text-sm ml-3 mr-4">Get custom links</h1>
</div>
</div>
</div>
<div className="flex flex-col md:flex-row w-full h-fit md:h-36 rounded-xl mt-6 p-3">
<div className="ml-2 flex-1 drop-shadow-xl border-[1px] p-2 rounded-xl">
<div className="flex flex-col lg:flex-row w-full h-fit lg:h-36 rounded-xl mt-6 p-3">
<div className="ml-2 flex-1 drop-shadow-xl border-[1px] p-6 rounded-xl">
<div className="flex h-full">
<div className="flex-1 flex justify-center items-center">
<Link2 size="50px" />
</div>
<div className="flex-1 flex justify-center items-center flex-col py-2 md:py-0">
<div className="flex-1 flex justify-center items-center flex-col py-2 lg:py-0">
<h1 className="font-bold text-sm text-center">Make it short</h1>
<Link href="/app/links">
<Button
Expand All @@ -78,12 +78,12 @@ export default function HomePage() {
</div>
</div>
</div>
<div className="ml-2 flex-1 drop-shadow-xl border-[1px] p-2 rounded-xl mt-2 md:mt-0">
<div className="ml-2 flex-1 drop-shadow-xl border-[1px] p-6 rounded-xl mt-2 lg:mt-0">
<div className="flex h-full">
<div className="flex-1 flex justify-center items-center">
<ScanLineIcon size="50px" />
</div>
<div className="flex-1 flex justify-center items-center flex-col py-2 md:py-0">
<div className="flex-1 flex justify-center items-center flex-col py-2 lg:py-0">
<h1 className="font-bold text-sm text-center">
Create QR Codes
</h1>
Expand All @@ -99,12 +99,12 @@ export default function HomePage() {
</div>
</div>
</div>
<div className="flex-1 drop-shadow-xl border-[1px] p-2 rounded-xl ml-2 mt-2 md:mt-0">
<div className="flex-1 drop-shadow-xl border-[1px] p-6 rounded-xl ml-2 mt-2 lg:mt-0">
<div className="flex h-full">
<div className="flex-1 flex justify-center items-center">
<LineChart size="50px" />
</div>
<div className="flex-1 flex justify-center items-center flex-col py-2 md:py-0">
<div className="flex-1 flex justify-center items-center flex-col py-2 lg:py-0">
<h1 className="font-bold text-sm">View Analytics</h1>
<Button onClick={()=>{
if(linkId != -1){
Expand All @@ -126,10 +126,10 @@ export default function HomePage() {
</div>
</div>

<div className="flex ml-6 mr-3 mt-6 flex-col md:flex-row">
<div className="flex ml-6 mr-3 mt-6 flex-col lg:flex-row">
<div className="flex flex-col flex-1 shadow-md pt-4 pb-6 px-6 border-2 rounded-xl">
<div className="flex justify-between">
<h1 className="font-bold text-lg md:text-xl">
<h1 className="font-bold text-lg lg:text-xl">
Getting Started with EatMyUrl
</h1>
<div className="flex">
Expand All @@ -145,7 +145,7 @@ export default function HomePage() {
</div>
<h1 className="ml-2 ">Make a short link</h1>
</AccordionTrigger>
<AccordionContent className="flex px-6 md:flex-row flex-col">
<AccordionContent className="flex px-6 lg:flex-row flex-col">
<Link href="/app/links/create">
<Button size="sm" className="py-3 w-fit" variant="default">
<LinkIcon />
Expand All @@ -164,7 +164,7 @@ export default function HomePage() {
</div>
<h1 className="ml-2">Click it, scan it, or share it.</h1>
</AccordionTrigger>
<AccordionContent className="flex px-6 md:flex-row flex-col">
<AccordionContent className="flex px-6 lg:flex-row flex-col">
<Link href="/app/links">
<Button size="sm" className="py-3 w-fit" variant="default">
<LinkIcon />
Expand All @@ -175,7 +175,7 @@ export default function HomePage() {
<Button
size="sm"
variant="default"
className="md:ml-2 py-3 md:mt-0 mt-2 w-fit"
className="lg:ml-2 py-3 lg:mt-0 mt-2 w-fit"
>
<QrCode />
<h1 className="ml-1">View your QR codes</h1>
Expand Down Expand Up @@ -213,7 +213,7 @@ export default function HomePage() {
</AccordionItem>
</Accordion>
</div>
<div className="flex-1 flex flex-col border-2 rounded-xl p-6 shadow-md md:ml-12 mt-4 md:mt-0 justify-center h-fit">
<div className="flex-1 flex flex-col border-2 rounded-xl p-6 shadow-md lg:ml-12 mt-4 lg:mt-0 justify-center h-fit">
<h1 className="font-bold text-xl">
Custom ShortCodes
</h1>
Expand Down
4 changes: 2 additions & 2 deletions app/app/(dashboard)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ const Layout = ({children}:{
children : React.ReactNode
})=>{

return <div className="flex pb-4">
return <div className="flex">
<div className="md:block hidden">
<SideNavBar/>
</div>
<div className="md:ml-[150px] w-full mt-12 md:pb-0 pb-4">
<div className="md:ml-[150px] w-full mt-12 md:pb-0">
{children}
</div>
</div>
Expand Down
3 changes: 0 additions & 3 deletions app/app/(dashboard)/links/create/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
"use client";

import { LoadingSpinner } from "@/components/LoadingComponents/LoadingSpinner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
// import { Switch } from "@/components/ui/switch";
import { toast } from "@/components/ui/use-toast";
import { createLinkAction } from "@/lib/actions/createLinkAction";
import { HTTP_STATUS } from "@/lib/constants";
Expand Down Expand Up @@ -125,7 +123,6 @@ export default function CreatePage() {

<div className="mt-16 flex justify-between">
<div className="ml-4">
{/* {loading ? <LoadingSpinner size={32} /> : <div></div>} */}
</div>
<div className="">
<Button variant="ghost">Cancel</Button>
Expand Down
5 changes: 2 additions & 3 deletions app/app/(dashboard)/links/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { DatePickerWithRange } from "@/components/DialogComponents/DatePickerWithRange";
import React, { useEffect, useRef, useState } from "react";
import { FilterDialog } from "@/components/DialogComponents/FilterDialog";
import { LinkCard } from "@/components/CardComponents/LinkCard";

import { getLinks } from "@/lib/actions/getLinksAction";
Expand Down Expand Up @@ -121,9 +120,9 @@ export default function Page() {
}, [date, paginator]);

return (
<div ref={linksRef} className="pt-10 md:pl-6 pl-2 w-full pr-2">
<div ref={linksRef} className="pt-10 lg:pl-6 pl-2 w-full pr-2">
<h1 className="font-bold text-3xl ml-3">Links</h1>
<div className="flex mt-6 md:flex-row flex-col">
<div className="flex mt-6 lg:flex-row flex-col">
<div className="ml-2">
<DatePickerWithRange
date={date}
Expand Down
2 changes: 1 addition & 1 deletion app/app/(dashboard)/qrcodes/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export default function QRCodePage() {
}, [paginator]);

return (
<div ref={linksRef} className="pr-6 pl-4 md:pl-8 pt-8">
<div ref={linksRef} className="pr-6 pl-4 lg:pl-8 pt-8">
<Label className="text-3xl font-bold">QR Codes</Label>
{loading ? (
<Loading />
Expand Down
3 changes: 2 additions & 1 deletion app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@

@layer components{
.screen-full{
overflow-y: scroll;
overflow-y: auto;
height: 100vh;
scrollbar-width: none;
padding-bottom: 100px;
}
}
Expand Down
4 changes: 2 additions & 2 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,8 @@ export default function Home() {
/>
<div className="flex flex-row justify-center mt-24 px-4 pb-4">
<div className="flex flex-col items-center">
<Label className="text-3xl md:text-5xl font-bold">Short Links</Label>
<Label className="text-3xl md:text-5xl font-bold text-yellow-500 mt-4 text-center">
<Label className="text-3xl lg:text-5xl font-bold">Short Links</Label>
<Label className="text-3xl lg:text-5xl font-bold text-yellow-500 mt-4 text-center">
With SuperPowers
</Label>
<Label className="text-lg mt-5 text-center">
Expand Down
16 changes: 8 additions & 8 deletions components/CardComponents/LinkCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,15 @@ export function LinkCard({
return (
<div className="flex mt-6 p-6 flex-col rounded-xl border-[0.5px] shadow-md">
<div className="flex">
<div className="h-8 w-8 md:h-12 md:w-12 border-[0.5px] shadow-md rounded-full flex justify-center items-center">
<LinkIcon className="h-4 w-4 md:h-6 md:w-6" />
<div className="h-8 w-8 lg:h-12 lg:w-12 border-[0.5px] shadow-md rounded-full flex justify-center items-center">
<LinkIcon className="h-4 w-4 lg:h-6 lg:w-6" />
</div>
<div className="flex flex-col ml-6 w-full">
<div className="flex justify-between">
<h1 onClick={()=>router.push(`/app/links/${encodeId(link.id)}`)} className="text-lg md:w-[70%] w-full break-all font-bold hover:underline cursor-pointer">
<h1 onClick={()=>router.push(`/app/links/${encodeId(link.id)}`)} className="text-lg lg:w-[53%] w-full break-all font-bold hover:underline cursor-pointer">
{title}
</h1>
<div className="hidden md:block">
<div className="hidden lg:block">
<Button onClick={()=>{copyToClipboard(shortLink)}} variant="outline">
<Copy size={15} className="mr-2" />
Copy
Expand Down Expand Up @@ -85,7 +85,7 @@ export function LinkCard({
{link.long_url.length >= 10?<>{link.long_url.slice(0,30)}.....</>:<>{link.long_url}</>}
</h1>

<div className="flex mt-6 md:flex-row flex-col">
<div className="flex mt-6 lg:flex-row flex-col">
<div className="flex">
<BarChart2 size={20} />
<h1 className="text-sm ml-2 hover:underline cursor-pointer">
Expand All @@ -98,14 +98,14 @@ export function LinkCard({
</HoverCard>
</h1>
</div>
<div className="flex mt-2 md:mt-0">
<Calendar className="ml-0 md:ml-4 " size={20} />
<div className="flex mt-2 lg:mt-0">
<Calendar className="ml-0 lg:ml-4 " size={20} />
<h1 className="text-sm ml-2">{months[link.created_at.getMonth()]} {link.created_at.getDate()},{link.created_at.getFullYear()}</h1>
</div>
</div>
</div>
</div>
<div className="mt-8 ml-8 md:hidden">
<div className="mt-8 ml-8 lg:hidden">
<Button onClick={()=>{copyToClipboard(shortLink)}} variant="outline">
<Copy size={15} />
</Button>
Expand Down
18 changes: 9 additions & 9 deletions components/CardComponents/QRCodeCardComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,20 +52,20 @@ export function QRCodeCardComponent({ qrcode }: { qrcode: any }) {
}

return (
<div className="flex md:flex-row flex-col mt-8 p-6 rounded-xl border-[0.5px] shadow-md">
<div className="flex justify-center md:justify-start">
<div className="flex lg:flex-row flex-col mt-8 p-6 rounded-xl border-[0.5px] shadow-md">
<div className="flex justify-center lg:justify-start">
<div className="p-4 bg-white rounded-2xl">
<div ref={qrCodeRef}>
<QRCodeCanvas value={shortLink} size={140} />
</div>
</div>
</div>
<div className="flex flex-col ml-6 md:mt-0 mt-4 w-full">
<div className="flex flex-col ml-6 lg:mt-0 mt-4 w-full">
<div className="flex justify-between pr-8">
<Label onClick={()=>router.push(`/app/links/${encodeId(qrcode.id)}`)} className="text-2xl md:w-[90%] w-full break-all font-bold cursor-pointer hover:underline">
<Label onClick={()=>router.push(`/app/links/${encodeId(qrcode.id)}`)} className="text-2xl lg:w-[85%] w-full break-all font-bold cursor-pointer hover:underline">
{qrcode.title}
</Label>
<div className="hidden md:flex">
<div className="hidden lg:flex">
<DownloadQRDropDown downloadQRCode={downloadQRCode}>
<Button variant="outline">
<Download size={20} />
Expand All @@ -85,16 +85,16 @@ export function QRCodeCardComponent({ qrcode }: { qrcode: any }) {
{qrcode.long_url.length >= 10?<>{qrcode.long_url.slice(0,30)}.....</>:<>{qrcode.long_url}</>}
</Label>
</div>
<div className="flex mt-6 md:flex-row flex-col">
<div className="flex mt-6 lg:flex-row flex-col">
<div className="flex">
<Calendar size={20} />
<h1 className="text-sm ml-2">
{months[qrcode.created_at.getMonth()]}{" "}
{qrcode.created_at.getDate()},{qrcode.created_at.getFullYear()}
</h1>
</div>
<div className="flex mt-2 md:mt-0">
<LinkIcon className="ml-0 md:ml-4 " size={20} />
<div className="flex mt-2 lg:mt-0">
<LinkIcon className="ml-0 lg:ml-4 " size={20} />
<h1 onClick={()=>{
window.open(
shortLink,
Expand All @@ -105,7 +105,7 @@ export function QRCodeCardComponent({ qrcode }: { qrcode: any }) {
</h1>
</div>
</div>
<div className="flex md:hidden mt-6 justify-end pr-12">
<div className="flex lg:hidden mt-6 justify-end pr-12">
<DownloadQRDropDown downloadQRCode={downloadQRCode}>
<Button variant="outline">
<Download size={20} />
Expand Down

0 comments on commit c338671

Please sign in to comment.