bug fixes before 1st live

assets/css/main.css

@@ -49,8 +49,10 @@ main {
   flex: 0 0 auto;
   background: white;
   display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
+  flex-direction: row;
+  justify-content: center;
+  align-items: baseline;
+  flex-wrap: wrap;
 }
 
 :root {
@@ -71,6 +73,56 @@ main {
   transition: margin-top var(--m-s) linear 0s, max-height var(--h-s) linear var(--m-s);
 }
 
+.btn {
+  border-radius: 999px;
+  padding: 0.5em 0.8em;
+  font-size: min(1rem, 18px);
+  white-space: nowrap;
+  transition: 0.2s all;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: 0.25rem;
+  line-height: 1;
+  min-height: 1em;
+}
+
+.btn svg {
+  height: min(1rem, 18px);
+  display: inline-block;
+  aspect-ratio: 1;
+}
+
+.btn.btn--primary {
+  background: #007fff;
+  color: #fff;
+}
+
+.btn.btn--primary:hover {
+  background: #00ca00;
+  color: #fff;
+}
+
+.btn.btn--cancel {
+  background: red;
+  color: #fff;
+}
+
+.btn.btn--cancel:hover {
+  background: rgb(255, 83, 83);
+  color: #fff;
+}
+
+.btn.btn--secondary {
+  background: #ccc;
+  color: #000;
+}
+
+.btn.btn--secondary:hover {
+  background: rgb(151, 151, 151);
+  color: #000;
+}
+
 .btn--nav-open {
   padding: 1rem;
   display: block;

components/AirportPicker.vue

@@ -133,7 +133,7 @@ export default {
       }
     },
     placeholder () {
-      return (this.selectedAirport.iata) ? '' : 'town, airport, or iata'
+      return (this.selectedAirport.iata) ? '' : 'town or airport'
     }
   },
   methods: {
@@ -149,13 +149,11 @@ export default {
 </script>
 
 <style>
-html {
-  color: black;
-}
 
 .picker-wrap {
   margin: 1rem;
   position: relative;
+  width: min(100vw - 2rem, 500px);
 }
 
 .picker-wrap:last-of-type {
@@ -174,9 +172,23 @@ html {
 .vs__dropdown-toggle {
   background: #eee;
   border: 0;
-  border-radius: 3rem;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  border-radius: 0.5rem 3rem 3rem 3rem;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  padding-bottom: 0;
+}
+
+.vs__selected-options {
+  padding: 0;
+}
+
+.picker-wrap .vs__search,
+.picker-wrap .vs__search:focus {
+  margin: 0;
+}
+
+.picker-wrap .vs__actions {
+  padding: 0;
 }
 
 .picker-item {
@@ -186,12 +198,22 @@ html {
   align-items: center;
 }
 
+.picker-item__section {
+  display: flex;
+  flex-direction: column;
+}
+
 .picker-item__name {
   font-size: 1rem;
+  line-height: 1.1;
+  white-space: normal;
 }
 
 .picker-item__muni {
   color: #007fff;
+  line-height: 1.1;
+  padding-top: 0.25rem;
+  white-space: normal;
 }
 
 .picker-item__iata {
@@ -206,16 +228,18 @@ html {
 </style>
 
 <style scoped>
-  label {
-    display: block;
-    color: black;
-    position: absolute;
-    z-index: 1;
-    text-transform: uppercase;
-    font-weight: 300;
-    top: 0.3rem;
-    left: 2rem;
-    letter-spacing: 0.13rem;
-    font-size: 0.8rem;
-  }
+
+label {
+  display: block;
+  color: gray;
+  position: absolute;
+  z-index: 1;
+  text-transform: uppercase;
+  font-weight: 300;
+  top: 0.3rem;
+  left: 0.5rem;
+  letter-spacing: 0.13rem;
+  font-size: 0.8rem;
+}
+
 </style>

components/Calendar.vue

@@ -149,7 +149,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .calendar-page {
   width: min(90vmin, 400px);
 }
@@ -212,12 +212,12 @@ h1.calendar__month {
 .badge.badge--day {
   position: absolute;
   background: hotpink;
-  border: white 0.2rem solid;
+  border: white 0.15rem solid;
   border-radius: 999px;
   color: white;
   padding: 0 0.4em;
   bottom: -0.25rem;
   right: -0.25rem;
-  font-size: 0.7rem;
+  font-size: 0.6rem;
 }
 </style>

components/ChosenFlights.vue

@@ -74,7 +74,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .chosen-wrapper {
   display: flex;
   flex-direction: column;
@@ -84,14 +84,25 @@ export default {
 .chosen-cols {
   display: flex;
   justify-content: center;
-  background-color: #003c79;
+  background-color: #eee;
   border-radius: 1rem;
-  padding: 0.5rem 2rem;
+  padding: 0 1rem;
   margin-bottom: 2rem;
   position: relative;
   max-width: 450px;
 
   --knockout-size: 0.75rem;
+  --color: #ccc;
+
+  /* border: 0.1rem solid var(--color); */
+  box-shadow: 0 0.5rem 0 0 var(--color);
+}
+
+.chosen-col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0.5rem 0;
 }
 
 .chosen-col:nth-of-type(2) {
@@ -102,7 +113,6 @@ export default {
 }
 
 .chosen-col:nth-of-type(2) svg {
-  margin-top: -0.9rem;
   width: 3.5rem;
   height: 3.5rem;
 }
@@ -122,7 +132,7 @@ export default {
   content: "";
   height: var(--knockout-size);
   width: var(--knockout-size);
-  background-color: white;
+  background-color: var(--color);
   border-radius: 999px 999px 0 0;
   display: block;
   position: absolute;
@@ -135,8 +145,8 @@ export default {
 }
 
 label.chosen-text {
-  color: #007fff;
-  line-height: 0.8;
+  color: #007fff88;
+  line-height: 1;
   font-size: 0.8rem;
   font-weight: 400;
 }
@@ -149,7 +159,7 @@ h1.chosen-text {
   font-size: 3rem;
   line-height: 0.8;
   font-weight: 500;
-  color: #eee;
+  color: #aaa;
 }
 
 .date-badge {
@@ -159,5 +169,6 @@ h1.chosen-text {
   line-height: 1;
   display: inline-block;
   font-size: 0.8rem;
+  color: #aaa;
 }
 </style>

components/DatePicker.vue

@@ -56,12 +56,13 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .calendar-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 3rem;
   justify-content: center;
   margin-top: 3rem;
+  margin-bottom: 3rem;
 }
 </style>

components/Deselect.vue

@@ -26,5 +26,6 @@ export default {
 <style scoped>
   svg {
     max-height: 3.2rem;
+    max-width: 3.2rem;
   }
 </style>

components/FlightsFlyout.vue

@@ -69,4 +69,29 @@ export default {
     font-size: 1rem;
   }
 } */
+
+.flyout .chosen-cols {
+  background: none;
+  padding: 0;
+  box-shadow: none;
+  margin: 0;
+}
+
+.flyout .chosen-col {
+  padding: 0;
+}
+
+.flyout .chosen-cols h1 {
+  color: white;
+  font-size: 2.7rem;
+}
+
+.flyout .chosen-cols label {
+  color: white;
+}
+
+.flyout .chosen-cols svg {
+  stroke: white;
+}
+
 </style>

components/Logo.vue

@@ -4,7 +4,7 @@
   </svg>
 </template>
 
-<style>
+<style scoped>
 #flylocal-logo {
   height: clamp(20px, 4rem, 50px);
   transition: all 0.3s;

components/Map.vue

@@ -274,7 +274,7 @@ export default {
 }
 </script>
 
-<style lang="css" >
+<style lang="css">
 :root {
   --map-shadow: 5px 3px 10px rgb(0 0 0 / 20%);
 }
@@ -426,54 +426,4 @@ export default {
   background-color: rgba(0, 127, 255, 0.9);
 }
 
-.btn {
-  border-radius: 999px;
-  padding: 0.5em 0.8em;
-  font-size: min(1rem, 18px);
-  white-space: nowrap;
-  transition: 0.2s all;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  gap: 0.25rem;
-  line-height: 1;
-  min-height: 1em;
-}
-
-.btn svg {
-  height: min(1rem, 18px);
-  display: inline-block;
-  aspect-ratio: 1;
-}
-
-.btn.btn--primary {
-  background: #007fff;
-  color: #fff;
-}
-
-.btn.btn--primary:hover {
-  background: #00ca00;
-  color: #fff;
-}
-
-.btn.btn--cancel {
-  background: red;
-  color: #fff;
-}
-
-.btn.btn--cancel:hover {
-  background: rgb(255, 83, 83);
-  color: #fff;
-}
-
-.btn.btn--secondary {
-  background: #ccc;
-  color: #000;
-}
-
-.btn.btn--secondary:hover {
-  background: rgb(151, 151, 151);
-  color: #000;
-}
-
 </style>

components/OpenIndicator.vue

@@ -25,5 +25,6 @@ export default {
 <style scoped>
   svg {
     max-height: 3.2rem;
+    max-width: 3.2rem;
   }
 </style>

components/TheSideBar.vue

@@ -48,7 +48,7 @@
       <div class="sidebar">
         <div class="sidebar-content">
           <h1 class="h1--about">
-            What is FlyLocal Alaska?
+            What is<br>FlyLocal Alaska?
           </h1>
           <div class="img-divider">
             <img
@@ -75,7 +75,7 @@
             schedules for your favorite Alaskan airlines - all in one place.
           </p>
           <h1 class="h1--about">
-            Why FlyLocal in Alaska?
+            Why FlyLocal<br>in Alaska?
           </h1>
           <div class="img-divider">
             <img
@@ -152,7 +152,7 @@
             it off the bucket-list.
           </p>
           <h1 class="h1--about">
-            Up-to-date Travel Info
+            Up-to-date<br>Travel Info
           </h1>
           <ul class="about-carriers list-lrg">
             <li>
@@ -161,12 +161,13 @@
                   class="img--carrier-logo"
                   :src="require(`@/assets/images/orgs/alaska-travel-info.png`)"
                   alt="Alaska Travel Info"
+                  travel="Alaska Travel Info"
                 >
               </a>
             </li>
           </ul>
           <h1 class="h1--about">
-            Explore Alaska on these great local airlines
+            Explore Alaska<br>on these great local airlines
           </h1>
           <ul class="about-carriers">
             <li v-for="carrier in carriers" :key="carrier.id">
@@ -175,6 +176,7 @@
                   class="img--carrier-logo"
                   :src="require(`@/assets/images/carriers/${carrier.fields.Slug}.png`)"
                   :alt="carrier.fields.Name"
+                  :title="carrier.fields.Name"
                 >
               </a>
             </li>
@@ -189,6 +191,7 @@
                   class="img--carrier-logo"
                   :src="require(`@/assets/images/orgs/aaca.png`)"
                   alt="Alaska Air Carriers Association"
+                  title="Alaska Air Carriers Association"
                 >
               </a>
             </li>
@@ -198,6 +201,7 @@
                   class="img--carrier-logo"
                   :src="require(`@/assets/images/orgs/alaska-tia.png`)"
                   alt="Alaska Travel Industry Association"
+                  title="Alaska Travel Industry Association"
                 >
               </a>
             </li>
@@ -212,6 +216,7 @@
                   class="img--carrier-logo"
                   :src="require(`@/assets/images/orgs/1-million-cups.png`)"
                   alt="1 Million Cups"
+                  title="1 Million Cups"
                 >
               </a>
             </li>
@@ -222,12 +227,13 @@
                   style="background: black; border-radius: 0.5rem; padding-left: 0.4rem;"
                   :src="require(`@/assets/images/orgs/travel-alaska.png`)"
                   alt="Travel Alaska"
+                  title="Travel Alaska"
                 >
               </a>
             </li>
           </ul>
           <div class="company-footer">
-            ⎨&nbsp; FlyLocal v5.0.2 &nbsp;&nbsp;𐄙&nbsp;&nbsp; ©2021 FlyLocal LLC &nbsp;⎬
+            ⎨&nbsp; FlyLocal v5.0.2 &nbsp;&nbsp;𐄙&nbsp;&nbsp; ©2021 FlyLocal, Inc &nbsp;⎬
           </div>
         </div>
         <ul class="contact">
@@ -254,7 +260,7 @@
             </a>
           </li>
           <li class="contact-item">
-            <a href="https://facebook.com/FlyLocalAlaska">
+            <a href="https://facebook.com/iFlyLocal">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon icon-tabler icon-tabler-brand-facebook"
@@ -272,7 +278,7 @@
                   d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"
                 />
               </svg>
-              <span>@fly_local</span>
+              <span>@iFlyLocal</span>
             </a>
           </li>
           <li class="contact-item">
@@ -360,7 +366,7 @@ export default {
     carriers: []
   }),
   async fetch () {
-    const filterFormula = 'AND(NOT(Status="Inactive"),FIND("Alaska",Region)>0)'
+    const filterFormula = 'AND(IsActive=1,FIND("Alaska",Region)>0)'
     const sortFormula = '&sort[0][field]=Name&sort[0][direction]=asc'
 
     let offset

layouts/default.vue

@@ -10,9 +10,3 @@ export default {
 
 }
 </script>
-
-<style>
-  .asdf {
-    color: red;
-  }
-</style>

nuxt.config.js

@@ -1,22 +1,34 @@
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    title: 'flylocal-v5-nuxt',
+    title: 'FlyLocal',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' },
-      { name: 'format-detection', content: 'telephone=no' }
+      { hid: 'description', name: 'description', content: 'FlyLocal is the best way to find local airlines that fly throughout the great state of Alaska. Explore the \'Last Frontier\' with FlyLocal.' },
+      { name: 'format-detection', content: 'telephone=no' },
+      { itemprop: 'name', content: 'Small Planes, Big Experiences' },
+      { itemprop: 'description', content: 'FlyLocal is the best way to find local airlines that fly throughout the great state of Alaska. Explore the \'Last Frontier\' with FlyLocal.' },
+      { itemprop: 'image', content: '/screenshot.png' },
+      { property: 'og:url', content: 'https://iflylocal.com/' },
+      { property: 'og:type', content: 'website' },
+      { property: 'og:title', content: 'Small Planes, Big Experiences' },
+      { property: 'og:description', content: 'FlyLocal is the best way to find local airlines that fly throughout the great state of Alaska. Explore the \'Last Frontier\' with FlyLocal.' },
+      { property: 'og:image', content: '/screenshot.png' },
+      { name: 'twitter:card', content: 'summary_large_image' },
+      { name: 'twitter:title', content: 'Small Planes, Big Experiences' },
+      { name: 'twitter:description', content: 'FlyLocal is the best way to find local airlines that fly throughout the great state of Alaska. Explore the \'Last Frontier\' with FlyLocal.' },
+      { name: 'twitter:image', content: '/screenshot.png' }
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
     ]
   },
 
-  // server: {
-  //   host: '192.168.178.100',
-  //   port: 3010
-  // },
+  server: {
+    host: '192.168.178.100',
+    port: 3010
+  },
 
   serverMiddleware: [
     '~/middleware/redirects.js'

pages/dates.vue

@@ -219,7 +219,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .main-with-header {
   margin-top: clamp(20px + 1.75rem, 4rem + 1.75rem, 50px + 1.75rem);
 }

pages/flights.vue

@@ -154,7 +154,6 @@
               <v-select
                 v-model="numAdult"
                 :options="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-                auto
               />
             </div>
             <div>
@@ -162,7 +161,6 @@
               <v-select
                 v-model="numChild"
                 :options="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-                :menu-props="{ top: true, offsetY: true }"
               />
             </div>
             <button class="btn btn--primary" @click="book">
@@ -353,7 +351,11 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+.main-with-header {
+  margin-top: clamp(20px + 1.75rem, 4rem + 1.75rem, 50px + 1.75rem);
+}
+
 .schedule-wrapper {
   display: flex;
   flex-direction: column;
@@ -575,4 +577,37 @@ span.badge--avail {
   font-size: 1rem;
   font-weight: 300;
 }
+
+</style>
+
+<style>
+.flyout .v-select {
+  font-size: 1.5rem;
+}
+
+.flyout .vs__dropdown-menu {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.flyout .vs__dropdown-menu li {
+  border-radius: 999px;
+  transition: 0.3 all;
+}
+
+.flyout .vs__dropdown-menu li:hover {
+  border-radius: 999px;
+  background-color: #007fff;
+}
+
+.flyout .vs__dropdown-toggle {
+  background: #eee;
+  border-radius: 1.2rem 1.2rem 1.2rem 1.2rem;
+}
+
+.flyout .vs--open .vs__dropdown-toggle {
+  background: #eee;
+  border-radius: 1.2rem 1.2rem 0 0;
+}
 </style>

pages/go.vue

@@ -51,7 +51,7 @@
           from one of <strong>{{ airports_orig.length }}</strong> <span style="color: white;">local</span> airports
         </div>
         <div v-if="selectedOrig.iata && !selectedDest.iata && airports_dest.length > 1 && !isPickerVisible" class="logo-blurb">
-          to one of <strong>{{ airports_dest.length }}</strong> {{ getCompliment }} destinations
+          to one of <strong>{{ airports_dest.length }}</strong> {{ getCompliment() }} destinations
         </div>
       </div>
       <div class="header__col" />
@@ -61,7 +61,7 @@
       {{ selectedDest }}
     </pre> -->
     <main>
-      <nav :class="['nav', { 'nav--show': isPickerVisible },{ 'nav--hide': !isPickerVisible }]">
+      <nav v-if="isMounted" :class="['nav', { 'nav--show': isPickerVisible },{ 'nav--hide': !isPickerVisible }]">
         <AirportPicker
           :airports="airports_orig"
           :selected-airport="selectedOrig"
@@ -106,6 +106,7 @@ export default {
   // components: { AirportPicker },
   data () {
     return {
+      isMounted: false,
       color: 'red',
       isSidebarVisible: false,
       isPickerVisible: false,
@@ -199,12 +200,6 @@ export default {
         return '&fields[]=' + field
       })
       return array.join('')
-    },
-    getCompliment () {
-      const arr = [
-        'beautiful', 'gorgeous', 'breathtaking', 'wild', 'adventurous', 'amazing', 'majestic', 'uncharted', 'unpredictable', 'pristine', 'untamed'
-      ]
-      return arr[Math.floor(Math.random() * arr.length)]
     }
   },
   created () {
@@ -217,12 +212,21 @@ export default {
       this.fetchSingleAirport(this.$route.params.d, false)
     }
   },
+  mounted () {
+    this.isMounted = true
+  },
   // watch: {
   //   history (to, from) {
   //     console.log(`routed from ${from} to ${to}`)
   //   }
   // },
   methods: {
+    getCompliment () {
+      const arr = [
+        'beautiful', 'gorgeous', 'breathtaking', 'wild', 'adventurous', 'amazing', 'majestic', 'uncharted', 'unpredictable', 'pristine', 'untamed'
+      ]
+      return arr[Math.floor(Math.random() * arr.length)]
+    },
     makeOrigin (airport) {
       // console.log(airport)
 
@@ -360,11 +364,11 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 
 .logo-blurb {
   position: absolute;
-  left: min(400px, 47%);
+  left: clamp(47% + 1rem, 51% - 2rem, 47%);
   font-size: clamp(10px, 1rem, 18px);
   color: white;
   top: clamp(20px + 0.25rem, 4rem + 0.25rem, 50px + 0.25rem);

pages/index.vue

@@ -8,7 +8,12 @@
 </template>
 
 <script>
-export default {}
+export default {
+  loading: {
+    color: '#007fff',
+    height: '1rem'
+  }
+}
 </script>
 
 <style scoped>