- switch to tailwind

.eslintrc.cjs

@@ -25,9 +25,17 @@ module.exports = {
         // parser: "@typescript-eslint/parser",
     },
     rules: {
+        // indent: [
+        //     'error',
+        //     2,
+        //     {
+        //       SwitchCase: 1,
+        //       ignoredNodes: ['ConditionalExpression'], <-- I add this line
+        //     },
+        //   ],
         "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
         "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-        "@typescript-eslint/indent": ["error", 4, { ignoredNodes: ["PropertyDefinition"] }],
+        "@typescript-eslint/indent": ["error", 4, {"SwitchCase": 1, ignoredNodes: ["PropertyDefinition"] }],
         "arrow-parens": "off",
         semi: "error",
         // "@vue-eslint/printWidth": ["error", 120],

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
+    "@mdi/js": "^7.4.47",
     "@openfonts/open-sans_all": "^1.44.2",
     "axios": "^1.2.2",
     "class-transformer": "^0.5.1",
@@ -29,6 +30,7 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-decorators": "^7.22.5",
     "@babel/preset-env": "^7.22.5",
+    "@tailwindcss/forms": "^0.5.7",
     "@types/leaflet": "^1.7.9",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
@@ -40,7 +42,7 @@
     "@vue/eslint-config-typescript": "^13.0.0",
     "autoprefixer": "^10.4.18",
     "babel-preset-typescript-vue3": "^2.0.17",
-    "bulma": "^0.9.3",
+    "bulma": "^1.0.0",
     "eslint": "^8.25.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.9.0",

src/assets/scss/main-styles.scss

@@ -5,7 +5,7 @@
 // @import '~leaflet/dist/leaflet.css';
 
 // 1. Import the initial variables
-@import "~bulma/sass/utilities/_all.sass";
+@import "~bulma/sass/utilities/index.scss";
 
 
 // 2. Set your own initial (brand) variables
@@ -36,27 +36,28 @@ $table-striped-row-even-hover-background-color: #ecf2fa;
 
 // 4. Import the rest of bulma, only what you need from Bulma
 // @import "../../node_modules/bulma/sass/utilities/_all.sass";
-@import "~bulma/sass/grid/_all.sass";
+@import "~bulma/sass/grid/_index.scss";
-@import "~bulma/sass/base/_all.sass";
+@import "~bulma/sass/base/_index.scss";
-@import "~bulma/sass/elements/box.sass";
+@import "~bulma/sass/elements/box.scss";
-@import "~bulma/sass/elements/button.sass";
+@import "~bulma/sass/elements/button.scss";
-@import "~bulma/sass/elements/container.sass";
+// @import "~bulma/sass/elements/container.sass";
-@import "~bulma/sass/elements/content.sass";
+@import "~bulma/sass/layout/container.scss";
-@import "~bulma/sass/elements/title.sass";
+@import "~bulma/sass/elements/content.scss";
-@import "~bulma/sass/elements/icon.sass";
+@import "~bulma/sass/elements/title.scss";
-@import "~bulma/sass/elements/table.sass";
+@import "~bulma/sass/elements/icon.scss";
-@import "~bulma/sass/form/_all.sass";
+@import "~bulma/sass/elements/table.scss";
-@import "~bulma/sass/helpers/_all.sass";
+@import "~bulma/sass/form/_index.scss";
-@import "~bulma/sass/components/navbar.sass";
+@import "~bulma/sass/helpers/_index.scss";
+@import "~bulma/sass/components/navbar.scss";
 // @import "~bulma/sass/components/tabs.sass";
 // @import "~bulma/sass/components/media.sass";
-@import "~bulma/sass/components/modal.sass";
+@import "~bulma/sass/components/modal.scss";
-@import "~bulma/sass/components/card.sass";
+@import "~bulma/sass/components/card.scss";
 
 
-@import "~bulma/sass/components/panel.sass";
+@import "~bulma/sass/components/panel.scss";
 
-@import "~bulma/sass/layout/_all.sass";
+@import "~bulma/sass/layout/_index.scss";
 
 .button {
     text-decoration: none;

src/colors.ts

@@ -0,0 +1,103 @@
+const gradientBgBase = "bg-gradient-to-tr";
+export const gradientBgPurplePink = `${gradientBgBase} from-purple-400 via-pink-500 to-red-500`;
+export const gradientBgDark = `${gradientBgBase} from-slate-700 via-slate-900 to-slate-800`;
+export const gradientBgPinkRed = `${gradientBgBase} from-pink-400 via-red-500 to-yellow-500`;
+export const gradientBgGreenBlue = `${gradientBgBase}  from-green-400 to-blue-400`;
+
+export const colorsBgLight = {
+    white: "bg-white text-black",
+    light: "bg-white text-black dark:bg-slate-900/70 dark:text-white",
+    contrast: "bg-gray-800 text-white dark:bg-white dark:text-black",
+    success: "bg-emerald-500 border-emerald-500 text-white",
+    danger: "bg-red-500 border-red-500 text-white",
+    warning: "bg-yellow-500 border-yellow-500 text-white",
+    info: "bg-blue-500 border-blue-500 text-white",
+};
+
+export const colorsText = {
+    white: "text-black dark:text-slate-100",
+    light: "text-gray-700 dark:text-slate-400",
+    contrast: "dark:text-white",
+    success: "text-emerald-500",
+    danger: "text-red-500",
+    warning: "text-yellow-500",
+    info: "text-blue-500",
+    modern: "text-teal-500",
+};
+
+export const colorsOutline = {
+    white: [colorsText.white, "border-gray-100"],
+    light: [colorsText.light, "border-gray-100"],
+    contrast: [colorsText.contrast, "border-gray-900 dark:border-slate-100"],
+    success: [colorsText.success, "border-emerald-500"],
+    danger: [colorsText.danger, "border-red-500"],
+    warning: [colorsText.warning, "border-yellow-500"],
+    info: [colorsText.info, "border-blue-500"],
+};
+
+export const getButtonColor = (color: "white" | "contrast" | "light" | "success" | "danger" | "warning" | "modern", isOutlined: boolean, hasHover: boolean) => {
+    const colors = {
+        bg: {
+            white: "bg-white text-black",
+            contrast: "bg-gray-800 text-white dark:bg-white dark:text-black",
+            light: "bg-gray-50 text-black",
+            success: "bg-emerald-600 dark:bg-emerald-500 text-white",
+            danger: "bg-red-600 dark:bg-red-500 text-white",
+            warning: "bg-yellow-600 dark:bg-yellow-500 text-white",
+            info: "bg-blue-600 dark:bg-blue-500 text-white",
+            modern: "bg-teal-600 dark:bg-teal-500 text-white",
+        },
+        bgHover: {
+            white: "hover:bg-gray-50",
+            contrast: "hover:bg-gray-900 hover:dark:bg-slate-100",
+            light: "hover:bg-gray-200",
+            success: "hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600",
+            danger: "hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600",
+            warning: "hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600",
+            info: "hover:bg-blue-700 hover:border-blue-700 hover:dark:bg-blue-600 hover:dark:border-blue-600",
+            modern: "hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600",
+        },
+        borders: {
+            white: "border-gray-100",
+            contrast: "border-gray-900 dark:border-slate-100",
+            light: "border-gray-100 dark:border-slate-700",
+            success: "border-emerald-600 dark:border-emerald-500",
+            danger: "border-red-600 dark:border-red-500",
+            warning: "border-yellow-600 dark:border-yellow-500",
+            info: "border-blue-600 dark:border-blue-500",
+            modern: "border-teal-600 dark:border-teal-500",
+        },
+        text: {
+            white: "text-black dark:text-slate-100",
+            contrast: "dark:text-slate-100",
+            light: "text-gray-700 dark:text-slate-400",
+            success: "text-emerald-600 dark:text-emerald-500",
+            danger: "text-red-600 dark:text-red-500",
+            warning: "text-yellow-600 dark:text-yellow-500",
+            info: "text-blue-600 dark:text-blue-500",
+            modern: "text-teal-600 dark:text-teal-500",
+        },
+        outlineHover: {
+            white: "hover:bg-gray-100 hover:text-gray-900 dark:hover:text-slate-900",
+            contrast: "hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black",
+            light: "hover:bg-gray-100 hover:text-gray-900 dark:hover:text-slate-900",
+            success: "hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-600",
+            danger: "hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600",
+            warning: "hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600",
+            info: "hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-blue-600",
+            modern: "hover:bg-teal-600 hover:text-teal hover:dark:bg-teal-100 hover:dark:text-black",
+        },
+    };
+
+    if (!colors.bg[color]) {
+        return color;
+    }
+
+    const base = [isOutlined ? colors.text[color] : colors.bg[color], colors.borders[color]];
+
+    if (hasHover) {
+        base.push(isOutlined ? colors.outlineHover[color] : colors.bgHover[color]);
+    }
+
+    return base;
+};

src/components/BaseButton.vue

@@ -0,0 +1,117 @@
+<script setup="ts">
+import { computed } from "vue";
+// import { Link } from '@inertiajs/vue3';
+// import { Link } from '@inertiajs/inertia-vue3';
+import { getButtonColor } from "@/colors";
+import BaseIcon from "@/components/BaseIcon.vue";
+
+const props = defineProps({
+    label: {
+        type: [String, Number],
+        default: null,
+    },
+    icon: {
+        type: String,
+        default: null,
+    },
+    href: {
+        type: String,
+        default: null,
+    },
+    target: {
+        type: String,
+        default: null,
+    },
+    routeName: {
+        type: String,
+        default: null,
+    },
+    type: {
+        type: String,
+        default: null,
+    },
+    color: {
+        type: String,
+        default: "white",
+    },
+    as: {
+        type: String,
+        default: null,
+    },
+    small: Boolean,
+    outline: Boolean,
+    active: Boolean,
+    disabled: Boolean,
+    roundedFull: Boolean,
+});
+
+const is = computed(() => {
+    if (props.as) {
+        return props.as;
+    }
+
+    // if (props.routeName) {
+    //     return Link;
+    // }
+
+    if (props.href) {
+        return "a";
+    }
+
+    return "button";
+});
+
+const computedType = computed(() => {
+    if (is.value === "button") {
+        return props.type ?? "button";
+    }
+
+    return null;
+});
+
+const labelClass = computed(() => (props.small && props.icon ? "px-1" : "px-2"));
+
+const componentClass = computed(() => {
+    const base = [
+        "inline-flex",
+        "cursor-pointer",
+        "justify-center",
+        "items-center",
+        "whitespace-nowrap",
+        "focus:outline-none",
+        "transition-colors",
+        "focus:ring-2",
+        "duration-150",
+        "border",
+        props.roundedFull ? "rounded-full" : "rounded",
+        props.active ? "ring ring-black dark:ring-white" : "ring-blue-700",
+        getButtonColor(props.color, props.outline, !props.disabled),
+    ];
+
+    if (props.small) {
+        base.push("text-sm", props.roundedFull ? "px-3 py-1" : "p-1");
+    } else {
+        base.push("py-2", props.roundedFull ? "px-6" : "px-3");
+    }
+
+    if (props.disabled) {
+        base.push("cursor-not-allowed", props.outline ? "opacity-50" : "opacity-70");
+    }
+
+    return base;
+});
+</script>
+
+<template>
+    <component
+        v-bind:is="is"
+        v-bind:class="componentClass"
+        v-bind:href="routeName ? routeName : href"
+        v-bind:type="computedType"
+        v-bind:target="target"
+        v-bind:disabled="disabled"
+    >
+        <BaseIcon v-if="icon" v-bind:path="icon" />
+        <span v-if="label" v-bind:class="labelClass">{{ label }}</span>
+    </component>
+</template>

src/components/BaseIcon.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({
+    path: {
+        type: String,
+        required: true,
+    },
+    w: {
+        type: String,
+        default: "w-6",
+    },
+    h: {
+        type: String,
+        default: "h-6",
+    },
+    size: {
+        type: [String, Number],
+        default: 16,
+    },
+});
+
+const spanClass = computed(() => `inline-flex justify-center items-center ${props.w} ${props.h}`);
+</script>
+
+<template>
+    <span v-bind:class="spanClass">
+        <svg viewBox="0 0 24 24" v-bind:width="size" v-bind:height="size" class="inline-block">
+            <path fill="currentColor" v-bind:d="path" />
+        </svg>
+    </span>
+</template>

src/components/SectionBanner.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { gradientBgPurplePink, gradientBgPinkRed, gradientBgGreenBlue } from "@/colors";
+
+const props = defineProps({
+    bg: {
+        type: String,
+        required: true,
+        validator: (value) => ["purplePink", "pinkRed", "greenBlue"].includes(value),
+    },
+});
+
+const colorClass = computed(() => {
+    switch (props.bg) {
+        case "purplePink":
+            return gradientBgPurplePink;
+        case "pinkRed":
+            return gradientBgPinkRed;
+        case "greenBlue":
+            return gradientBgGreenBlue;
+    }
+
+    return "";
+});
+</script>
+<template>
+    <div v-bind:class="colorClass" class="mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
+        <slot />
+    </div>
+</template>

src/components/SectionBannerStarOnGitea.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { mdiGithub } from "@mdi/js";
+import BaseButton from "@/components/BaseButton.vue";
+import SectionBanner from "@/components/SectionBanner.vue";
+</script>
+<template>
+    <SectionBanner bg="greenBlue">
+        <h1 class="text-3xl text-white mb-6">Like the project? Please star on <b>Gitea</b>!</h1>
+        <div>
+            <BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" v-bind:icon="mdiGithub" v-bind:roundedFull="true" label="Gitea" target="_blank" />
+        </div>
+    </SectionBanner>
+</template>

src/components/map/map.component.vue

@@ -12,7 +12,7 @@ export default MapComponent;
 </script>
 
 <style lang="scss" scoped>
-@import "~bulma/sass/utilities/initial-variables.sass";
+@import "~bulma/sass/utilities/initial-variables.scss";
 .mapDesktop {
     overflow: hidden;
     position: absolute;

src/main.ts

@@ -1,14 +1,15 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import App2 from "./App2.vue";
+// add bulma style
 import "./assets/scss/main-styles.scss";
 // import FontAwesomeIcon from "@/utilities/fontawesome";
 import index from "./router/index";
 import route1 from "./router/route1";
 import "@fortawesome/fontawesome-free/css/all.css";
 import VueMatomo from "vue-matomo";
-//  add tailwind style
+// //  add tailwind style
-// import "./index.css";
+// import "@/index.css";
 
 const host = window.location.host;
 const parts = host.split(".");

src/views/help-view/help-view-component.ts

@@ -1,8 +1,12 @@
 // import { Prop } from "vue-property-decorator";
 import { Component, Vue } from "vue-facing-decorator";
+import SectionBannerStarOnGitHub from "@/components/SectionBannerStarOnGitea.vue";
 
 @Component({
     name: "HelpViewComponent",
+    components: {
+        SectionBannerStarOnGitHub,
+    },
 })
 export default class HelpViewComponent extends Vue {
     // results: Array<any> = [];

src/views/help-view/help-view-component.vue

@@ -82,6 +82,7 @@
                 </div>
             </div>
         </div>
+        <SectionBannerStarOnGitHub />
     </div>
 </template>
 

src/views/search-view/search-view-component.ts

@@ -11,7 +11,7 @@ import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } fro
 import { ActiveFilterCategories } from "@/models/solr";
 import { SOLR_HOST, SOLR_CORE } from "@/constants";
 import { IPagination } from "@/models/pagination";
-import PaginationComponent from "@/components/Pagination.vue";
+import PaginationComponent from "@/components/PaginationComponent.vue";
 
 @Component({
     name: "SearchViewComponent",
@@ -198,8 +198,8 @@ export default class SearchViewComponent extends Vue {
     }
 
     onMenuClick(page: number) {
-        const test = page;
+        // const test = page;
-        console.log(test);
+        // console.log(test);
         this.pagination.currentPage = page;
         const start = page * this.pagination.perPage - this.pagination.perPage;
 

src/views/search-view/search-view-component.vue

@@ -37,21 +37,6 @@
                     <strong> 0</strong> results:
                 </div>
             </div>
-
-            <!-- <div id="id-pro-sign-in" class="notification" style="">
-                    <button
-                        class="delete"
-                        onclick="dismissProNotification();"
-                    ></button>
-                    It appears that you're not signed in. You'll need to
-                    <a href="/pro" target="_self">signup for Pro</a> or become a
-                    <a
-                        href="https://coil.com/?ref=InfinitySearch2229"
-                        target="_self"
-                        >Coil member</a
-                    >
-                    to access our results.
-                </div> -->
         </div>
 
         <div class="columns">
@@ -60,51 +45,6 @@
                     <div v-for="(facetItems, key, index) in facets" v-bind:key="index" name="external_card" style="margin-bottom: 0px">
                         <facet-category v-bind:facetItems="facetItems" v-bind:filterName="key" @filter="onFilter"></facet-category>
                     </div>
-                    <!-- <div class="card" name="external_card" style="margin-bottom: 0px">
-                        <header class="card-header">
-                            <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                                <a
-                                    id="https://en.wikipedia.org/w/index.php?search="
-                                    href="https://en.wikipedia.org/w/index.php?search=test"
-                                    name="external_link_0"
-                                    style="display: block"
-                                    rel="noreferrer noopener"
-                                    target="_self"
-                                >
-                                    <img src="/static/images/favicons/wikipedia.ico" name="external_icon_0'" class="external-icon" />
-                                    <span hidden="" class="external-text" name="external_text_0" style="font-size: 0.95rem; display: inline"> Wikipedia Results </span>
-                                </a>
-                            </p>
-                        </header>
-                    </div>
-                    <div class="card" name="external_card" style="margin-bottom: 0px">
-                        <header class="card-header">
-                            <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                                <a
-                                    id="https://duckduckgo.com/?q="
-                                    href="https://duckduckgo.com/?q=test"
-                                    name="external_link_1"
-                                    style="display: block"
-                                    rel="noreferrer noopener"
-                                    target="_self"
-                                >
-                                    <img src="/static/images/favicons/duckduckgo.ico" name="external_icon_1'" class="external-icon" />
-                                    <span hidden="" class="external-text" name="external_text_1" style="font-size: 0.95rem; display: inline"> DuckDuckGo Results </span>
-                                </a>
-                            </p>
-                            <span
-                                class="clickableIcon"
-                                onclick="removeExternalClickable(this)"
-                                style="cursor: pointer; display: block; margin: auto; margin-right: 6px; min-width: 0.5em"
-                            >
-                                <img
-                                    class="handle fa-ellipsis-v"
-                                    src="/static/images/fa/ellipsis-v.svg"
-                                    style="cursor: pointer; display: block; margin: auto; margin-right: 12px; min-width: 0.5em; width: 16px; height: 16px"
-                                />
-                            </span>
-                        </header>
-                    </div> -->
                 </div>
             </div>
 
@@ -119,9 +59,11 @@
                     </span>
                 </div>
                 <div class="results">
+                    <!-- pagination before search results -->
                     <PaginationComponent class="mb-5" v-bind:data="pagination" @menu-click="onMenuClick"></PaginationComponent>
                     <!-- Results section -->
                     <vs-result v-bind:datasets="results"></vs-result>
+                    <!-- pagination after serach results -->
                     <PaginationComponent class="mt-5" v-bind:data="pagination" @menu-click="onMenuClick"></PaginationComponent>
                 </div>
             </div>

tailwind.config.js

@@ -1,9 +1,15 @@
 /** @type {import('tailwindcss').Config} */
+const plugin = require('tailwindcss/plugin');
+
 module.exports = {
     // purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
     content: ["./src/**/*.{edge,js,ts,jsx,tsx,vue}"],
     darkMode: "media", // or 'media' or 'class'
     theme: {
+        asideScrollbars: {
+            light: 'light',
+            gray: 'gray',
+        },
         extend: {
             colors: {
                 primary: "#22C55E",
@@ -31,7 +37,65 @@ module.exports = {
                     900: "#20450A",
                 },
             },
+            zIndex: {
+                '-1': '-1',
+            },
+            flexGrow: {
+                5: '5',
+            },
+            maxHeight: {
+                'screen-menu': 'calc(100vh - 3.5rem)',
+                'modal': 'calc(100vh - 160px)',
+            },
+            transitionProperty: {
+                position: 'right, left, top, bottom, margin, padding',
+                textColor: 'color',
+            },
+            keyframes: {
+                'fade-out': {
+                    from: { opacity: 1 },
+                    to: { opacity: 0 },
+                },
+                'fade-in': {
+                    from: { opacity: 0 },
+                    to: { opacity: 1 },
+                },
+            },
+            animation: {
+                'fade-out': 'fade-out 250ms ease-in-out',
+                'fade-in': 'fade-in 250ms ease-in-out',
+            },
         },
     },
-    plugins: [],
+    plugins: [
+        require('@tailwindcss/forms'),
+        plugin(function ({ matchUtilities, theme }) {
+            matchUtilities(
+                {
+                    'aside-scrollbars': (value) => {
+                        const track = value === 'light' ? '100' : '900';
+                        const thumb = value === 'light' ? '300' : '600';
+                        const color = value === 'light' ? 'gray' : value;
+
+                        return {
+                            'scrollbarWidth': 'thin',
+                            'scrollbarColor': `${theme(`colors.${color}.${thumb}`)} ${theme(`colors.${color}.${track}`)}`,
+                            '&::-webkit-scrollbar': {
+                                width: '8px',
+                                height: '8px',
+                            },
+                            '&::-webkit-scrollbar-track': {
+                                backgroundColor: theme(`colors.${color}.${track}`),
+                            },
+                            '&::-webkit-scrollbar-thumb': {
+                                borderRadius: '0.25rem',
+                                backgroundColor: theme(`colors.${color}.${thumb}`),
+                            },
+                        };
+                    },
+                },
+                { values: theme('asideScrollbars') },
+            );
+        }),
+    ],
 };