Merge pull request #259 from SpeciesFileGroup/development

Development

.gitignore

@@ -6,6 +6,7 @@ dist-ssr
 /pages
 /components
 /panels
+/layouts
 public
 README.md
 *.local

README.markdown

@@ -209,6 +209,53 @@ export default {
 }
 ```
 
+### Customizing the Layout
+
+The application comes with a default layout that includes a header and a footer. If you'd like to replace this layout with your own, you can do so by creating a custom layout file.
+
+Steps to replace the default layout
+
+1. In the root folder of your project, create a new folder called `layouts` (if it doesn't already exist).
+2. Inside this folder, create a file named default.vue.
+3. Define your custom layout structure inside this file as needed.
+
+Example of layout/default.vue
+
+```vuejs
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+```
+
+This custom layout will replace the default one and be applied throughout the application. You can include your own elements, such as a navigation bar or footer, as needed.
+
+#### Using Multiple Layouts
+
+In addition to replacing the default layout, you can create multiple layouts by adding more .vue files inside the layout folder. You can then specify which layout to use for a specific page by setting the layout name in the meta property of the `<route>` tag in your Single File Component (SFC).
+
+JSON5:
+
+```js
+<route>
+{
+  meta: {
+    layout: 'custom'
+  }
+}
+</route>
+```
+
+YAML:
+
+```yaml
+<route lang="yaml">
+meta:
+  layout: custom
+</route>
+```
+
 ### External panels
 
 To add panels in Taxa pages, create a folder called `panels` in your `setup` branch, and inside it create another folder for your panel. For example: `panels/PanelTest`

src/App.vue

@@ -1,13 +1,31 @@
 <template>
-  <ApplicationLayout>
+  <component :is="currentLayout">
     <router-view />
-  </ApplicationLayout>
+  </component>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { useHead } from 'unhead'
+import { loadUserLayouts } from './utils'
 import ApplicationLayout from '@/layout/Application.vue'
 
+const DEFAULT_LAYOUT = 'defaultLayout'
+
+const route = useRoute()
+const userLayouts = loadUserLayouts()
+const routeLayout = route.meta?.layout
+
+const currentLayout = computed(() => {
+  const layouts = {
+    [DEFAULT_LAYOUT]: ApplicationLayout,
+    ...userLayouts
+  }
+
+  return layouts[route.meta?.layout || DEFAULT_LAYOUT] || ApplicationLayout
+})
+
 useHead({
   title: __APP_ENV__.project_name,
   meta: __APP_ENV__.metadata

src/assets/css/vars.css

@@ -22,6 +22,7 @@
   --color-map-asserted: 249, 115, 22;
   --color-map-type-material: 51, 136, 255;
   --color-map-collection-object: 239, 68, 68;
+  --color-map-field-occurrence: 132, 204, 22;
 
   --color-scrollbar-thumb: 156, 163, 175;
   --color-scrollbar-track: 229, 231, 235;

src/components/Autocomplete/Autocomplete.global.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="autocomplete md:block md:mr-0 mr-3 relative w-fit">
+  <div class="tp-autocomplete md:block md:mr-0 mr-3 relative w-fit">
     <div
       class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
     >
@@ -9,7 +9,7 @@
       v-model="typed"
       type="text"
       autocomplete="none"
-      class="autocomplete__input block box-border min-w-full p-1.5 pl-10 text-base-content rounded border sm:text-sm placeholder:text-sm dark:border-slate-700 border-gray-300 dark:placeholder:text-slate-400 focus:ring-primary-500 focus:border-primary-500"
+      class="tp-autocomplete__input block box-border min-w-full p-1.5 pl-10 text-base-content rounded border sm:text-sm placeholder:text-sm dark:border-slate-700 border-gray-300 dark:placeholder:text-slate-400 focus:ring-primary-500 focus:border-primary-500"
       :placeholder="placeholder"
       ref="inputElement"
     />
@@ -20,12 +20,12 @@
 
     <ul
       v-if="list.length"
-      class="autocomplete__list list absolute z-[500] max-h-52 w-full overflow-y-auto border bg-base-foreground border-base-border !m-0 shadow-md"
+      class="tp-autocomplete__list list absolute z-[500] max-h-52 w-full overflow-y-auto border bg-base-foreground border-base-border !m-0 shadow-md"
     >
       <li
         v-for="item in list"
         :key="item.id"
-        class="autocomplete__item px-3 py-2 border-b text-xs text-base-content cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 border-base-border truncate"
+        class="tp-autocomplete__item px-3 py-2 border-b text-xs text-base-content cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 border-base-border truncate"
         @click="selectItem(item)"
       >
         <span v-html="item[label]" />
@@ -116,7 +116,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.autocomplete {
+.tp-autocomplete {
   &__list {
     display: none;
     padding: 0px;

src/components/Button/VButton.global.vue

@@ -2,6 +2,7 @@
   <button
     type="button"
     :class="[
+      'tp-button',
       'px-3',
       'py-1',
       'hover:bg-opacity-80',

src/components/Card/VCard.global.vue

@@ -1,13 +1,16 @@
 <template>
-  <div class="border-1 card border-base-muted bg-base-foreground print:shadow-none print:border-0 rounded">
+  <div
+    class="border-1 tp-card border-base-muted bg-base-foreground print:shadow-none print:border-0 rounded"
+  >
     <slot />
   </div>
 </template>
 
 <style>
-.card {
-    box-shadow: rgba(30,41,59,.04) 0 2px 4px 0;
-    border: 1px solid rgba(98,105,118,.16);
-    transition: transform .3s ease-out,opacity .3s ease-out,box-shadow .3s ease-out;
+.tp-card {
+  box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0;
+  border: 1px solid rgba(98, 105, 118, 0.16);
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out,
+    box-shadow 0.3s ease-out;
 }
-</style>
+</style>

src/components/Card/VCardContent.global.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 pl-5 pr-5">
+  <div class="p-4 pl-5 pr-5 tp-card-content">
     <slot />
   </div>
-</template>
+</template>

src/components/Card/VCardHeader.global.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="p-4 pl-5 pr-5 border-b font-medium border-base-muted">
+  <div
+    class="tp-card-header p-4 pl-5 pr-5 border-b font-medium border-base-muted"
+  >
     <slot />
   </div>
-</template>
+</template>

src/components/Footer/FooterCitation.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="tp-footer-citation pt-4 pb-2 break-words">
+    {{ project_authors }}
+    <ClientOnly>
+      <span v-html="store.nextAuthor" />
+    </ClientOnly>
+    {{ project_citation }}.
+    <ClientOnly>
+      <span>Retrieved on {{ currentDate }}</span>
+    </ClientOnly>
+    <span v-if="currentUrl">
+      at
+      <a
+        class="text-secondary-color"
+        :href="currentUrl"
+      >
+        {{ currentUrl }}
+      </a>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useFooterStore } from '@/store'
+const { project_authors, project_citation, project_url, hash_mode } =
+  __APP_ENV__
+
+const store = useFooterStore()
+const currentDate = new Date().toISOString().split('T')[0]
+const route = useRoute()
+
+const currentUrl = computed(() => {
+  const projectUrl = (project_url || '').replace(/\/$/, '')
+
+  if (!projectUrl.length) {
+    return ''
+  }
+
+  return hash_mode
+    ? projectUrl + '/#' + route.fullPath
+    : projectUrl + route.fullPath
+})
+</script>

src/components/Footer/FooterCopyright.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="tp-footer-copyright flex items-center text-xs gap-2">
+    <component
+      :is="copyright_image_link ? 'a' : 'span'"
+      :href="copyright_image_link"
+      class="min-w-fit"
+    >
+      <img
+        v-if="copyright_image"
+        :src="copyright_image"
+        alt="copyright"
+      />
+    </component>
+    <span>{{ copyright_text }}</span>
+  </div>
+</template>
+
+<script setup>
+const { copyright_image, copyright_image_link, copyright_text } = __APP_ENV__
+</script>

src/components/Layout/LayoutFooter.vue

@@ -3,39 +3,8 @@
     class="footer text-white bottom-0 border-gray-200 bg-zinc-800 pl-4 pr-4"
   >
     <div class="container mx-auto text-sm pt-2 pb-4">
-      <div class="pt-4 pb-2 break-words">
-        {{ project_authors }}
-        <ClientOnly>
-          <span v-html="store.nextAuthor" />
-        </ClientOnly>
-        {{ project_citation }}.
-        <ClientOnly>
-          <span>Retrieved on {{ currentDate }}</span>
-        </ClientOnly>
-        <span v-if="currentUrl">
-          at
-          <a
-            class="text-secondary-color"
-            :href="currentUrl"
-          >
-            {{ currentUrl }}
-          </a>
-        </span>
-      </div>
-      <div class="flex items-center text-xs gap-2">
-        <component
-          :is="copyright_image_link ? 'a' : 'span'"
-          :href="copyright_image_link"
-          class="min-w-fit"
-        >
-          <img
-            v-if="copyright_image"
-            :src="copyright_image"
-            alt="copyright"
-          />
-        </component>
-        <span>{{ copyright_text }}</span>
-      </div>
+      <FooterCitation />
+      <FooterCopyright />
 
       <hr class="mt-3 mb-3 border-gray-500" />
 
@@ -86,34 +55,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { useFooterStore } from '@/store'
+import FooterCitation from '@/components/Footer/FooterCitation.vue'
+import FooterCopyright from '@/components/Footer/FooterCopyright.vue'
 import FooterAnalytics from '@/components/Footer/FooterAnalytics.vue'
-
-const {
-  project_authors,
-  project_citation,
-  project_url,
-  copyright_text,
-  copyright_image,
-  copyright_image_link,
-  hash_mode
-} = __APP_ENV__
-
-const store = useFooterStore()
-const currentDate = new Date().toISOString().split('T')[0]
-const route = useRoute()
-
-const currentUrl = computed(() => {
-  const projectUrl = (project_url || '').replace(/\/$/, '')
-
-  if (!projectUrl.length) {
-    return ''
-  }
-
-  return hash_mode
-    ? projectUrl + '/#' + route.fullPath
-    : projectUrl + route.fullPath
-})
 </script>

src/components/Layout/LayoutHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <header
-    class="relative bg-header px-2 sm:px-4 py-2.5 shadow-sm shadow-base-muted pl-4 pr-4 h-9 align-middle flex items-center bg-primary-color"
+    class="tp-header relative bg-header px-2 sm:px-4 py-2.5 shadow-sm shadow-base-muted pl-4 pr-4 h-9 align-middle flex items-center bg-primary-color"
   >
     <div
       class="container flex flex-wrap justify-between items-center mx-auto font-medium text-secondary-content"
@@ -23,18 +23,18 @@
       <NavbarMobile />
 
       <div class="relative hidden md:flex items-center ml-auto">
-        <nav class="text-sm leading-6 font-normal">
+        <nav class="tp-header-nav text-sm leading-6 font-normal">
           <ul class="flex space-x-8">
             <li
               v-for="(item, index) in header_links"
               :key="index"
             >
-              <router-link
+              <RouterLink
                 :to="item.link"
                 class="hover:text-primary-content text-primary-content"
               >
                 {{ item.label }}
-              </router-link>
+              </RouterLink>
             </li>
           </ul>
         </nav>

src/components/Map/icons/FieldOccurrence.js

@@ -0,0 +1,5 @@
+export const FieldOccurrence = {
+  className: 'bg-map-field-occurrence rounded-full map-point-marker',
+  iconSize: [8, 8],
+  iconAnchor: [4, 4]
+}

src/components/Map/icons/index.js

@@ -1,4 +1,5 @@
 export * from './AssertedDistribution'
 export * from './CollectionObject'
+export * from './FieldOccurrence'
 export * from './Georeference'
 export * from './TypeMaterial'

src/components/Map/shapes/FieldOccurrence.js

@@ -0,0 +1,5 @@
+export const CollectionObject = {
+  color: `rgb(var(--color-map-field-occurrence))`,
+  weight: 1,
+  fillOpacity: 'var(--color-map-shape-opacity)'
+}