Implemented missing component, moved markdown style to main css
This commit is contained in:
parent
4e5f0e5e5b
commit
75156d4e5e
@ -269,3 +269,145 @@
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.memberShipBlock p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.memberShipBlock p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.memberShipBlock a {
|
||||
color: #f59e0b;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.memberShipBlock a:hover {
|
||||
color: #d97706;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.memberShipBlock a:active {
|
||||
color: #d97706;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.memberShipBlock a:focus {
|
||||
color: #d97706;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.memberShipBlock a:visited {
|
||||
color: #fcd34d;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.memberShipBlock ul {
|
||||
color: #9ca3af;
|
||||
margin-left: 20px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.memberShipBlock li p {
|
||||
color: #9ca3af;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.memberShipBlock ul li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.memberShipBlock ul li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.memberShipBlock ol {
|
||||
color: #9ca3af;
|
||||
margin-left: 20px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.memberShipBlock ol li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.memberShipBlock ol li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.memberShipBlock hr {
|
||||
border-top-color: #f59e0b;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.memberShipBlock h1 {
|
||||
@apply font-arctic text-4xl;
|
||||
}
|
||||
|
||||
.memberShipBlock h2 {
|
||||
color: #f59e0b;
|
||||
font-family: 'Arctic';
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.memberShipBlock h3 {
|
||||
color: #fff;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memberShipBlock h4 {
|
||||
color: #f59e0b;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memberShipBlock h5 {
|
||||
color: #f59e0b;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memberShipBlock h6 {
|
||||
color: #f59e0b;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: x-small;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memberShipBlock blockquote {
|
||||
color: #9ca3af;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
margin-left: 20px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #ccc;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.memberShipBlock code {
|
||||
background-color: #1f2937;
|
||||
color: #ef4444;
|
||||
border-radius: 0.3em;
|
||||
padding: 8px 10px 12px;
|
||||
white-space: nowrap;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@ -0,0 +1,195 @@
|
||||
<script setup>
|
||||
import { Link, usePage } from '@inertiajs/vue3';
|
||||
import { onMounted, defineProps, computed, ref, nextTick } from 'vue';
|
||||
import { gsap } from 'gsap';
|
||||
import { initFlowbite } from 'flowbite';
|
||||
|
||||
const { block, blockData, frontpage } = defineProps({
|
||||
block: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
blockData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
frontpage: {
|
||||
type: Boolean
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
initFlowbite();
|
||||
});
|
||||
|
||||
const articlesContainer = ref(null);
|
||||
const page = usePage();
|
||||
|
||||
/**
|
||||
* Retrieve only 4 event articles
|
||||
*/
|
||||
|
||||
const limitedArticles = computed(() => blockData.articles.slice(0, 4));
|
||||
|
||||
/**
|
||||
* Paginate event articles into arrays of 4
|
||||
*/
|
||||
|
||||
const paginateEventArticles = computed(() => {
|
||||
const pageSize = 4;
|
||||
return blockData.events.reduce((acc, article, index) => {
|
||||
const chunkIndex = Math.floor(index / pageSize);
|
||||
if(!acc[chunkIndex]) {
|
||||
acc[chunkIndex] = []; // start a new chunk
|
||||
}
|
||||
acc[chunkIndex].push(article);
|
||||
return acc;
|
||||
}, []);
|
||||
});
|
||||
|
||||
const currentEventPage = ref(0);
|
||||
|
||||
// Use this computed property to get the articles of the current page
|
||||
|
||||
const currentArticles = computed(() => paginateEventArticles.value[currentEventPage.value]);
|
||||
|
||||
const nextPage = () => {
|
||||
if (currentEventPage.value < paginateEventArticles.value.length - 1) {
|
||||
// Animate current articles out to the left
|
||||
gsap.to(articlesContainer.value, {x: -100, opacity: 0, onComplete: () => {
|
||||
currentEventPage.value++;
|
||||
// Wait for the DOM to update
|
||||
nextTick().then(() => {
|
||||
// Animate new articles in from the right
|
||||
gsap.fromTo(articlesContainer.value, {x: 100, opacity: 0}, {x: 0, opacity: 1});
|
||||
});
|
||||
}});
|
||||
}
|
||||
};
|
||||
|
||||
const prevPage = () => {
|
||||
if (currentEventPage.value > 0) {
|
||||
// Animate current articles out to the right
|
||||
gsap.to(articlesContainer.value, {x: 100, opacity: 0, onComplete: () => {
|
||||
currentEventPage.value--;
|
||||
// Wait for the DOM to update
|
||||
nextTick().then(() => {
|
||||
// Animate new articles in from the left
|
||||
gsap.fromTo(articlesContainer.value, {x: -100, opacity: 0}, {x: 0, opacity: 1});
|
||||
});
|
||||
}});
|
||||
}
|
||||
};
|
||||
|
||||
// Check if currentPage is the first page
|
||||
const isFirstPage = computed(() => currentEventPage.value === 0);
|
||||
|
||||
// Check if currentPage is the last page
|
||||
const isLastPage = computed(() => currentEventPage.value === paginateEventArticles.value.length - 1);
|
||||
|
||||
/** Get a node value from json */
|
||||
|
||||
const extractMetaValue = (node, key) => {
|
||||
let meta = JSON.parse(node.fs_meta);
|
||||
|
||||
return meta[key];
|
||||
};
|
||||
|
||||
/**
|
||||
* formatDate
|
||||
*
|
||||
* Formats a date string to a Norwegian date format.
|
||||
*
|
||||
* @param {
|
||||
* } dateString
|
||||
*/
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
const day = ('0' + date.getDate()).slice(-2);
|
||||
const month = ('0' + (date.getMonth() + 1)).slice(-2);
|
||||
const year = date.getFullYear();
|
||||
|
||||
return `${day}/${month}/${year}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* dateString
|
||||
*
|
||||
* Formats a date string to a Norwegian time format.
|
||||
* @param {*} dateString
|
||||
*/
|
||||
|
||||
const formatTime = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleTimeString('nb-NO', { hour: '2-digit', minute: '2-digit' });
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="events" class="relative block w-full h-screen overflow-hidden">
|
||||
<div class="absolute inset-0 bg-cover" :style="{ backgroundImage: `url('${block.image}')` }"></div>
|
||||
<div class="absolute inset-0 bg-black opacity-80"></div>
|
||||
<div class="absolute p-12 w-full overflow-auto" style="top: 0; bottom: 0;">
|
||||
<div class="flex-row justify-center items-center">
|
||||
<h1 v-if="block.showtitle" class="text-center text-white font-arctic text-2xl md:text-4xl">{{ block.title || 'Tittel' }}</h1>
|
||||
<h2 v-if="block.showlabel" class="text-center text-amber-600 font-serif text-md md:text-xl">{{ block.label || 'Merkelapp' }}</h2>
|
||||
<h3 v-if="block.showsecondarylabel && !$page.props.auth.user" class="text-center text-gray-400 font-serif text-sm md:text-md">{{ block.secondarylabel || 'Sekundær merkelapp' }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-[1280px]">
|
||||
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-12">
|
||||
<!-- Begin events loop -->
|
||||
<div
|
||||
v-for="(event, index) in blockData.events"
|
||||
:key="event.id"
|
||||
class="max-w-sm rounded-lg shadow-xl bg-gray-800 border-gray-700 relative"
|
||||
>
|
||||
<div class="relative z-0">
|
||||
<Link v-if="event.image_id" :href="route('event', event.slug)">
|
||||
<img class="rounded-t-lg" :src="extractMetaValue(event.image, 'symbolic_name')" :alt="extractMetaValue(event.image, 'title')" />
|
||||
<!-- Badge positioned absolutely within the relative container -->
|
||||
<template v-if="event.capacity">
|
||||
<div v-if="event.signups.length === 0" class="absolute top-0 right-0 bg-blue-100 text-blue-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
|
||||
{{ event.capacity - event.signups.length }} plasser igjen
|
||||
</div>
|
||||
<div v-else-if="event.signups.length < (event.capacity / 2)" class="absolute top-0 right-0 bg-green-100 text-green-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-green-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
|
||||
{{ event.capacity - event.signups.length }} plasser igjen
|
||||
</div>
|
||||
<div v-else-if="event.signups.length > (event.capacity / 2) && event.signups.length != event.capacity" class="absolute top-0 right-0 bg-yellow-100 text-yellow-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-300 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
|
||||
{{ event.capacity - event.signups.length }} plasser igjen
|
||||
</div>
|
||||
<div v-else class="absolute top-0 right-0 bg-red-100 text-red-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-red-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
|
||||
Alle plasser er tatt
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="absolute top-0 right-0 bg-green-100 text-green-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border-green-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
|
||||
Ingen plassrestriksjoner
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<Link :href="route('event', event.slug)">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white">{{ event.title }}</h5>
|
||||
</Link>
|
||||
<p class="text-sm text-green-400 mb-1">
|
||||
Oppstart: {{ formatDate(event.start) }}, klokken {{ formatTime(event.start) }}
|
||||
</p>
|
||||
<p v-if="event.signups.length > 0" class="mb-2 text-xs text-green-200">{{ event.signups.length }} deltager(e) har meldt seg på så langt</p>
|
||||
<p v-else class="mb-2 text-xs text-red-300">Ingen påmeldte så langt</p>
|
||||
<p class="mb-3 font-normal text-gray-400">{{ event.excerpt }}</p>
|
||||
<Link :href="route('event', event.slug)" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-green-600 hover:bg-green-700 focus:ring-green-800">
|
||||
Les mer
|
||||
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End events loop -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -46,148 +46,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
.memberShipBlock p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.memberShipBlock p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.memberShipBlock a {
|
||||
color: #f59e0b;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.memberShipBlock a:hover {
|
||||
color: #d97706;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.memberShipBlock a:active {
|
||||
color: #d97706;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.memberShipBlock a:focus {
|
||||
color: #d97706;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.memberShipBlock a:visited {
|
||||
color: #fcd34d;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.memberShipBlock ul {
|
||||
color: #9ca3af;
|
||||
margin-left: 20px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.memberShipBlock li p {
|
||||
color: #9ca3af;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.memberShipBlock ul li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.memberShipBlock ul li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.memberShipBlock ol {
|
||||
color: #9ca3af;
|
||||
margin-left: 20px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.memberShipBlock ol li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.memberShipBlock ol li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.memberShipBlock hr {
|
||||
border-top-color: #f59e0b;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.memberShipBlock h1 {
|
||||
@apply font-arctic text-4xl;
|
||||
}
|
||||
|
||||
.memberShipBlock h2 {
|
||||
color: #f59e0b;
|
||||
font-family: 'Arctic';
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.memberShipBlock h3 {
|
||||
color: #fff;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memberShipBlock h4 {
|
||||
color: #f59e0b;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memberShipBlock h5 {
|
||||
color: #f59e0b;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memberShipBlock h6 {
|
||||
color: #f59e0b;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: x-small;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memberShipBlock blockquote {
|
||||
color: #9ca3af;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
margin-left: 20px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #ccc;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.memberShipBlock code {
|
||||
background-color: #1f2937;
|
||||
color: #ef4444;
|
||||
border-radius: 0.3em;
|
||||
padding: 8px 10px 12px;
|
||||
white-space: nowrap;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</template>
|
||||
@ -65,12 +65,11 @@
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-[1280px]">
|
||||
<!-- <img src="/img/medlemmer.jpg" class="border-2 w-[200px] sm:w-[320px] md:w-[640px] lg:w-[800px] border-green-700 rounded-lg float-left mb-1 md:mb-4 mx-2 md:mx-6" alt="ØMS Medlemmer"> -->
|
||||
<p v-if="block.showprices" class="mt-2 text-white">
|
||||
Prisen for medlemskap er
|
||||
{{ page.props.pageSettings['membership_fee'] }},- kr per år for voksne eller {{ page.props.pageSettings['membership_child_fee'] }}
|
||||
for barn/ungdom under {{ page.props.pageSettings['membership_child_age_limit'] }} år. Du må være
|
||||
{{ page.props.pageSettings['membership_age_limit'] }} år eller eldre for å bli medlem. hos oss. Medlemskapet
|
||||
{{ page.props.pageSettings['membership_age_limit'] }} år eller eldre for å bli medlem hos oss. Medlemskapet
|
||||
varer i {{ page.props.pageSettings['membership_time_interval_months'] }} måneder
|
||||
<span v-if="page.props.pageSettings['membership_annual']"> eller ut kalenderåret </span>
|
||||
før det må fornyes. Betalinger kan gjøres på nettsiden via vipps <span v-if="page.props.pageSettings['module_stripe_payment']">eller bankkort</span> ved å besøke
|
||||
@ -89,149 +88,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
.memberShipBlock p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.memberShipBlock p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.memberShipBlock a {
|
||||
color: #f59e0b;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.memberShipBlock a:hover {
|
||||
color: #d97706;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.memberShipBlock a:active {
|
||||
color: #d97706;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.memberShipBlock a:focus {
|
||||
color: #d97706;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.memberShipBlock a:visited {
|
||||
color: #fcd34d;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.memberShipBlock ul {
|
||||
color: #9ca3af;
|
||||
margin-left: 20px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.memberShipBlock li p {
|
||||
color: #9ca3af;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.memberShipBlock ul li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.memberShipBlock ul li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.memberShipBlock ol {
|
||||
color: #9ca3af;
|
||||
margin-left: 20px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.memberShipBlock ol li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.memberShipBlock ol li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.memberShipBlock hr {
|
||||
border-top-color: #f59e0b;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.memberShipBlock h1 {
|
||||
@apply font-arctic;
|
||||
@apply text-4xl;
|
||||
}
|
||||
|
||||
.memberShipBlock h2 {
|
||||
color: #f59e0b;
|
||||
font-family: 'Arctic';
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.memberShipBlock h3 {
|
||||
color: #fff;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memberShipBlock h4 {
|
||||
color: #f59e0b;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memberShipBlock h5 {
|
||||
color: #f59e0b;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memberShipBlock h6 {
|
||||
color: #f59e0b;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: x-small;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memberShipBlock blockquote {
|
||||
color: #9ca3af;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
margin-left: 20px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #ccc;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.memberShipBlock code {
|
||||
background-color: #1f2937;
|
||||
color: #ef4444;
|
||||
border-radius: 0.3em;
|
||||
padding: 8px 10px 12px;
|
||||
white-space: nowrap;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</template>
|
||||
@ -260,27 +260,6 @@
|
||||
</Head>
|
||||
|
||||
<div ref="pageRef" class="min-h-screen w-full bg-black">
|
||||
<template v-if="revision.page.main"> <!-- Show Main menu if the current page is the front page (main page) -->
|
||||
<MainMenu v-if="showMainMenu" :active="showMainMenu" :pageSettings="page.props.pageSettings" :menuLinks="menuLinks" />
|
||||
</template>
|
||||
<template v-else> <!-- Show the external main menu, if the current page is NOT the front page (main page) -->
|
||||
<ExternalMainMenu v-if="showMainMenu" :active="showMainMenu" :pageSettings="page.props.pageSettings" class="z-40" />
|
||||
</template>
|
||||
<SmallHeader />
|
||||
|
||||
<!-- Hovedmeny knapp -->
|
||||
<div class="fixed top-0 right-0 p-4 z-50">
|
||||
<button ref="menuButton" @click="clickMenuButton" @mouseover="handleMenuButtonOver" @mouseout="handleMenuButtonOut" class="p-2 text-white rounded-full shadow-md shadow-black" :class="{'bg-sky-600': showMainMenu, 'bg-green-700': !showMainMenu }">
|
||||
<svg v-if="showMainMenu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Komponentrendring -->
|
||||
<component
|
||||
v-for="block in revision.content"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user