moved alt slider to app.vue

bluerobotics · Feb 8, 2024 · dd104b1 · dd104b1
1 parent f342a3a
commit dd104b1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 18 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -101,6 +101,7 @@
               {{ format(timeNow, 'E LLL do HH:mm') }}
             </div>
           </div>
+          <AltitudeSlider />
           <Transition name="fade">
             <div v-if="showBottomBarNow" class="bottom-container">
               <SlideToConfirm />
@@ -155,6 +156,7 @@ import {
 } from '@/libs/joystick/protocols/cockpit-actions'
 import { useMissionStore } from '@/stores/mission'
 
+import AltitudeSlider from './components/AltitudeSlider.vue'
 import Dialog from './components/Dialog.vue'
 import EditMenu from './components/EditMenu.vue'
 import MiniWidgetContainer from './components/MiniWidgetContainer.vue'

diff --git a/src/components/AltitudeSlider.vue b/src/components/AltitudeSlider.vue
@@ -30,7 +30,15 @@ const formattedValue = computed(() => altitude_setpoint.value.toFixed(1))
   font-size: 0.8rem;
 }
 .slider-div {
-  height: 100%;
-  width: 100%;
+  position: fixed;
+  right: 2%;
+  top: 25%;
+  bottom: 0;
+  width: 25px;
+  height: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 100;
 }
 </style>
diff --git a/src/views/WidgetsView.vue b/src/views/WidgetsView.vue
@@ -1,9 +1,6 @@
 <template>
   <SnappingGrid v-if="store.showGrid && store.editingMode" :grid-interval="store.gridInterval" class="snapping-grid" />
   <div class="widgets-view">
-    <div class="altitude-slider-container">
-      <AltitudeSlider />
-    </div>
     <div v-for="view in store.viewsToShow" :key="view.hash" class="widget-view">
       <template v-for="widget in view.widgets.slice().reverse()" :key="widget">
         <WidgetHugger
@@ -61,7 +58,6 @@ import ImageView from '@/components/widgets/ImageView.vue'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { WidgetType } from '@/types/widgets'
 
-import AltitudeSlider from '../components/AltitudeSlider.vue'
 import SnappingGrid from '../components/SnappingGrid.vue'
 import WidgetHugger from '../components/WidgetHugger.vue'
 import Attitude from '../components/widgets/Attitude.vue'
@@ -112,16 +108,4 @@ const store = useWidgetManagerStore()
   background-color: rgb(122, 25, 25);
   z-index: 50;
 }
-.altitude-slider-container {
-  position: absolute; /* or absolute, depending on your layout */
-  right: 2%;
-  top: 25%;
-  bottom: 0;
-  width: 25px; /* Adjust width as necessary */
-  height: 50%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center; /* Centers the slider vertically */
-  z-index: 100; /* Ensure it's above other content */
-}
 </style>