- switch to tailwind
This commit is contained in:
parent
c6469b00b4
commit
e997c0e1a1
|
|
@ -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],
|
||||
|
|
|
|||
562
package-lock.json
generated
562
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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/base/_all.sass";
|
||||
@import "~bulma/sass/elements/box.sass";
|
||||
@import "~bulma/sass/elements/button.sass";
|
||||
@import "~bulma/sass/elements/container.sass";
|
||||
@import "~bulma/sass/elements/content.sass";
|
||||
@import "~bulma/sass/elements/title.sass";
|
||||
@import "~bulma/sass/elements/icon.sass";
|
||||
@import "~bulma/sass/elements/table.sass";
|
||||
@import "~bulma/sass/form/_all.sass";
|
||||
@import "~bulma/sass/helpers/_all.sass";
|
||||
@import "~bulma/sass/components/navbar.sass";
|
||||
@import "~bulma/sass/grid/_index.scss";
|
||||
@import "~bulma/sass/base/_index.scss";
|
||||
@import "~bulma/sass/elements/box.scss";
|
||||
@import "~bulma/sass/elements/button.scss";
|
||||
// @import "~bulma/sass/elements/container.sass";
|
||||
@import "~bulma/sass/layout/container.scss";
|
||||
@import "~bulma/sass/elements/content.scss";
|
||||
@import "~bulma/sass/elements/title.scss";
|
||||
@import "~bulma/sass/elements/icon.scss";
|
||||
@import "~bulma/sass/elements/table.scss";
|
||||
@import "~bulma/sass/form/_index.scss";
|
||||
@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/card.sass";
|
||||
@import "~bulma/sass/components/modal.scss";
|
||||
@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;
|
||||
|
|
|
|||
103
src/colors.ts
Normal file
103
src/colors.ts
Normal file
|
|
@ -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;
|
||||
};
|
||||
117
src/components/BaseButton.vue
Normal file
117
src/components/BaseButton.vue
Normal file
|
|
@ -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>
|
||||
32
src/components/BaseIcon.vue
Normal file
32
src/components/BaseIcon.vue
Normal file
|
|
@ -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>
|
||||
30
src/components/SectionBanner.vue
Normal file
30
src/components/SectionBanner.vue
Normal file
|
|
@ -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>
|
||||
13
src/components/SectionBannerStarOnGitea.vue
Normal file
13
src/components/SectionBannerStarOnGitea.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// import "./index.css";
|
||||
// // add tailwind style
|
||||
// import "@/index.css";
|
||||
|
||||
const host = window.location.host;
|
||||
const parts = host.split(".");
|
||||
|
|
|
|||
|
|
@ -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> = [];
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SectionBannerStarOnGitHub />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
console.log(test);
|
||||
// const test = page;
|
||||
// console.log(test);
|
||||
this.pagination.currentPage = page;
|
||||
const start = page * this.pagination.perPage - this.pagination.perPage;
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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') },
|
||||
);
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user