dschlueter/sorting
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix mobile viewport (prevent zoom on touch) and remove slider tooltip

Browse source
This commit is contained in:
Dieter Schlüter 2026-04-06 20:13:08 +02:00
commit 209a11aef3
1 changed files with 9 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

75
sorting_visualization.html
View file

@ -2,7 +2,8 @@
<html lang="de" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#0b0d14">
<title>Sortier-Algorithmen Visualisierung</title>
<!-- Tailwind Play CDN -->
@ -57,7 +58,12 @@
}
/* ── Viewport-relative Fonts ── */
body { font-size: clamp(14px, 1.6vw, 16px); }
html, body {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
overscroll-behavior: contain;
}
body { font-size: clamp(14px, 1.6vw, 16px); overflow-x: hidden; }
.title-text { font-size: clamp(1.25rem, 3.5vw, 2.25rem); }
.stat-value { font-size: clamp(1.5rem, 4vw, 2.25rem); }
.label-text { font-size: clamp(9px, 1.2vw, 11px); }
@ -74,23 +80,6 @@
touch-action: none;
}
/* ── Slider Tooltip ── */
.slider-tooltip {
position: fixed;
background: var(--c-surface2, #1e2235);
border: 1px solid var(--c-border, #2a2d3d);
border-radius: 6px;
padding: 3px 8px;
font-size: 11px;
font-family: monospace;
color: var(--c-accent, #4a7cff);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 9999;
white-space: nowrap;
}
.slider-tooltip.visible { opacity: 1; }
input[type="range"]::-webkit-slider-runnable-track {
height: 6px;
background: var(--c-surface2);
@ -215,7 +204,7 @@
<div class="flex-1"></div>
<div class="text-center">
<h1 class="title-text font-bold tracking-tight" style="color: var(--c-text); text-shadow: 0 0 40px rgba(74,124,255,0.3);">
Sortier-Algorithmen <span style="font-size: 0.45em; font-weight: 400; opacity: 0.5; vertical-align: middle;">v0.2.9</span>
Sortier-Algorithmen <span style="font-size: 0.45em; font-weight: 400; opacity: 0.5; vertical-align: middle;">v0.2.10</span>
</h1>
<p class="text-muted text-sm mt-0.5">Interaktive Visualisierung mit schrittweiser Animation</p>
</div>
@ -338,9 +327,6 @@
</div>
</section>
<!-- Floating Slider Tooltip -->
<div id="sliderTooltip" class="slider-tooltip"></div>
<!-- Transport Buttons -->
<section class="bg-surface border border-border rounded-xl p-4">
<div class="grid grid-cols-4 sm:grid-cols-5 gap-2">
@ -2976,49 +2962,6 @@ makeTouchSlider($sizeSlider);
makeTouchSlider($speedSlider);
makeTouchSlider($threadSlider);
// ================================================================
// Slider Tooltip on Hover
// ================================================================
const $sliderTooltip = document.getElementById('sliderTooltip');
const $allSliders = [$sizeSlider, $speedSlider, $threadSlider].filter(Boolean);
$allSliders.forEach(function(slider) {
slider.addEventListener('mouseenter', function() {
updateSliderTooltip(slider);
$sliderTooltip.classList.add('visible');
});
slider.addEventListener('mousemove', function(e) {
updateSliderTooltipPosition(e.clientX, e.clientY);
});
slider.addEventListener('mouseleave', function() {
$sliderTooltip.classList.remove('visible');
});
});
function updateSliderTooltip(slider) {
if (slider.id === 'sizeSlider') {
$sliderTooltip.textContent = slider.value + ' Elemente';
} else if (slider.id === 'speedSlider') {
const ms = Math.round(1000 * Math.pow(0.001, (parseInt(slider.value) - 1) / 99));
$sliderTooltip.textContent = ms + ' ms/Schritt';
} else if (slider.id === 'threadSlider') {
$sliderTooltip.textContent = slider.value + ' Thread(s)';
}
}
function updateSliderTooltipPosition(x, y) {
const tw = $sliderTooltip.offsetWidth;
const th = $sliderTooltip.offsetHeight;
let left = x - tw / 2;
let top = y - th - 12;
if (left < 8) left = 8;
if (left + tw > window.innerWidth - 8) left = window.innerWidth - tw - 8;
if (top < 8) top = y + 16;
$sliderTooltip.style.left = left + 'px';
$sliderTooltip.style.top = top + 'px';
}
// ================================================================
// URL State Persistence
// ================================================================