Testing Photopicker

README.md

@@ -41,7 +41,7 @@ Then start the dev server:
 npm run dev
 ```
 
-This will serve up the site at [localhost:3002](http://localhost:3002).
+This will serve up the site at [127.0.0.1:3002](http://127.0.0.1:3002).  **If you use localhost instead of 127.0.0.1 you may find page load extremely slow.**
 
 It will watch for changes and do hot module reloading.  Occasionally you'll need to restart Vite when it doesn't 
 pick up a change.

api/ConfigAPI.js

@@ -0,0 +1,7 @@
+import BaseAPI from '@/api/BaseAPI'
+
+export default class ConfigAPI extends BaseAPI {
+  fetchv2(key) {
+    return this.$getv2('/config/' + key)
+  }
+}

api/index.d.ts

@@ -19,6 +19,7 @@ import BanditAPI from './BanditAPI.js'
 import ChatAPI from './ChatAPI.js'
 import CommentAPI from './CommentAPI.js'
 import CommunityEventAPI from './CommunityEventAPI.js'
+import ConfigAPI from './ConfigAPI.js'
 import DashboardAPI from './DashboardAPI.js'
 import DomainAPI from './DomainAPI.js'
 import DonationsAPI from './DonationsAPI.js'
@@ -62,6 +63,7 @@ interface API {
   chat: ChatAPI;
   comment: CommentAPI;
   communityevent: CommunityEventAPI;
+  config: ConfigAPI;
   dashboard: DashboardAPI;
   domain: DomainAPI;
   donations: DonationsAPI;

api/index.js

@@ -17,6 +17,7 @@ import BanditAPI from './BanditAPI.js'
 import ChatAPI from './ChatAPI.js'
 import CommentAPI from './CommentAPI.js'
 import CommunityEventAPI from './CommunityEventAPI.js'
+import ConfigAPI from './ConfigAPI.js'
 import DashboardAPI from './DashboardAPI.js'
 import DomainAPI from './DomainAPI.js'
 import DonationsAPI from './DonationsAPI.js'
@@ -62,6 +63,7 @@ export default (config) => {
     chat: new ChatAPI(options),
     comment: new CommentAPI(options),
     communityevent: new CommunityEventAPI(options),
+    config: new ConfigAPI(options),
     dashboard: new DashboardAPI(options),
     domain: new DomainAPI(options),
     donations: new DonationsAPI(options),

app.vue

@@ -123,6 +123,7 @@ import { useMiscStore } from './stores/misc'
 import { computed, watch, reloadNuxtApp } from '#imports'
 // polyfills
 import 'core-js/actual/array/to-sorted'
+import { useConfigStore } from '~/stores/config'
 
 const route = useRoute()
 const loadingIndicatorThrottle = ref(5000)
@@ -139,7 +140,12 @@ let ready = false
 // Starting with around Nuxt 3.4.1, when we first access the config (here) it has public as we'd expect, but
 // if we store that and access it later, we are just looking at the contents of public.  I don't understand why
 // this is, but we don't expect the config to change, so we take a copy here.
-const runtimeConfig = JSON.parse(JSON.stringify(useRuntimeConfig()))
+const runtimeConfig = JSON.parse(
+  JSON.stringify({
+    public: useRuntimeConfig().public,
+    app: useRuntimeConfig().app,
+  })
+)
 
 const miscStore = useMiscStore()
 const groupStore = useGroupStore()
@@ -148,6 +154,7 @@ const authStore = useAuthStore()
 const userStore = useUserStore()
 const isochroneStore = useIsochroneStore()
 const composeStore = useComposeStore()
+const configStore = useConfigStore()
 const chatStore = useChatStore()
 const addressStore = useAddressStore()
 const trystStore = useTrystStore()
@@ -189,6 +196,7 @@ searchStore.init(runtimeConfig)
 storyStore.init(runtimeConfig)
 volunteeringStore.init(runtimeConfig)
 communityEventStore.init(runtimeConfig)
+configStore.init(runtimeConfig)
 jobStore.init(runtimeConfig)
 teamStore.init(runtimeConfig)
 donationStore.init(runtimeConfig)
@@ -263,6 +271,21 @@ if (process.client) {
         window.location.reload()
       }
     }
+
+    window.onerror = function (message, url, line, col, error) {
+      // We can get this, for example if the CookieYes script is blocked.
+      console.log('Uncaught error', message, url, line, col, error)
+
+      if (url.includes('cookieyes')) {
+        // If CookieYes fails with an error, then we proceed as though it wasn't configured.
+        //
+        // This catches the error on Firefox, but not on Chrome, so it's of limited use.
+        console.log('CookieYes error')
+        if (window.postCookieYes) {
+          window.postCookieYes()
+        }
+      }
+    }
   }
 
   const chatCount = computed(() => {

assets/css/buttons.scss

@@ -83,3 +83,9 @@ button {
     color: $color-gray--normal !important;
   }
 }
+
+.badge {
+  &.text-bg-info {
+    color: white !important;
+  }
+}

assets/css/global.scss

@@ -246,7 +246,8 @@ legend {
 }
 
 .sidebar__wrapper {
-  height: calc(100vh - var(--header-navbar-height) - var(--ads-label-height) - $sticky-banner-height-desktop);
+  height: calc(100vh - var(--header-navbar-height) - $sticky-banner-height-desktop - $ads-cta);
+  overflow-y: scroll;
 
   .card-body .card {
     border-radius: unset;

assets/css/message-images.scss

@@ -0,0 +1,9 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins/_breakpoints';
+
+$thumbnail-size: 150px;
+$thumbnail-size-md: 200px;
+
+$notthumbnail-size: 320px;
+$notthumbnail-size-md: 200px;

assets/css/navbar.scss

@@ -2,6 +2,12 @@
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins/_breakpoints';
 
+$navbar-height: calc(8px + 8px + 64px);
+
+@include media-breakpoint-up(md) {
+  $navbar-height: calc(8px + 8px + 58px);
+}
+
 #navbar_large .nav-item {
   text-align: center;
 }
@@ -148,6 +154,24 @@ svg.fa-icon {
   color: white !important;
 }
 
+.communityeventsbadge {
+  position: absolute;
+  top: 2px;
+  right: -2px;
+  font-size: 11px;
+  background-color: $colour-secondary !important;
+  color: white !important;
+}
+
+.volunteeropportunitiesbadge {
+  position: absolute;
+  top: 2px;
+  right: 9px;
+  font-size: 11px;
+  background-color: $colour-secondary !important;
+  color: white !important;
+}
+
 .browsebadge {
   position: absolute;
   top: 2px;

assets/css/sidebar-ads.scss

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

assets/css/sticky-banner.scss

@@ -1,2 +1,3 @@
-$sticky-banner-height-mobile: 50px;
-$sticky-banner-height-desktop: 90px;
+$sticky-banner-height-mobile: 73px;
+$sticky-banner-height-desktop: 113px;
+$ads-cta: 23px;