Johannes Zellner
145 lines
2.6 KiB
Vue
145 lines
2.6 KiB
Vue
<script setup>
|
|
|
|
import { API_ORIGIN } from '../constants.js';
|
|
|
|
defineProps({
|
|
footerHtml: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
iconUrl: {
|
|
type: String,
|
|
default: `${API_ORIGIN}/api/v1/cloudron/avatar`,
|
|
},
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="public-page-layout">
|
|
<div class="public-page-layout-root">
|
|
<div class="public-page-layout-left pankow-no-mobile" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
|
|
<img class="cloudron-avatar" width="128" height="128" :src="iconUrl"/>
|
|
</div>
|
|
|
|
<div class="public-page-layout-right">
|
|
<div class="public-page-layout-mobile-logo">
|
|
<img class="cloudron-avatar" width="128" height="128" :src="iconUrl"/>
|
|
</div>
|
|
<div class="public-page-layout-right-slot">
|
|
<slot></slot>
|
|
</div>
|
|
<div class="footer" v-show="footerHtml" v-html="footerHtml"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.footer {
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 10px;
|
|
text-align: left;
|
|
position: fixed;
|
|
bottom: 0;
|
|
color: var(--pankow-text-color);
|
|
background-color: transparent;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.footer {
|
|
background-color: white;
|
|
text-align: center;
|
|
text-shadow: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.footer {
|
|
background-color: black;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer > .p {
|
|
margin: 4px;
|
|
}
|
|
|
|
.public-page-layout {
|
|
height: 100%;
|
|
}
|
|
|
|
.public-page-layout-root {
|
|
display: flex;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.public-page-layout-left {
|
|
background-color: rgba(0,0,0,0.1);
|
|
background-size: cover;
|
|
background-position: center;
|
|
flex-basis: 30%;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.public-page-layout-left img {
|
|
margin-bottom: 20%;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.public-page-layout-right {
|
|
flex-basis: 70%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
justify-content: space-around;
|
|
padding-left: 20px;
|
|
padding-top: 50px;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
.public-page-layout-right-slot {
|
|
max-width: 400px;
|
|
}
|
|
|
|
.cloudron-avatar {
|
|
border-radius: 10px;
|
|
width: 128px;
|
|
height: 128px;
|
|
}
|
|
|
|
.public-page-layout-mobile-logo {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.public-page-layout-mobile-logo {
|
|
display: block;
|
|
}
|
|
|
|
.public-page-layout-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
max-width: unset;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
justify-content: start;
|
|
flex-basis: unset;
|
|
gap: 20px;
|
|
}
|
|
|
|
.public-page-layout-right-slot {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
|
|
</style>
|