Allowing HTML in disclaimer.

This commit is contained in:
DebaucheryLibrarian 2023-06-19 04:06:52 +02:00
parent d8b641e461
commit 4839a3b94c
1 changed files with 40 additions and 14 deletions

54
assets/components/container/container.vue Normal file → Executable file
View File

@ -8,35 +8,40 @@
/>
<transition name="slide">
<Sidebar
v-if="showSidebar"
@toggle-sidebar="(state) => toggleSidebar(state)"
@show-filters="(state) => toggleFilters(state)"
/>
<Sidebar v-if="showSidebar" />
</transition>
<Header
@toggle-sidebar="(state) => toggleSidebar(state)"
@show-filters="(state) => toggleFilters(state)"
/>
<Header />
<p
v-if="config.showDisclaimer"
class="disclaimer"
>{{ config.disclaimer }}</p>
v-html="config.disclaimer"
/>
<p
v-if="config.showAnnouncement"
class="announcement"
v-html="config.announcement"
/>
<div
ref="content"
class="content"
@scroll="scroll"
>
<router-view @scroll="scrollToTop" />
<RouterView @scroll="scrollToTop" />
</div>
<Filters
v-if="showFilters"
@close="toggleFilters(false)"
/>
<Settings
v-if="showSettings"
@close="toggleSettings(false)"
/>
</div>
</template>
@ -45,6 +50,7 @@ import Warning from './warning.vue';
import Header from '../header/header.vue';
import Sidebar from '../sidebar/sidebar.vue';
import Filters from '../filters/filters.vue';
import Settings from '../settings/settings.vue';
function toggleSidebar(state) {
this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
@ -55,6 +61,11 @@ function toggleFilters(state) {
this.showSidebar = false;
}
function toggleSettings(state) {
this.showSettings = state;
this.showSidebar = false;
}
async function setConsent(consent, includeQueer) {
if (consent) {
this.showWarning = false;
@ -62,7 +73,7 @@ async function setConsent(consent, includeQueer) {
}
if (includeQueer) {
this.$store.dispatch('setTagFilter', this.$store.state.ui.tagFilter.filter(tag => !['gay', 'bisexual', 'transsexual'].includes(tag)));
this.$store.dispatch('setTagFilter', this.$store.state.ui.tagFilter.filter((tag) => !['gay', 'bisexual', 'transsexual'].includes(tag)));
return;
}
@ -88,6 +99,9 @@ function scrollToTop() {
function mounted() {
document.addEventListener('click', this.blur);
window.addEventListener('resize', this.resize);
this.events.on('toggleSettings', this.toggleSettings);
this.events.on('toggleSidebar', this.toggleSidebar);
}
function beforeUnmount() {
@ -101,12 +115,15 @@ export default {
Sidebar,
Warning,
Filters,
Settings,
},
data() {
return {
showSidebar: false,
showWarning: localStorage.getItem('consent') !== window.env.sessionId,
showFilters: false,
showSettings: false,
selected: null,
};
},
mounted,
@ -114,6 +131,7 @@ export default {
methods: {
toggleSidebar,
toggleFilters,
toggleSettings,
setConsent,
blur,
resize,
@ -183,13 +201,21 @@ export default {
</style>
<style lang="scss" scoped>
.disclaimer {
.disclaimer,
.announcement {
padding: .5rem 1rem;
margin: 0;
color: var(--text-light);
background: var(--warn);
font-weight: bold;
box-shadow: inset 0 0 3px var(--darken-weak);
text-align: center;
}
.disclaimer {
background: var(--warn);
}
.announcement {
background: var(--notice);
}
</style>