Add Card component and various darkmode fixes
This commit is contained in:
26
dashboard/src/components/Card.vue
Normal file
26
dashboard/src/components/Card.vue
Normal 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>
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user