src/template/module/journey/leg/top.pug

@@ -1,18 +1,20 @@
-.row.text-center.align
-    .col-5.col-sm-4.col-md-2
-        .input
-            input(
-            placeholder="Leg" 
-            v-model="journey.leg_get().title")
+.row.text-center
+    .col-12.col-sm-12.col-md-5.mr-auto
+        .row
+            .col-5.col-md-6.mr-auto
+                .input.w-100
+                    input(
+                    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-8.col-sm-6.col-md-4
-        .input
+            .col-4.col-md-6.ml-auto
+                .input.w-100
+                    input(
+                    placeholder="Day"
+                    v-model="journey.leg_get().day_title[journey.sel_day]"
+                )
+    .col-7.col-sm-6.col-md-4
+        .input.w-100
             //- label Date Range ({{ journey.leg_len() }})
             date-picker(
             :lang="lang",
@@ -22,8 +24,8 @@
             placeholder="Date Range",
             v-on:change="journey.date_update(journey.sel_leg)"
         )
-    .col-4.col-sm-4.col-md-3.ml-auto
-        .input
+    .col-5.col-sm-4.col-md-3.ml-auto
+        .input.w-100
             input(
             disabled="",
             :value="journey.date_sel() + ' (' + journey.sel_day + ')'"