Demo-App: fix time input and header spacing on mobile

UnionInternationalCheminsdeFer · Jan 8, 2025 · a53afd0 · a53afd0
1 parent 0409fd0
commit a53afd0
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 5 deletions.
diff --git a/demo-app/src/App.vue b/demo-app/src/App.vue
@@ -1,12 +1,11 @@
 <template>
   <div class="h-full">
     <header
-      class="absolute bg-osdm-bg-primary w-full top-0 shadow-lg flex justify-between p-4 items-center md:relative  md:shadow-none md:bg-osdm-bg-primary md:justify-center md:p-2 md:pt-9 text-xl font-medium ">
-      <div class="w-16 md:w-0" />
+      class="absolute bg-osdm-bg-primary w-full top-0 shadow-lg flex justify-center p-4 items-center md:relative  md:shadow-none md:bg-osdm-bg-primary md:p-2 md:pt-9 text-xl font-medium ">
       <h1 class="self-center text-base sm:text-xl md:text-4xl m-3 font-bold text-osdm-text-inverted text-nowrap">
         OSDM
         Demo App</h1>
-      <div class="md:absolute right-4 top-4 ">
+      <div class="absolute right-4 top-4 ">
         <SandboxSettings />
       </div>
     </header>

diff --git a/demo-app/src/components/atoms/InputTime.vue b/demo-app/src/components/atoms/InputTime.vue
@@ -2,7 +2,7 @@
   <sbb-form-field width="collapse">
     <label>{{ name }}</label>
     <sbb-time-input @input="handleInput" ref="input"></sbb-time-input>
-    <input class="min-w-20" />
+    <input type="time" class="min-w-20" />
   </sbb-form-field>
 </template>
 

diff --git a/demo-app/src/components/molecules/SearchBar.vue b/demo-app/src/components/molecules/SearchBar.vue
@@ -8,7 +8,7 @@
             :selected-place="destination" />
           <ViasInput aria-placeholder="vias" :select-callback="setVias" :selectedVias="vias" />
         </div>
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-2 w-full xl:w-auto">
           <InputDate aria-placeholder="date" name="Date" :value="date" :select-callback="setDate" />
           <PassengerInput class="hidden xl:block" aria-placeholder="passengers" :select-callback="setPassengers"
             :selected-passengers="passengers" />