When searching, message about not finding anything may be below the f…

…old.

components/AdaptiveMap.vue

@@ -132,24 +132,30 @@
             </b-input-group>
           </div>
         </div>
-        <div
-          v-if="
+        <NoticeMessage v-if="noneFound">
+          <p>
+            Sorry, we didn't find anything. Things come and go quickly, though,
+            so you could try later. Or you could:
+          </p>
+          <GiveAsk class="bg-info" />
+        </NoticeMessage>
+        <NoticeMessage
+          v-else-if="
             mapVisible && !postsVisible && messagesOnMap && messagesOnMap.length
           "
-          class="d-flex justify-content-center mt-1 mb-1"
+          variant="info"
         >
-          <NoticeMessage variant="info">
-            <v-icon icon="angle-double-down" class="pulsate" />
-            Scroll down to see
-            <span v-if="searchOn"
-              >results for "<strong>{{ searchOn }}</strong
-              >"</span
-            ><span v-else>the posts</span>.
-            <v-icon icon="angle-double-down" class="pulsate" />
-          </NoticeMessage>
-        </div>
+          <v-icon icon="angle-double-down" class="pulsate" />
+          Scroll down to see
+          <span v-if="searchOn"
+            >results for "<strong>{{ searchOn }}</strong
+            >"</span
+          ><span v-else>the posts</span>.
+          <v-icon icon="angle-double-down" class="pulsate" />
+        </NoticeMessage>
         <MessageList
           v-model:visible="postsVisible"
+          v-model:none="noneFound"
           :selected-group="selectedGroup"
           :selected-type="selectedType"
           :messages-for-list="filteredMessages"
@@ -390,6 +396,7 @@ export default {
       ],
       selectedGroup: 0,
       context: null,
+      none: false,
     }
   },
   computed: {

components/GroupHeader.vue

@@ -60,13 +60,13 @@
       </div>
     </div>
     <div class="group-description">
-      <p v-if="!group.description">
+      <p v-if="!description">
         Give and get stuff for free with {{ group.namedisplay }}. Offer things
         you don't need, and ask for things you'd like. Don't just recycle -
         reuse with Freegle!
       </p>
       <!-- eslint-disable-next-line -->
-      <span v-if="group.description" v-html="group.description"/>
+      <span v-else="description" v-html="description"/>
     </div>
     <div v-if="showGiveFind" class="d-flex justify-content-between flex-wrap">
       <b-button to="/give" class="mt-1" size="lg" block variant="primary">
@@ -188,6 +188,18 @@ export default {
     amAMember() {
       return this.authStore?.member(this.group?.id)
     },
+    description() {
+      let description = this.group?.description
+
+      if (description) {
+        // Remove some whitespace which appears in some group descriptions.
+        description = description.replace(/<p><br><\/p>/g, '')
+        description = description.replace(/<p><\/p>/g, '')
+      }
+
+      console.log('Return', description)
+      return description
+    },
   },
   methods: {
     async leave() {

components/IsochronePostMapAndList.vue

@@ -126,8 +126,15 @@
             </b-input-group>
           </div>
         </div>
+        <NoticeMessage v-if="noneFound">
+          <p>
+            Sorry, we didn't find anything. Things come and go quickly, though,
+            so you could try later. Or you could:
+          </p>
+          <GiveAsk class="bg-info" />
+        </NoticeMessage>
         <div
-          v-if="!postsVisible && messagesOnMap?.length"
+          v-else-if="!postsVisible && messagesOnMap?.length"
           class="d-flex justify-content-center mt-1 mb-1"
         >
           <NoticeMessage variant="info">
@@ -140,11 +147,11 @@
             <v-icon icon="angle-double-down" class="pulsate" />
           </NoticeMessage>
         </div>
-
         <h2 class="visually-hidden">List of wanteds and offers</h2>
         <MessageList
           v-if="updatedMessagesOnMap || messagesOnMap.length"
           v-model:visible="postsVisible"
+          v-model:none="noneFound"
           :selected-group="selectedGroup"
           :selected-type="selectedType"
           :messages-for-list="filteredMessages"
@@ -321,6 +328,7 @@ export default {
       ],
       selectedGroup: null,
       context: null,
+      noneFound: false,
     }
   },
   computed: {

components/MessageList.vue

@@ -48,13 +48,6 @@
           </div>
         </template>
       </infinite-loading>
-      <NoticeMessage v-if="!loading && !messagesForList?.length">
-        <p>
-          Sorry, we didn't find anything. Things come and go quickly, though, so
-          you could try later. Or you could:
-        </p>
-        <GiveAsk class="bg-info" />
-      </NoticeMessage>
     </div>
     <template #fallback>
       <div class="text-center">
@@ -73,22 +66,18 @@ import { useIsochroneStore } from '../stores/isochrone'
 import { ref } from '#imports'
 import InfiniteLoading from '~/components/InfiniteLoading'
 import { useMiscStore } from '~/stores/misc'
-const NoticeMessage = () => import('./NoticeMessage')
 const OurMessage = () => import('~/components/OurMessage.vue')
 const GroupHeader = () => import('~/components/GroupHeader.vue')
 const JobsTopBar = () => import('~/components/JobsTopBar')
-const GiveAsk = () => import('~/components/GiveAsk.vue')
 
 const MIN_TO_SHOW = 10
 
 export default {
   components: {
     OurMessage,
     GroupHeader,
-    NoticeMessage,
     InfiniteLoading,
     JobsTopBar,
-    GiveAsk,
   },
   props: {
     messagesForList: {
@@ -309,6 +298,9 @@ export default {
 
       return ret
     },
+    noneFound() {
+      return !this.loading && !this.messagesForList?.length
+    },
   },
   watch: {
     toShow: {
@@ -343,6 +335,9 @@ export default {
       // visible.
       this.scrollToMessage = null
     },
+    noneFound(newVal) {
+      this.$emit('update:none', newVal)
+    },
   },
   methods: {
     async loadMore($state) {