mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-11 06:46:47 +00:00
calendar height changed
This commit is contained in:
Benjamin Takats
@@ -4,108 +4,111 @@
|
||||
{{-- MAIN --}}
|
||||
<section class="w-full mb-12">
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4" id="table">
|
||||
<div class="w-full flex justify-end">
|
||||
<x-button
|
||||
x-data="{
|
||||
textToCopy: '{{ route('meetup.ics', ['country' => $country]) }}',
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Calendar Stream Url copied!') }}',description:'{{ __('Paste the calendar stream link into a compatible calendar app.') }}',icon:'success'});"
|
||||
amber>
|
||||
<i class="fa fa-thin fa-calendar-arrow-down mr-2"></i>
|
||||
{{ __('Calendar Stream-Url for all meetup events') }}
|
||||
</x-button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="w-full sm:w-1/2">
|
||||
|
||||
@php
|
||||
$locale = \Illuminate\Support\Facades\Cookie::get('lang', 'de');
|
||||
@endphp
|
||||
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/>
|
||||
<script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
|
||||
<script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.{{ $locale }}.js"></script>
|
||||
|
||||
<style>
|
||||
.calendar .calendar-header {
|
||||
background-color: #F7931A;
|
||||
color: white;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.calendar table.month th.month-title {
|
||||
color: #F7931A;
|
||||
}
|
||||
|
||||
.calendar table.month th.day-header {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar table.month td.day .day-content {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar .calendar-header table th:hover {
|
||||
background: #222;
|
||||
}
|
||||
</style>
|
||||
<div
|
||||
wire:ignore
|
||||
<div>
|
||||
<div class="w-full flex justify-end my-2">
|
||||
<x-button
|
||||
x-data="{
|
||||
calendar: null,
|
||||
init() {
|
||||
let events = {{ Js::from($events) }};
|
||||
events = events.map(function(e){
|
||||
return {id: e.id, startDate: new Date(e.startDate), endDate: new Date(e.endDate), location: e.location, description: e.description}
|
||||
})
|
||||
|
||||
new Calendar(this.$refs.calendar, {
|
||||
style: 'background',
|
||||
language: '{{ $locale }}',
|
||||
startYear: {{ $year }},
|
||||
dataSource: events,
|
||||
yearChanged: function(e) {
|
||||
@this.set('year', e.currentYear);
|
||||
},
|
||||
clickDay: function(e) {
|
||||
if(e.events.length > 0) {
|
||||
var content = '';
|
||||
var ids = [];
|
||||
|
||||
for(var i in e.events) {
|
||||
ids.push(e.events[i].id);
|
||||
content += '<div class=\'event-tooltip-content\'>'
|
||||
+ '<div class=\'event-name\'>' + e.events[i].location + '</div>'
|
||||
+ '<div class=\'event-location\'>' + e.events[i].description + '</div>'
|
||||
+ '</div>';
|
||||
}
|
||||
console.log(content);
|
||||
|
||||
$wire.call('popover', content, ids.join(','));
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
}"
|
||||
>
|
||||
<div x-ref="calendar"></div>
|
||||
</div>
|
||||
textToCopy: '{{ route('meetup.ics', ['country' => $country]) }}',
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Calendar Stream Url copied!') }}',description:'{{ __('Paste the calendar stream link into a compatible calendar app.') }}',icon:'success'});"
|
||||
amber>
|
||||
<i class="fa fa-thin fa-calendar-arrow-down mr-2"></i>
|
||||
{{ __('Calendar Stream-Url for all meetup events') }}
|
||||
</x-button>
|
||||
</div>
|
||||
<div class="hidden sm:inline sm:w-1/2">
|
||||
@php
|
||||
$focus = '';
|
||||
$map = $country->code . '_merc';
|
||||
if (!\File::exists(public_path('vendor/jvector/maps/' . $country->code . '.js'))) {
|
||||
$map = 'europe_merc';
|
||||
$focus = 'focusOn: {lat:'.$country->latitude.',lng:'.$country->longitude.',scale:8,animate:true},';
|
||||
}
|
||||
@endphp
|
||||
<div
|
||||
wire:ignore
|
||||
class="w-full flex justify-center"
|
||||
x-data="{
|
||||
<div class="flex items-start">
|
||||
<div class="w-full sm:w-1/2">
|
||||
|
||||
@php
|
||||
$locale = \Illuminate\Support\Facades\Cookie::get('lang', 'de');
|
||||
@endphp
|
||||
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/>
|
||||
<script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
|
||||
<script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.{{ $locale }}.js"></script>
|
||||
|
||||
<style>
|
||||
.calendar {
|
||||
max-height: 280px;
|
||||
}
|
||||
.calendar .calendar-header {
|
||||
background-color: #F7931A;
|
||||
color: white;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.calendar table.month th.month-title {
|
||||
color: #F7931A;
|
||||
}
|
||||
|
||||
.calendar table.month th.day-header {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar table.month td.day .day-content {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar .calendar-header table th:hover {
|
||||
background: #222;
|
||||
}
|
||||
</style>
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="{
|
||||
calendar: null,
|
||||
init() {
|
||||
let events = {{ Js::from($events) }};
|
||||
events = events.map(function(e){
|
||||
return {id: e.id, startDate: new Date(e.startDate), endDate: new Date(e.endDate), location: e.location, description: e.description}
|
||||
})
|
||||
|
||||
new Calendar(this.$refs.calendar, {
|
||||
style: 'background',
|
||||
language: '{{ $locale }}',
|
||||
startYear: {{ $year }},
|
||||
dataSource: events,
|
||||
yearChanged: function(e) {
|
||||
@this.set('year', e.currentYear);
|
||||
},
|
||||
clickDay: function(e) {
|
||||
if(e.events.length > 0) {
|
||||
var content = '';
|
||||
var ids = [];
|
||||
|
||||
for(var i in e.events) {
|
||||
ids.push(e.events[i].id);
|
||||
content += '<div class=\'event-tooltip-content\'>'
|
||||
+ '<div class=\'event-name\'>' + e.events[i].location + '</div>'
|
||||
+ '<div class=\'event-location\'>' + e.events[i].description + '</div>'
|
||||
+ '</div>';
|
||||
}
|
||||
console.log(content);
|
||||
|
||||
$wire.call('popover', content, ids.join(','));
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
}"
|
||||
>
|
||||
<div x-ref="calendar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:inline sm:w-1/2 max-h-[300px]">
|
||||
@php
|
||||
$focus = '';
|
||||
$map = $country->code . '_merc';
|
||||
if (!\File::exists(public_path('vendor/jvector/maps/' . $country->code . '.js'))) {
|
||||
$map = 'europe_merc';
|
||||
$focus = 'focusOn: {lat:'.$country->latitude.',lng:'.$country->longitude.',scale:8,animate:true},';
|
||||
}
|
||||
@endphp
|
||||
<div
|
||||
wire:ignore
|
||||
class="w-full flex justify-center"
|
||||
x-data="{
|
||||
init() {
|
||||
let markers = {{ Js::from($markers) }};
|
||||
|
||||
@@ -113,6 +116,7 @@
|
||||
{{ $focus }}
|
||||
zoomButtons : false,
|
||||
zoomOnScroll: true,
|
||||
height: 300,
|
||||
map: '{{ $map }}',
|
||||
backgroundColor: 'transparent',
|
||||
markers: markers.map(function(h){ return {name: h.name, latLng: h.coords} }),
|
||||
@@ -136,8 +140,9 @@
|
||||
});
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div id="map" style="width: 100%; height: 800px"></div>
|
||||
>
|
||||
<div id="map" style="width: 100%; height: 300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,14 +16,17 @@
|
||||
</x-button>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<h1 class="mb-6 text-5xl font-extrabold leading-none tracking-normal text-gray-200 sm:text-6xl md:text-6xl lg:text-7xl md:tracking-tight">
|
||||
{{ __('Bitcoiner') }} <span
|
||||
class="w-full text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-amber-500 to-amber-200 lg:inline">{{ __('Meetups') }}</span><br
|
||||
class="lg:block hidden">
|
||||
{{ __('Plebs together strong 💪') }}
|
||||
</h1>
|
||||
<p class="px-0 mb-6 text-lg text-gray-600 md:text-xl lg:px-24">
|
||||
{{ __('Bitcoiner Meetups are a great way to meet other Bitcoiners in your area. You can learn from each other, share ideas, and have fun!') }}
|
||||
<div class="flex flex-col">
|
||||
<h1 class="mb-6 text-5xl font-extrabold leading-none tracking-normal text-gray-200 sm:text-6xl md:text-6xl lg:text-7xl md:tracking-tight">
|
||||
{{ __('Bitcoiner') }} <span
|
||||
class="w-full text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-amber-500 to-amber-200 lg:inline">{{ __('Meetups') }}</span><br
|
||||
class="lg:block hidden">
|
||||
{{ __('Plebs together strong 💪') }}
|
||||
</h1>
|
||||
<p class="px-0 mb-6 text-lg text-gray-600 md:text-xl">
|
||||
{{ __('Bitcoiner Meetups are a great way to meet other Bitcoiners in your area. You can learn from each other, share ideas, and have fun!') }}
|
||||
</p>
|
||||
</div>
|
||||
@php
|
||||
$focus = '';
|
||||
$map = $country->code . '_merc';
|
||||
|
||||
@@ -4,17 +4,17 @@
|
||||
{{-- MAIN --}}
|
||||
<section class="w-full mb-12">
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4 flex flex-col sm:flex-row">
|
||||
<h1 class="mb-6 text-5xl font-extrabold leading-none tracking-normal text-gray-200 sm:text-6xl md:text-6xl lg:text-7xl md:tracking-tight">
|
||||
{{ __('Bitcoiner') }} <span
|
||||
class="w-full text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-amber-500 to-amber-200 lg:inline">{{ __('Meetups') }}</span><br
|
||||
class="lg:block hidden">
|
||||
{{ __('Plebs together strong 💪') }}
|
||||
</h1>
|
||||
<p class="px-0 mb-6 text-lg text-gray-600 md:text-xl lg:px-24">
|
||||
{{ __('Bitcoiner Meetups are a great way to meet other Bitcoiners in your area. You can learn from each other, share ideas, and have fun!') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4" id="table">
|
||||
<div class="flex flex-col">
|
||||
<h1 class="mb-6 text-5xl font-extrabold leading-none tracking-normal text-gray-200 sm:text-6xl md:text-6xl lg:text-7xl md:tracking-tight">
|
||||
{{ __('Bitcoiner') }} <span
|
||||
class="w-full text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-amber-500 to-amber-200 lg:inline">{{ __('Meetups') }}</span><br
|
||||
class="lg:block hidden">
|
||||
{{ __('Plebs together strong 💪') }}
|
||||
</h1>
|
||||
<p class="px-0 mb-6 text-lg text-gray-600 md:text-xl">
|
||||
{{ __('Bitcoiner Meetups are a great way to meet other Bitcoiners in your area. You can learn from each other, share ideas, and have fun!') }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
wire:ignore
|
||||
class="w-full flex justify-center"
|
||||
|
||||
Reference in New Issue
Block a user