cloudron-box/dashboard/src/components/PublicPageLayout.vue

<script setup>

import { API_ORIGIN } from '../constants.js';

defineProps({
  footerHtml: {
    type: String,
    default: '',
  },
  iconUrl: {
    type: String,
    default: `${API_ORIGIN}/api/v1/cloudron/avatar`,
  },
  cloudronName: {
    type: String,
    default: 'Cloudron',
  }
});

</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 class="cloudron-name">{{ cloudronName }}</div>
      </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 class="cloudron-name">{{ cloudronName }}</div>
        </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: 14px;
  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;
}

@media (prefers-color-scheme: dark) {
  .public-page-layout-left {
    background-color: rgba(255,255,255,0.1);
  }
}

.public-page-layout-left .cloudron-avatar {
  margin-bottom: 20px;
  border-radius: 10px;
}

.public-page-layout-left .cloudron-name {
  font-family: var(--font-family--header);
  font-weight: 400;
  font-size: 1.75em;
  margin-bottom: 1rem;
}

.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;
    text-align: center;
  }

  .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;
    text-align: center;
    gap: 2rem;
  }

  .public-page-layout-right-slot {
    max-width: unset;
    text-align: left;
  }

  .cloudron-avatar {
    border-radius: 10px;
    width: 96px;
    height: 96px;
  }
}

@media (max-width: 576px) {
  .actions {
    align-items: unset;
  }
}

</style>