Første forsøg på bug-fix

.gitignore

@@ -9,6 +9,11 @@ package-lock.json
 
 .env*
 
+nginx.prod.conf
+nginx.test.conf
+.env.development
+.env.production
+
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json

src/App.vue

@@ -39,7 +39,6 @@ if (isConsole || isWearable || isSmartTV) {
     height: 100%;
     margin: 0;
 }
-
 main {
     padding: 0;
 }

src/components/coordinatetransformation/CoordinateInputField.vue

@@ -14,7 +14,7 @@
             <input name="degrees-input"
                 aria-label="degrees-input"
                 class="coordinate-input"
-                :class="{degreesInput: props.format == 'degrees', metresInput: props.format == 'minutes', secondsInput: props.format == 'seconds'}"
+                :class="{degreesInput: format == 'degrees', metresInput: format == 'minutes', secondsInput: format == 'seconds'}"
                 step="0.0001"
                 v-model=props.degrees[element]
                 @input="validateDegrees"
@@ -26,23 +26,21 @@
 
         <span class="input-segment"
             :class="{degreesInput: CrsIsDegrees}"
-            v-show="props.CrsIsDegrees && (props.format == 'minutes' || props.format == 'seconds')">
-            <input name="minutes-input"
-                aria-label="minutes-input"
+            v-show="props.CrsIsDegrees && (format == 'minutes' || format == 'seconds')">
+            <input id="minutesInput"
                 class="coordinate-input"
-                :class="{degreesInput: props.format == 'degrees', metresInput: props.format == 'minutes', secondsInput: props.format == 'seconds'}"
+                :class="{degreesInput: format == 'degrees', metresInput: format == 'minutes', secondsInput: format == 'seconds'}"
                 v-model=props.minutes[element]
                 step="0.0001"
                 @input="validateMinutes"
             />
             <span class="degrees">'</span>
         </span>
 
-        <span class="input-segment" :class="{degreesInput: props.CrsIsDegrees}" v-show="props.CrsIsDegrees && props.format == 'seconds'">
-            <input name="seconds-input"
-                aria-label="seconds-input"
+        <span class="input-segment" :class="{degreesInput: props.CrsIsDegrees}" v-show="props.CrsIsDegrees && format == 'seconds'">
+            <input id="secondsInput"
                 class="coordinate-input"
-                :class="{degreesInput: props.format == 'degrees', metresInput: props.format == 'minutes', secondsInput: props.format == 'seconds'}"
+                :class="{degreesInput: format == 'degrees', metresInput: format == 'minutes', secondsInput: format == 'seconds'}"
                 v-model=props.seconds[element]
                 step="0.0001"
                 @input="validateSeconds"
@@ -60,7 +58,7 @@
  * grader og minutter: 2 inputs
  * grader, minutter og sekunder: 3 inputs.
  */
-import { onUpdated } from 'vue';
+import { onUpdated, computed } from 'vue';
 import ArrowIcon from '../shared/icons/ArrowIcon.vue';
 
 
@@ -73,14 +71,13 @@ const props = defineProps({
     element: Number, // bruges til at afgøre hvilket inputfelt en given værdi skal ind i.
     format: '' // hvorvidt inputtet er m, d, dm, dms
 })
-
+let format = computed(() => props.format)
 const emit = defineEmits([
     'coords-changed'
 ])
 
 const getArrowDirection = () => {
     let direction = ''
-
     if      (props.CrsIsDegrees && props.element == 0)     { direction = 'right' }
     else if (props.CrsIsDegrees && props.element == 1)     { direction = 'up' }    
     else if (!props.CrsIsDegrees && props.element == 0)    { direction = 'up' }
@@ -113,7 +110,6 @@ const validateSeconds = () => {
     if (props.seconds[1].includes(','))
         props.seconds[1] = props.seconds[1].replace(',', '.')
 }
-
 onUpdated(() => {
     emit('coords-changed')
 })

src/components/coordinatetransformation/InputCard.vue

@@ -10,7 +10,7 @@
                 <CoordinateInputField
                 @coords-changed="emit('input-coords-changed', inputCoords)"
                 :unit="northDegreeUnit"
-                :epsgIsDegrees="crsIsDegrees"
+                :CrsIsDegrees="crsIsDegrees"
                 :degrees="degrees"
                 :minutes="minutes"
                 :seconds="seconds"
@@ -22,7 +22,7 @@
                 <CoordinateInputField
                     @coords-changed="emit('input-coords-changed', inputCoords)"
                     :unit="eastDegreeUnit"
-                    :epsgIsDegrees="crsIsDegrees"
+                    :CrsIsDegrees="crsIsDegrees"
                     :degrees="degrees"
                     :minutes="minutes"
                     :seconds="seconds"
@@ -342,6 +342,7 @@ watch(heightInMeters, () => {
 onUpdated(() => {
     emit('is-3d-changed', is3D.value)
     emit('input-coords-changed', inputCoords.value)
+    setInput()
 })
 </script>
 

src/components/shared/header/Header.vue

@@ -1,39 +1,37 @@
-<!-- 
-    Denne header komponent kunne gøres med en enkelt div og conditional rendering, 
-    men så kan vi ikke bruge @dataforsyningen css 
--->
 <template>
-    <div class="nav-container" style="display: flex; justify-content: space-between;">
-        <!-- HORIZONTAL NAVBAR -->
-        <Brand />
-        <nav v-if='width > minWidth'>
-            <ul >
-                <li>
-                    <router-link class='Denmark' to='/Denmark'>Danmark</router-link>
-                </li>
-                <li>
-                    <router-link class='Greenland' to='/Greenland'>Grønland</router-link>
-                </li>
-                <li>
-                    <router-link class='About' to='/About'>Om Koordinattransformation</router-link>
-                </li>
-            </ul>
+    <header class="layout-2col">
+      <Brand />
+      <nav class="ds-nav-main" v-if='width>minWidth'>
+        <ul>
+            <li>
+                <router-link class='Denmark' to='/Denmark'>Danmark</router-link>
+            </li>
+            <li>
+                <router-link class='Greenland' to='/Greenland'>Grønland</router-link>
+            </li>
+            <li>
+                <router-link class='About' to='/About'>Om Koordinattransformation</router-link>
+            </li>
+        </ul>
+    </nav>
+        <div class='burgerRight'>
+            <BurgerIcon v-if='width < minWidth' @click='toggleVerticalMenu'/>
+        </div>
+    </header>
+    <div class="nav-container" v-if='verticalMenuIsOpen'>
+        <nav class="ds-nav-vertical">
+                <ul>
+                    <li>
+                        <router-link @click="toggleVerticalMenu"  to='/Denmark'>Danmark</router-link>
+                    </li>
+                    <li>
+                        <router-link @click="toggleVerticalMenu" to='/Greenland'>Grønland</router-link>
+                    </li>
+                    <li>
+                        <router-link @click="toggleVerticalMenu" to='/About'>Om Koordinattransformation</router-link>
+                    </li>
+                </ul>
         </nav>
-        <!-- VERTICAL NAVBAR (NÅR SKÆRMEN ER MEGET SMAL) -->
-        <nav class="ds-nav-vertical" v-if='verticalMenuIsOpen'>
-            <ul>
-                <li>
-                    <router-link @click="toggleVerticalMenu"  to='/Denmark'>Danmark</router-link>
-                </li>
-                <li>
-                    <router-link @click="toggleVerticalMenu" to='/Greenland'>Grønland</router-link>
-                </li>
-                <li>
-                    <router-link @click="toggleVerticalMenu" to='/About'>Om Koordinattransformation</router-link>
-                </li>
-            </ul>
-        </nav>
-        <BurgerIcon v-if='width < minWidth' @click='toggleVerticalMenu'/>
     </div>
 </template>
 
@@ -54,12 +52,48 @@ onMounted(() => window.addEventListener('resize', handleResize))
 </script>
 
 <style scoped>
+.burgerRight{
+    position: fixed;
+    right: 0;
+}
 .nav-container {
-  /* Add any other styles for nav-container as needed */
+  text-align: left; 
+  margin-top: 3.5rem;
+  display: flex; 
+  justify-content: flex-end; 
+  position: fixed;
+  top: 0;
+  right: 0;
+  background-color: #fff; 
+  z-index: 1;
+  border-radius: 10px; 
+  color-scheme: light;
+  border: 2px solid var(--aktion);
+}
+.nav-container ul li a {
+  color: black;
+  display: flex;
+  align-items: center;
+  opacity: 1;
+  justify-content: space-between;
+}
+header  {
+    width: 100%;
+    height: 4rem;
+    z-index: 0;
+    top: 0;
+    padding: 0 5vw 0 5vw;
+    align-items: flex-start;
+    grid-template-rows: auto;
+    border-bottom: 1px solid var(--teal);
+}
+.ds-nav-vertical ul li {
+  align-content: right;
 }
-
 .nav-container ul li a {
   color: black;
+  display: flex;
+  align-items: center;
   opacity: 1; /* Set opacity to 1 for no transparency */
 }
-</style>
+</style>