Rework the public views to work better on mobile

dashboard/src/components/PublicPageLayout.vue

@@ -2,7 +2,7 @@
 
 import { API_ORIGIN } from '../constants.js';
 
-const props = defineProps({
+defineProps({
   footerHtml: {
     type: String,
     default: '',
@@ -15,47 +15,62 @@ const props = defineProps({
   <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 width="128" height="128" class="cloudron-avatar" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
+        <img class="cloudron-avatar" width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
       </div>
 
       <div class="public-page-layout-right">
-        <img class="public-page-layout-mobile-logo cloudron-avatar" width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
-        <slot></slot>
+        <div class="public-page-layout-mobile-logo">
+          <img class="cloudron-avatar" width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
+        </div>
+        <div class="public-page-layout-right-slot">
+          <slot></slot>
+        </div>
       </div>
     </div>
 
-    <footer v-show="footerHtml" v-html="footerHtml"></footer>
+    <div class="footer" v-show="footerHtml" v-html="footerHtml"></div>
   </div>
 </template>
 
-<style>
+<style scoped>
 
-.public-page-layout-button-bar {
-  margin-top: 12px;
-  display: flex;
-  flex-direction: row;
-  gap: 6px;
-  align-items: center;
+.footer {
+  display: block;
+  width: 100%;
+  font-size: 10px;
+  text-align: left;
+  position: fixed;
+  bottom: 0;
+  color: var(--pankow-text-color);
+  background-color: transparent;
+  padding-left: 20px;
+  text-shadow: var(--pankow-text-color) 0px 0 5px;
 }
 
 @media (max-width: 576px) {
-  .public-page-layout-button-bar {
-    flex-direction: column;
+  .footer {
+    background-color: white;
+    text-align: center;
+    text-shadow: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .footer {
+      background-color: black;
+    }
   }
 }
 
-</style>
-
-<style scoped>
+.footer > .p {
+  margin: 4px;
+}
 
 .public-page-layout {
   height: 100%;
-  overflow: hidden;
 }
 
 .public-page-layout-root {
   display: flex;
-  flex-grow: 1;
   overflow: hidden;
   height: 100%;
 }
@@ -77,16 +92,24 @@ const props = defineProps({
 }
 
 .public-page-layout-right {
-  padding-left: 20px;
   flex-basis: 70%;
   display: flex;
   flex-direction: column;
   overflow: auto;
-  justify-content: center;
+  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 {
@@ -99,18 +122,21 @@ const props = defineProps({
   }
 
   .public-page-layout-right {
-    text-align: center;
     display: flex;
     flex-direction: column;
     height: 100%;
     width: 100%;
-    padding-left: 10px;
-    padding-right: 10px;
+    max-width: unset;
+    padding-left: 20px;
+    padding-right: 20px;
+    justify-content: start;
     flex-basis: unset;
-    align-items: center;
-    justify-content: center;
     gap: 20px;
   }
+
+  .public-page-layout-right-slot {
+    max-width: unset;
+  }
 }
 
 </style>

dashboard/src/components/SetupAccount.vue

@@ -4,6 +4,7 @@ import { ref, onMounted } from 'vue';
 import { marked } from 'marked';
 import { Button, PasswordInput, FormGroup, TextInput, fetcher } from 'pankow';
 import { API_ORIGIN } from '../constants.js';
+import PublicPageLayout from '../components/PublicPageLayout.vue';
 import ProfileModel from '../models/ProfileModel.js';
 
 const profileModel = ProfileModel.create();
@@ -103,14 +104,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <!-- TODO mobile layout -->
-  <div class="layout-root" v-if="ready">
-    <div class="layout-left" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
-      <img width="128" height="128" class="icon" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
-    </div>
-
-    <div class="layout-right">
-
+  <PublicPageLayout :footerHtml="footer">
+    <div>
       <div v-if="mode === MODE.SETUP">
         <small>{{ $t('setupAccount.welcomeTo') }}</small>
         <h1>{{ cloudronName }}</h1>
@@ -185,9 +180,7 @@ onMounted(async () => {
         <Button :href="dashboardUrl">{{ $t('setupAccount.success.openDashboardAction') }}</Button>
       </div>
     </div>
-  </div>
-
-  <footer v-show="footer" v-html="footer"></footer>
+  </PublicPageLayout>
 </template>
 
 <style>