Tweak css, swap info orders

NASA-AMMOS · Oct 20, 2020 · 54ba7bb · 54ba7bb
1 parent cf71943
commit 54ba7bb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/scripts/essence/Ancillary/CursorInfo.js b/scripts/essence/Ancillary/CursorInfo.js
@@ -6,13 +6,13 @@
   if time is null, you can use CursorInfo.hide() to hide it.
 */
 
-define(['jquery', 'd3'], function($, d3) {
+define(['jquery', 'd3'], function ($, d3) {
     var CursorInfo = {
         //The div that will follow the mouse around
         cursorInfoDiv: null,
         forcedPos: false,
         //Creates that div and adds the mousemove event so it follows the cursor
-        init: function() {
+        init: function () {
             CursorInfo.cursorInfoDiv = d3
                 .select('body')
                 .append('div')
@@ -28,25 +28,25 @@ define(['jquery', 'd3'], function($, d3) {
                 .style('font-weight', 'bold')
                 .style('font-size', '16px')
                 //.style( 'box-shadow', '0px 5px 15px #000' )
-                .style('z-index', '6')
+                .style('z-index', '9001')
                 .style('pointer-events', 'none')
                 .style('display', 'none')
 
             d3.select('body').on('mousemove', cursorInfoMouseMove)
         },
         //Use jquery to fade in out then set display to none and clear inner html
-        hide: function(immediate) {
+        hide: function (immediate) {
             if (immediate) {
                 CursorInfo.cursorInfoDiv.style('display', 'none').html('')
             } else {
-                $('#cursorInfo').fadeOut(300, function() {
+                $('#cursorInfo').fadeOut(300, function () {
                     CursorInfo.cursorInfoDiv.style('display', 'none').html('')
                 })
             }
         },
         //Shows the div with message for time and isError just changes the color
         //Optional: position { x: , y: }
-        update: function(
+        update: function (
             message,
             time,
             isError,
@@ -65,23 +65,23 @@ define(['jquery', 'd3'], function($, d3) {
                 .style('display', 'block')
                 .style('opacity', 1)
             CursorInfo.cursorInfoDiv
-                .style('background-color', function() {
+                .style('background-color', function () {
                     if (forceColor != null) return forceColor
                     return isError ? '#cd0437' : 'var(--color-a)'
                 })
-                .style('color', function() {
+                .style('color', function () {
                     if (forceFontColor != null) return forceFontColor
                     return '#DCDCDC'
                 })
-                .style('border', function() {
+                .style('border', function () {
                     return isError ? '1px solid var(--color-a)' : 'none'
                 })
                 .style('display', 'block')
                 .html(message)
 
             if (time != null) {
-                setTimeout(function() {
-                    $('#cursorInfo').fadeOut(400, function() {
+                setTimeout(function () {
+                    $('#cursorInfo').fadeOut(400, function () {
                         CursorInfo.cursorInfoDiv
                             .style('display', 'none')
                             .html('')
@@ -91,7 +91,7 @@ define(['jquery', 'd3'], function($, d3) {
             }
         },
         //Remove everything CursorInfo created
-        remove: function() {
+        remove: function () {
             d3.select('body').off('mousemove', cursorInfoMouseMove)
             d3.select('#cursorInfo').remove()
         },

diff --git a/scripts/essence/Basics/UserInterface_/UserInterface_.js b/scripts/essence/Basics/UserInterface_/UserInterface_.js
@@ -513,31 +513,32 @@ define([
                 let mapTopBarRight = this.mapTopBar
                     .append('div')
                     .style('display', 'flex')
+
                 mapTopBarLeft
                     .append('div')
-                    .attr('class', 'mainInfo')
+                    .attr('class', 'mainDescription')
                     .style('display', 'none')
                     .style('position', 'relative')
                     .style('height', '30px')
                     .style('margin', '0')
                     .style('margin-left', '8px')
                     .style('z-index', '20')
+                    .style('padding-left', '8px')
+                    .style('border', '1px solid var(--color-m1)')
+                    .style('background', 'var(--color-a)')
                     .style('opacity', 0)
                     .style('pointer-events', 'auto')
                     .style('transition', 'opacity 0.2s ease-out')
 
                 mapTopBarLeft
                     .append('div')
-                    .attr('class', 'mainDescription')
+                    .attr('class', 'mainInfo')
                     .style('display', 'none')
                     .style('position', 'relative')
                     .style('height', '30px')
                     .style('margin', '0')
                     .style('margin-left', '8px')
                     .style('z-index', '20')
-                    .style('padding-left', '8px')
-                    .style('border', '1px solid var(--color-m1)')
-                    .style('background', 'var(--color-a)')
                     .style('opacity', 0)
                     .style('pointer-events', 'auto')
                     .style('transition', 'opacity 0.2s ease-out')