Fix more spacing and layout issues

This commit is contained in:
Girish Ramakrishnan
2025-09-25 15:02:16 +02:00
parent 9304d02d78
commit 7701b41af4
7 changed files with 43 additions and 39 deletions
+19 -20
View File
@@ -2,7 +2,7 @@
import { ref, onMounted, useTemplateRef } from 'vue';
import { marked } from 'marked';
import { Button, Switch, Dialog, Checkbox } from '@cloudron/pankow';
import { Button, Switch, Dialog, Checkbox, FormGroup } from '@cloudron/pankow';
import { ISTATES } from '../../constants.js';
import SettingsItem from '../SettingsItem.vue';
import AppsModel from '../../models/AppsModel.js';
@@ -117,7 +117,6 @@ onMounted(async () => {
</div>
</Dialog>
<SettingsItem>
<div>
<label>{{ $t('app.updates.auto.title') }}</label>
@@ -127,28 +126,28 @@ onMounted(async () => {
<Switch v-if="app.appStoreId" v-model="autoUpdatesEnabled" :disabled="autoUpdatesEnabledBusy" @change="onAutoUpdatesEnabledChange"/>
</SettingsItem>
<SettingsItem v-if="app.appStoreId">
<div>
<label>{{ $t('app.updatesTabTitle') }}</label>
<div v-html="$t('app.updates.auto.description', { appStoreLink: 'https://www.cloudron.io/store/index.html' })"></div>
</div>
</SettingsItem>
<hr style="margin-top: 20px"/>
<div v-if="app.appStoreId">
<label>{{ $t('app.updatesTabTitle') }}</label>
<div v-html="$t('app.updates.auto.description', { appStoreLink: 'https://www.cloudron.io/store/index.html' })"></div>
</div>
<br/>
<Button v-if="app.appStoreId" @click="onCheck()" :disabled="busyCheck" :loading="busyCheck">{{ $t('settings.updates.checkForUpdatesAction') }}</Button>
<SettingsItem v-if="app.updateInfo" style="padding: 20px 0;">
<div>
<label>{{ $t('settings.updates.updateAvailableAction') }}</label>
<div class="error-label" v-if="!app.updateInfo.manifest.dockerImage">{{ $t('app.updateDialog.subscriptionExpired') }}</div>
<div class="error-label" v-if="updateError">{{ updateError }}</div>
<hr v-if="app.updateInfo" style="margin-top: 20px"/>
<div class="text-danger" v-if="app.updateInfo.unstable">{{ $t('app.updateDialog.unstableWarning') }}</div>
<div v-if="app.updateInfo">
<label>{{ $t('settings.updates.updateAvailableAction') }}</label>
<div class="error-label" v-if="!app.updateInfo.manifest.dockerImage">{{ $t('app.updateDialog.subscriptionExpired') }}</div>
<div class="error-label" v-if="updateError">{{ updateError }}</div>
<p>{{ $t('app.updateDialog.changelogHeader', { version: app.updateInfo.manifest.version }) }}</p>
<div v-html="marked.parse(app.updateInfo.manifest.changelog)"></div>
</div>
<div class="text-danger" v-if="app.updateInfo.unstable">{{ $t('app.updateDialog.unstableWarning') }}</div>
<!-- show update button only if update available -->
<Button v-if="app.updateInfo" :danger="app.updateInfo.unstable ? true : null" :success="app.updateInfo.unstable ? null : true" @click="onAskUpdate()" :disabled="app.taskId || (app.error && app.error.details.installationState !== ISTATES.PENDING_UPDATE) || app.runState === 'stopped' || app.installationState === 'pending_update'">{{ $t('app.updateDialog.updateAction') }}</Button>
</SettingsItem>
<div>{{ $t('app.updateDialog.changelogHeader', { version: app.updateInfo.manifest.version }) }}</div>
<div v-html="marked.parse(app.updateInfo.manifest.changelog)"></div>
</div>
<br/>
<Button v-if="app.updateInfo" :danger="app.updateInfo.unstable ? true : null" :success="app.updateInfo.unstable ? null : true" @click="onAskUpdate()" :disabled="app.taskId || (app.error && app.error.details.installationState !== ISTATES.PENDING_UPDATE) || app.runState === 'stopped' || app.installationState === 'pending_update'">{{ $t('app.updateDialog.updateAction') }}</Button>
</div>
</template>