truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add fullscreen toggle functionality to the Mermaid flowchart card

Browse Source
This commit is contained in:
Ümit Tunç
2026-06-01 23:38:14 +03:00
parent efa575a920
commit cf4572cb03
1 changed files with 59 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/front/career/index.blade.php
+59 -1
View File
@@ -93,7 +93,11 @@
<div class="flex flex-col lg:flex-row gap-12 items-start mb-12">
<!-- Mermaid Flowchart Canvas -->
<div class="w-full lg:w-3/5">
<div class="bg-white p-6 md:p-8 rounded-3xl shadow-xl border border-slate-100 overflow-x-auto flex flex-col items-center">
<div id="mermaid-card" class="relative bg-white p-6 md:p-8 rounded-3xl shadow-xl border border-slate-100 overflow-x-auto flex flex-col items-center">
<!-- Fullscreen Toggle Button -->
<button type="button" onclick="toggleFullscreen()" class="absolute top-4 right-4 p-2.5 rounded-xl bg-slate-50 hover:bg-slate-100 border border-slate-100 hover:border-slate-200 text-slate-500 hover:text-slate-700 transition-all duration-200 shadow-sm flex items-center justify-center z-10" title="Tam Ekran / Fullscreen">
<i id="fullscreen-icon" class="uil uil-expand-arrows-alt text-lg"></i>
</button>
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"><i class="uil uil-presentation-play mr-1"></i> {{ __('career.hr_flow_diagram') }}</span>
<div class="mermaid w-full flex justify-center" style="min-height: 500px;">
graph TD
@@ -488,6 +492,22 @@
.mermaid svg {
filter: drop-shadow(0px 10px 20px rgba(15, 23, 42, 0.05));
}
/* Fullscreen styles for card container */
#mermaid-card:fullscreen,
#mermaid-card:-webkit-full-screen,
#mermaid-card:-ms-fullscreen {
background-color: #ffffff !important;
padding: 3rem 2rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
overflow: auto !important;
border-radius: 0px !important;
width: 100% !important;
height: 100% !important;
}
</style>
@endpush
@@ -505,6 +525,44 @@
}
});
// Fullscreen toggle logic for Mermaid card
function toggleFullscreen() {
const card = document.getElementById('mermaid-card');
const icon = document.getElementById('fullscreen-icon');
if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (card.requestFullscreen) {
card.requestFullscreen();
} else if (card.webkitRequestFullscreen) { /* Safari */
card.webkitRequestFullscreen();
} else if (card.msRequestFullscreen) { /* IE11 */
card.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
// Handle icon sync on fullscreen change
function handleFullscreenChange() {
const icon = document.getElementById('fullscreen-icon');
if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
icon.className = "uil uil-shrink text-lg";
} else {
icon.className = "uil uil-expand-arrows-alt text-lg";
}
}
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);
// Step variables
let currentStep = 1;