fix: small Mobile UI fixes

Keshav-writes-code · Sep 28, 2024 · 344f9e9 · 344f9e9
1 parent b51a162
commit 344f9e9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/src/components/NN_comps/NN_parameters.svelte b/src/components/NN_comps/NN_parameters.svelte
@@ -35,9 +35,9 @@
             .bias}</span
         >
         <span class="label-text-alt justify-self-end flex items-center gap-1">
-          <input type="text" placeholder="Type here" class=" text-center badge badge-neutral badge-lg w-[3.5rem]" bind:value={biasRangeMin} />
-          to
-          <input type="text" placeholder="Type here" class=" text-center badge badge-neutral badge-lg w-[3.5rem]" bind:value={biasRangeMax} />
+          <input type="text" placeholder="Type here" class=" text-center badge badge-neutral badge-lg sm:w-3.5rem w-2.5rem sm:px-2 px-0" bind:value={biasRangeMin} />
+          <span class="sm:block hidden" >to</span>
+          <input type="text" placeholder="Type here" class=" text-center badge badge-neutral badge-lg sm:w-3.5rem w-2.5rem sm:px-2 px-0" bind:value={biasRangeMax} />
         </span>
       </div>
       <input
@@ -95,9 +95,9 @@
               ].weights[i]}</span
             >
             <span class="label-text-alt justify-self-end gap-1 flex items-center ">
-              <input type="text" placeholder="Type here" class=" text-center badge badge-neutral badge-lg w-[3rem]" bind:value={wieghtRangeMin} />
-              to
-              <input type="text" placeholder="Type here" class=" text-center badge badge-neutral badge-lg w-[3rem]" bind:value={wieghtRangeMax} />
+              <input type="text" placeholder="Type here" class=" text-center badge badge-neutral badge-lg sm:w-3rem w-2.3rem sm:px-2 px-0" bind:value={wieghtRangeMin} />
+              <span class="sm:block hidden" >to</span>
+              <input type="text" placeholder="Type here" class=" text-center badge badge-neutral badge-lg sm:w-3rem w-2.3rem sm:px-2 px-0" bind:value={wieghtRangeMax} />
             </span>
           </div>
           <input

diff --git a/src/components/NN_comps/NN_specs.svelte b/src/components/NN_comps/NN_specs.svelte
@@ -36,7 +36,7 @@
 </script>
 
 <div
-  class="mx-auto w-max rounded-lg flex  gap-12 mb-4 *:flex *:flex-col *:justify-between *:h-full *:gap-2"
+  class="mx-auto w-max rounded-lg grid sm:grid-cols-3 grid-cols-2  sm:gap-12 gap-5 mb-4 *:flex *:flex-col *:justify-between *:h-full *:gap-2"
 >
   <div class="">
     <p class="text-gray-400 text-sm" > Hidden layers </p>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -15,17 +15,17 @@ import NN_IOgraph from '../components/NN_comps/NN_IOgraph.svelte';
 		<title>Astro</title>
 	</head>
 	<body class="w-full grid place-items-center" >
-		<main class="w-full grid place-items-center *:sm:px-10 *:px-5 py-10">
+		<main class="w-full grid place-items-center *:sm:px-10 *:px-5 sm:py-10 py-5">
 			<section
-			  class="w-full flex gap-20 xl:flex-row flex-col-reverse justify-between items-center"
+			  class="w-full flex sm:gap-20 gap-5 xl:flex-row flex-col-reverse justify-between items-center"
 			>
 			  <NN_parameters  client:visible/>
 			  <NN_IOgraph  client:visible/>
 			</section>
-			<section class=" w-full 2xl:max-w-[1530px] max-w-90vw mt-10">
-			<div class="divider max-w-50% mx-auto "></div>		  
-			<NN_specs client:visible/>
-			<NN_layers client:visible/>
+			<section class=" w-full 2xl:max-w-[1530px] max-w-90vw sm:mt-10 mt-2">
+        <div class="divider max-w-50% mx-auto "></div>		  
+        <NN_specs client:visible/>
+        <NN_layers client:visible/>
 			</section>
     </main>
 	</body>