use more of a form layout - improve some sizes etc

IanGrainger · Mar 31, 2024 · 0460b64 · 0460b64
1 parent f1634a5
commit 0460b64
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 58 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -29,8 +29,13 @@ export const App: Component = () => {
     <div>
       <OptionsProvider>
         <Options />
-        <BiomeSelect signal={selectedBiomeSignal} />
-        <ResourcesSelect signal={selectedResourcesSignal} />
+        {/* <BiomeSelect signal={selectedBiomeSignal} /> */}
+        <ResourcesSelect
+          signal={selectedResourcesSignal}
+          biomeSignal={selectedBiomeSignal}
+        />
+        <BuildingSelect signal={selectedBuildingsSignal} />
+        <BuildingList showNamesAccr={selectedBuildingsSignal[0]} />
         <BlueprintSelect
           signal={selectedBlueprintsSignal}
           buildingsSignal={selectedBuildingsSignal}
@@ -40,9 +45,6 @@ export const App: Component = () => {
           highlightedBlueprintSignal={highlightedBlueprintSignal}
           buildingsSignal={selectedBuildingsSignal}
         />
-
-        <BuildingSelect signal={selectedBuildingsSignal} />
-        <BuildingList showNamesAccr={selectedBuildingsSignal[0]} />
         <GoodsList
           resourcesAccr={selectedResourcesSignal[0]}
           buildingsAccr={selectedBuildingsSignal[0]}

diff --git a/src/components/BiomeSelect.tsx b/src/components/BiomeSelect.tsx
@@ -15,9 +15,9 @@ export const BiomeSelect: Component<{ signal: Signal<string> }> = (props) => {
   };
 
   return (
-    <div class="flex flex-row">
+    <div class="flex flex-row" title="Reset resources to biome">
       <Select
-        placeholder="Set resources to biome..."
+        placeholder="🔁"
         class="biomeSelect"
         onChange={onChange}
         initialValue={initialValue()}

diff --git a/src/components/BlueprintList.tsx b/src/components/BlueprintList.tsx
@@ -22,7 +22,7 @@ export const BlueprintList: Component<{
 
   return (
     <>
-      <div class="flex flex-wrap">
+      <div class="flex flex-wrap justify-center">
         <For each={buildings}>
           {([buildingName, recipes]) => (
             <Show when={selectedBlueprints().includes(buildingName)}>
@@ -47,7 +47,9 @@ export const BlueprintList: Component<{
                     />
                   </Show>
                   <Show when={options.showBuildingNames}>
-                    <h2 class="text-xl text-green-700">{buildingName}</h2>
+                    <h2 class="text-xl font-bold text-gray-500">
+                      {buildingName}
+                    </h2>
                   </Show>
                 </div>
                 <ul class="list-none">
@@ -95,18 +97,20 @@ export const BlueprintList: Component<{
         </For>
       </div>
       <Show when={selectedBlueprints().length > 0}>
-        <button
-          onClick={() => {
-            setSelectedBuildings([
-              ...selectedBuildings(),
-              highlightedBlueprint(),
-            ]);
-            setSelectedBlueprints([]);
-            setHighlightedBlueprint('');
-          }}
-        >
-          ➕ Add to buildings
-        </button>
+        <div class="flex flex-row justify-center mb-6">
+          <button
+            onClick={() => {
+              setSelectedBuildings([
+                ...selectedBuildings(),
+                highlightedBlueprint(),
+              ]);
+              setSelectedBlueprints([]);
+              setHighlightedBlueprint('');
+            }}
+          >
+            ➕ Add to buildings
+          </button>
+        </div>
       </Show>
     </>
   );

diff --git a/src/components/BlueprintSelect.tsx b/src/components/BlueprintSelect.tsx
@@ -20,16 +20,32 @@ export const BlueprintSelect: Component<{
   });
 
   return (
-    <div class="flex flex-row">
-      <Select
-        placeholder="Select blueprints..."
-        class="blueprintList"
-        multiple
-        onChange={onChange}
-        initialValue={selectedValues()}
-        {...buildingOptions}
-      />
-      <button onClick={() => setSelectedValues([])}>❌</button>
+    <div class="sm:flex sm:items-center mb-6">
+      <div class="sm:w-1/6">
+        <label
+          class="block text-gray-500 font-bold sm:text-right mb-1 sm:mb-0 pr-4"
+          for="inline-full-name"
+        >
+          Blueprints
+        </label>
+      </div>
+      <div class="flex flex-row sm:w-5/6 items-center space-x-1">
+        {/* <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" value="Jane Doe"> */}
+        <Select
+          placeholder="Select blueprints..."
+          class="blueprintList"
+          multiple
+          onChange={onChange}
+          initialValue={selectedValues()}
+          {...buildingOptions}
+        />
+        <button
+          class="border rounded-sm px-2 h-9"
+          onClick={() => setSelectedValues([])}
+        >
+          ❌
+        </button>
+      </div>
     </div>
   );
 };
diff --git a/src/components/BuildingSelect.tsx b/src/components/BuildingSelect.tsx
@@ -17,16 +17,32 @@ export const BuildingSelect: Component<{ signal: Signal<string[]> }> = (
   });
 
   return (
-    <div class="flex flex-row">
-      <Select
-        placeholder="Select buildings..."
-        class="buildingList"
-        multiple
-        onChange={onChange}
-        initialValue={selectedValues()}
-        {...buildingOptions}
-      />
-      <button onClick={() => setSelectedValues([])}>❌</button>
+    <div class="sm:flex sm:items-center mb-6">
+      <div class="sm:w-1/6">
+        <label
+          class="block text-gray-500 font-bold sm:text-right mb-1 sm:mb-0 pr-4"
+          for="inline-full-name"
+        >
+          Buildings
+        </label>
+      </div>
+      <div class="flex flex-row sm:w-5/6 items-center space-x-1">
+        {/* <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" value="Jane Doe"> */}
+        <Select
+          placeholder="Select buildings..."
+          class="buildingList"
+          multiple
+          onChange={onChange}
+          initialValue={selectedValues()}
+          {...buildingOptions}
+        />
+        <button
+          class="border rounded-sm px-2 h-9"
+          onClick={() => setSelectedValues([])}
+        >
+          ❌
+        </button>
+      </div>
     </div>
   );
 };
diff --git a/src/components/GoodsList.tsx b/src/components/GoodsList.tsx
@@ -73,22 +73,55 @@ export const GoodsList: Component<{
 
   return (
     <>
-      <div class="p-2">
-        <h2 class="mb-2 text-xl text-red-700">Possible goods</h2>
+      <div class="sm:flex sm:items-center mb-6">
+        <div class="sm:w-1/6">
+          <label
+            class="block text-gray-500 font-bold sm:text-right mb-1 sm:mb-0 pr-4"
+            for="inline-full-name"
+          >
+            Goods from buildings
+          </label>
+        </div>
+        <ul class="flex flex-wrap sm:w-5/6">
+          <For each={currentGoods()}>
+            {(productName) => <GoodsListItem productName={productName} />}
+          </For>
+        </ul>
+      </div>
+
+      <Show when={justNewGoodsWithBlueprint().length > 0}>
+        <div class="sm:flex sm:items-center mb-6">
+          <div class="sm:w-1/6">
+            <label
+              class="block text-gray-500 font-bold sm:text-right mb-1 sm:mb-0 pr-4"
+              for="inline-full-name"
+            >
+              Goods from blueprint
+            </label>
+          </div>
+          <ul class="flex flex-wrap sm:w-5/6">
+            <For each={justNewGoodsWithBlueprint()}>
+              {(productName) => <GoodsListItem productName={productName} />}
+            </For>
+          </ul>
+        </div>
+      </Show>
+      {/* <div class="p-2">
+        <h2 class="mb-2 text-gray-500 font-bold">From buildings</h2>
         <ul class="flex flex-wrap">
           <For each={currentGoods()}>
             {(productName) => <GoodsListItem productName={productName} />}
           </For>
         </ul>
         <Show when={justNewGoodsWithBlueprint().length > 0}>
-          <h2 class="mb-2 text-xl text-red-700">With selected blueprint</h2>
+          <h2 class="mb-2 text-gray-500 font-bold">With blueprint</h2>
           <ul class="flex flex-wrap">
             <For each={justNewGoodsWithBlueprint()}>
               {(productName) => <GoodsListItem productName={productName} />}
             </For>
           </ul>
         </Show>
-      </div>
+      </div> */}
     </>
   );
 };
diff --git a/src/components/ResourcesSelect.tsx b/src/components/ResourcesSelect.tsx
@@ -1,10 +1,12 @@
 import { createOptions, Select } from '@thisbeyond/solid-select';
 import { Component, Signal } from 'solid-js';
 import resources from 'src/data/ResourcesList_Grouped.json';
+import { BiomeSelect } from './BiomeSelect';
 
-export const ResourcesSelect: Component<{ signal: Signal<string[]> }> = (
-  props
-) => {
+export const ResourcesSelect: Component<{
+  signal: Signal<string[]>;
+  biomeSignal: Signal<string>;
+}> = (props) => {
   const goods = resources.Goods;
   const resourceNames = goods.map((good) => good.Name);
   const [selectedValues, setSelectedValues] = props.signal;
@@ -18,16 +20,33 @@ export const ResourcesSelect: Component<{ signal: Signal<string[]> }> = (
   });
 
   return (
-    <div class="flex flex-row">
-      <Select
-        placeholder="Select resources..."
-        class="resourcesList"
-        multiple
-        onChange={onChange}
-        initialValue={selectedValues()}
-        {...resourcesOptions}
-      />
-      <button onClick={() => setSelectedValues([])}>❌</button>
+    <div class="sm:flex sm:items-center mb-6">
+      <div class="sm:w-1/6">
+        <label
+          class="block text-gray-500 font-bold sm:text-right mb-1 sm:mb-0 pr-4"
+          for="inline-full-name"
+        >
+          Resources
+        </label>
+      </div>
+      <div class="flex flex-row sm:w-5/6 items-center space-x-1">
+        <BiomeSelect signal={props.biomeSignal} />
+        {/* <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" value="Jane Doe"> */}
+        <Select
+          placeholder="Select resources..."
+          class="resourcesList"
+          multiple
+          onChange={onChange}
+          initialValue={selectedValues()}
+          {...resourcesOptions}
+        />
+        <button
+          class="border rounded-sm px-2 h-9"
+          onClick={() => setSelectedValues([])}
+        >
+          ❌
+        </button>
+      </div>
     </div>
   );
 };
diff --git a/src/index.css b/src/index.css
@@ -6,6 +6,13 @@
   background-color: white;
 }
 
+.biomeSelect .solid-select-control {
+  border: 1px solid lightgrey;
+  /* background-color: cornflowerblue; */
+  width: 38px;
+  height: 36px;
+  cursor: pointer;
+}
 /* .buildingList.solid-select-container {
   background-color: white;
 }