Change layout

marcovdb · Nov 12, 2022 · e295411 · e295411
1 parent 17b48c1
commit e295411
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Caclulator</title>
+    <title>Calculator</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -58,11 +58,11 @@ const exportToCsv = () => {
 
 <template>
   <div class="container py-4 px-3 mx-auto">
+    <h1>Travel cost calculator</h1>
     <form autocomplete="off">
-      <fieldset>
-        <legend>Date range</legend>
-        <div class="row">
-          <div class="col-6 mb-3">
+      <div class="row">
+        <div class="col-md-4">
+          <div class="mb-3">
             <label for="startdate" class="form-label">Start date</label>
             <input
               id="startdate"
@@ -71,7 +71,7 @@ const exportToCsv = () => {
               v-model="start"
             />
           </div>
-          <div class="col-6 mb-3">
+          <div class="mb-3">
             <label for="enddate" class="form-label">End date</label>
             <input
               id="enddate"
@@ -81,49 +81,53 @@ const exportToCsv = () => {
             />
           </div>
         </div>
-      </fieldset>
-      <div class="row">
-        <div class="col-4">
-          <DatePicker
-            :range="range"
-            :travel-days="travelDays"
-            @update:travelDates="setTravelDates"
-          />
-        </div>
-        <div class="col-4">
+        <div class="col-md-4">
           <TravelDays @update:TravelDays="setTravelDays" />
         </div>
-        <div class="col-4">
+        <div class="col-md-4">
           <div class="mb-3">
             <label class="form-label" for="reimbursement"
               >Reimbursement per km</label
             >
-            <input
-              id="reimbursement"
-              class="form-control"
-              type="number"
-              v-model="reimbursement"
-            />
+            <div class="input-group">
+              <span class="input-group-text">€</span>
+              <input
+                id="reimbursement"
+                class="form-control"
+                type="number"
+                v-model="reimbursement"
+              />
+            </div>
           </div>
-          <div class="mb-3">
+          <div class="input-group mb-3">
             <label class="form-label" for="distance">Distance (one way)</label>
-            <input
-              id="distance"
-              class="form-control"
-              type="number"
-              v-model="distance"
-            />
+            <div class="input-group">
+              <input
+                id="distance"
+                class="form-control"
+                type="number"
+                v-model="distance"
+              />
+              <span class="input-group-text">km</span>
+            </div>
           </div>
         </div>
       </div>
       <div class="row">
-        <div class="col-12">
+        <div class="col-md-4 mt-3">
+          <DatePicker
+            :range="range"
+            :travel-days="travelDays"
+            @update:travelDates="setTravelDates"
+          />
+        </div>
+        <div class="col-md-8">
           <table class="table">
             <thead>
               <tr>
                 <th>Date</th>
-                <th class="text-end">Distance driven</th>
-                <th class="text-end">Amount to be reimbursed</th>
+                <th class="text-end">Distance driven (km)</th>
+                <th class="text-end">Amount to be reimbursed (€)</th>
               </tr>
             </thead>
             <tfoot class="table-group-divider">