Skip to content
Snippets Groups Projects
Commit 2b543cb1 authored by jan.bednarik's avatar jan.bednarik
Browse files

Merge branch 'feat/personal-calendars' into 'master'

Update personal calendar styling

See merge request !20
parents 25cd3916 e0eb5082
No related branches found
No related tags found
1 merge request!20Update personal calendar styling
<div class="__js-root">
<ui-person-calendar events='{{ calendar_data }}'></ui-person-calendar>
</div>
context:
calendar_data: '[
{"title": "event 1", "start": "2023-05-21T09:30:00.000Z", "url": "https://example.com"},
{"title": "event 2", "start": "2023-05-21", "url": "https://example.com"},
{"title": "event 3", "start": "2023-05-22T09:00:00.000Z", "description": "Lorem ipsum...", "location": "https://jitsi.pirati.cz"}
]'
...@@ -81,6 +81,16 @@ ...@@ -81,6 +81,16 @@
</div> </div>
</div> </div>
</section> </section>
<section class="grid-container no-max mr-0 mb-4 xl:mb-20">
<div class="grid-content-with-right-side">
<h2 class="head-4xl text-left">
{{ person_calendar_title }}
</h2>
<div class="xl:max-w-[1145px]">
{% include 'patterns/atoms/calendar/calendar.html' %}
</div>
</div>
</section>
<section class="mb-4 xl:mb-20"> <section class="mb-4 xl:mb-20">
<div class="grid-container justify-start"> <div class="grid-container justify-start">
<div class="grid-content"> <div class="grid-content">
......
...@@ -31,7 +31,8 @@ context: ...@@ -31,7 +31,8 @@ context:
person_twitter: 'Twitter' person_twitter: 'Twitter'
person_instagram_href: '#' person_instagram_href: '#'
person_instagram: 'Instagram' person_instagram: 'Instagram'
person_twitter_box_title: 'Aktuálně na Twitteru' person_instagram_box_title: 'Aktuálně na Instagramu'
person_calendar_title: 'Kalendář'
person_article_title: 'Články' person_article_title: 'Články'
person_simple_block_title: 'Další lidé z poslanecké sněmovny' person_simple_block_title: 'Další lidé z poslanecké sněmovny'
......
...@@ -5,8 +5,13 @@ ...@@ -5,8 +5,13 @@
"prod": "vite build" "prod": "vite build"
}, },
"dependencies": { "dependencies": {
"@fullcalendar/core": "^6.1.5",
"@fullcalendar/daygrid": "^6.1.5",
"@fullcalendar/interaction": "^6.1.5",
"@fullcalendar/vue": "^6.1.5",
"@vitejs/plugin-vue2": "^2.0.0", "@vitejs/plugin-vue2": "^2.0.0",
"tailwindcss-elevation": "^0.3.4", "tailwindcss-elevation": "^0.3.4",
"tippy.js": "^6.3.7",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-clickaway": "^2.2.2", "vue-clickaway": "^2.2.2",
"vue-slick-carousel": "^1.0.6", "vue-slick-carousel": "^1.0.6",
......
:root {
--fc-button-bg-color: #000;
--fc-button-border-color: #000;
--fc-button-hover-bg-color: #f9ce05;
--fc-button-hover-border-color: #f9ce05;
--fc-button-active-bg-color: #f9ce05;
--fc-button-active-border-color: #f9ce05;
--fc-event-bg-color: #fea86a;
--fc-event-border-color: #fea86a;
--fc-border-color: #ed9654;
--fc-today-bg-color: #ed9654;
--fc-event-dot-color: #fff;
}
.fc {
@apply font-condensed;
}
.fc-col-header {
width: 100%!important;
}
/* Don't underline only when there is no href attribute defined. */
.fc .fc-col-header-cell-cushion:not([href]),
.fc .fc-daygrid-day-number:not([href]) {
@apply hover:no-underline;
}
.fc .fc-col-header-cell {
@apply bg-orange-300 p-3 font-alt text-white text-xl capitalize;
}
.fc .fc-button {
@apply font-alt rounded-none px-5 py-2 duration-150;
}
.fc .fc-button:hover:not(:disabled),
.fc .fc-button:active:not(:disabled){
@apply text-black;
}
.fc .fc-event {
@apply rounded-none p-1.5 border-none text-base cursor-pointer;
background-color: var(--fc-event-bg-color);
border: 1px solid var(--fc-event-border-color);
color: var(--fc-event-text-color);
}
.fc .fc-toolbar-title,
.fc .fc-today-button {
@apply capitalize;
}
.fc .fc-daygrid-day-number {
@apply font-alt text-3xl text-orange-300;
}
.fc .fc-day-today .fc-daygrid-day-number {
@apply text-white;
}
.fc-daygrid-event-dot {
border: calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-dot-color);
}
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
@import "atoms/form-field.pcss"; @import "atoms/form-field.pcss";
@import "atoms/heading.pcss"; @import "atoms/heading.pcss";
@import "atoms/icons.pcss"; @import "atoms/icons.pcss";
@import "atoms/full-calendar.pcss";
@import "molecules/articles.pcss"; @import "molecules/articles.pcss";
@import "molecules/block-quote.pcss"; @import "molecules/block-quote.pcss";
......
<script>
import FullCalendar from "@fullcalendar/vue"
import dayGridPlugin from "@fullcalendar/daygrid"
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
props: ["events"],
data() {
return {
calendarOptions: {
plugins: [ dayGridPlugin ],
initialView: "dayGridMonth",
contentHeight: "auto",
locale: "cs",
buttonText: {
today: "dnes"
},
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
meridiem: false
},
eventClick (info) {
if (
info.event.url === ''
&& info.event.extendedProps.location === undefined
&& info.event.extendedProps.url === undefined
) {
return
}
info.jsEvent.preventDefault();
const popup = tippy(
info.el,
{
content: `
<div class="p-2 flex flex-col gap-3 text-white">
${
(info.event.extendedProps.location !== undefined) ?
`
<div class="flex gap-2 items-baseline">
<i class="ico--location" aria-label="Místo konání"></i>
<div>${info.event.extendedProps.location}</div>
</div>
` : ''
}
${
(info.event.extendedProps.description !== undefined) ?
`
<div class="flex gap-2 items-baseline">
<i class="ico--info" aria-label="Popis"></i>
<div>${info.event.extendedProps.description}</div>
</div>
` : ''
}
${
(info.event.url !== '') ?
`
<div class="flex gap-2 items-baseline">
<i class="ico--link" aria-label="Adresa"></i>
<a class="underline cursor-pointer" href="${info.event.url}">${info.event.url}</a>
</div>
` : ''
}
</div>
`,
trigger: (
(
info.event.url !== ''
&& info.event.extendedProps.location === undefined
&& info.event.extendedProps.url === undefined
) ?
'hover' : 'click'
),
allowHTML: true,
interactive: true
}
);
popup.show();
},
events: JSON.parse(this.events)
}
}
}
}
</script>
<template>
<FullCalendar :options="calendarOptions" />
</template>
...@@ -8,6 +8,7 @@ import HeaderCarousel from "./components/header/HeaderCarousel"; ...@@ -8,6 +8,7 @@ import HeaderCarousel from "./components/header/HeaderCarousel";
import Renderer from "./components/calendar/Renderer"; import Renderer from "./components/calendar/Renderer";
import DummyProvider from "./components/calendar/DummyProvider"; import DummyProvider from "./components/calendar/DummyProvider";
import GoogleProvider from "./components/calendar/GoogleProvider"; import GoogleProvider from "./components/calendar/GoogleProvider";
import FullCalendar from "./components/full_calendar/Calendar";
import RegionMap from "./components/RegionMap"; import RegionMap from "./components/RegionMap";
import InstagramCarousel from "./components/InstagramCarousel"; import InstagramCarousel from "./components/InstagramCarousel";
import ViewProvider from "./components/ViewProvider"; import ViewProvider from "./components/ViewProvider";
...@@ -27,6 +28,7 @@ Vue.component("ui-header-carousel", HeaderCarousel); ...@@ -27,6 +28,7 @@ Vue.component("ui-header-carousel", HeaderCarousel);
Vue.component("ui-calendar-renderer", Renderer); Vue.component("ui-calendar-renderer", Renderer);
Vue.component("ui-calendar-dummy-provider", DummyProvider); Vue.component("ui-calendar-dummy-provider", DummyProvider);
Vue.component("ui-calendar-google-provider", GoogleProvider); Vue.component("ui-calendar-google-provider", GoogleProvider);
Vue.component("ui-full-calendar", FullCalendar);
Vue.component("ui-region-map", RegionMap); Vue.component("ui-region-map", RegionMap);
Vue.component("ui-instagram-carousel", InstagramCarousel); Vue.component("ui-instagram-carousel", InstagramCarousel);
Vue.component("ui-view-provider", ViewProvider); Vue.component("ui-view-provider", ViewProvider);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment