Update:Disable pod search when no network connection #225

components/ui/Dropdown.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="relative w-full" v-click-outside="clickOutsideObj">
+  <div class="relative w-full" v-click-outside="clickedOutside">
     <p class="text-sm font-semibold" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
-    <button type="button" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
+    <button type="button" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
       <span class="flex items-center" :class="!selectedText ? 'text-gray-300' : 'text-white'">
         <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText || placeholder || '' }}</span>
       </span>
@@ -11,9 +11,9 @@
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-gray-600 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-gray-600 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="listbox">
         <template v-for="item in items">
-          <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
+          <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(item.value)">
             <div class="flex items-center">
               <span class="font-normal ml-3 block truncate font-sans text-sm">{{ item.text }}</span>
             </div>
@@ -42,11 +42,6 @@ export default {
   },
   data() {
     return {
-      clickOutsideObj: {
-        handler: this.clickedOutside,
-        events: ['mousedown'],
-        isActive: true
-      },
       showMenu: false
     }
   },

components/ui/DropdownMenu.vue

@@ -4,7 +4,7 @@
       <slot />
     </div>
     <transition name="menu">
-      <ul ref="menu" v-show="showMenu" class="absolute z-50 -mt-px bg-primary border border-gray-600 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-activedescendant="listbox-option-3" style="width: 160px">
+      <ul ref="menu" v-show="showMenu" class="absolute z-50 -mt-px bg-primary border border-gray-600 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" style="width: 160px">
         <template v-for="item in items">
           <nuxt-link :key="item.value" v-if="item.to" :to="item.to">
             <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">

components/ui/MultiSelect.vue

@@ -15,9 +15,9 @@
         </div>
       </form>
 
-      <ul ref="menu" v-show="showMenu" class="absolute z-50 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+      <ul ref="menu" v-show="showMenu" class="absolute z-50 mt-1 w-full bg-bg border border-gray-600 shadow-lg max-h-56 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in itemsToShow">
-          <li :key="item" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
+          <li :key="item" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
             <div class="flex items-center">
               <span class="font-normal ml-3 block truncate">{{ item }}</span>
             </div>

pages/bookshelf/search.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="w-full h-full relative overflow-hidden">
     <template v-if="!showSelectedFeed">
-      <div class="w-full mx-auto flex py-5 px-2">
+      <div class="w-full mx-auto py-5 px-2">
-        <form @submit.prevent="submit" class="flex flex-grow">
+        <form @submit.prevent="submit">
-          <ui-text-input v-model="searchInput" :disabled="processing" placeholder="Enter search term or RSS feed URL" text-size="sm" class="flex-grow mr-2" />
+          <ui-text-input v-model="searchInput" :disabled="processing || !networkConnected" placeholder="Enter search term or RSS feed URL" text-size="sm" />
           <!-- <ui-btn type="submit" :disabled="processing" small>Submit</ui-btn> -->
         </form>
       </div>
 
-      <div class="w-full mx-auto pb-2 search-results-container overflow-y-auto overflow-x-hidden">
+      <div v-if="networkConnected" class="w-full text-center py-6">
+        <p class="text-lg text-error">No network connection</p>
+      </div>
+      <div v-else class="w-full mx-auto pb-2 search-results-container overflow-y-auto overflow-x-hidden">
         <p v-if="termSearched && !results.length && !processing" class="text-center text-xl">No Podcasts Found</p>
         <template v-for="podcast in results">
           <div :key="podcast.id" class="p-2 border-b border-white border-opacity-10" @click="selectPodcast(podcast)">
@@ -62,7 +65,11 @@ export default {
       showSelectedFeed: false
     }
   },
-  computed: {},
+  computed: {
+    networkConnected() {
+      return this.$store.state.networkConnected
+    }
+  },
   methods: {
     clearSelected() {
       this.selectedPodcastFeed = null