Skip to content

Commit

Permalink
FEAT: mobile view of blink edit page
Browse files Browse the repository at this point in the history
  • Loading branch information
@anisharaz
anisharaz committed Aug 17, 2024
1 parent 74260b8 commit c6cacef
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 69 deletions.
134 changes: 71 additions & 63 deletions app/dashboard/blinks/[blinkid]/CreateBlinkForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,49 +154,56 @@ function CreateBlinkForm({
}

return (
<div className="flex flex-col gap-4">
<div className="sticky top-0 bg-white pb-4">
<div className="text-2xl font-bold underline underline-offset-4">
Mocked Preview
</div>
<div className="mt-2">
NOTE: Edit & Click add button to reflect change here
<div className="flex flex-col lg:gap-4 gap-2">
<div className="sticky top-0 backdrop-blur-sm bg-white/50 pb-4">
<div className="bg-white">
<div className="lg:text-2xl font-bold underline underline-offset-4">
Mocked Preview
</div>
<div className="text-sm bg-amber-200 mt-1 rounded-md p-[2px] lg:hidden">
Open In Desktop For Better View
</div>
<div className="my-2 text-xs lg:text-base">
NOTE: Edit & Click add button to reflect change here
</div>
</div>
<div className="border bg-[#202327] rounded-2xl border-sky-400 shadow-sky-400 shadow p-3 flex flex-col gap-3">
<div className="border bg-[#202327] rounded-2xl border-sky-400 shadow-sky-400 shadow lg:p-3 p-1 flex flex-col gap-3">
<div className="">
<div className="text-white text-lg">{mainHeading.title}</div>
<div className="text-gray-400">{mainHeading.description}</div>
<div className="text-white lg:text-lg">{mainHeading.title}</div>
<div className="text-gray-400 text-xs lg:text-base">
{mainHeading.description}
</div>
</div>
<div className="flex justify-around gap-3">
{blinkButtonElement?.map((e) => {
return (
<Button
key={e.id}
className="bg-sky-500 hover:bg-sky-600 h-10 rounded-full w-full text-white text-xl font-bold"
className="bg-sky-500 hover:bg-sky-600 lg:h-10 h-7 rounded-full w-full text-white lg:text-xl font-bold"
>
{e.button_label}
</Button>
);
})}
</div>
{blinkInputElement && (
<div className="flex rounded-full p-2 m-1 bg-[#202327] border border-gray-600 w-full h-16 items-center">
<div className="flex rounded-full p-2 m-1 bg-[#202327] border border-gray-600 w-full h-12 items-center">
<input
type="text"
className="w-full bg-transparent focus:border-red-300"
placeholder={blinkInputElement.input_label}
disabled
/>
<Button className="bg-gray-700/50 rounded-full p-6 text-gray-500 font-bold text-2xl hover:bg-sky-500 hover:text-white">
<Button className="bg-gray-700/50 rounded-full p-4 text-gray-500 font-bold text-xl hover:bg-sky-500 hover:text-white">
{blinkInputElement.input_button_value}
</Button>
</div>
)}
</div>
</div>
<form action="" className="flex flex-col gap-4">
<form action="" className="flex flex-col lg:gap-4 gap-1">
<div>
<div className="text-2xl underline underline-offset-4 ">
<div className="lg:text-2xl underline underline-offset-4 ">
Button Element
</div>
<div className="flex p-2 gap-2">
Expand All @@ -221,10 +228,10 @@ function CreateBlinkForm({
);
})}
</div>
<div className="flex gap-2 mb-2">
<div className="flex lg:gap-2 gap-1 lg:mb-2">
<div className="w-full md:w-1/2 ">
<input
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded lg:py-3 lg:px-4 px-2 py-1 leading-tight focus:outline-none focus:bg-white"
id="grid-first-name"
type="text"
placeholder="Button Label"
Expand All @@ -238,9 +245,9 @@ function CreateBlinkForm({
/>
</div>

<div className="w-full md:w-1/2 ">
<div className="w-full md:w-1/2 mb-2 ">
<input
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded lg:py-3 lg:px-4 px-2 py-1 leading-tight focus:outline-none focus:bg-white"
id="grid-first-name"
type="text"
placeholder="Button Value"
Expand Down Expand Up @@ -286,24 +293,14 @@ function CreateBlinkForm({
</Button>
</div>
<div>
<div className="text-2xl underline underline-offset-4 ">
<div className="lg:text-2xl underline underline-offset-4 ">
Input Area
</div>
<div className="flex gap-2 items-center py-2">
<button
className="bg-red-400 hover:bg-red-500 rounded-md p-2"
onClick={(e) => {
e.preventDefault();
setblinkInputElement(null);
}}
>
Remove Input Element
</button>
</div>
<div className="flex gap-2 mb-2">

<div className="flex gap-2 mb-2 mt-2">
<div className="w-full md:w-1/2 ">
<input
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded lg:py-3 lg:px-4 px-2 py-1 leading-tight focus:outline-none focus:bg-white"
id="grid-first-name"
type="text"
placeholder="Input Label"
Expand All @@ -317,7 +314,7 @@ function CreateBlinkForm({
</div>
<div className="w-full md:w-1/2 ">
<input
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded lg:py-3 lg:px-4 px-2 py-1 leading-tight focus:outline-none focus:bg-white"
id="grid-first-name"
type="text"
placeholder="Input Button Label"
Expand All @@ -331,31 +328,42 @@ function CreateBlinkForm({
</div>
</div>

<Button
onClick={(e) => {
e.preventDefault();
if (
!addInputElement.input_label ||
!addInputElement.input_button_value
) {
alert("Please fill the input fields");
return;
}
setblinkInputElement({
input_label: addInputElement.input_label,
input_button_value: addInputElement.input_button_value,
});
}}
>
Update Input
</Button>
<div className="flex gap-2 items-center lg:py-2">
<Button
onClick={(e) => {
e.preventDefault();
if (
!addInputElement.input_label ||
!addInputElement.input_button_value
) {
alert("Please fill the input fields");
return;
}
setblinkInputElement({
input_label: addInputElement.input_label,
input_button_value: addInputElement.input_button_value,
});
}}
>
Update Input
</Button>
<button
className="bg-red-400 hover:bg-red-500 rounded-md p-1"
onClick={(e) => {
e.preventDefault();
setblinkInputElement(null);
}}
>
Remove Input
</button>
</div>
</div>
<div>
<div className="text-2xl underline underline-offset-4 mb-2">
<div className="lg:text-2xl underline underline-offset-4 mb-2">
Blink Name
</div>
<input
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded lg:py-3 lg:px-4 px-2 py-1 leading-tight focus:outline-none focus:bg-white"
id="grid-first-name"
type="text"
placeholder="Name of Blink"
Expand All @@ -364,13 +372,13 @@ function CreateBlinkForm({
/>
</div>
<div>
<div className="text-2xl underline underline-offset-4 mb-2">
<div className="lg:text-2xl underline underline-offset-4 mb-2">
Main Heading
</div>
<div className="flex gap-2">
<div className="w-full md:w-1/2 ">
<input
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded lg:py-3 lg:px-4 px-2 py-1 leading-tight focus:outline-none focus:bg-white"
id="grid-first-name"
type="text"
placeholder="Title for Blink"
Expand All @@ -385,7 +393,7 @@ function CreateBlinkForm({
</div>
<div className="w-full md:w-1/2 ">
<input
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded lg:py-3 lg:px-4 px-2 py-1 leading-tight focus:outline-none focus:bg-white"
id="grid-first-name"
type="text"
placeholder="Description for Blink"
Expand All @@ -401,13 +409,13 @@ function CreateBlinkForm({
</div>
</div>
<div>
<div className="text-2xl underline underline-offset-4 mb-2">
<div className="lg:text-2xl underline underline-offset-4 mb-2">
Wallet Address <span className="text-red-500">*</span>
</div>
<div className="flex items-center gap-2">
<div className="w-full md:w-1/2">
<input
className={`appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white `}
className={`appearance-none block w-full bg-gray-200 text-gray-700 border rounded lg:py-3 lg:px-4 px-2 py-1 leading-tight focus:outline-none focus:bg-white `}
id="grid-first-name"
type="text"
placeholder="Wallet Address"
Expand All @@ -418,9 +426,9 @@ function CreateBlinkForm({
</div>
</div>
<div>
<div className="text-2xl underline underline-offset-4 mb-2">
<div className="lg:text-2xl underline underline-offset-4 lg:mb-2">
Blink Image{" "}
<span className="text-red-500 text-lg">
<span className="text-red-500 lg:text-lg">
* <span>(JPG Only)</span>
</span>
</div>
Expand All @@ -435,7 +443,7 @@ function CreateBlinkForm({
}
}}
accept=".jpg"
className="block w-full mt-5 text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
className="block w-full lg:mt-5 mt-2 text-sm lg:text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
/>
</div>
</div>
Expand Down Expand Up @@ -475,7 +483,7 @@ function CreateBlinkForm({
await handleSubmit();
setLoading(false);
}}
className="text-xl p-6"
className="lg:text-xl lg:p-6"
disabled={blinkButtonElement.length == 0 && blinkInputElement == null}
>
Update & Save
Expand Down
5 changes: 2 additions & 3 deletions app/dashboard/blinks/[blinkid]/createblink.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
.main {
/* .main {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
}
} */

.main-child-2 {
margin: auto;
width: 60%;
margin-top: 0;
}
6 changes: 3 additions & 3 deletions app/dashboard/blinks/[blinkid]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ async function CreateBlinkForm({ params }: { params: { blinkid: string } }) {
? `${process.env.NEXTAUTH_URL}/api/blink/${params.blinkid}`
: `${process.env.NEXTAUTH_URL}/api/createblinklive/${params.blinkid}`;
return (
<div className="main">
<div className="main-child-1 p-2">
<div className="lg:flex gap-5 justify-around">
<div className="main-child-1 p-2 w-full">
<CreateForm
blinkid={params.blinkid}
BlinkName={blinkData?.name as string}
Expand All @@ -29,7 +29,7 @@ async function CreateBlinkForm({ params }: { params: { blinkid: string } }) {
BlinkWalletAddr={blinkData?.walletaddress as string}
/>
</div>
<div className="main-child-2 sticky top-0 ">
<div className="main-child-2 sticky top-0 lg:w-3/5 w-full" style={{}}>
<div className="text-center text-3xl mb-3 underline underline-offset-4">
Current Blink
</div>
Expand Down

0 comments on commit c6cacef

Please sign in to comment.