fix(search): close keyboard on enter press (#1300)

* fix(search): close keyboard on enter press resolves #1297 * fix(scrape): remove destructure
shadow81627 · Jul 4, 2020 · 09ddb82 · 09ddb82 · vercel · Jul 4, 2020
1 parent e627f38
commit 09ddb82
Show file tree

Hide file tree

Showing 21 changed files with 557 additions and 284 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,17 +1,17 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: "[BUG]"
+title: '[BUG]'
 labels: bug
 assignees: shadow81627
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: "[FEATURE]"
+title: '[FEATURE]'
 labels: enhancement
 assignees: shadow81627
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

diff --git a/assets/link-data/person.json b/assets/link-data/person.json
@@ -25,9 +25,11 @@
   "nationality": "African American",
   "telephone": "(123) 456-6789",
   "url": "http://www.example.com",
-  "sameAs" : [ "https://www.facebook.com/",
-  "https://www.linkedin.com/",
-  "http://twitter.com/",
-  "http://instagram.com/",
-  "https://plus.google.com/"]
-}
+  "sameAs": [
+    "https://www.facebook.com/",
+    "https://www.linkedin.com/",
+    "http://twitter.com/",
+    "http://instagram.com/",
+    "https://plus.google.com/"
+  ]
+}
diff --git a/assets/link-data/pocketpasta.json b/assets/link-data/pocketpasta.json
@@ -5,15 +5,17 @@
   "url": "https://pocketpasta.com",
   "logo": "https://pocketpasta.com/logo.png",
   "foundingDate": "2017",
-  "founders": [{
-    "@type": "Person",
-    "name": "Damien Robinson"
-  }],
-   "contactPoint": {
+  "founders": [
+    {
+      "@type": "Person",
+      "name": "Damien Robinson"
+    }
+  ],
+  "contactPoint": {
     "@type": "ContactPoint",
     "contactType": "customer support",
     "email": "damien.robinson@pocketpasta.com",
-    "areaServed" : "AU",
-    "availableLanguage" : ["English"]
+    "areaServed": "AU",
+    "availableLanguage": ["English"]
   }
 }
diff --git a/assets/link-data/recipe.json b/assets/link-data/recipe.json
@@ -34,7 +34,8 @@
     "2 eggs",
     "3/4 cup milk"
   ],
-  "recipeInstructions": [{
+  "recipeInstructions": [
+    {
       "@type": "HowToStep",
       "text": "Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan."
     },
@@ -79,19 +80,21 @@
     "ratingValue": "5",
     "ratingCount": "18"
   },
-  "video": [{
-    "name": "How to make a Party Coffee Cake",
-    "description": "This is how you make a Party Coffee Cake.",
-    "thumbnailUrl": [
-      "https://example.com/photos/1x1/photo.jpg",
-      "https://example.com/photos/4x3/photo.jpg",
-      "https://example.com/photos/16x9/photo.jpg"
-    ],
-    "contentUrl": "http://www.example.com/video123.flv",
-    "embedUrl": "http://www.example.com/videoplayer.swf?video=123",
-    "uploadDate": "2018-02-05T08:00:00+08:00",
-    "duration": "PT1M33S",
-    "interactionCount": "2347",
-    "expires": "2019-02-05T08:00:00+08:00"
-  }]
-}
+  "video": [
+    {
+      "name": "How to make a Party Coffee Cake",
+      "description": "This is how you make a Party Coffee Cake.",
+      "thumbnailUrl": [
+        "https://example.com/photos/1x1/photo.jpg",
+        "https://example.com/photos/4x3/photo.jpg",
+        "https://example.com/photos/16x9/photo.jpg"
+      ],
+      "contentUrl": "http://www.example.com/video123.flv",
+      "embedUrl": "http://www.example.com/videoplayer.swf?video=123",
+      "uploadDate": "2018-02-05T08:00:00+08:00",
+      "duration": "PT1M33S",
+      "interactionCount": "2347",
+      "expires": "2019-02-05T08:00:00+08:00"
+    }
+  ]
+}
diff --git a/components/Keywords.vue b/components/Keywords.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <strong v-if="label" class="tag pl-0 font-weight-bold">{{ label }}:</strong>
-    <v-chip-group class="d-inline">
+    <v-chip-group class="d-inline" column>
       <v-chip v-for="tag in tags" :key="tag" color="primary" label
         >{{ tag.trim() }}
       </v-chip>

diff --git a/components/List/List.vue b/components/List/List.vue
@@ -11,6 +11,7 @@
       hide-default-footer
       :loading="$fetchState.pending"
       :items-per-page="limit"
+      item-key="slug"
     >
       <template v-slot:header>
         <v-card dark color="primary" class="mb-1">
@@ -23,9 +24,10 @@
                   flat
                   solo-inverted
                   hide-details
-                  prepend-inner-icon="$search"
+                  :prepend-inner-icon="mdiMagnify"
                   label="Search"
                   autocomplete="false"
+                  @keydown.enter="$event.target.blur()"
                 />
               </v-col>
 
@@ -73,7 +75,6 @@
                     <v-btn large text v-bind="attrs" v-on="on">
                       {{ limit }}
                       <span> per page</span>
-                      <v-icon>mdi-chevron-down</v-icon>
                     </v-btn>
                   </template>
                   <v-list>
@@ -127,6 +128,7 @@ import {
   mdiSortAlphabeticalAscending,
   mdiSortAlphabeticalDescending,
   mdiSortVariant,
+  mdiMagnify,
 } from '@mdi/js';
 import ViewSwitcher from '@/components/List/ViewSwitcher';
 import Card from '@/components/List/Card';
@@ -141,7 +143,7 @@ export default {
     heading: { type: String, default: '' },
     layout: { type: String, default: null },
     deep: { type: Boolean, default: false },
-    fetchOnServer: { type: Boolean, default: false },
+    fetchOnServer: { type: Boolean, default: true },
     defaultLimit: { type: Number, default: 4 },
   },
   async fetch() {
@@ -174,10 +176,11 @@ export default {
     list: [],
     keys: ['createdAt', 'name', 'description'],
     total: null,
-    limits: [4, 8, 12],
+    limits: [4, 8, 12, 24],
     mdiSortAlphabeticalAscending,
     mdiSortAlphabeticalDescending,
     mdiSortVariant,
+    mdiMagnify,
   }),
   computed: {
     pages() {
@@ -209,7 +212,7 @@ export default {
     },
     direction: {
       get() {
-        return this.$route.query.direction;
+        return this.$route.query.direction || 'desc';
       },
       set(direction) {
         this.$router.push({ query: this.query({ direction }) });
@@ -263,7 +266,7 @@ export default {
           sortBy: sortBy && sortBy !== 'createdAt' ? sortBy : undefined,
           search: search && search !== '' ? search : undefined,
           view: view && view !== this.layout ? view : undefined,
-          direction: direction !== 'asc' ? direction : undefined,
+          direction: direction !== 'desc' ? direction : undefined,
           page: page !== 1 ? page : undefined,
           limit:
             limit !== this.defaultLimit && limit !== this.total

diff --git a/components/List/ViewSwitcher.vue b/components/List/ViewSwitcher.vue
@@ -2,7 +2,7 @@
   <v-menu left offset-y>
     <template v-slot:activator="{ on }">
       <v-btn large icon aria-label="View as" title="View as" v-on="on">
-        <v-icon>${{ currentLayout.icon }}</v-icon>
+        <v-icon>{{ currentLayout.icon }}</v-icon>
       </v-btn>
     </template>
 
@@ -17,7 +17,7 @@
             <v-list-item-title>{{ layout.label }}</v-list-item-title>
           </v-list-item-content>
           <v-list-item-action>
-            <v-icon>${{ layout.icon }}</v-icon>
+            <v-icon>{{ layout.icon }}</v-icon>
           </v-list-item-action>
         </v-list-item>
       </v-list>
@@ -26,16 +26,16 @@
 </template>
 
 <script>
+import { mdiViewList, mdiViewComfy } from '@mdi/js';
 const defaultLayout = 'list';
-
 export default {
   props: {
-    value: { type: String, default: 'list' },
+    value: { type: String, default: defaultLayout },
     layouts: {
       type: Array,
       default: () => [
-        { icon: 'list', value: 'list', label: 'List' },
-        { icon: 'view_comfy', value: 'columns', label: 'Grid' },
+        { icon: mdiViewList, value: 'list', label: 'List' },
+        { icon: mdiViewComfy, value: 'columns', label: 'Grid' },
       ],
     },
   },

diff --git a/content/recipes/2.json b/content/recipes/2.json
@@ -1,25 +1,23 @@
 {
   "@context": "http://schema.org",
   "@type": "Recipe",
-  "name": "Binging with Babish: Pasta Aglio e Olio from \"Chef\"",
-  "suitableForDiet": "https://schema.org/VeganDiet",
   "author": {
     "@type": "Person",
     "name": "Binging with Babish"
   },
+  "cookTime": "PT22M",
   "datePublished": "2016-03-25",
   "description": "What dish can make any man or woman ache for the touch of Jon Favreau?  Pasta Aglio e Olio is the dreamy midnight snack that lives up to its porny portrayal in the foodie-comedy-drama \"Chef\".",
-  "prepTime": "PT10M",
-  "cookTime": "PT22M",
-  "totalTime": "PT32M",
+  "image": ["https://i.ytimg.com/vi/bJUiWdM__Qw/maxresdefault.jpg"],
   "keywords": "Pasta Aglio e Olio, Pasta, dreamy midnight snack, Chef, Jon Favreau, Binging with Babish",
-  "recipeYield": "2 servings",
-  "recipeCategory": "Dinner",
-  "recipeCuisine": "Italian",
+  "name": "Binging with Babish: Pasta Aglio e Olio from \"Chef\"",
   "nutrition": {
     "@type": "NutritionInformation",
     "calories": "1509 calories"
   },
+  "prepTime": "PT10M",
+  "recipeCategory": "Dinner",
+  "recipeCuisine": "Italian",
   "recipeIngredient": [
     "1/2 head garlic, separated and peeled",
     "1 bunch parsley, rinsed",
@@ -42,16 +40,18 @@
       "text": "Add the pasta, drained, with about 1/4 cup reserved pasta cooking water.  Add lemon juice and parsley, and toss to combine.  Season for salt and pepper, and serve."
     }
   ],
-  "image": ["https://i.ytimg.com/vi/bJUiWdM__Qw/maxresdefault.jpg"],
+  "recipeYield": "2 servings",
+  "sameAs": ["https://www.bingingwithbabish.com/recipes/2017/5/4/aglioeolio"],
+  "suitableForDiet": "https://schema.org/VeganDiet",
+  "totalTime": "PT32M",
   "video": {
     "@type": "VideoObject",
-    "name": "Binging with Babish: Pasta Aglio e Olio from \"Chef\"",
+    "contentUrl": "https://www.youtube.com/watch?v=bJUiWdM__Qw",
     "description": "What dish can make any man or woman ache for the touch of Jon Favreau?  Pasta Aglio e Olio is the dreamy midnight snack that lives up to its porny portrayal in the foodie-comedy-drama \"Chef\".",
+    "duration": "PT3M31S",
     "embedUrl": "https://www.youtube.com/embed/bJUiWdM__Qw",
-    "contentUrl": "https://www.youtube.com/watch?v=bJUiWdM__Qw",
+    "name": "Binging with Babish: Pasta Aglio e Olio from \"Chef\"",
     "thumbnailUrl": "https://i.ytimg.com/vi/bJUiWdM__Qw/maxresdefault.jpg",
-    "duration": "PT3M31S",
     "uploadDate": "2016-03-25T00:00:00+00:00"
-  },
-  "sameAs": ["https://www.bingingwithbabish.com/recipes/2017/5/4/aglioeolio"]
+  }
 }