2020-11-01 17:36:00 +00:00
|
|
|
<template>
|
|
|
|
<div
|
2022-01-05 10:05:44 +00:00
|
|
|
:class="[background ? 'has-background' : '', $route.name as string +'-view']"
|
2020-11-01 17:36:00 +00:00
|
|
|
:style="{'background-image': `url(${background})`}"
|
|
|
|
class="link-share-container"
|
|
|
|
>
|
|
|
|
<div class="container has-text-centered link-share-view">
|
|
|
|
<div class="column is-10 is-offset-1">
|
2024-02-07 11:18:19 +00:00
|
|
|
<Logo
|
|
|
|
v-if="logoVisible"
|
|
|
|
class="logo"
|
|
|
|
/>
|
2020-11-01 17:36:00 +00:00
|
|
|
<h1
|
2022-09-07 19:49:14 +00:00
|
|
|
:class="{'m-0': !logoVisible}"
|
2023-04-14 15:41:11 +00:00
|
|
|
:style="{ 'opacity': currentProject?.title === '' ? '0': '1' }"
|
2024-02-07 11:18:19 +00:00
|
|
|
class="title"
|
|
|
|
>
|
2023-04-14 15:41:11 +00:00
|
|
|
{{ currentProject?.title === '' ? $t('misc.loading') : currentProject?.title }}
|
2020-11-01 17:36:00 +00:00
|
|
|
</h1>
|
|
|
|
<div class="box has-text-left view">
|
2024-02-07 11:18:19 +00:00
|
|
|
<router-view />
|
|
|
|
<PoweredByLink />
|
2020-11-01 17:36:00 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2021-12-08 12:22:39 +00:00
|
|
|
<script lang="ts" setup>
|
|
|
|
import {computed} from 'vue'
|
2022-09-24 13:20:40 +00:00
|
|
|
|
|
|
|
import {useBaseStore} from '@/stores/base'
|
2020-11-01 17:36:00 +00:00
|
|
|
|
2021-11-13 14:16:14 +00:00
|
|
|
import Logo from '@/components/home/Logo.vue'
|
|
|
|
import PoweredByLink from './PoweredByLink.vue'
|
2021-10-03 18:48:02 +00:00
|
|
|
|
2022-09-24 13:20:40 +00:00
|
|
|
const baseStore = useBaseStore()
|
2022-11-13 21:04:57 +00:00
|
|
|
const currentProject = computed(() => baseStore.currentProject)
|
2022-09-24 13:20:40 +00:00
|
|
|
const background = computed(() => baseStore.background)
|
|
|
|
const logoVisible = computed(() => baseStore.logoVisible)
|
2020-11-01 17:36:00 +00:00
|
|
|
</script>
|
2021-10-18 12:23:25 +00:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.link-share-container.has-background .view {
|
2022-07-20 23:00:21 +00:00
|
|
|
background-color: transparent;
|
|
|
|
border: none;
|
2021-10-18 12:23:25 +00:00
|
|
|
}
|
2021-10-18 12:33:13 +00:00
|
|
|
|
2021-11-13 14:16:14 +00:00
|
|
|
.logo {
|
|
|
|
max-width: 300px;
|
|
|
|
width: 90%;
|
|
|
|
margin: 2rem 0 1.5rem;
|
2022-07-20 23:00:21 +00:00
|
|
|
height: 100px;
|
2021-11-13 14:16:14 +00:00
|
|
|
}
|
2021-10-18 12:33:13 +00:00
|
|
|
|
2021-11-13 14:16:14 +00:00
|
|
|
.column {
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
2021-10-18 12:33:13 +00:00
|
|
|
|
2021-11-13 14:16:14 +00:00
|
|
|
.title {
|
2021-11-22 21:12:54 +00:00
|
|
|
text-shadow: 0 0 1rem var(--white);
|
2021-11-13 14:16:14 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// FIXME: this should be defined somewhere deep
|
|
|
|
.link-share-view .card {
|
2022-07-20 23:00:21 +00:00
|
|
|
background-color: var(--white);
|
2021-10-18 12:33:13 +00:00
|
|
|
}
|
2021-10-18 12:23:25 +00:00
|
|
|
</style>
|