jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Initial take on mobile public views like login

Browse Source
This commit is contained in:
Johannes Zellner
2025-03-31 11:49:24 +02:00
parent 15269713cc
commit cbfe19aebf
1 changed files with 57 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
dashboard/src/components/PublicPageLayout.vue
View File

@@ -16,7 +16,7 @@ const props = defineProps({
<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`"/>
<img width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
</div>
<div class="public-page-layout-right">
@@ -24,6 +24,14 @@ const props = defineProps({
</div>
</div>
<div class="public-page-layout-root-mobile" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
<img width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
<div class="public-page-layout-content">
<slot></slot>
</div>
</div>
<footer v-show="footerHtml" v-html="footerHtml"></footer>
</div>
</template>
@@ -53,6 +61,11 @@ const props = defineProps({
align-items: center;
}
.public-page-layout-left img {
margin-bottom: 20%;
border-radius: 10px;
}
.public-page-layout-right {
padding-left: 20px;
flex-basis: 70%;
@@ -62,4 +75,47 @@ const props = defineProps({
justify-content: center;
}
.public-page-layout-root-mobile {
display: none;
}
@media (max-width: 576px) {
.public-page-layout-root {
display: none;
}
.public-page-layout-root-mobile {
display: flex;
background-color: rgba(0,0,0,0.1);
background-size: cover;
background-position: center;
flex-direction: column;
height: 100%;
align-items: center;
justify-content: center;
gap: 20px;
}
.public-page-layout-root-mobile > img {
border-radius: 10px;
}
.public-page-layout-content {
display: flex;
text-align: center;
padding: 20px;
background-color: rgba(255,255,255,0.3);
filter: drop-shadow(0px 0px 14px white);
border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
.public-page-layout-content {
background-color: rgba(0,0,0,0.3);
filter: drop-shadow(0px 0px 14px black);
border-radius: 10px;
}
}
}
</style>