Improve apperance of engineering stats on modules

iaincollins · Dec 20, 2021 · 9ac0f1d · 9ac0f1d
1 parent e01547b
commit 9ac0f1d
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "icarus",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "ICARUS Terminal for Elite Dangerous",
   "scripts": {
     "build": "npm run build:web && npm run build:app && npm run build:service && npm run build:package",

diff --git a/src/web/components/panels/ship/ship-module-inspector-panel.js b/src/web/components/panels/ship/ship-module-inspector-panel.js
@@ -46,25 +46,23 @@ export default function ShipModuleInspectorPanel ({ module }) {
       </div>
       {module.engineering &&
         <div className='ship-panel__module-section ship-panel__module-section--engineering text-uppercase'>
-            <h3>Engineering</h3>
-            <p className='text-secondary'>
-              {module.engineering?.BlueprintName?.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').trim()}
-              {' '}
-              {module.engineering?.ExperimentalEffect_Localised &&
-                <>
-                  <br />
-                  <span className='text-secondary'>{module.engineering.ExperimentalEffect_Localised.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').trim()}</span>
-                  {' '}
-                  <span className='text-muted'>experimental</span>
-                </>}
-              <br /><span className='text-muted'>by</span> {module.engineering.Engineer}
-            </p>
-            <progress
-              className='progress--secondary progress--border'
-              value={module.engineeringLevel}
-              max='5'
-              />
-            {/* <p className='text-info' style={{ margin: 0, fontSize: '2rem', top: '.25rem', position: 'relative' }}>
+          <h3>Engineering</h3>
+          <p className='text-info'>
+            {module.engineering?.BlueprintName?.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').trim()}
+            {module.engineering?.ExperimentalEffect_Localised &&
+              <>
+                <br />
+                <span className='text-muted'>experimental</span>
+                <span> {module.engineering.ExperimentalEffect_Localised.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').trim()}</span>
+              </>}
+            <br /><span className='text-muted'>by</span> {module.engineering.Engineer}
+          </p>
+          <progress
+            className='progress--border'
+            value={module.engineeringLevel}
+            max='5'
+          />
+          {/* <p className='text-info' style={{ margin: 0, fontSize: '2rem', top: '.25rem', position: 'relative' }}>
               {[...Array(module.engineeringLevel)].map((j, i) =>
                 <i
                   key={`${module.name}_${module.slot}_engineering_${i}`}
@@ -79,7 +77,7 @@ export default function ShipModuleInspectorPanel ({ module }) {
             {module.engineering?.Modifiers?.map((modifier) =>
               <li
                 key={`${module.name}_${module.slot}_engineering_modifier_${modifier.Label}`}
-                className='text-secondary'
+                className='text-info'
               >
                 {modifier.Label.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').trim()}
                 <span style={{ marginLeft: '.5rem' }}>

diff --git a/src/web/css/main.css b/src/web/css/main.css
@@ -199,7 +199,6 @@ progress[value] {
 
 progress[value]::-webkit-progress-bar {
   background: var(--color-primary-dark);
-  border-color: var(--color-primary);
   padding: .1rem;
 }
 
@@ -208,21 +207,25 @@ progress[value]::-webkit-progress-value {
   transition: width .25s ease;
 }
 
+progress.progress--border {
+  border-width: .2rem;
+  border-style: solid;
+  border-color: var(--color-primary);
+}
+
+progress.progress--border.progress--secondary {
+  border-color: var(--color-secondary);
+}
+
 progress.progress--secondary[value]::-webkit-progress-bar {
   background: var(--color-secondary-dark);
-  border-color: var(--color-secondary);
   padding: .1rem;
 }
 
 progress.progress--secondary[value]::-webkit-progress-value {
   background: var(--color-secondary);
 }
 
-progress.progress--border {
-  border-width: .2rem;
-  border-style: solid;
-  border-color: inherit;
-}
 
 form {
   padding: 0;

diff --git a/src/web/css/panels/ship-panel.css b/src/web/css/panels/ship-panel.css
@@ -154,6 +154,7 @@
 @media only screen and (max-width: 800px) {
   .ship-panel__module-section {
     width: 100%;
+    margin-bottom: .25rem;
   }
 }
 
@@ -162,22 +163,14 @@
 }
 
 .ship-panel__module-section--engineering {
- background: var(--color-secondary-dark);
- border: .2rem solid var(--color-secondary);
- padding: .5rem 1rem;
-}
-
-/* .ship-panel__module-section--engineering:first-child {
-  border-right: 0;
+  background: var(--color-primary-dark);
+  border: .2rem solid var(--color-primary);
+  padding: .5rem 1rem;
 }
 
-.ship-panel__module-section--engineering:last-child {
-  border-left: 0;
-} */
-
 .ship-panel__module-section--engineering h3 {
-  background: var(--color-secondary);
-  color: var(--color-secondary-dark);
+  background: var(--color-primary);
+  color: var(--color-primary-dark);
   margin: -.52rem -1.2rem;
   margin-bottom: .5rem;
   padding: .25rem .5rem;

diff --git a/src/web/pages/ship/modules.js b/src/web/pages/ship/modules.js
@@ -56,10 +56,10 @@ export default function ShipModulesPage () {
         >
           <div className={`ship-panel__modules scrollable ${selectedModule ? 'ship-panel__modules--module-inspector' : ''}`}>
             <h1 className='text-info' style={{ marginRight: '13rem' }}>{ship.name}</h1>
-            <h2 className='text-info text-muted'>IDENT {ship.ident}</h2>
-            <h2 style={{ marginBottom: '.5rem' }} className='text-primary'>
+            <h2 className='text-primary'>IDENT {ship.ident}</h2>
+            <h3 style={{ marginBottom: '.5rem' }} className='text-primary text-muted'>
               {ship?.type?.replaceAll('_', ' ')}
-            </h2>
+            </h3>
             {ship.onBoard &&
               <div className='ship-panel__ship-pips text-uppercase'>
                 <div className='ship-panel__ship-pip'>