Improve breadcrumb navigation behaviour

iaincollins · Sep 5, 2024 · 6c6dd93 · 6c6dd93
1 parent 1c56eef
commit 6c6dd93
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 14 deletions.
diff --git a/components/tab-options.js b/components/tab-options.js
diff --git a/components/tab-options/commodity-filter.js b/components/tab-options/commodity-filter.js
@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react'
+
+export default () => {
+  const [lastUpdatedFilter, setLastUpdatedFilter] = useState()
+  const [fleetCarrierFilter, setFleetCarrierFilter] = useState()
+  const [minimumAmountFilter, setMinimumAmountFilter] = useState()
+
+  useEffect(() => {
+    // window.localStorage.setItem('item', 'value')
+    // window.localStorage.removeItem('color-settings')
+    // window.localStorage.getItem('color-settings')
+  }, [])
+
+  return null
+
+  return (
+    <div className='tab-tab_options'>
+      <form>
+        <label>
+          Updated
+          <select name='selector'>
+            <option>In the last hour</option>
+            <option>Today</option>
+            <option>In the last week</option>
+            <option>In the last month</option>
+            <option>In the last 3 months</option>
+            <option>Anytime</option>
+          </select>
+        </label>
+
+        <label>
+          Fleet Carriers
+          <select name='selector'>
+            <option>Include</option>
+            <option>Exclude</option>
+            <option>Only</option>
+          </select>
+        </label>
+
+        <label>
+          Min. Quantity
+          <input name='text-input' type='type' size='6' placeholder='None' />
+        </label>
+      </form>
+    </div>
+  )
+}
diff --git a/components/tab-options/tab-options.js b/components/tab-options/tab-options.js
@@ -0,0 +1,26 @@
+export default function TabOptions() {
+  return (
+    <div className='tab-tab_options'>
+      <form>
+        <label>
+          <input name='check-input' type='checkbox' />
+          Checkbox Option
+        </label>
+
+        <label>
+          Text Option
+          <input name='text-input' type='type' size='10' />
+        </label>
+
+        <label>
+          Select Option
+          <select name='selector'>
+            <option>Option 1</option>
+            <option>Option 2</option>
+            <option>Option 3</option>
+          </select>
+        </label>
+      </form>
+    </div>
+  )
+}
diff --git a/css/components/breadcrumbs.css b/css/components/breadcrumbs.css
@@ -32,6 +32,7 @@
   text-transform: uppercase;
   font-family: 'Jura';
   font-weight: bold;
+  pointer-events: all;
 }
 
 .breadcrumbs li a {

diff --git a/css/components/tabs.css b/css/components/tabs.css
@@ -118,8 +118,30 @@
 .tab-tab_options {
   background: var(--color-primary);
   color: var(--color-text-inverted);
-  padding: .25rem 0.5rem;
+  padding: .5rem;
   font-family: "Jura", sans-serif;  
   font-weight: bold;
   font-size: 1rem;
+  overflow: auto;
+}
+
+.tab-tab_options form label {
+  margin-right: 1.5rem;
+}
+
+.tab-tab_options form input,
+.tab-tab_options form select {
+  background: var(--color-primary);
+  border-color: rgb(0,0,0, .25);
+  color: var(--color-text-inverted);
+  border-style: solid;
+  border-width: .1rem;
+  border-radius: 0.2rem;
+  padding: .25rem;
+  margin-left: .5rem;
+}
+
+.tab-tab_options form input[type="checkbox"] {
+  margin-left: 0;
+  margin-right: .5rem;
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ardent-www",
-  "version": "0.41.0",
+  "version": "0.41.1",
   "description": "Ardent Industry",
   "main": "index.js",
   "scripts": {

diff --git a/pages/commodity/[commodity-name]/index.js b/pages/commodity/[commodity-name]/index.js
@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
-import TabOptions from 'components/tab-options'
+import CommodityFilterTabOptions from 'components/tab-options/commodity-filter'
 import Layout from 'components/layout'
 import CommodityImportOrders from 'components/commodity-import-orders'
 import CommodityExportOrders from 'components/commodity-export-orders'
@@ -85,7 +85,9 @@ export default () => {
 
   return (
     <Layout loading={commodity === undefined || imports === undefined}>
-      <ul className='breadcrumbs fx__fade-in'>
+      <ul className='breadcrumbs fx__fade-in' onClick={(e) => {
+          if (e.target.tagName == 'LI') e.target.children[0].click()
+        }}>
         <li><Link href='/'>Home</Link></li>
         <li><Link href='/commodities'>Commodities</Link></li>
       </ul>
@@ -198,9 +200,7 @@ export default () => {
               <TabList>
                 <Tab>Importers</Tab>
                 <Tab>Exporters</Tab>
-                <TabOptions>
-                  Some tab options
-                </TabOptions>
+                <CommodityFilterTabOptions/>
               </TabList>
               <TabPanel>
                 {!imports && <div className='loading-bar loading-bar--tab' />}

diff --git a/pages/system/[system-name]/index.js b/pages/system/[system-name]/index.js
@@ -151,9 +151,11 @@ export default () => {
 
   return (
     <Layout loading={system === undefined}>
-      <ul className='breadcrumbs fx__fade-in'>
+        <ul className='breadcrumbs fx__fade-in' onClick={(e) => {
+          if (e.target.tagName == 'LI') e.target.children[0].click()
+        }}>
         <li><Link href='/'>Home</Link></li>
-        <li><Link href='/commodities'>Systems</Link></li>
+        <li><Link href='/'>Systems</Link></li>
       </ul>
       {system === null && <><h2>Error</h2><p className='clear'>System not found</p></>}
       {system &&