Merge pull request #815 from UnionInternationalCheminsdeFer/demo-app-…

…mobile-screen-support Demo-app: mobile screen support
UnionInternationalCheminsdeFer · Jan 10, 2025 · c39aad8 · c39aad8
2 parents 879e3d1 + a53afd0
commit c39aad8
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 40 deletions.
diff --git a/demo-app/src/App.vue b/demo-app/src/App.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="h-full">
-    <header class="bg-osdm-bg-primary flex justify-center p-2 pt-9 text-xl font-medium">
-      <h1 class="self-center text-4xl m-3 font-bold">OSDM Demo App</h1>
-      <div class="absolute right-4 top-4">
+    <header
+      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="absolute right-4 top-4 ">
         <SandboxSettings />
       </div>
     </header>
+    <div class="bg-osdm-bg-primary h-24 md:h-0" />
     <RouterView />
     <footer class="bg-osdm-bg-primary text-sm text-osdm-text-inverted flex justify-center p-4">
       <p>Developed with ♥ for OSDM by <a href="https://xatellite.space" target="_blank">xatellite</a> and <a

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/HeaderBar.vue b/demo-app/src/components/molecules/HeaderBar.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="bg-osdm-bg-primary flex justify-center p-4 gap-5 items-stretch">
-    <sbb-button class="self-center" negative="" icon-name="arrow-left-small" @click="handleGoBack"></sbb-button>
+    <sbb-button class="absolute z-10 top-4 left-4 md:relative md:left-auto md:top-auto self-center" negative=""
+      icon-name="arrow-left-small" @click="handleGoBack"></sbb-button>
     <sbb-card>
       <div>
         <sbb-journey-header :origin="searchCriteria?.origin.name"

diff --git a/demo-app/src/components/molecules/SandboxSettings.vue b/demo-app/src/components/molecules/SandboxSettings.vue
@@ -1,32 +1,32 @@
 <template>
     <div>
         <sbb-button @click="openOverlay" icon-name="hammer-wrench-medium" />
-        <sbb-overlay ref="overlay" class="max-w-fit " accessibilitycloselabel="Close overlay"
+        <sbb-overlay ref="overlay" class="max-w-fit" accessibilitycloselabel="Close overlay"
             accessibilitybacklabel="Go back">
-            <div class="text-osdm-text flex flex-col w-screen md:w-auto">
-                <h1 class="self-center text-2xl mb-5">
+            <div class="text-osdm-text flex flex-col w-screen md:w-auto pr-8">
+                <h1 class="self-center text-base sm:text-xl md:text-2xl mb-5 font-medium">
                     Welcome to the OSDM-DEMO-APP
                 </h1>
-                <p class="text-md mb-5 font-normal">
+                <p class="text-sm md:text-base mb-5 font-normal">
                     Welcome. Below you can configure the used endpoint and user credentials within the demo.
                     You can find documentation about the authentication <a class="text-osdm-bg-primary"
                         href="https://osdm.io/spec/authentication/#jwts" target="_blank">here</a>.
                     Please enter the details of your test system or sandbox below.
                 </p>
-                <h2 style="margin-block-end: var(--sbb-spacing-fixed-4x)">
-                    Connection details for authentication flow:
-                </h2>
                 <form class="flex flex-col gap-4 items-center">
-                    <sbb-form-field error-space="none" size="m" class="w-64 md:w-96">
+                    <h2 style="margin-block-end: var(--sbb-spacing-fixed-4x)" class="text-base sm:text-xl">
+                        Connection details:
+                    </h2>
+                    <sbb-form-field error-space="none" size="m" class="md:w-96">
                         <label>Server base URL</label>
                         <input placeholder="https://osdm-5.platform.bileto.zone/api/" name="message"
                             v-model="serverURL" />
                     </sbb-form-field>
-                    <sbb-form-field error-space="none" size="m" class="w-64 md:w-96">
+                    <sbb-form-field error-space="none" size="m" class="md:w-96">
                         <label>Client Id</label>
                         <input placeholder="00000-00000-00000-00000" v-model="clientId" name="message" />
                     </sbb-form-field>
-                    <sbb-form-field error-space="none" size="m" class="w-64 md:w-96">
+                    <sbb-form-field error-space="none" size="m" class="md:w-96">
                         <label>Client Secret</label>
                         <input type="password" placeholder="0000000000" v-model="clientSecret" name="message" />
                     </sbb-form-field>

diff --git a/demo-app/src/components/molecules/SearchBar.vue b/demo-app/src/components/molecules/SearchBar.vue
@@ -1,43 +1,34 @@
 <template>
   <div class="bg-osdm-bg-primary flex flex-row justify-center p-4">
     <sbb-card>
-      <div class="grid grid-cols-1 justify-center align-middle gap-4">
-        <div class="gap-2">
-          <InputPlace name="Origin" aria-placeholder="origin" :select-callback="setOrigin" :selected-place="origin" />
-        </div>
-        <div class="gap-2">
+      <div class="flex flex-col xl:flex-row justify-center items-center xl:items-start align-middle gap-4">
+        <InputPlace name="Origin" aria-placeholder="origin" :select-callback="setOrigin" :selected-place="origin" />
+        <div class="flex flex-col gap-2 w-full xl:w-auto">
           <InputPlace name="Destination" aria-placeholder="destination" :select-callback="setDestination"
             :selected-place="destination" />
-        </div>
-        <div class="gap-2">
           <ViasInput aria-placeholder="vias" :select-callback="setVias" :selectedVias="vias" />
         </div>
-        <div class="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" />
         </div>
-        <div class="gap-2">
+        <div class="flex gap-2 xl:flex-col items-center xl:items-stretch">
           <InputTime aria-placeholder="time" name="Time" :value="date" :select-callback="setTime" />
-        </div>
-        <div class="gap-1 flex justify-center">
           <sbb-toggle aria-placeholder="isArrival" v-model="dateReferenceTypeString" size="s">
             <sbb-toggle-option value="DEPARTURE">Departure</sbb-toggle-option>
             <sbb-toggle-option value="ARRIVAL">Arrival</sbb-toggle-option>
           </sbb-toggle>
         </div>
-        <div class="gap-2 flex justify-center">
-          <PassengerInput aria-placeholder="passengers" :select-callback="setPassengers"
-            :selected-passengers="passengers" />
-        </div>
-        <div class="gap-2 flex justify-center">
-          <sbb-button aria-placeholder="search" class="self-center" size="m
+        <PassengerInput class="xl:hidden" aria-placeholder="passengers" :select-callback="setPassengers"
+          :selected-passengers="passengers" />
+        <sbb-button aria-placeholder="search" class="self-center" size="m
            " icon-name="arrow-right-small" @click="handleSearchTrip" :disabled="!origin || !destination">
-            <span v-if="!loading">Search</span>
-            <sbb-loading-indicator v-else variant="circle" size="s" color="white"></sbb-loading-indicator>
-          </sbb-button>
-        </div>
+          <span v-if="!loading">Search</span>
+          <sbb-loading-indicator v-else variant="circle" size="s" color="white"></sbb-loading-indicator>
+        </sbb-button>
       </div>
     </sbb-card>
-
   </div>
 </template>
 

diff --git a/demo-app/src/components/molecules/TripCard.vue b/demo-app/src/components/molecules/TripCard.vue
@@ -1,8 +1,8 @@
 <template>
   <sbb-card>
-    <div class="flex items-center gap-5">
+    <div class="flex items-center gap-2 md:gap-5">
       <TripPearlChain :trip="trip" />
-      <sbb-button icon-name="chevron-right-small" @click="handleSelect"></sbb-button>
+      <sbb-button icon-name="chevron-right-small" size="s" @click="handleSelect"></sbb-button>
     </div>
   </sbb-card>
 </template>

diff --git a/demo-app/src/components/molecules/TripList.vue b/demo-app/src/components/molecules/TripList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="bg-osdm-bg-secondary w-full h-full flex flex-col items-center gap-2 p-4">
-    <TripCard v-for="trip in trips" :key="`trip-${trip.id}`" :trip="trip" class="max-w-[500px] w-2/3" />
+    <TripCard v-for="trip in trips" :key="`trip-${trip.id}`" :trip="trip" class="max-w-[500px] min-w-[340px] w-2/3" />
 
     <div v-if="error" class="flex flex-col items-center mt-12 h-full gap-4">
       <sbb-icon :name="error.icon"></sbb-icon>