more compact header

Travigo · Feb 22, 2024 · 7cb325a · 7cb325a
1 parent 093c208
commit 7cb325a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -77,7 +77,7 @@ export default {
       class="mt-2 sm:mt-3 lg:mt-4 mx-2 sm:mx-6 lg:mx-8 bg-white rounded-lg border border-gray-200 shadow-md sticky top-0 z-50 dark:bg-gray-800 dark:border-gray-600"
     >
       <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
-        <div class="relative flex items-center justify-between h-16">
+        <div class="relative flex items-center justify-between h-12 lg:h-16">
           <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
             <!-- Mobile menu button-->
             <button @click="$router.go(-1)" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 focus:outline-none transition duration-150 ease-in-out" aria-label="Main menu" aria-expanded="false">

diff --git a/src/components/NavTabBar.vue b/src/components/NavTabBar.vue
@@ -7,8 +7,11 @@
     >
       <a
         @click="changeTab(tab.id)" 
-        class="cursor-pointer inline-block py-4 px-4 text-sm font-medium text-center rounded-t-lg border-b-2 border-transparent text-gray-500 hover:text-gray-600 hover:border-gray-300"
-        v-bind:class="{'text-blue-600 border-blue-600 hover:text-blue-600 hover:border-blue-600 active': this.currentTab == tab.id}"
+        class="cursor-pointer inline-block py-4 px-4 text-sm font-medium text-center rounded-t-lg border-b-2"
+        v-bind:class="{
+          'text-blue-600 border-blue-600 hover:text-blue-600 hover:border-blue-600 active': this.currentTab == tab.id,
+          'text-gray-500 hover:text-gray-600 hover:border-gray-300 border-transparent': this.currentTab != tab.id
+        }"
       >
         {{ tab.name }}
       </a>

diff --git a/src/views/Journeys/View.vue b/src/views/Journeys/View.vue
@@ -338,6 +338,10 @@ export default {
           id: "timeline",
           name: "Timeline",
         },
+        {
+          id: "details",
+          name: "Details",
+        },
         {
           id: "map",
           name: "Map",