Remove button styling from "no results" text (#272)

Remove button styling from "no results" text Fixes #215. Co-authored-by: Krystle Salazar <krystle.salazar@ciens.ucv.ve>
WordPress · Sep 30, 2021 · d52a388 · d52a388
1 parent 10623a3
commit d52a388
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 14 deletions.
diff --git a/src/components/MetaSearch/MetaSearchForm.vue b/src/components/MetaSearch/MetaSearchForm.vue
@@ -2,6 +2,7 @@
   <section :key="type" class="p-6 meta-search">
     <header class="mb-10">
       <i18n
+        v-if="!noresult"
         :path="
           supported
             ? 'meta-search.form.supported-title'
@@ -14,6 +15,19 @@
           {{ type }}
         </template>
       </i18n>
+      <i18n
+        v-else
+        path="meta-search.form.no-results-title"
+        tag="h4"
+        class="b-header mb-2"
+      >
+        <template #type>
+          {{ type }}
+        </template>
+        <template #query>
+          {{ query.q }}
+        </template>
+      </i18n>
       <i18n path="meta-search.form.caption" tag="p">
         <template #type>{{ type }}</template>
         <template #break>
@@ -43,6 +57,7 @@ export default {
   props: {
     type: { type: String, required: true },
     supported: { type: Boolean, default: false },
+    noresult: { type: Boolean, required: true },
   },
   computed: {
     query() {

diff --git a/src/components/SearchGridManualLoad.vue b/src/components/SearchGridManualLoad.vue
@@ -40,24 +40,23 @@
         </h5>
       </div>
       <div class="pb-6">
-        <div v-if="!isFetchingImagesError" class="load-more">
+        <div v-if="!isFetchingImagesError && !isFinished" class="load-more">
           <button
             v-show="!isFetchingImages && includeAnalytics"
             class="button"
-            :disabled="isFinished"
             @click="onLoadMoreImages"
             @keyup.enter="onLoadMoreImages"
           >
-            <span v-if="isFinished">{{
-              $t('browse-page.no-more', {
-                type: $t('browse-page.search-form.image'),
-              })
-            }}</span>
-            <span v-else>{{ $t('browse-page.load') }}</span>
+            <span>{{ $t('browse-page.load') }}</span>
           </button>
           <LoadingIcon v-show="isFetchingImages" />
         </div>
-        <MetaSearchForm type="image" :query="query" :supported="true" />
+        <MetaSearchForm
+          type="image"
+          :noresult="storeImagesCount === 0"
+          :query="query"
+          :supported="true"
+        />
       </div>
     </div>
   </section>

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -579,6 +579,7 @@
     "form": {
       "unsupported-title": "Openverse does not yet support built-in {type} search.",
       "supported-title": "Not finding what you're looking for? Try additional {type} sources.",
+      "no-results-title": "No {type} results for \"{query}\".",
       "caption": "Click on a source below to directly search other collections of CC-licensed {type}.{break}Please note that Use filters are not supported for {filter}."
     }
   },

diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2021-09-28T20:27:14+00:00\n"
+"POT-Creation-Date: 2021-09-30T16:59:49+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -1257,7 +1257,7 @@ msgctxt "browse-page.audio-no-results"
 msgid "No audio results"
 msgstr ""
 
-#: src/components/SearchGridManualLoad.vue:125
+#: src/components/SearchGridManualLoad.vue:124
 msgctxt "browse-page.image-no-results"
 msgid "No image results"
 msgstr ""
@@ -1278,7 +1278,7 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. Do not translate words between ### ###.
-#: src/components/SearchGridManualLoad.vue:131
+#: src/components/SearchGridManualLoad.vue:130
 msgctxt "browse-page.image-result-count"
 msgid "###localeCount### image result"
 msgid_plural "###localeCount### image results"
@@ -1301,7 +1301,7 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. Do not translate words between ### ###.
-#: src/components/SearchGridManualLoad.vue:128
+#: src/components/SearchGridManualLoad.vue:127
 msgctxt "browse-page.image-result-count-more"
 msgid "Over ###localeCount### image results"
 msgid_plural "Over ###localeCount### image results"
@@ -1879,6 +1879,12 @@ msgctxt "meta-search.form.supported-title"
 msgid "Not finding what you're looking for? Try additional ###type### sources."
 msgstr ""
 
+#. Do not translate words between ### ###.
+#: src/components/MetaSearch/MetaSearchForm.vue:4
+msgctxt "meta-search.form.no-results-title"
+msgid "No ###type### results for \"###query###\"."
+msgstr ""
+
 #. Do not translate words between ### ###.
 msgctxt "hero.caption"
 msgid "Click on a source below to directly search other collections of CC-licensed ###type###.###break###Please note that Use filters are not supported for ###filter###."

diff --git a/src/pages/search/audio.vue b/src/pages/search/audio.vue
@@ -1,11 +1,17 @@
+<!-- noresult is hardcoded since it does not yet support built-in audio search -->
 <template>
   <div id="tab-audio" role="tabpanel" aria-labelledby="audio">
     <AudioResultsList
       v-if="supported"
       :query="query"
       @onLoadMoreAudios="onLoadMoreAudios"
     />
-    <MetaSearchForm type="audio" :query="query" :supported="supported" />
+    <MetaSearchForm
+      type="audio"
+      :query="query"
+      :noresult="false"
+      :supported="supported"
+    />
   </div>
 </template>
 

diff --git a/src/pages/search/video.vue b/src/pages/search/video.vue
@@ -1,8 +1,10 @@
+<!-- noresult is hardcoded since it does not yet support built-in video search -->
 <template>
   <MetaSearchForm
     id="type-video"
     type="video"
     role="tabpanel"
+    :noresult="false"
     aria-labelledby="video"
   />
 </template>