Added options, preparing for Quasar rewrite
This commit is contained in:
@@ -0,0 +1,80 @@
|
||||
<script setup lang="ts">
|
||||
import { useRuntimeConfig } from '#imports'
|
||||
|
||||
const props = defineProps({
|
||||
opaque: Boolean,
|
||||
})
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const version = config.public.version
|
||||
const buildDate = config.public.buildDate
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
const mailTemplate = `I've just found a bug on https://enderman.ch and would like to report it.%0D%0A%0D%0AWebsite version: ${
|
||||
config.public.version
|
||||
}%0D%0ABuild date: ${
|
||||
config.public.buildDate
|
||||
}%0D%0ATimestamp: ${new Date().toISOString()}%0D%0A%0D%0A%0D%0ASteps to reproduce:%0D%0A{ Explain in detail what happened here, or attach a video/screenshot }%0D%0A%0D%0AAdditional information:%0D%0A{ Helpful information, such as developer console output / Leave empty if none }%0D%0A%0D%0A%0D%0A// Keep in mind that it's just a template, you can change it as you wish! :)`
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="user-select-none text-align-center line-height-1-5">
|
||||
<span
|
||||
class="font-small"
|
||||
:class="{
|
||||
'footer-transparent': !props.opaque,
|
||||
'text-shadow': !props.opaque,
|
||||
}"
|
||||
>
|
||||
<EMail
|
||||
:class="{
|
||||
'link-hi-force-dark': !props.opaque,
|
||||
'link-hi': props.opaque,
|
||||
}"
|
||||
address="[email protected]"
|
||||
cc="[email protected]"
|
||||
subject="Bug report: enderman.ch"
|
||||
:body="mailTemplate"
|
||||
>
|
||||
<strong>Report a bug</strong>
|
||||
</EMail>
|
||||
<br />
|
||||
© 2018-{{ currentYear }},
|
||||
<a
|
||||
:class="{
|
||||
'link-hi-force-dark': !props.opaque,
|
||||
'link-hi': props.opaque,
|
||||
}"
|
||||
href="https://enderman.ch"
|
||||
>Enderman</a
|
||||
>. All rights reserved.
|
||||
<wbr />
|
||||
<sub class="nobr">
|
||||
β{{ version ? version : '?.?.?' }} ({{
|
||||
buildDate ? buildDate : '1970-01-01'
|
||||
}})
|
||||
</sub>
|
||||
</span>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.footer-transparent {
|
||||
color: white;
|
||||
|
||||
opacity: 0.25;
|
||||
transition: ease 0.3s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.line-height-1-5 {
|
||||
line-height: 14px * 1.5;
|
||||
}
|
||||
|
||||
.text-shadow {
|
||||
text-shadow: black 0 2px 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
alt: {
|
||||
type: String,
|
||||
default: 'Logo',
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Title',
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: 'Description',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-row justify-content-sm-center">
|
||||
<NuxtLink
|
||||
class="no-decoration logo d-flex flex-row align-items-center user-select-none"
|
||||
to="/"
|
||||
>
|
||||
<img
|
||||
class="logo-image"
|
||||
draggable="false"
|
||||
:width="props.width"
|
||||
:height="props.height"
|
||||
:src="props.src"
|
||||
:alt="props.alt"
|
||||
/>
|
||||
<div>
|
||||
<h1 class="alex mb-0">{{ props.title }}</h1>
|
||||
<Separator />
|
||||
<p class="mb-0">{{ props.description }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.logo {
|
||||
> img.logo-image {
|
||||
transition: ease 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> img.logo-image {
|
||||
transform: scale(105%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { usePageStore } from '~/stores/pages'
|
||||
|
||||
import logo from '~/assets/images/logo.gif'
|
||||
|
||||
const pageStore = usePageStore()
|
||||
const { pages } = storeToRefs(pageStore)
|
||||
|
||||
const links = toRaw(pages.value).filter((page) => page.path !== '/')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav
|
||||
class="d-flex flex-row flex-wrap flex-sm-column flex-lg-row justify-content-around justify-content-sm-start justify-content-lg-between gap-2 gap-lg-3"
|
||||
>
|
||||
<Logo
|
||||
:src="logo"
|
||||
alt="Endermanch"
|
||||
title="Enderman"
|
||||
description="official website"
|
||||
/>
|
||||
<ul
|
||||
class="navbar-nav flex-row align-items-center align-items-sm-start align-items-lg-center justify-content-center gap-3 m-2 m-sm-0 mx-lg-2 my-sm-2 my-lg-0"
|
||||
>
|
||||
<li v-for="(page, index) in links" :key="index" class="nav-item">
|
||||
<Route
|
||||
:path="page.path"
|
||||
:name="page.name"
|
||||
:icon="page.icon!.src"
|
||||
:alt="page.icon!.alt"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar'
|
||||
|
||||
import Dialog from '~/components/ui/Dialog.vue'
|
||||
import cogIcon from '~/assets/images/icons/cog.png'
|
||||
import pearlIcon from '~/assets/images/icons/pearl.gif'
|
||||
|
||||
const quasar = useQuasar()
|
||||
|
||||
function optionsMenu() {
|
||||
quasar
|
||||
.dialog({
|
||||
component: Dialog,
|
||||
componentProps: {
|
||||
icon: pearlIcon,
|
||||
alt: 'Pearl',
|
||||
},
|
||||
})
|
||||
.onOk(() => {
|
||||
console.log('OK')
|
||||
})
|
||||
.onCancel(() => {
|
||||
console.log('Cancel')
|
||||
})
|
||||
.onDismiss(() => {
|
||||
console.log('OK or Cancel (Dialog Dismissed)')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="options-layout pass-through">
|
||||
<div class="options clickable" @click="optionsMenu()">
|
||||
<img
|
||||
class="logo user-select-none"
|
||||
draggable="false"
|
||||
:src="cogIcon"
|
||||
alt="Options"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.options {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
padding: 10px;
|
||||
|
||||
&-layout {
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
path: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
external: Boolean,
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
alt: {
|
||||
type: String,
|
||||
default: 'Link',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink
|
||||
class="link d-flex flex-row align-items-center gap-2 user-select-none no-decoration"
|
||||
active-class="icon-active px-sm-3"
|
||||
:to="!props.external ? props.path : undefined"
|
||||
:href="props.external ? props.path : undefined"
|
||||
>
|
||||
<img
|
||||
class="icon-image"
|
||||
draggable="false"
|
||||
:src="props.icon"
|
||||
:alt="props.alt"
|
||||
/>
|
||||
<span class="display-sm">
|
||||
<strong>
|
||||
{{ props.name }}
|
||||
</strong>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.icon {
|
||||
&-active {
|
||||
transform: translate(2px, 2px) rotate3d(1, 1, 1, 5deg) scale(1.25);
|
||||
}
|
||||
|
||||
&-image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
color: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<hr
|
||||
class="radial-gradient m-0 border-0 w-100"
|
||||
:style="{ height: props.height + 'px' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { usePageStore } from '~/stores/pages'
|
||||
|
||||
const pageStore = usePageStore()
|
||||
const { pages } = storeToRefs(pageStore)
|
||||
|
||||
const route = useRoute()
|
||||
const state = computed(() => {
|
||||
const i = pages.value.indexOf(
|
||||
pages.value.find((page) => page.path === route.fullPath)!,
|
||||
)
|
||||
|
||||
return {
|
||||
current: route.fullPath,
|
||||
index: i,
|
||||
next: toRaw(pages.value)[(i + 1) % pages.value.length].path,
|
||||
prev: toRaw(pages.value)[i - 1 < 0 ? pages.value.length - (i + 1) : i - 1]
|
||||
.path,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="control-layout pass-through">
|
||||
<NuxtLink class="control-icon no-decoration" :to="state.prev">
|
||||
<FontAwesomeIcon icon="fa-solid fa-angle-left" fixed-width />
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink class="control-icon no-decoration" :to="state.next">
|
||||
<FontAwesomeIcon icon="fa-solid fa-angle-right" fixed-width />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.control {
|
||||
&-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
position: fixed;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
opacity: 0.25;
|
||||
transition: 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user