enderman.ch/index
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move to appConfig, Vuetify 3

Browse Source
This commit is contained in:
endermanch
2024-01-27 19:17:30 +03:00
parent 4ac1fd9574
commit 1f7c8f0ed4
29 changed files with 1329 additions and 1323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/animations/AClientOnly.vue
+22 -14
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
import { useQuasar } from 'quasar'
import type { PropType } from 'vue'
type ModeOptions = 'in-out' | 'out-in' | 'default' | undefined
@@ -17,9 +16,12 @@ type RenderOptions =
| 'lg-down'
| 'lg-up'
| 'xl'
| 'xl-down'
| 'xl-up'
| 'xxl'
| undefined
const quasar = useQuasar()
const vdisp = ref(useVDisplay())
const props = defineProps({
fallback: {
type: String,
@@ -54,27 +56,33 @@ const render = computed(() => {
case 'always':
return true
case 'xs':
return quasar.screen.xs
return vdisp.value.xs
case 'sm':
return quasar.screen.sm
return vdisp.value.sm
case 'sm-down':
return quasar.screen.xs || quasar.screen.sm
return vdisp.value.smAndDown
case 'sm-up':
return !quasar.screen.xs
return vdisp.value.smAndUp
case 'md':
return quasar.screen.md
return vdisp.value.md
case 'md-down':
return !quasar.screen.lg && !quasar.screen.xl
return vdisp.value.mdAndDown
case 'md-up':
return !quasar.screen.xs && !quasar.screen.sm
return vdisp.value.mdAndUp
case 'lg':
return quasar.screen.lg
return vdisp.value.lg
case 'lg-down':
return !quasar.screen.xl
return vdisp.value.lgAndDown
case 'lg-up':
return quasar.screen.lg || quasar.screen.xl
return vdisp.value.lgAndUp
case 'xl':
return quasar.screen.xl
return vdisp.value.xl
case 'xl-down':
return vdisp.value.xlAndDown
case 'xl-up':
return vdisp.value.xlAndUp
case 'xxl':
return vdisp.value.xxl
default:
return false
}
@@ -91,7 +99,7 @@ const render = computed(() => {
:enter-active-class="`animate__animated ${props.enter}`"
:leave-active-class="`animate__animated ${props.leave}`"
>
<slot v-if="(quasar.screen.width || quasar.screen.height) && render" />
<slot v-if="render" />
</Transition>
</ClientOnly>
</template>
components/blocks/Flooter.vue
+8 -10
View File
@@ -1,24 +1,22 @@
<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 config = useAppConfig()
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
config.build.version
}%0D%0ABuild date: ${
config.public.buildDate
config.build.date
}%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">
<footer
class="user-select-none pass-through text-align-center line-height-1-5"
>
<span
class="font-small"
:class="{
@@ -50,8 +48,8 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
>. All rights reserved.
<wbr />
<sub class="nobr">
β{{ version ? version : '?.?.?' }} ({{
buildDate ? buildDate : '1970-01-01'
β{{ config.build.version ? config.build.version : '?.?.?' }} ({{
config.build.date ? config.build.date : '1970-01-01'
}})
</sub>
</span>
components/blocks/Options.vue
+1 -23
View File
@@ -1,31 +1,9 @@
<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)')
})
}
function optionsMenu() {}
</script>
<template>
components/blocks/SwipeControls.vue
+2 -3
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { storeToRefs } from 'pinia'
import { usePageStore } from '~/stores/pages'
@@ -25,11 +24,11 @@ const state = computed(() => {
<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 />
<Icon name="iconoir:nav-arrow-left" />
</NuxtLink>
<NuxtLink class="control-icon no-decoration" :to="state.next">
<FontAwesomeIcon icon="fa-solid fa-angle-right" fixed-width />
<Icon name="iconoir:nav-arrow-right" />
</NuxtLink>
</div>
</template>
components/global/icon-github.vue
+1
View File
@@ -0,0 +1 @@
<template></template>
components/global/icon-steam.vue
+1
View File
@@ -0,0 +1 @@
<template></template>
components/global/icon-twitch.vue
+1
View File
@@ -0,0 +1 @@
<template></template>
components/ui/Dialog.vue
+58 -66
View File
@@ -1,13 +1,4 @@
<script setup>
import { useDialogPluginComponent } from 'quasar'
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
useDialogPluginComponent()
defineEmits({
...useDialogPluginComponent.emitsObject,
})
const props = defineProps({
icon: {
type: String,
@@ -24,61 +15,62 @@ const animation = ref(true)
</script>
<template>
<QDialog ref="dialogRef" @hide="onDialogHide">
<QCard class="dialog">
<div class="overlay background"></div>
<div class="overlay content">
<img
class="icon-badge user-select-none"
draggable="false"
:src="props.icon"
:alt="props.alt"
/>
<QCardSection>
<h3 class="alex text-align-center">Site options</h3>
<div class="row">
<div class="col-12 col-sm-6">
<p>
<strong>Theme</strong><br />
Available in all flavors, vanilla and chocolate.
</p>
<QToggle
v-model="theme"
class="px-5"
color="black"
dense
size="xl"
:unchecked-icon="mdiWhiteBalanceSunny"
:checked-icon="mdiWeatherNight"
icon-color="primary"
@change="theme = !theme"
/>
<QCheckbox v-model="theme" />
</div>
<div class="col-12 col-sm-6">
<p>
<strong>Animation</strong><br />
Some computers may have issues rendering that gorgeous
background animation. Enabling it substantially increases power
consumption.
</p>
<QToggle
v-model="animation"
color="purple"
dense
size="xl"
:unchecked-icon="mdiStop"
:checked-icon="mdiPlay"
@change="theme = !theme"
/>
</div>
</div>
Report a bug
<QCardActions>
<QBtn label="OK" @click="onDialogOK" />
</QCardActions>
</QCardSection>
</div>
</QCard>
</QDialog>
<p>FALSE</p>
<!-- <QDialog ref="dialogRef" @hide="onDialogHide">-->
<!-- <QCard class="dialog">-->
<!-- <div class="overlay background"></div>-->
<!-- <div class="overlay content">-->
<!-- <img-->
<!-- class="icon-badge user-select-none"-->
<!-- draggable="false"-->
<!-- :src="props.icon"-->
<!-- :alt="props.alt"-->
<!-- />-->
<!-- <QCardSection>-->
<!-- <h3 class="alex text-align-center">Site options</h3>-->
<!-- <div class="row">-->
<!-- <div class="col-12 col-sm-6">-->
<!-- <p>-->
<!-- <strong>Theme</strong><br />-->
<!-- Available in all flavors, vanilla and chocolate.-->
<!-- </p>-->
<!-- <QToggle-->
<!-- v-model="theme"-->
<!-- class="px-5"-->
<!-- color="black"-->
<!-- dense-->
<!-- size="xl"-->
<!-- :unchecked-icon="mdiWhiteBalanceSunny"-->
<!-- :checked-icon="mdiWeatherNight"-->
<!-- icon-color="primary"-->
<!-- @change="theme = !theme"-->
<!-- />-->
<!-- <QCheckbox v-model="theme" />-->
<!-- </div>-->
<!-- <div class="col-12 col-sm-6">-->
<!-- <p>-->
<!-- <strong>Animation</strong><br />-->
<!-- Some computers may have issues rendering that gorgeous-->
<!-- background animation. Enabling it substantially increases power-->
<!-- consumption.-->
<!-- </p>-->
<!-- <QToggle-->
<!-- v-model="animation"-->
<!-- color="purple"-->
<!-- dense-->
<!-- size="xl"-->
<!-- :unchecked-icon="mdiStop"-->
<!-- :checked-icon="mdiPlay"-->
<!-- @change="theme = !theme"-->
<!-- />-->
<!-- </div>-->
<!-- </div>-->
<!-- Report a bug-->
<!-- <QCardActions>-->
<!-- <QBtn label="OK" @click="onDialogOK" />-->
<!-- </QCardActions>-->
<!-- </QCardSection>-->
<!-- </div>-->
<!-- </QCard>-->
<!-- </QDialog>-->
</template>
components/ui/XIcon.vue
+20
View File
@@ -0,0 +1,20 @@
<script setup lang="ts">
const props = defineProps({
name: {
type: String,
required: true,
},
size: {
type: String,
default: 'md',
},
color: {
type: String,
default: 'currentColor',
},
})
</script>
<template></template>
<style scoped lang="scss"></style>