Add Card component and various darkmode fixes

This commit is contained in:
Johannes Zellner
2024-12-16 16:46:26 +01:00
parent 2a0f727cba
commit 74679b4b41
5 changed files with 64 additions and 19 deletions

View File

@@ -0,0 +1,26 @@
<template>
<div class="card">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Card'
};
</script>
<style scoped>
.card {
position: relative;
background-color: var(--card-background);
margin-bottom: 15px;
padding: 10px 15px;
border-radius: 10px;
}
</style>

View File

@@ -3,18 +3,22 @@
<h1 class="section-header">{{ $t('support.title') }}</h1>
<h3 class="section-header">{{ $t('support.help.title') }}</h3>
<div v-html="description"></div>
<Card>
<div v-html="description"></div>
</Card>
<h3 class="section-header">{{ $t('support.remoteSupport.title') }}</h3>
<h2 class="text-center" v-show="!ready"><i class="fa fa-circle-notch fa-spin"></i></h2>
<div v-show="ready">
<p>{{ $t('support.remoteSupport.description') }}</p>
<b>{{ $t('support.remoteSupport.warning') }}</b>
<br/>
<br/>
<b class="pull-left text-danger text-bold" v-show="toggleSshSupportError">{{ toggleSshSupportError }}</b>
<Button :danger="sshSupportEnabled ? true : null" @click="toggleSshSupport()">{{ sshSupportEnabled ? $t('support.remoteSupport.disableAction') : $t('support.remoteSupport.enableAction') }}</Button>
</div>
<Card>
<h2 class="text-center" v-show="!ready"><i class="fa fa-circle-notch fa-spin"></i></h2>
<div v-show="ready">
<p>{{ $t('support.remoteSupport.description') }}</p>
<b>{{ $t('support.remoteSupport.warning') }}</b>
<br/>
<br/>
<b class="pull-left text-danger text-bold" v-show="toggleSshSupportError">{{ toggleSshSupportError }}</b>
<Button :danger="sshSupportEnabled ? true : null" @click="toggleSshSupport()">{{ sshSupportEnabled ? $t('support.remoteSupport.disableAction') : $t('support.remoteSupport.enableAction') }}</Button>
</div>
</Card>
</div>
</template>
@@ -23,13 +27,16 @@
import { fetcher, Button } from 'pankow';
import { marked } from 'marked';
import Card from './Card.vue';
const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
const accessToken = localStorage.token;
export default {
name: 'SupportView',
components: {
Button
Button,
Card
},
data() {
return {