Improve filtering UI, add System Map

iaincollins · Oct 10, 2024 · 7f8782e · 7f8782e
1 parent 6a55fa8
commit 7f8782e
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 40 deletions.
diff --git a/components/about.js b/components/about.js
@@ -4,7 +4,7 @@ import Package from 'package.json'
 
 import { API_BASE_URL } from 'lib/consts'
 
-export default ({toggle}) => {
+export default ({ toggle }) => {
   const [stats, setStats] = useState()
   const [version, setVersion] = useState()
 
@@ -66,7 +66,7 @@ export default ({toggle}) => {
       </p>
       <h3>Downloads</h3>
       <p className='clear'>
-        Source code and data <Link href='/downloads'  onClick={() => toggle && toggle(false)}>available for download</Link>.
+        Source code and data <Link href='/downloads' onClick={() => toggle && toggle(false)}>available for download</Link>.
       </p>
       <h3>Legal</h3>
       <p className='clear'>

diff --git a/components/tab-options/commodities.js b/components/tab-options/commodities.js
@@ -105,7 +105,7 @@ export default ({ disabled = false }) => {
               window.localStorage.setItem('minVolumeFilter', parseInt(e.target.value))
             }}
           >
-            <option value='1'>Any amount</option>
+            <option value='1'>Any quantity</option>
             <option value='100'>&gt; 100 T</option>
             <option value='1000'>&gt; 1,000 T</option>
             <option value='10000'>&gt; 10,000 T</option>
@@ -122,7 +122,7 @@ export default ({ disabled = false }) => {
             autoComplete='off'
             defaultValue={locationFilter}
             previous-value={locationFilter}
-            size={15}
+            size={12}
             onBlur={async (e) => {
               const value = e.target.value.replace(/\u200B/g, '').trim()
               if (e.target.value === ZERO_WIDTH_SPACE) {
@@ -210,10 +210,8 @@ export default ({ disabled = false }) => {
           >
             <option value={COMMODITY_FILTER_DISTANCE_DEFAULT}>Any distance</option>
             <option value='1'>In system</option>
-            <option value='25'>&lt; 25 ly</option>
             <option value='50'>&lt; 50 ly</option>
             <option value='100'>&lt; 100 ly</option>
-            <option value='250'>&lt; 250 ly</option>
             <option value='500'>&lt; 500 ly</option>
             <option value='1000'>&lt; 1,000 ly</option>
             <option value='10000'>&lt; 10,000 ly</option>
@@ -229,7 +227,7 @@ export default ({ disabled = false }) => {
           ? (
             <button
               disabled={disabled}
-              style={{ position: 'absolute', top: '.5rem', right: '.5rem' }}
+              style={{ position: 'absolute', top: '.25rem', right: '.25rem' }}
               onClick={() => {
                 document.getElementById('location').value = ''
                 setLastUpdatedFilter(COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT)

diff --git a/css/components/breadcrumbs.css b/css/components/breadcrumbs.css
@@ -9,20 +9,6 @@
   white-space: nowrap;
 }
 
-.breadcrumbs::after {
-  position: absolute;
-  content: '';
-  display: inline-block;
-  height: 1.2rem;
-  width: 1.2rem;
-  margin-top: .24rem;
-  margin-left: -.59rem;
-  z-index: -3;
-  transform: rotate(45deg);
-  background-color: var(--color-primary);
-  color: var(--color-text-inverted);
-}
-
 .breadcrumbs li {
   padding: .25rem 0 .25rem 1.5rem;
   position: relative;
@@ -43,7 +29,8 @@
   border: none !important;
   position: relative;
   left: 0.5rem;
-  z-index: 1;
+  z-index: 2;
+  filter: none !important;
 }
 
 .breadcrumbs li .icon {
@@ -70,10 +57,9 @@
 
 .breadcrumbs li:last-child a {
   color: var(--color-text-inverted);
-  opacity: .8;
 }
 
-.breadcrumbs li:not(:first-child)::after {
+.breadcrumbs li:not(:first-child):after {
   position: absolute;
   content: '';
   display: inline-block;
@@ -84,7 +70,7 @@
   background-color: var(--color-primary-darker);
 }
 
-.breadcrumbs li:not(:first-child)::before {
+.breadcrumbs li:not(:first-child):before {
   position: absolute;
   content: '';
   display: inline-block;
@@ -97,4 +83,17 @@
   background-color: var(--color-primary-darker);
   border-top: .1rem solid rgba(0, 0, 0, .5);
   border-right: .1rem solid rgba(0, 0, 0, .5);
+  z-index: 1;
+}
+
+.breadcrumbs li:last-child a:after {
+  position: absolute;
+  content: '';
+  display: inline-block;
+  height: 1.2rem;
+  width: 1.2rem;
+  margin-left: -.35rem;
+  z-index: -1;
+  transform: rotate(45.5deg);
+  background-color: var(--color-primary);
 }
diff --git a/css/components/system-map.css b/css/components/system-map.css
@@ -0,0 +1,83 @@
+.system-map {
+  background-color: rgba(0,0,0,.25);
+  height: 30rem;
+  width: calc(100% - 2rem);
+  display: block;
+  clip-path: polygon(0 0, calc(100% - 2.00rem) 0, 100% 2.00rem, 100% 100%, 2.00rem 100%, 0 calc(100% - 2.00rem));
+  padding: .5rem;
+  border-radius: .25rem;
+  overflow: hidden;
+  position: relative;
+  top: -.25rem;
+  margin: .5rem;
+  margin-bottom: 1rem;
+  zoom: 0.5;
+  font-size: 2rem;
+  line-height: 2rem;
+  background: linear-gradient(rgba(0,0,0,0), rgba(255, 255, 255, .1));
+}
+
+.system-map:after {
+  position: absolute;
+  z-index: 100;
+  content: "";
+  inset: 0;
+  background: var(--color-primary-darker);
+  clip-path: polygon(0 0, calc(100% - 2.00rem) 0, 100% 2.00rem, 100% 100%, 2.00rem 100%, 0 calc(100% - 2.00rem), 0 0, .25rem .25rem, .25rem calc(100% - 2.00rem - 0.10rem), calc(2.00rem + 0.10rem) calc(100% - .25rem), calc(100% - .25rem) calc(100% - .25rem), calc(100% - .25rem) calc(2.00rem + 0.10rem), calc(100% - 2.00rem - 0.10rem) .25rem, .25rem .25rem);
+  pointer-events: none;
+}
+
+.system-map__point {
+  position: absolute;
+}
+
+.system-map__point:before {
+  position: absolute;
+  top: -.25rem;
+  left: -.25rem;
+  height: .5rem;
+  width: .5rem;
+  border-radius: 1rem;
+  background: white;
+  content: '';
+  opacity: .4;
+}
+
+.system-map__point:after {
+  position: absolute;
+  top: .05rem;
+  left: .25rem;
+  display: block;
+  white-space: nowrap;
+  content: attr(data-name);
+  text-transform: uppercase;
+  font-family: 'Jura';
+  color: var(--color-primary-dark);
+}
+
+
+.system-map__point--highlighted:before {
+  opacity: 1;
+}
+
+.system-map__point--highlighted:after {
+  color: black;
+  background: white;
+  left: 0;
+  padding: 0 .2rem;
+  z-index: 2;
+}
+
+@media only screen and (min-width: 1280px) {
+  .system-map {
+    position: absolute;
+    left: 38rem;
+    top: 1rem;
+    width: calc(100% - 40rem);
+    margin: 0;
+    height: 20rem;
+    zoom: 1;
+    font-size: 1rem;
+    line-height: 1rem;
+  }
+}
diff --git a/css/components/tabs.css b/css/components/tabs.css
@@ -133,7 +133,7 @@
   z-index: 2;
   background: var(--color-primary);
   color: var(--color-text-inverted);
-  padding: .5rem 3.5rem .25rem .5rem;
+  padding: .75rem .5rem .25rem .5rem;
   font-family: "Jura", sans-serif;  
   font-weight: bold;
   font-size: 1rem;
@@ -145,22 +145,34 @@
   display: inline-block;
   top: -.25rem;
   margin-top: 0.25rem;
-  margin-right: 1.5rem;
+  margin-right: 1rem;
+}
+
+.tab-options form label span {
+  float: left;
+  text-transform: uppercase;
+  margin-bottom: .25rem;
+  color: var(--color-text-inverted-muted);
+}
+
+.tab-options form input {
+  width: 9rem;
 }
 
 .tab-options form input,
 .tab-options form select {
+  float: left;
+  clear: both;
   background: var(--color-primary-light);
   border-color: var(--color-primary-darker);
   color: var(--color-text-inverted);
   border-style: solid;
   border-width: .15rem;
   border-radius: 0.2rem;
   padding: .25rem;
-  margin-left: .5rem;
   font-size: 1rem;
   font-family: "Jura", sans-serif;
-  transition: 500ms;
+  transition: opacity 500ms;
 }
 
 .tab-options form input:hover:not(:disabled),
@@ -185,6 +197,7 @@
   font-size: 1rem;
   padding: .25rem .5rem;
   transition: 500ms;
+  text-transform: uppercase;
 }
 
 .tab-options form input[type="checkbox"] {

diff --git a/css/index.css b/css/index.css
@@ -12,6 +12,7 @@
 @import url('components/data-table.css');
 @import url('components/properties-table.css');
 @import url('components/news-ticker.css');
+@import url('components/system-map.css');
 
 @import url('responsive/mobile.css');
 @import url('responsive/desktop.css');

diff --git a/css/responsive/desktop.css b/css/responsive/desktop.css
@@ -1,3 +1,10 @@
+
+@media only screen and (min-width: 1440px) {
+  html {
+    font-size: max(min(1.25vw, 1.5rem), 1.5rem);
+  }
+}
+
 @media only screen and (min-width: 768px) {
   .data-table--striped-not-mobile tbody tr:nth-child(odd) td {
     background: rgba(255,255,255,.1) !important;
@@ -6,12 +13,8 @@
   .is-visible-mobile {
     display: none !important;
   }
-
   html {
-    /*
-      Render font size that is at least 1rem but up to 1.5rem, depending on window size
-      This allows for scaling font sizes on larger displays (e.g. 4k) that keeps the UI readable
-    */
-    font-size: max(min(1.25vw, 1.5rem), 1.25rem);
+    font-size: max(min(1vw, 1.5rem), 1.25rem);
   }
 }
+
diff --git a/css/responsive/mobile.css b/css/responsive/mobile.css
@@ -1,5 +1,9 @@
 
 @media only screen and (max-width: 768px) {
+  html {
+    font-size: 1rem;
+  }
+
   h2,
   h3,
   h4 {
@@ -9,8 +13,8 @@
   }
 
   h2 {
-    font-size: 1.75rem;
-    line-height: 1.75rem;
+    font-size: 1.5rem;
+    line-height: 1.5rem;
     padding-right: 1rem;
     clip-path: polygon(0 0,calc(100% - .8rem) 0,100% 1.6rem,100% 100%,0 100%);
     margin-right: 0;
@@ -92,16 +96,37 @@
   .tab-options__label-text {
     display: inline-block;
     width: 5rem;
-    text-align: right;
     padding-right: .25em;
   }
 
+  .tab-options {
+    padding: .25rem;
+  }
+
+  .tab-options form label span,
+  .tab-options form input,
+  .tab-options form select {
+    float: none;
+  }
+
+  .tab-options form label span {
+    margin-right: .25rem;
+  }
+
+  .tab-options form input {
+    width: 9rem;
+  }
+
+  .tab-options form select {
+    width: 10rem;
+  }
+
   .tab-options form label {
     display: block;
     margin-right: 0;
   }
 
   .breadcrumbs {
-    font-size: .9rem;
+    zoom: .9;
   }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ardent-www",
-  "version": "0.72.1",
+  "version": "0.73.0",
   "description": "Ardent Industry",
   "main": "index.js",
   "scripts": {

diff --git a/pages/system/[system-name]/index.js b/pages/system/[system-name]/index.js
@@ -28,6 +28,8 @@ import {
   NO_DEMAND_TEXT
 } from 'lib/consts'
 
+const SYSTEM_MAP_POINT_PLOT_MULTIPLIER = 70
+
 // FIXME Ugh who wrote this 🗑️🔥
 
 export default () => {
@@ -214,6 +216,20 @@ export default () => {
             <i className='icon icarus-terminal-system-orbits' />
             {system.systemName}
           </h2>
+          <div className='system-map'>
+            <div className='system-map__point system-map__point--highlighted' style={{ top: '50%', left: '50%' }} data-name={system.systemName} />
+            {nearbySystems && nearbySystems.map(nearbySystem =>
+              <div
+                key={nearbySystem.systemAddress} className='system-map__point'
+                onClick={() => router.push(`/system/${nearbySystem.systemName}`)}
+                data-name={nearbySystem.systemName}
+                style={{
+                  top: nearbySystem.systemZ > system.systemZ ? `calc(50% + ${(nearbySystem.systemZ - system.systemZ) * SYSTEM_MAP_POINT_PLOT_MULTIPLIER}px)` : `calc(50% - ${(system.systemZ - nearbySystem.systemZ) * SYSTEM_MAP_POINT_PLOT_MULTIPLIER}px)`, // Z
+                  left: nearbySystem.systemX > system.systemX ? `calc(50% + ${(nearbySystem.systemX - system.systemX) * SYSTEM_MAP_POINT_PLOT_MULTIPLIER}px)` : `calc(50% - ${(system.systemX - nearbySystem.systemX) * SYSTEM_MAP_POINT_PLOT_MULTIPLIER}px)`// X
+                }}
+              />
+            )}
+          </div>
           <table className='properties-table'>
             <tbody>
               <tr>