Improve ship instrumentation

* Fix bug with Safari (#36)
* Improve apperance and animation

Author: iaincollins

src/client/components/panels/ship/ship-status/ship-instrumentation.js

@@ -307,8 +307,9 @@ export default function ShipInstrumentation ({ ship, cmdrStatus, toggleSwitches,
 }
 
 function NavigationInstrumentation ({ ship, cmdrStatus }) {
+
   return (
-    <div className={`ship-panel__navigation-instrumentation ${ship.onBoard && typeof cmdrStatus?.heading === 'number' ? '--active' : ''} text-uppercase`}
+    <div className={`ship-panel__navigation-instrumentation ${ship.onBoard ? '--on-board' : ''} ${ship.onBoard && typeof cmdrStatus?.heading === 'number' ? '--active' : ''} text-uppercase`}
     style={{
       minHeight: '13rem',
       minWidth: '13rem',
@@ -357,7 +358,6 @@ function NavigationInstrumentation ({ ship, cmdrStatus }) {
           minHeight: '12rem',
           minWidth: '12rem',
           margin: 'auto',
-          aspectRatio: '1',
           border: '.5rem double var(--color-info)',
           transform: `rotate(${ship.onBoard ? cmdrStatus?.heading ?? 0 : 0}deg)`,
           opacity: (ship.onBoard && typeof cmdrStatus?.heading === 'number') ? 1 : '.25',

src/client/css/panels/ship-panel.css

@@ -591,8 +591,11 @@ table.ship-panel__lights td {
   transform: rotateX(250deg);
 }
 
-.ship-panel__navigation-instrumentation.--active .ring {
+.ship-panel__navigation-instrumentation.--on-board .ring {
   animation: ship-panel__navigation-instrumentation-rings-animation 3s ease-in-out infinite;
+}
+
+.ship-panel__navigation-instrumentation.--active .ring {
   box-shadow: 0 0 3rem 0 rgba(255,255,255,.5);
 }