Leo Vasanko
8c6690ea98
- File selections working - CSS more responsive, more consistent use of colors and variables - Keyboard navigation - Added context menu buttons and handler, the menu is still missing - Added download and settings buttons (no functions yet) - Various minor fixes everywhere
108 lines
2.5 KiB
Vue
108 lines
2.5 KiB
Vue
<template>
|
|
<div class="breadcrumb">
|
|
<a href="#/"><component :is="home" /></a>
|
|
<template v-for="(location, index) in props.path" :key="index">
|
|
<a :href="`/#/${props.path.slice(0, index + 1).join('/')}/`">{{
|
|
decodeURIComponent(location)
|
|
}}</a>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
//import home from '@/assets/svg/home.svg'
|
|
import { withDefaults, defineProps, defineAsyncComponent } from 'vue'
|
|
|
|
const home = defineAsyncComponent(() => import(`@/assets/svg/home.svg`))
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
path: Array<string>
|
|
}>(),
|
|
{}
|
|
)
|
|
</script>
|
|
|
|
<style>
|
|
:root {
|
|
--breadcrumb-background-odd: #2d2d2d;
|
|
--breadcrumb-background-even: #404040;
|
|
--breadcrumb-color: #ddd;
|
|
--breadcrumb-hover-color: #fff;
|
|
--breadcrumb-hover-background-odd: #25a;
|
|
--breadcrumb-hover-background-even: #812;
|
|
--breadcrumb-transtime: 0.3s;
|
|
}
|
|
.breadcrumb {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 1em 0 0;
|
|
}
|
|
.breadcrumb > a {
|
|
margin: 0 -0.7rem 0 -0.7rem;
|
|
padding: 0;
|
|
max-width: 8em;
|
|
font-size: 1.3em;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
height: 1em;
|
|
color: var(--breadcrumb-color);
|
|
padding: 0.3em 1.5em;
|
|
clip-path: polygon(0 0, 1em 50%, 0 100%, 100% 100%, 100% 0, 0 0);
|
|
transition: all var(--breadcrumb-transtime);
|
|
}
|
|
.breadcrumb a:first-child {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
clip-path: none;
|
|
}
|
|
.breadcrumb a:last-child {
|
|
max-width: none;
|
|
clip-path: polygon(
|
|
0 0,
|
|
calc(100% - 1em) 0,
|
|
100% 50%,
|
|
calc(100% - 1em) 100%,
|
|
0 100%,
|
|
1em 50%,
|
|
0 0
|
|
);
|
|
}
|
|
.breadcrumb a:only-child {
|
|
clip-path: polygon(
|
|
0 0,
|
|
calc(100% - 1em) 0,
|
|
100% 50%,
|
|
calc(100% - 1em) 100%,
|
|
0 100%,
|
|
0 0
|
|
);
|
|
}
|
|
.breadcrumb svg {
|
|
/* FIXME: Custom positioning to align it well; needs proper solution */
|
|
transform: translate(0.3rem, -0.3rem) scale(80%);
|
|
fill: var(--breadcrumb-color);
|
|
transition: fill var(--breadcrumb-transtime);
|
|
}
|
|
.breadcrumb a:nth-child(odd) {
|
|
background: var(--breadcrumb-background-odd);
|
|
}
|
|
.breadcrumb a:nth-child(even) {
|
|
background: var(--breadcrumb-background-even);
|
|
}
|
|
.breadcrumb a:nth-child(odd):hover, .breadcrumb a:focus:nth-child(odd) {
|
|
background: var(--breadcrumb-hover-background-odd);
|
|
}
|
|
.breadcrumb a:nth-child(even):hover, .breadcrumb a:focus:nth-child(even) {
|
|
background: var(--breadcrumb-hover-background-even);
|
|
}
|
|
.breadcrumb a:hover {
|
|
color: var(--breadcrumb-hover-color);
|
|
}
|
|
.breadcrumb a:hover svg {
|
|
fill: var(--breadcrumb-hover-color);
|
|
}
|
|
</style>
|