Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add sliding page transitions between Proxmox extension pages

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-02-01 15:31:13 -05:00
parent b40f261967
commit 759afa54ac
1 changed files with 48 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
extensions/Servers/Proxmox/views/components/layout.blade.php
View File

@@ -1598,6 +1598,44 @@
<div class="mb-10 mt-3">
<style>
/* Page Transition Styles */
.proxmox-page-content {
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideOut {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(-20px);
}
}
.proxmox-page-exit {
animation: slideOut 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
.proxmox-page-content,
.proxmox-page-exit {
animation: none;
}
}
/* Modern Navigation Styles */
.proxmox-nav-container {
background: color-mix(in srgb, var(--color-background-secondary) 60%, transparent);
@@ -2309,7 +2347,7 @@
</div>
</div>
<div class="flex-1 flex flex-col">
<div class="flex-1 flex flex-col">
<div class="flex-1 flex flex-col proxmox-page-content" wire:key="proxmox-page-{{ $view }}">
{{ $slot }}
</div>
</div>
@@ -3218,4 +3256,13 @@ window.saveServerIcon = function() {
console.error('Error saving icon:', error);
});
};
// Page transition handling for Livewire navigation
document.addEventListener('livewire:navigate', () => {
const pageContent = document.querySelector('.proxmox-page-content');
if (pageContent) {
pageContent.classList.remove('proxmox-page-content');
pageContent.classList.add('proxmox-page-exit');
}
});
</script>