Merge pull request #90 from Freegle/adblocker

Handle ad blockers and no ads rendered better on chat page

api/ImageAPI.js

@@ -5,7 +5,7 @@ export default class ImageAPI extends BaseAPI {
     return await this.$post('/image', params)
   }
 
-  async postForm(params) {
-    return await this.$postForm('/image', params)
+  async postForm(params, log = true) {
+    return await this.$postForm('/image', params, log)
   }
 }

api/MessageAPI.js

@@ -15,13 +15,14 @@ export default class MessageAPI extends BaseAPI {
     )
   }
 
-  inbounds(swlat, swlng, nelat, nelng, groupid) {
+  inbounds(swlat, swlng, nelat, nelng, groupid, limit) {
     return this.$getv2('/message/inbounds', {
       swlat,
       swlng,
       nelat,
       nelng,
       groupid,
+      limit,
     })
   }
 

app.vue

@@ -5,12 +5,36 @@
         <NavbarDesktop />
         <NavbarMobile />
       </header>
-      <div class="position-absolute top-50 start-50 translate-middle z-3">
+      <div
+        class="position-absolute top-50 start-50 translate-middle z-3 pointer-none"
+      >
         <LoadingIndicator
           with-transition
           :throttle="loadingIndicatorThrottle"
         />
       </div>
+      <template #fallback>
+        <header>
+          <nav
+            class="navbar fixed-top navbar-expand ourBack d-flex justify-content-between d-xl-none showNavBarTop"
+            type="dark"
+          >
+            <div class="container-fluid">
+              <div />
+              <div />
+              <div class="d-flex align-items-center">
+                <ul class="nav">
+                  <a
+                    ><div class="btn btn-white mr-2 trans">
+                      Log in or Join
+                    </div></a
+                  >
+                </ul>
+              </div>
+            </div>
+          </nav>
+        </header>
+      </template>
     </client-only>
     <div
       v-if="ready"
@@ -66,6 +90,7 @@ const loadingIndicatorThrottle = ref(5000)
 const { isLoading } = useLoadingIndicator({
   throttle: loadingIndicatorThrottle.value,
 })
+
 // Don't render the app until we've done everything in here.
 let ready = false
 
@@ -227,9 +252,18 @@ if (process.client) {
 }
 ready = true
 </script>
-
 <style lang="scss">
 .nuxt-layout-wrapper {
   transition: all 0.25s;
 }
+
+.trans {
+  background-color: transparent !important;
+  color: transparent !important;
+  border: none !important;
+}
+
+.pointer-none {
+  pointer-events: none;
+}
 </style>

assets/css/global.scss

@@ -347,6 +347,11 @@ label {
   text-decoration: none;
 }
 
+.btn-xl {
+  padding: 10px 20px;
+  font-size: 20px;
+}
+
 // Bootstrap 4 class compatibility.
 .ml-1 {
   @extend .ms-1
@@ -573,7 +578,5 @@ label {
   --popper-theme-border-radius: 6px;
   --popper-theme-padding: 10px;
   --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
-  --ads-height: 258px;
-  --ads-label-height: 42px;
   --header-navbar-height: 76px;
 }

assets/css/sidebar-ads.scss

@@ -0,0 +1,3 @@
+$sidebar-ads-height-small: 258px;
+$sidebar-ads-height-large: 608px;
+$sidebar-ads-label-height: 42px;

components/AddToCalendar.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <b-button :variant="variant" :size="size" @click="download">
+    <b-button
+      :variant="variant"
+      :size="size"
+      :class="btnClass"
+      @click="download"
+    >
       <v-icon icon="calendar-alt" />
       Add to Calendar
     </b-button>
@@ -25,6 +30,11 @@ export default {
       required: false,
       default: 'md',
     },
+    btnClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   methods: {
     async download(e) {

components/AutoComplete.vue

@@ -1,45 +1,85 @@
 <template>
   <div :class="`${getClassName('wrapper')} autocomplete-wrapper`">
     <div :class="parentClass">
-      <b-input-group :class="wrapClass">
-        <input
-          :id="id"
-          ref="input"
-          v-model="type"
-          type="text"
-          :class="`${getClassName('input')} autocomplete-input`"
-          :placeholder="placeholder"
-          :name="name"
-          autocomplete="off"
-          :invalid="invalid"
-          :size="size"
-          @input="handleInput"
-          @dblclick="handleDoubleClick"
-          @blur="handleBlur"
-          @keydown="handleKeyDown"
-          @focus="handleFocus"
-        />
-        <b-input-group-append>
-          <b-button variant="white" class="transbord p-0 pr-2" tabindex="-1">
-            <v-icon
-              icon="sync"
-              :class="
-                'text-success fa-spin ' +
-                (ajaxInProgress ? 'visible' : 'invisible')
-              "
+      <client-only>
+        <b-input-group :class="wrapClass">
+          <input
+            :id="id"
+            ref="input"
+            v-model="type"
+            type="text"
+            :class="`${getClassName('input')} autocomplete-input`"
+            :placeholder="placeholder"
+            :name="name"
+            autocomplete="off"
+            :invalid="invalid"
+            :size="size"
+            @input="handleInput"
+            @dblclick="handleDoubleClick"
+            @blur="handleBlur"
+            @keydown="handleKeyDown"
+            @focus="handleFocus"
+          />
+          <b-input-group-append>
+            <b-button variant="white" class="transbord p-0 pr-2" tabindex="-1">
+              <v-icon
+                icon="sync"
+                :class="
+                  'text-success fa-spin ' +
+                  (ajaxInProgress ? 'visible' : 'invisible')
+                "
+              />
+            </b-button>
+          </b-input-group-append>
+        </b-input-group>
+        <b-button
+          v-if="searchbutton"
+          variant="primary"
+          size="lg"
+          class="searchbutton"
+          @click="search"
+        >
+          <v-icon icon="search" />&nbsp;Search
+        </b-button>
+        <template #fallback>
+          <div :class="'input-group ' + wrapClass" role="group">
+            <input
+              :id="id"
+              ref="input"
+              v-model="type"
+              type="text"
+              :class="`${getClassName('input')} autocomplete-input`"
+              :placeholder="placeholder"
+              :name="name"
+              autocomplete="off"
+              :invalid="invalid"
+              :size="size"
             />
-          </b-button>
-        </b-input-group-append>
-      </b-input-group>
-      <b-button
-        v-if="searchbutton"
-        variant="primary"
-        size="lg"
-        class="searchbutton"
-        @click="search"
-      >
-        <v-icon icon="search" />&nbsp;Search
-      </b-button>
+            <button
+              class="btn btn-md btn-white transbord p-0 pr-2"
+              type="button"
+              tabindex="-1"
+            >
+              <svg
+                class="svg-inline--fa fa-arrows-rotate text-success fa-spin invisible"
+                aria-hidden="true"
+                focusable="false"
+                data-prefix="fas"
+                data-icon="arrows-rotate"
+                role="img"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 512 512"
+              >
+                <path
+                  class=""
+                  fill="currentColor"
+                  d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H352c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V80c0-17.7-14.3-32-32-32s-32 14.3-32 32v35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V432c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H160c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"
+                ></path>
+              </svg>
+            </button>
+          </div>
+        </template>
+      </client-only>
     </div>
     <div v-if="invalid" class="text-danger text-center">
       Sorry, we can't find that.

components/ChatBase.vue

@@ -163,6 +163,6 @@ export default {
   padding-left: 4px;
   padding-right: 2px;
   word-wrap: break-word;
-  line-height: 1.75;
+  line-height: 1.5;
 }
 </style>

components/ChatMessage.vue

@@ -300,7 +300,7 @@ export default {
   border-radius: 10px;
   padding: 2px 4px 2px 4px;
   word-wrap: break-word;
-  line-height: 1.75;
+  line-height: 1.5;
 
   @include media-breakpoint-up(md) {
     padding: 4px 8px 4px 8px;

components/ChatMessagePromised.vue

@@ -102,17 +102,18 @@
               @error="brokenImage"
             />
           </nuxt-link>
-          <ProfileImage
-            :image="me.profile.path"
-            class="mr-1 mb-1 mt-1 inline"
-            is-thumbnail
-            size="sm"
-          />
-          <span class="small black"
-            >You promised <strong>{{ otheruser.displayname }}</strong
-            >:</span
-          >
-          <br />
+          <div class="d-flex justify-content-start align-items-center">
+            <ProfileImage
+              :image="me.profile.path"
+              class="mr-1 inline"
+              is-thumbnail
+              size="sm"
+            />
+            <div class="small black">
+              You promised <strong>{{ otheruser.displayname }}</strong
+              >:
+            </div>
+          </div>
           <nuxt-link
             no-prefetch
             :to="

components/ChatMobileNavbar.vue

@@ -47,7 +47,7 @@
     </div>
     <ProfileModal
       v-if="showProfileModal"
-      :id="otheruser.id"
+      :id="otheruser?.id"
       close-on-message
       @hidden="showProfileModal = false"
     />
@@ -106,9 +106,9 @@ function showInfo() {
   display: grid;
   grid-template-columns:
     0.25em 40px 50px calc(
-      100vw - 0.5em - 40px - 0.25em - 50px - 0.25em - 100px - 0.5em
+      100vw - 0.5em - 40px - 0.25em - 50px - 0.25em - 110px - 0.5em
     )
-    100px 0.25em;
+    110px 0.25em;
   grid-column-gap: 0.25em;
 
   .offline,

components/ChatPane.vue

@@ -76,6 +76,8 @@ function resize() {
   windowHeight.value = window.innerHeight
 }
 
+const stickyAdRendered = computed(() => miscStore.stickyAdRendered)
+
 const theHeight = computed(() => {
   const vh100 = Math.max(
     document.documentElement.clientHeight,
@@ -85,7 +87,6 @@ const theHeight = computed(() => {
   let ret = null
 
   if (miscStore.breakpoint === 'xs' || miscStore.breakpoint === 'sm') {
-    // On mobile there is a sticky ad at the bottom and we want to make sure the buttons show.
     ret = navBarHidden.value ? vh100 : vh100 - 60
   } else {
     ret = vh100 - 74
@@ -231,21 +232,31 @@ function typing(val) {
 @import 'assets/css/sticky-banner.scss';
 
 .chatpane {
-  min-height: calc(100vh - $sticky-banner-height-mobile);
+  min-height: calc(
+    100vh - $sticky-banner-height-mobile * v-bind('stickyAdRendered')
+  );
 
   @include media-breakpoint-up(md) {
-    min-height: calc(100vh - $sticky-banner-height-desktop);
+    min-height: calc(
+      100vh - $sticky-banner-height-desktop * v-bind('stickyAdRendered')
+    );
   }
 }
 
 .chatHolder {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: calc(v-bind(theHeight) - $sticky-banner-height-mobile);
+  height: calc(
+    v-bind(theHeight) - $sticky-banner-height-mobile *
+      v-bind('stickyAdRendered')
+  );
 
   @include media-breakpoint-up(md) {
-    height: calc(v-bind(theHeight) - $sticky-banner-height-desktop);
+    height: calc(
+      v-bind(theHeight) - $sticky-banner-height-desktop *
+        v-bind('stickyAdRendered')
+    );
   }
 }