Skip to content

Commit 1871ef8

Browse files
MuaviyaImranMuaviyaImran
committed
Added Responsiveness
1 parent 2aeb7fa commit 1871ef8

File tree

7 files changed

+34
-25
lines changed

7 files changed

+34
-25
lines changed

‎components/BaseButton.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ const BaseButton = ({ title, onClick, ...children }) => {
22
return (
33
<div className="mx-auto my-3">
44
<button
5-
className="bg-primary w-fit hover:bg-secondary text-white hover:text-black font-bold py-3 px-5 rounded-md"
5+
className="bg-primary w-fit hover:bg-secondary text-white hover:text-black font-bold lg:py-3
6+
lg:px-5 md:px-4 md:py-2 py-1 px-3 rounded-md text-sm md:text-base lg:text-lg"
67
onClick={onClick}
78
>
89
{title}

‎components/InputForm.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,12 @@ export default function InputForm() {
9090
);
9191
else
9292
return (
93-
<div className="max-w-[1200px] mx-auto py-5 px-7 flex flex-col gap-5 h-[80vh] justify-center">
93+
<div className="max-w-[1200px] mx-auto lg:py-5 lg:px-7 px-6 py-3 flex flex-col gap-5 h-[80vh] justify-center">
9494
<div className="flex md:justify-between justify-center mt-32 md:items-end flex-col md:flex-row">
9595
<p className="font-extrabold mb-5 md:text-2xl text-xl lg:text-4xl">
9696
Let&apos;s Predict
9797
</p>
98-
<div className=" bg-white min-w-[230px] text-black p-3 rounded-lg">
98+
<div className=" bg-white md:min-w-[230px] min-w-[190px] text-black p-3 rounded-lg text-xs md:text-sm">
9999
<p className="flex justify-between">
100100
<strong>Minimum Temprature:</strong>
101101
<span>{minimumTemprature}</span>
@@ -114,14 +114,14 @@ export default function InputForm() {
114114
<strong>Function:</strong>
115115
<span className="capitalize">{functionEquation}</span>
116116
</p>
117-
<div className="flex justify-center my-2">
117+
<div className="flex justify-center md:my-2">
118118
<span onClick={resetForm} className="underline cursor-pointer">
119119
Reset
120120
</span>
121121
</div>
122122
</div>
123123
</div>
124-
<div className="flex flex-col md:flex-row gap-14">
124+
<div className="flex flex-col md:flex-row lg:gap-14 md:gap-10 gap-5">
125125
<div className="w-full">
126126
<RangeSliderContainer
127127
min={-2}
@@ -145,7 +145,7 @@ export default function InputForm() {
145145
/>
146146
</div>
147147
</div>
148-
<div className="flex gap-14 flex-col md:flex-row ">
148+
<div className="flex lg:gap-14 md:gap-10 gap-5 flex-col md:flex-row ">
149149
<div className="w-full">
150150
<RangeSliderContainer
151151
min={-2}

‎components/NavBar.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export default function NavBar() {
22
return (
33
<header className="w-screen">
44
<nav className="max-w-[1200px] mx-auto py-5">
5-
<div className="flex justify-center font-semibold text-xl lg:text-3xl items-center">
5+
<div className="flex justify-center font-semibold text-xl lg:text-3xl items-center">
66
Partial Differential Equation Solver
77
</div>
88
</nav>

‎components/Prediction.js

+14-14
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ export default function Prediction({ prediction, requestBody, setPrediction }) {
66
setPrediction(null);
77
};
88
return (
9-
<div className="max-w-[1200px] mx-auto py-5 px-7 flex flex-col gap-5 justify-center">
9+
<div className="max-w-[1200px] mx-auto lg:py-5 lg:px-7 px-5 py-3 flex flex-col gap-5 justify-center">
1010
<div className="text-right">
1111
<BaseButton onClick={rePredict} title="Repredict" />
1212
</div>
1313
<div class="relative w-full shadow-md sm:rounded-lg bg-white px-4">
14-
<table class="w-full text-sm text-left rtl:text-right text-gray-500 ">
14+
<table class="w-full text-sm text-left rtl:text-right text-gray-500 ">
1515
<tr>
1616
<th
1717
scope="col"
@@ -20,8 +20,8 @@ export default function Prediction({ prediction, requestBody, setPrediction }) {
2020
Prediction Table
2121
</th>
2222
</tr>
23-
<tbody>
24-
<tr class="bg-white flex gap-5">
23+
<tbody className="text-xs md:text-sm lg:text-base">
24+
<tr class="flex flex-col lg:flex-row lg:gap-5 md:gap-3">
2525
<div className="w-full border-b flex justify-between">
2626
<th scope="row" class="px-2 py-4 font-medium whitespace-nowrap">
2727
No of Layers
@@ -35,7 +35,7 @@ export default function Prediction({ prediction, requestBody, setPrediction }) {
3535
<td class="px-2 py-4 ">{prediction.num_neurons_per_layer}</td>
3636
</div>
3737
</tr>
38-
<tr class="bg-white gap-5 flex">
38+
<tr class="lg:gap-5 md:gap-3 flex flex-col lg:flex-row">
3939
<div className="w-full border-b flex justify-between">
4040
<th scope="row" class="px-2 py-4 font-medium whitespace-nowrap">
4141
Training Computation
@@ -59,7 +59,7 @@ export default function Prediction({ prediction, requestBody, setPrediction }) {
5959
</td>
6060
</div>
6161
</tr>
62-
<tr class="bg-white flex gap-5">
62+
<tr class="flex lg:gap-5 md:gap-3 flex-col lg:flex-row">
6363
<div className="w-full border-b flex justify-between">
6464
<th scope="row" class="px-2 py-4 font-medium whitespace-nowrap">
6565
Eikonal Identification
@@ -83,7 +83,7 @@ export default function Prediction({ prediction, requestBody, setPrediction }) {
8383
</td>
8484
</div>
8585
</tr>
86-
<tr class="bg-white flex gap-5">
86+
<tr class="flex lg:gap-5 md:gap-3 flex-col lg:flex-row">
8787
<div className="w-full border-b flex justify-between">
8888
<th scope="row" class="px-2 py-4 font-medium whitespace-nowrap">
8989
Mean Of Lambda
@@ -107,7 +107,7 @@ export default function Prediction({ prediction, requestBody, setPrediction }) {
107107
</td>
108108
</div>
109109
</tr>
110-
<tr class="bg-white flex gap-5">
110+
<tr class="flex lg:gap-5 md:gap-3 ">
111111
<div className="w-full border-b flex justify-between">
112112
<th scope="row" class="px-2 py-4 font-medium whitespace-nowrap">
113113
Xmax
@@ -121,7 +121,7 @@ export default function Prediction({ prediction, requestBody, setPrediction }) {
121121
<td class="px-2 py-4">{requestBody.lowerBound}</td>
122122
</div>
123123
</tr>
124-
<tr class="bg-white flex gap-5">
124+
<tr class="flex lg:gap-5 md:gap-3">
125125
<div className="w-full border-b flex justify-between">
126126
<th scope="row" class="px-2 py-4 font-medium whitespace-nowrap">
127127
Tmax
@@ -135,7 +135,7 @@ export default function Prediction({ prediction, requestBody, setPrediction }) {
135135
<td class="px-2 py-4">{requestBody.minimumTemprature}</td>
136136
</div>
137137
</tr>
138-
<tr class="bg-white flex gap-5">
138+
<tr class="flex lg:gap-5 md:gap-3 ">
139139
<div className="w-full border-b flex justify-between">
140140
<th scope="row" class="px-2 py-4 font-medium whitespace-nowrap">
141141
Lambda Error
@@ -154,23 +154,23 @@ export default function Prediction({ prediction, requestBody, setPrediction }) {
154154
</tbody>
155155
</table>
156156
</div>
157-
<div className="flex gap-3">
157+
<div className="flex gap-3 flex-col lg:flex-row">
158158
<Image
159-
className="w-1/2"
159+
className="md:w-1/2 w-full rounded-lg"
160160
src={prediction.solution_of_burgers.image}
161161
width={450}
162162
height={600}
163163
alt="Burger Solution"
164164
/>
165165
<Image
166-
className="w-1/2"
166+
className="md:w-1/2 w-full rounded-lg"
167167
src={prediction.solution_of_burgers.loss}
168168
width={450}
169169
height={600}
170170
alt="Burger Solution Loss"
171171
/>
172172
</div>
173-
<div className="flex justify-center">
173+
<div className="flex justify-center -mt-2 md:mt-0 w-full">
174174
<Image
175175
className="rounded-lg"
176176
src={prediction.collocation_points}

‎components/RangeSlider/RangeSliderContainer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ const RangeSliderContainer = ({
112112

113113
return (
114114
<div className="my-2">
115-
<p className="mb-2 flex gap-3 items-center text-sm ">
115+
<p className="lg:mb-2 md:mb-3 mb-4 flex gap-3 items-center md:text-sm text-xs">
116116
<span className="uppercase font-semibold">{title}</span>
117117
<span className="italic">( {range} )</span>
118118
</p>

‎pages/_document.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ import { Html, Head, Main, NextScript } from "next/document";
33
export default function Document() {
44
return (
55
<Html lang="en">
6-
<Head>
7-
<title>PDE - Solver</title>
8-
</Head>
6+
<Head />
97
<body>
108
<Main />
119
<NextScript />

‎pages/index.js

+10
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
import HeroParticles from "@/components/HeroParticles";
22
import NavBar from "@/components/NavBar";
33
import InputForm from "@/components/InputForm";
4+
import Head from "next/head";
5+
46
export default function Home() {
57
return (
68
<div className="overflow-x-hidden ">
9+
<Head>
10+
<title>PDE - Solver</title>
11+
<meta
12+
property="og:title"
13+
content="PDE - Solver an AI Tool"
14+
key="title"
15+
/>
16+
</Head>
717
<HeroParticles />
818
<NavBar />
919
<InputForm />

0 commit comments

Comments
 (0)