Adjust navigation and map control positions

Change trainer bar background color
TerriaJS · Feb 13, 2025 · 47ebc4c · 47ebc4c
1 parent 8490771
commit 47ebc4c
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 8 deletions.
diff --git a/lib/ReactViews/Map/MapNavigation/MapNavigation.tsx b/lib/ReactViews/Map/MapNavigation/MapNavigation.tsx
@@ -46,7 +46,7 @@ const StyledMapNavigation = styled.div<StyledMapNavigationProps>`
   @media (min-width: ${(props) => props.theme.sm}px) {
     top: 80px;
     bottom: 50px;
-    right: 16px;
+    right: 21px;
   }
   @media (max-width: ${(props) => props.theme.mobile}px) {
     & > div {

diff --git a/lib/ReactViews/Map/MenuBar/menu-bar.scss b/lib/ReactViews/Map/MenuBar/menu-bar.scss
@@ -5,7 +5,7 @@
   z-index: 108;
   top: variables.$map-button-top;
   left: variables.$work-bench-width;
-  right: variables.$padding;
+  right: variables.$padding * 2;
 
   // todo: find some non-layout-change animation technique for
   // this flex-menu-bar-workbench problem

diff --git a/lib/ReactViews/Notification/NotificationWindow.jsx b/lib/ReactViews/Notification/NotificationWindow.jsx
@@ -70,6 +70,7 @@ const NotificationWindow = createReactClass({
       height: defined(this.props.height) ? this.props.height : "auto",
       width: defined(this.props.width) ? this.props.width : "500px"
     };
+    const isStory = type === "story";
 
     return (
       <div className={classNames(Styles.wrapper, `${type}`)}>

diff --git a/lib/ReactViews/StandardUserInterface/TrainerBar/TrainerBar.tsx b/lib/ReactViews/StandardUserInterface/TrainerBar/TrainerBar.tsx
@@ -28,7 +28,10 @@ import CloseButton from "../../Generic/CloseButton";
 
 const TrainerBarWrapper = styled(Box)<{ isMapFullScreen: boolean }>`
   top: 0;
-  left: ${(p) => (p.isMapFullScreen ? 0 : Number(p.theme.workbenchWidth))}px;
+  left: ${(p) =>
+    p.isMapFullScreen
+      ? 0
+      : Number(p.theme.workbenchWidth) + Number(p.theme.workbenchMargin) * 2}px;
   z-index: ${(p) => Number(p.theme.frontComponentZIndex) + 100};
 `;
 
@@ -205,7 +208,7 @@ class StepAccordionRaw extends React.Component<
               // the relative width in its clone
               padding-right: 60px;
             `}
-            backgroundColor={theme.textBlack}
+            backgroundColor={theme.darkMid}
             ref={(component: any) => (this.refToMeasure = component)}
           >
             {renderStep(
@@ -265,7 +268,7 @@ class StepAccordionRaw extends React.Component<
           <BoxTrainerExpandedSteps
             column
             position="absolute"
-            backgroundColor={theme.textBlack}
+            backgroundColor={theme.darkMid}
             fullWidth
             paddedRatio={4}
             overflowY={"auto"}
@@ -346,7 +349,9 @@ export const TrainerBar = observer((props: TrainerBarProps) => {
       styledWidth={
         isMapFullScreen
           ? "100%"
-          : `calc(100% - ${Number(theme.workbenchWidth)}px)`
+          : `calc(100% - ${Number(
+              Number(theme.workbenchWidth) + Number(theme.workbenchMargin) * 2
+            )}px)`
       }
       isMapFullScreen={isMapFullScreen}
       onClick={() => viewState.setTopElement("TrainerBar")}
@@ -356,7 +361,7 @@ export const TrainerBar = observer((props: TrainerBarProps) => {
         fullHeight
         centered
         justifySpaceBetween
-        backgroundColor={theme.textBlack}
+        backgroundColor={theme.darkMid}
       >
         {/* Trainer Items Dropdown */}
         <Box css={"min-height: 64px;"}>

diff --git a/lib/Sass/common/_variables.scss b/lib/Sass/common/_variables.scss
@@ -142,7 +142,7 @@ $font-weight-normal: 400;
 $font-weight-light: 100;
 
 $map-button-color: #9ca1aa;
-$map-button-top: 18px;
+$map-button-top: 21px;
 $trainer-height: 64px;
 $map-button-border-radius: 4px;
 $work-bench-width: 350px;