fix view transition on chrome

This commit is contained in:
Enrico Bühler 2024-07-01 23:10:47 +02:00
parent 8ed037123c
commit 2e5dd31733
13 changed files with 31 additions and 19 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

@ -36,7 +36,7 @@
"tailwind-merge": "^2.3.0",
"tailwindcss": "^3.4.4",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.5.2"
"typescript": "^5.5.3"
},
"devDependencies": {
"@types/ical": "^0.8.3",

View File

@ -21,6 +21,7 @@ const {
>
<Image
densities={[1.5, 2]}
format="avif"
class="w-full h-full object-cover object-center"
src={image}
alt={imageAlt}

View File

@ -60,11 +60,11 @@ import { Menu } from "lucide-astro";
<script>
import { animate, spring, stagger } from "motion";
const button = document.getElementById("nav-button")!;
const navMobile = document.getElementById("nav-mobile")!;
const navButtons = navMobile.children;
const init = () => {
const button = document.getElementById("nav-button")!;
const navMobile = document.getElementById("nav-mobile")!;
const navButtons = navMobile.children;
button.addEventListener("click", () => {
if (navMobile.classList.contains("hidden")) {
animate(

View File

@ -2,9 +2,9 @@
const anim = {
old: {
name: "pageLeave",
duration: "0s",
duration: "0.0s",
easing: "ease-out",
fillMode: "backwards",
fillMode: "forwards",
},
new: {
name: "pageEnter",

View File

@ -1,5 +1,6 @@
---
import "@/styles/markdown.css";
import "@/styles/global.css";
import Section from "@/components/Section.astro";
import MainLayout from "./MainLayout.astro";
import RootLayout from "./RootLayout.astro";

View File

@ -13,7 +13,7 @@ const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
@ -25,7 +25,7 @@ const { title } = Astro.props;
data-domain="creator.tempblade.com"
src="https://analytics.unom.io/js/plausible.js"></script-->
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<title>vspace.one - {title}</title>
<ViewTransitions />
</head>
<body>

View File

@ -5,7 +5,7 @@ import MainLayout from "@/layouts/MainLayout.astro";
import RootLayout from "@/layouts/RootLayout.astro";
---
<RootLayout title="Nicht gefunden">
<RootLayout title="Seite wurde nicht gefunden">
<MainLayout>
<Section>
<Heading main>Die aufgerufene Seite konnte nicht gefunden werden.</Heading

View File

@ -7,8 +7,8 @@ import Heading from "@/components/Heading.astro";
<Heading main>Downloads</Heading>
- [Satzung](download/satzung_2024.pdf)
- [Beitragsordnung](download/beitragsordnung_v1.2.pdf)
- [Raumordnung](download/raumordnung_2024.pdf)
- [Beitrittserklärung](download/beitrittserklaerung_v1.3.pdf)
- [Beitrittserklärung (interaktives pdf)](download/beitrittserklaerung_interactive_v1.3.pdf)
- [Satzung](/download/satzung_2024.pdf)
- [Beitragsordnung](/download/beitragsordnung_v1.2.pdf)
- [Raumordnung](/download/raumordnung_2024.pdf)
- [Beitrittserklärung](/download/beitrittserklaerung_v1.3.pdf)
- [Beitrittserklärung (interaktives pdf)](/download/beitrittserklaerung_interactive_v1.3.pdf)

View File

@ -12,7 +12,7 @@ import InfoSlideshow from "@/sections/InfoSlideshow.astro";
---
<RootLayout
title="vspace.one - Makerspace, Hackerspace, Chaostreff und offene Werkstatt für Villingen-Schwenningen und Umgebung."
title="Makerspace, Hackerspace, Chaostreff und offene Werkstatt für Villingen-Schwenningen und Umgebung."
>
<MainLayout>
<Section padding={false} maxWidth={false}>

View File

@ -13,7 +13,7 @@ import { Euro, Award, UsersRound } from "lucide-astro";
<Heading main>So kannst du uns unterstützen</Heading>
</Section>
<Section>
<div class="grid grid-cols-3 gap-card">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-card">
<CardSupport
to="/support/join"
title="Mitglied werden"

View File

@ -5,7 +5,7 @@ import MainLayout from "@/layouts/MainLayout.astro";
import RootLayout from "@/layouts/RootLayout.astro";
---
<RootLayout title="Tour">
<RootLayout title="Virtuelle Tour durch unsere Räume">
<MainLayout>
<Section padding={false} maxWidth={false}>
<VirtualTour />

View File

@ -1,5 +1,7 @@
---
import "pannellum/build/pannellum.css";
import pano from "../../public/pic/panorama/maschinenraum_half.jpg";
import { Image } from "astro:assets";
---
<div class="h-[60vh] w-full flex justify-center items-center">
@ -21,6 +23,13 @@ import "pannellum/build/pannellum.css";
</div>
</div>
<div class="w-full h-full">
<Image
format="avif"
id="pano-img"
class="hidden"
src={pano}
alt="Ein Panorama Bild des Maschinenraums"
/>
<div style="opacity: 0;" class="w-full h-full" id="pano-bg"></div>
<!--little-planet
width="2400"
@ -39,9 +48,10 @@ import "pannellum/build/pannellum.css";
const init = () => {
const panoBg = document.getElementById("pano-bg")!;
const panoImg = document.getElementById("pano-img")! as HTMLImageElement;
const viewer = pannellum.viewer(panoBg, {
panorama: "/pic/panorama/maschinenraum_half.jpg",
panorama: panoImg.src,
autoLoad: true,
showControls: false,
});