diff options
| author | Roger Rehnelt <noreply@maennchen1.de> | 2026-10-03 15:05:19 +0200 |
|---|---|---|
| committer | Roger Rehnelt <noreply@maennchen1.de> | 2026-10-03 15:05:19 +0200 |
| commit | 3e4d53c83300ab377e22faf51a1841ca94743052 (patch) | |
| tree | 584d030080645d08e021efe537b343ea46fc34db | |
| parent | e20207af3fe77ddec29c5e4b63a0502331adc2c0 (diff) | |
GARAN: Label bleibt auf schmalen Handys im Fenster
Das Label wird nicht verkleinert, sondern nach links verschoben, wenn es über den Rand ragen würde. Die Position gleitet nicht mehr.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
| -rw-r--r-- | views/css/frontend.css | 2 | ||||
| -rw-r--r-- | views/css/wpsg-theme.css | 2 | ||||
| -rw-r--r-- | views/js/frontend.js | 27 |
3 files changed, 29 insertions, 2 deletions
diff --git a/views/css/frontend.css b/views/css/frontend.css index e8d353e..35a7605 100644 --- a/views/css/frontend.css +++ b/views/css/frontend.css @@ -41,7 +41,7 @@ input.wpsg_error { border-color:red !important; border:1px solid red; } &:after { position:absolute; right:0; bottom:2px; content:' '; width:16px; height:16px; background-image:url('../gfx/garan/garan_checkmark.svg'); background-size:contain; background-repeat:no-repeat; }
}
&:after { position:absolute; right:5px; top:0; content:' '; width:28px; height:40px; background-image:url('../gfx/garan/garan_eu.svg'); background-size:contain; background-repeat:no-repeat; }
- & > .tooltip { position:absolute; opacity:0; pointer-events:none; top:40px; left:-1px; padding:5px 5px 5px 0; transition:all 0.5s;
+ & > .tooltip { position:absolute; opacity:0; pointer-events:none; top:40px; left:-1px; padding:5px 5px 5px 0; transition:opacity 0.5s;
& > .inner { width:300px; min-height:300px; display:flex; flex-direction:column; gap:5px; background-color:white; padding:5px; border:1px solid black;
& > .border { border:1px solid black; display:flex; flex-direction:column; padding:5px;
.top { width:100%; border-bottom:2px solid black; padding-bottom:5px; position:relative;
diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css index bc9a310..2cae611 100644 --- a/views/css/wpsg-theme.css +++ b/views/css/wpsg-theme.css @@ -589,7 +589,7 @@ &:after { position:absolute; right:0; bottom:2px; content:' '; width:16px; height:16px; background-image:url('../gfx/garan/garan_checkmark.svg'); background-size:contain; background-repeat:no-repeat; } } &:after { position:absolute; right:5px; top:0; content:' '; width:28px; height:40px; background-image:url('../gfx/garan/garan_eu.svg'); background-size:contain; background-repeat:no-repeat; } - & > .tooltip { position:absolute; opacity:0; pointer-events:none; top:40px; left:-1px; padding:5px 5px 5px 0; transition:all 0.5s; + & > .tooltip { position:absolute; opacity:0; pointer-events:none; top:40px; left:-1px; padding:5px 5px 5px 0; transition:opacity 0.5s; & > .inner { width:300px; min-height:300px; display:flex; flex-direction:column; gap:5px; background-color:white; padding:5px; border:1px solid black; & > .border { border:1px solid black; display:flex; flex-direction:column; padding:5px; .top { width:100%; border-bottom:2px solid black; padding-bottom:5px; position:relative; diff --git a/views/js/frontend.js b/views/js/frontend.js index fb3bdac..d622596 100644 --- a/views/js/frontend.js +++ b/views/js/frontend.js @@ -282,3 +282,30 @@ // Der Variantenwechsel ersetzt das Produkt per Ajax
jQuery(document).ajaxComplete(wpsg_productBreadcrumbs);
+
+ /**
+ * GARAN-Label (Tooltip): bleibt im Fenster, ohne verkleinert zu werden (W8)
+ *
+ * Das Label ist mit Rahmen 317 px breit; auf 320 px breiten Bildschirmen hat die Inhaltsspalte weniger. Es wird
+ * nur nach links verschoben, rechts bleiben 4 px Abstand, links notfalls keiner.
+ */
+ function wpsg_garanTooltipPosition() {
+
+ var vw = document.documentElement.clientWidth;
+
+ document.querySelectorAll('.wpsg_product_garan > .tooltip').forEach(function(tooltip) {
+
+ tooltip.style.left = '';
+
+ var rect = tooltip.getBoundingClientRect();
+ var over = rect.right - (vw - 4);
+
+ if (over > 0) tooltip.style.left = (parseFloat(getComputedStyle(tooltip).left) - Math.min(over, rect.left)) + 'px';
+
+ } );
+
+ } // function wpsg_garanTooltipPosition()
+
+ if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', wpsg_garanTooltipPosition); else wpsg_garanTooltipPosition();
+ window.addEventListener('resize', wpsg_garanTooltipPosition);
+ jQuery(document).ajaxComplete(wpsg_garanTooltipPosition);
|