wip

template/module/journey/leg/drawer-notes.pug

@@ -0,0 +1,8 @@
+.col-12.input.text-dark()
+    textarea.text-small#query_note(
+            v-model="journey.leg_get().notes"
+            @input="refreshTextAreaHeight"
+            @focus="refreshTextAreaHeight"
+            rows="1"
+            placeholder="...",
+    )

template/module/journey/leg/drawer.pug

@@ -1,16 +1,18 @@
-.input.text-dark(style="width: 100%")
+
+.col-12.input.text-dark
     input#query_input(
         type="search"
         @input="search_active"
+        @focus="search_active"
         placeholder="Search ... "
         style="width:85%;"
+        :disabled="query.note"
     )
     .spinner(v-if="query.load")
-div(style="width:100%" 
-    v-if="['hotel', 'restaurant', 'place','other', 'travel'].indexOf(query.type)>=0")
+
+div(v-if="['hotel', 'restaurant', 'place','other', 'travel'].indexOf(query.type)>=0")
     template(v-for="(item, idx) in query.res" )
-        .col-12.bg-white.text-dark(
-            style="display:flex;align-items:center; border-radius:3px;"
+        .query-result.col-12.bg-white.text-dark(
             :key="'q'+idx" 
             @mouseover="drawer_hover_item(item)" 
             @mouseleave="drawer_hover_item()"
@@ -20,20 +22,17 @@ div(style="width:100%"
                 | {{ item.name }}
         .bg-dark.divider(
             :key="'qdiv'+idx" style="height:1px" )
-    .col-12.bg-white.text-dark(
-        v-if="query.load==false && query.res.length==0"
-        style="display:flex;align-items:center; border-radius:3px;" )
+    .query-result.col-12.bg-white.text-dark(
+        v-if="query.load==false && query.res.length==0" )
         div( v-html="generate_icon('star', 'var(--dark)')")
         .col-10()
             | Add custom
 
     .col-12.text-white.text-center(
         ) {{query.load? `Loading ...` : `Found ${query.res.length} results`}}
-div(style="width:100%" 
-    v-else-if="['flight'].indexOf(query.type)>=0")
+div(v-else-if="['flight'].indexOf(query.type)>=0")
     template(v-for="(item, idx) in query.res" )
-        .col-12.bg-white.text-dark(
-            style="display:flex;align-items:center; border-radius:3px;"
+        .query-result.col-12.bg-white.text-dark(
             :key="'q'+idx" 
             @mouseover="drawer_hover_item(item)" 
             @mouseleave="drawer_hover_item()"
@@ -41,10 +40,9 @@ div(style="width:100%"
             div( v-html="generate_icon('plane', 'var(--dark)')")
             .col-10()
                 | {{ item.from  }} => {{item.to}}  
-        .bg-dark.divider(
+        bg-dark.divider(
             :key="'qdiv'+idx" style="height:1px" )
-div(style="width:100%" v-else)
+div(v-else)
     template()
-        .col-12.bg-white.text-dark(
-            style="display:flex;align-items:center; border-radius:3px;")
-        | Unsuppored Query type {{query.type}}
+        .query-result.col-12.bg-white.text-dark()
+        | Unsuppored Query type {{query.type}}

template/module/journey/leg/nav.pug

@@ -1,23 +1,34 @@
-.scroll-handler(
+.scroll-handler.row(
   @mouseleave="nav_mouseleave"
   @mousemove="nav_mousemove")
-  draggable.scroll-content.list-group.bg-dark(
-    tag="div",
-    :list="journey.data.main",
-    handle=".handle"
-  )
-    .list-group-item.handle(
-      v-for="(element, idx) in journey.data.main",
-      :key="idx",
-      @click="journey.leg_sel(idx)",
-      :class="journey.sel_leg == idx ? 'bg-primary' : 'bg-white'"
-    )
-      .text {{ element.title }}
-      i.fa.fa-times.close.fright(
-        style="top: 2px; right: 2px; position: absolute",
-        @click="journey.rm_leg(idx)"
-      )
 
-    .list-group-item.bg-white(@click="journey.add_leg()")
-      .text Add Leg
-      i.fa.fa-plus.add(style="top: 12px; right: 5px; position: absolute")
+  .col-3.col-sm-2.col-md-1
+    .list-group.text-dark.h-100
+      .fleft.list-group-item.bg-white.text-small.rounded.h-100(v-on:click.prevent="journey.leg_prev()")
+        i.fas.fa-angle-left
+  .col-6.col-sm-8.col-md-10
+    draggable.scroll-content.list-group.bg-dark(
+      tag="div",
+      :list="journey.data.main",
+      handle=".handle"
+    )
+      .list-group-item.handle.text-dark(
+        v-for="(element, idx) in journey.data.main",
+        :key="idx",
+        @click="journey.leg_sel(idx)",
+        :class="journey.sel_leg == idx ? 'bg-primary' : 'bg-white'"
+      )
+        .text {{ element.title || "Leg "+idx}}
+        i.fa.fa-times.close.fright(
+          style="top: 2px; right: 2px; position: absolute",
+          @click="journey.rm_leg(idx)"
+        )
+      .list-group-item.bg-dark
+      .list-group-item.bg-white.text-dark(@click="journey.add_leg()")
+        div 
+          i.fa.fa-plus.add()
+
+  .col-3.col-sm-2.col-md-1
+    .list-group.text-dark.h-100
+      a.fright.list-group-item.bg-white.text-small.rounded.h-100(v-on:click.prevent="journey.leg_next()")
+        i.fas.fa-angle-right

template/module/journey/leg/old_cfg.pug

@@ -1,12 +0,0 @@
-div
-  div
-    .row.text-center
-        div
-            label Notes
-            .input.text-dark(style="width: 100%")
-                textarea-autosize.text-small(
-              v-model="journey.leg_get().notes",
-              placeholder="Notes",
-              :min-height="30",
-              :max-height="350"
-            )

template/module/journey/leg/top.pug

@@ -1,15 +1,17 @@
-.row.text-center
-    .col-sm-2
-        .input
-            input(v-model="journey.leg_get().title")
-    .col-sm-2
+.row.text-center.align
+    .col-5.col-sm-4.col-md-2
         .input
             input(
-            placeholder="Day title",
+            placeholder="Leg" 
+            v-model="journey.leg_get().title")
+
+    .col-5.col-sm-4.col-md-2.mr-auto
+        .input
+            input(
+            placeholder="Day"
             v-model="journey.leg_get().day_title[journey.sel_day]"
         )
-
-    .col-sm-4
+    .col-8.col-sm-6.col-md-4
         .input
             //- label Date Range ({{ journey.leg_len() }})
             date-picker(
@@ -20,10 +22,15 @@
             placeholder="Date Range",
             v-on:change="journey.date_update(journey.sel_leg)"
         )
-    .col-sm-2
-    .right.col-sm-2
+    .col-4.col-sm-4.col-md-3.ml-auto
         .input
             input(
             disabled="",
             :value="journey.date_sel() + ' (' + journey.sel_day + ')'"
-            )
+            )
+        //- .col-6.list-group-item.align.center.bg-white(style="padding: 0.5rem 0;")
+        //-   i.fas.fa-angle-double-right(v-on:click.prevent="journey.day_next()")
+              .col-sm-1.text-small
+       
+        //- a(href="#prev", v-on:click.prevent="journey.day_prev()")
+          i.fas.fa-angle-left