Skip to content

Commit

Permalink
Add autoimport global components, tailwinds configuration and css cha…
Browse files Browse the repository at this point in the history
…nges
  • Loading branch information
José Luis Pereira committed Jun 30, 2022
1 parent c3c6469 commit 52fc0cc
Show file tree
Hide file tree
Showing 33 changed files with 323 additions and 121 deletions.
12 changes: 11 additions & 1 deletion postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
const fs = require('fs')
const {
userTailwindConfigPath,
defaultTailwindConfigPath
} = require('./src/constants/configPaths')

module.exports = {
plugins: {
tailwindcss: {},
tailwindcss: {
config: fs.existsSync(userTailwindConfigPath)
? userTailwindConfigPath
: defaultTailwindConfigPath
},
autoprefixer: {},
},
}
1 change: 1 addition & 0 deletions src/assets/css/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@
}
body {
@apply bg-gray-100;
@apply dark:bg-gray-900;
}
2 changes: 1 addition & 1 deletion src/components/Breadcrumb.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
</svg>
<router-link
v-if="item.length === 1"
class="inline-flex items-center text-sm text-gray-700 hover:text-gray-900"
class="inline-flex items-center text-sm text-accent-100 hover:text-gray-900"
:to="{ name: 'otus-id', params: { id: item[0].id } }"
>
{{ key }}
Expand Down
26 changes: 12 additions & 14 deletions src/components/Button/ButtonExpand.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
<template>
<button
type="button"
class="button-expand"
class="
button-expand
bg-white
dark:text-gray-400
dark:bg-gray-900 border
border-black
w-[14px]
h-[14px]
min-w-[14px]
min-h-[14px]
rounded
leading-3"
@click="isExpanded = !isExpanded"
>
<span v-if="isExpanded">-</span>
Expand Down Expand Up @@ -33,16 +44,3 @@ const isExpanded = computed({
})
</script>

<style scoped>
.button-expand {
width: 13px;
height: 13px;
min-width: 13px;
min-height: 13px;
line-height: 12px;
border: 1px solid black;
background-color: white;
border-radius: 4px;
}
</style>
5 changes: 0 additions & 5 deletions src/components/Card/Card.vue

This file was deleted.

5 changes: 0 additions & 5 deletions src/components/Card/CardHeader.vue

This file was deleted.

5 changes: 5 additions & 0 deletions src/components/Card/VCard.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<template>
<div class="shadow-sm bg-white print:shadow-none print:border-0 dark:bg-gray-800">
<slot />
</div>
</template>
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="p-4">
<div class="p-4 dark:text-slate-400">
<slot />
</div>
</template>
5 changes: 5 additions & 0 deletions src/components/Card/VCardHeader.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<template>
<div class="text-fonts-500 p-4 uppercase text-sm dark:text-slate-200">
<slot />
</div>
</template>
2 changes: 1 addition & 1 deletion src/components/Gallery/GalleryThumbnail.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
class="ml-1 mr-1 mt-2 bg-white flex flex-col justify-center cursor-pointer w-24 h-24 border"
class="ml-1 mr-1 mt-2 bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 border dark:border-gray-700"
:title="title"
>
<img
Expand Down
4 changes: 2 additions & 2 deletions src/components/Gallery/ImageViewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@click="emit('close')"
>
<div
class="container bg-white relative max-h-full w-full md:h-auto rounded-lg shadow-sm"
class="container bg-white dark:bg-gray-800 relative max-h-full w-full md:h-auto rounded-lg shadow-sm"
@click.stop
>
<VSpinner v-if="isLoading" />
Expand All @@ -17,7 +17,7 @@
>
</div>

<div class="bg-white attributions bottom-0 h-24 p-4 rounded-b-lg align-middle flex justify-between flex-col text-center">
<div class="bg-white dark:bg-gray-800 attributions bottom-0 h-24 p-4 rounded-b-lg align-middle flex justify-between flex-col text-center">
<ImageDepictions
class="my-auto"
:depictions="image.depictions"
Expand Down
10 changes: 9 additions & 1 deletion src/components/Gallery/Main.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
<template>
<div class="flex flex-col">
<div class="flex justify-center bg-white border print:hidden">
<div
class="
flex
justify-center
bg-white
dark:bg-gray-800
border print:hidden
dark:border-gray-700"
>
<div class="h-80 max-h-80 flex items-center justify-center">
<img
class="max-h-80 h-max w-100 cursor-zoom-in m-auto"
Expand Down
4 changes: 2 additions & 2 deletions src/components/Layout/LayoutFooter.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<template>
<footer class="footer text-white bottom-0 border-t border-gray-200 bg-zinc-800 pl-4 pr-4">
<footer 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-4">
{{ project_authors }}
{{ project_citation }}
<span v-if="project_url">
&lt;
<a
class="text-blue-500"
class="text-primary-500"
:href="project_url"
>
{{ project_url }}
Expand Down
89 changes: 52 additions & 37 deletions src/components/Layout/LayoutHeader.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
<template>
<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded border-b pl-4 pr-4">
<div class="container flex flex-wrap justify-between items-center mx-auto">
<div
class="
bg-white
border-gray-200
px-2
sm:px-4
py-2.5
rounded
border-b
dark:border-b-gray-800
dark:bg-gray-900
pl-4
pr-4
h-9
align-middle
flex
items-center"
>
<div class="container flex flex-wrap justify-between items-center mx-auto dark:text-slate-200 font-medium">
<a
href="/"
class="flex"
Expand Down Expand Up @@ -47,51 +64,49 @@
/>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto">
<ul class="flex flex-col md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
<li
v-for="(item, index) in links"
:key="index"
>
<router-link
:to="item.link"
class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0"
>
{{ item.label }}
</router-link>
</li>
<li>
<a
href="https://github.com/jlpereira/vite_taxonworks_public_view"
class="block py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0"
<div class="relative hidden lg:flex items-center ml-auto">
<nav class="text-sm leading-6 font-semibold text-slate-700 dark:text-slate-200">
<ul class="flex space-x-8">
<li
v-for="(item, index) in links"
:key="index"
>
<svg
class="w-5 h-5"
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="github"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 496 512"
<router-link
:to="item.link"
class="hover:text-sky-500 dark:hover:text-sky-400"
>
<path
fill="currentColor"
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
/>
</svg>
</a>
</li>
</ul>
{{ item.label }}
</router-link>
</li>
</ul>
</nav>

<div class="flex items-center border-l border-slate-200 ml-6 pl-6 dark:border-slate-800">
<SwitchTheme />
<a
class="ml-6 block text-slate-400 hover:text-slate-500 dark:hover:text-slate-300"
href="https://github.com/SpeciesFileGroup/taxonpages"
>
<svg
viewBox="0 0 16 16"
class="w-5 h-5"
fill="currentColor"
aria-hidden="true"
>
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
</div>
</div>
</div>
</nav>
</div>
</template>

<script setup>
import headerConfiguration from '@/config/header.yml'
import projectConfiguration from '@/config/project.yml'
import SwitchTheme from '../SwitchTheme.vue';
const {
logo,
Expand Down
1 change: 1 addition & 0 deletions src/components/Map/VMap.vue
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ const setGeoJSON = geojson => {
.leaflet-marker-icon {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
opacity: 0.5;
}
Expand Down
73 changes: 73 additions & 0 deletions src/components/SwitchTheme.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<template>
<button
v-if="themeMode === themeModes.dark"
type="button"
@click="themeMode = themeModes.light"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
</button>

<button
v-else
type="button"
@click="themeMode = themeModes.dark"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-slate-400 hover:text-slate-500 dark:hover:text-slate-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
</button>
</template>

<script setup>
import { watch, ref } from 'vue'
const themeModes = {
dark: 'dark',
light: 'light'
}
const themeMode = ref(null)
if (
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
themeMode.value = 'dark'
} else {
themeMode.value = 'light'
}
watch(
themeMode,
(value, oldValue) => {
document.documentElement.classList.add(value)
document.documentElement.classList.remove(oldValue)
localStorage.setItem('theme', value)
},
{ immediate: true }
)
</script>
11 changes: 2 additions & 9 deletions src/components/Tab/TabItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
<li class="inline-flex items-center text-sm">
<router-link
class="p-2 pb-2 block py-2 pr-4 pl-3 text-gray-700 border-b-2 border-transparent "

active-class="border-b-2 border-blue-500 text-blue-500"
active-class="border-b-2 border-blue-500 text-primary-500"
:to="to"
>
<slot />
Expand All @@ -12,14 +11,8 @@
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
active: {
type: Boolean,
default: false
},
defineProps({
to: {
type: [String, Object],
required: true
Expand Down
Loading

0 comments on commit 52fc0cc

Please sign in to comment.