Use a shared public view layout component

2025-03-31 11:18:09 +02:00
parent cbba373d7d
commit 15269713cc
11 changed files with 176 additions and 238 deletions
@@ -0,0 +1,65 @@
+<script setup>
+
+import { API_ORIGIN } from '../constants.js';
+
+const props = defineProps({
+  footerHtml: {
+    type: String,
+    default: '',
+  },
+});
+
+</script>
+
+<template>
+  <!-- TODO mobile layout -->
+  <div class="public-page-layout">
+    <div class="public-page-layout-root">
+      <div class="public-page-layout-left" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
+        <img width="128" height="128" style="margin-bottom: 20%;" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
+      </div>
+
+      <div class="public-page-layout-right">
+        <slot></slot>
+      </div>
+    </div>
+
+    <footer v-show="footerHtml" v-html="footerHtml"></footer>
+  </div>
+</template>
+
+<style scoped>
+
+.public-page-layout {
+  height: 100%;
+  overflow: hidden;
+}
+
+.public-page-layout-root {
+  display: flex;
+  flex-grow: 1;
+  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-right {
+  padding-left: 20px;
+  flex-basis: 70%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  justify-content: center;
+}
+
+</style>