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

Fix more spacing and layout issues

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

19
dashboard/src/components/app/Backups.vue
View File

@@ -377,17 +377,16 @@ onMounted(async () => {
<Switch v-model="autoBackupsEnabled" @change="onChangeAutoBackups"/>
</SettingsItem>
<SettingsItem>
<FormGroup>
<label>{{ $t('app.backups.import.title') }}</label>
<div>{{ $t('app.backups.import.description') }}</div>
</FormGroup>
<div style="display: flex; align-items: center">
<Button @click="onImport()" :loading="importBusy" :disabled="importBusy || !!app.taskId || app.runState === 'stopped'" v-tooltip="app.taskId ? 'App is not running' : ''">{{ $t('app.backups.backups.importAction') }}</Button>
</div>
</SettingsItem>
<hr style="margin-top: 20px"/>
<hr/>
<div>
<label>{{ $t('app.backups.import.title') }}</label>
<div>{{ $t('app.backups.import.description') }}</div>
</div>
<br/>
<Button @click="onImport()" :loading="importBusy" :disabled="importBusy || !!app.taskId || app.runState === 'stopped'" v-tooltip="app.taskId ? 'App is not running' : ''">{{ $t('app.backups.backups.importAction') }}</Button>
<hr style="margin-top: 20px"/>
<SettingsItem>
<FormGroup>

8
dashboard/src/components/app/Info.vue
View File

@@ -145,7 +145,7 @@ onMounted(() => {
</div>
<div v-show="editing">
<textarea ref="notesTextarea" style="white-space: pre-wrap; margin-bottom: 5px; width: 100%" v-model="noteContent" rows="10"></textarea>
<div style="display: flex; gap: 5px">
<div class="edit-buttons">
<Button secondary @click="onDismiss()" v-show="!busy">{{ $t('main.dialog.cancel') }}</Button>
<Button @click="onSubmit()" :disabled="busy" :loading="busy">{{ $t('app.display.saveAction') }}</Button>
</div>
@@ -156,6 +156,12 @@ onMounted(() => {
<style scoped>
.edit-buttons {
display: flex;
gap: 5px;
margin-top: 10px;
}
.info-edit-indicator {
color: var(--pankow-text-color);
margin-left: 10px;

4
dashboard/src/components/app/Location.vue
View File

@@ -209,7 +209,7 @@ onMounted(async () => {
<PortBindings v-model:tcp="tcpPorts" v-model:udp="udpPorts" :error="errorObject" :domain-provider="domainProvider"/>
<div v-if="app.manifest.multiDomain">
<div v-if="app.manifest.multiDomain" style="margin-top: 20px">
<label>{{ $t('app.location.aliases') }} <sup><a href="https://docs.cloudron.io/apps/#aliases" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<div v-if="aliases.length === 0">{{ $t('app.location.noAliases') }}</div>
@@ -227,7 +227,7 @@ onMounted(async () => {
<div class="actionable" v-if="!busy" @click="onAddAlias()">{{ $t('app.location.addAliasAction') }}</div>
</div>
<div>
<div style="margin-top: 20px">
<label>{{ $t('app.location.redirections') }} <sup><a href="https://docs.cloudron.io/apps/#redirections" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<div v-if="redirects.length === 0">{{ $t('app.location.noRedirections') }}</div>

5
dashboard/src/components/app/Resources.vue
View File

@@ -124,7 +124,7 @@ onMounted(async () => {
<br/>
<Button @click="onSubmitMemoryLimit()" :loading="memoryLimitBusy" :disabled="memoryLimitBusy || (!app.error && memoryLimit === currentMemoryLimit) || (app.error && app.error.details.installationState !== ISTATES.PENDING_RESIZE) || app.taskId">{{ $t('app.resources.memory.resizeAction') }}</Button>
<hr/>
<hr style="margin-top: 20px"/>
<FormGroup>
<label for="cpuQuotaInput">{{ $t('app.resources.cpu.title') }} <sup><a href="https://docs.cloudron.io/apps/#cpu-limit" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup> : <b>{{ cpuQuota + ' %' }}</b></label>
@@ -139,7 +139,7 @@ onMounted(async () => {
<br/>
<Button @click="onSubmitCpuQuota()" :loading="cpuQuotaBusy" :disabled="cpuQuotaBusy || (!app.error && cpuQuota === currentCpuQuota) || (app.error && app.error.details.installationState !== ISTATES.PENDING_RESIZE) || app.taskId">{{ $t('app.resources.cpu.setAction') }}</Button>
<hr/>
<hr style="margin-top: 20px"/>
<form @submit.prevent="onSubmitDevices()" autocomplete="off">
<fieldset :disabled="devicesBusy || (!app.error && !devicesChanged) || (app.error && app.error.details.installationState !== ISTATES.PENDING_RECREATE_CONTAINER) || app.taskId">
@@ -151,6 +151,7 @@ onMounted(async () => {
</FormGroup>
</fieldset>
</form>
<br/>
<Button @click="onSubmitDevices()" :loading="devicesBusy" :disabled="devicesBusy || (!app.error && !devicesChanged) || (app.error && app.error.details.installationState !== ISTATES.PENDING_RECREATE_CONTAINER) || app.taskId">{{ $t('main.dialog.save') }}</Button>
</div>
</template>

6
dashboard/src/components/app/Security.vue
View File

@@ -61,9 +61,9 @@ onMounted(() => {
<textarea id="cspInput" style="white-space: pre-wrap; font-family: monospace;" v-model="csp" placeholder="default-src 'self'; frame-ancestors 'none';" rows="2"></textarea>
</FormGroup>
<Checkbox v-model="hstsPreload" style="display: inline-flex;" :label="$t('app.security.hstsPreload')" help-url="https://docs.cloudron.io/apps/#hsts-preload"/>
<br/>
<div>
<Checkbox v-model="hstsPreload" style="display: inline-flex;" :label="$t('app.security.hstsPreload')" help-url="https://docs.cloudron.io/apps/#hsts-preload"/>
</div>
<Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.security.csp.saveAction') }}</Button>
</fieldset>

1
dashboard/src/components/app/Uninstall.vue
View File

@@ -120,7 +120,6 @@ onMounted(async () => {
<div v-if="app.type !== APP_TYPES.PROXIED">
<label>{{ $t('app.archive.title') }}</label>
<div v-html="$t('app.archive.description')"></div>
<br/>
<p class="text-bold text-success" v-if="latestBackup" v-html="$t('app.archive.latestBackupInfo', { date: prettyLongDate(latestBackup.creationTime) })"></p>
<p class="text-bold text-warning" v-else v-html="$t('app.archive.noBackup')"></p>
<Button :disabled="!latestBackup" @click="onArchive()">{{ $t('app.archive.action') }}</Button>

39
dashboard/src/components/app/Updates.vue
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>