Add some colorshift blob animation to dns setup

This commit is contained in:
Johannes Zellner
2025-08-17 17:22:50 +02:00
parent 20fa49f8e4
commit e1a7056ef8
4 changed files with 56 additions and 11 deletions

View File

@@ -146,18 +146,13 @@ onMounted(async () => {
<div class="container" v-if="ready">
<Notification />
<Transition name="slide-up" mode="out-in">
<div class="view" v-if="waitingForDnsSetup" style="text-align: center; max-width: unset;">
<div>
<Transition name="fade-scale" mode="out-in">
<div class="view" v-if="waitingForDnsSetup" style="max-width: unset; height: 100%;">
<div style="display: flex; flex-direction: column; height: 100%; align-items: center;">
<div class="gradient" v-if="waitingForDnsSetup"></div>
<h3>Please wait while Cloudron is setting up the dashboard</h3>
<ProgressBar mode="indeterminate" :show-label="false" :slim="true"/>
<h3>{{ progressMessage }}</h3>
</div>
<div style="position: absolute; bottom: 10px; text-align: center; width: 100%; font-size: 12px;">
<span v-show="taskMinutesActive >= 4">If setup appears stuck, it can be restarted by running <code @click="onCopyToClipboard('systemctl restart box')">systemctl restart box</code> and reloading this page.</span>
<br/>
<br/>
You can follow the logs on the server at <code @click="onCopyToClipboard('/home/yellowtent/platformdata/logs/box.log')">/home/yellowtent/platformdata/logs/box.log</code>
<h4 style="margin-top: 0">{{ progressMessage }}</h4>
<small>You can follow the logs on the server at <code @click="onCopyToClipboard('/home/yellowtent/platformdata/logs/box.log')">/home/yellowtent/platformdata/logs/box.log</code></small>
</div>
</div>