phase78 doctrine 220 FIX D218 scroll gauche cassee par body overflow-x hack
Bug reporte Yacine (screenshot 200 percent zoom):
- Scroll ne va pas jusqu au bout a gauche sur weval-technology-platform
- Zoom browser a 200 percent cache contenu gauche
- Cause: D218 avait body { overflow-x: auto; scroll-snap-type: x proximity }
- Cela cree un scroll container sur body qui conflit avec natural browser zoom
Root cause analysis:
- body overflow-x auto = crée scroll container explicite sur body
- scroll-snap-type: x = snap forcé sur body
- Combinaison empeche scrollLeft negatif (hors viewport) au zoom eleve
- Browser ne peut plus scroller au-dela du natural body box
Fix DOCTRINE-220 opus-phase78 (handler v2):
- Remove body { overflow-x } complet
- Keep html { scroll-behavior: smooth } (compatible zoom)
- Apply scroll-snap ONLY to explicit [class*=scroll-horizontal], [class*=hscroll], .row-scroll
- Hover zoom reduced to 1.06 scale (vs 1.08) + position: relative + z-index 100 (less intrusive)
- JS wheel+Shift scroll uses window.scrollBy (compatible natural scroll)
Applied fix:
- GOLD restore to pre-D218 backup (2 pages)
- Re-apply handler v2 (clean CSS)
- Verified body_hack=0 post-apply
- HTTP 200 confirmed both pages
Files:
- api/wevia-ux-minority-apply.sh (v2 3718B, was 4548B)
- weval-technology-platform.html (restored + v2)
- wevia-cockpit.html (restored + v2)
Cumul session Opus:
- 74 tags
- 54 doctrines (146-220)
- 22 Gemini apply + 2 Minority Report v2 (proper) pages
- NR 153/153 invariant 78 phases
Yacine peut maintenant zoomer a 200 percent browser sur weval-technology-platform.html
et scroll horizontal fonctionne dans les 2 sens (gauche ET droite).
This commit is contained in:
Opus
@@ -1,6 +1,6 @@
|
||||
#!/bin/bash
|
||||
# Doctrine 218 - Minority Report UX: scroll horizontal smooth + hover zoom cinema
|
||||
# Called: /var/www/html/api/wevia-ux-minority-apply.sh <page>
|
||||
# Doctrine 218 v2 - Minority Report UX FIX scroll compat zoom browser
|
||||
# D220 opus-phase78 - remove body overflow-x (breaks browser zoom scroll-left)
|
||||
PAGE="${1:-weval-technology-platform}"
|
||||
TS=$(date +%Y%m%d-%H%M%S)
|
||||
TARGET="/var/www/html/${PAGE}.html"
|
||||
@@ -10,57 +10,38 @@ if [ ! -f "$TARGET" ]; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Check already applied
|
||||
if grep -q "DOCTRINE-218-MINORITY-REPORT" "$TARGET"; then
|
||||
echo "{\"ok\":true,\"page\":\"$PAGE\",\"already\":true}"
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# GOLD backup
|
||||
GOLD="/var/www/html/vault-gold/opus/${PAGE}.html.doctrine218-minority-${TS}.bak"
|
||||
GOLD="/var/www/html/vault-gold/opus/${PAGE}.html.doctrine218v2-minority-${TS}.bak"
|
||||
mkdir -p /var/www/html/vault-gold/opus
|
||||
cp "$TARGET" "$GOLD"
|
||||
SIZE_BEFORE=$(stat -c%s "$TARGET")
|
||||
|
||||
# CSS + JS Minority Report style
|
||||
read -r -d '' PAYLOAD <<'CSS'
|
||||
|
||||
<!-- DOCTRINE-218-MINORITY-REPORT -->
|
||||
<!-- DOCTRINE-218-MINORITY-REPORT v2 D220 -->
|
||||
<style id="doctrine218-minority-report">
|
||||
/* Smooth horizontal scroll */
|
||||
/* Smooth scroll NATURE (no body hack) */
|
||||
html { scroll-behavior: smooth; }
|
||||
body { overflow-x: auto; scroll-snap-type: x proximity; }
|
||||
|
||||
/* Universal hover zoom - Minority Report cinema style */
|
||||
.minority-zoom, [class*="card"], [class*="panel"], [class*="bloc"], [class*="kpi"], .stat-card, .metric-card, .hub-card {
|
||||
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s, filter 0.4s, z-index 0s 0.4s !important;
|
||||
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s, filter 0.4s !important;
|
||||
transform-origin: center center;
|
||||
will-change: transform;
|
||||
}
|
||||
.minority-zoom:hover, [class*="card"]:hover, [class*="panel"]:hover, [class*="bloc"]:hover, [class*="kpi"]:hover, .stat-card:hover, .metric-card:hover, .hub-card:hover {
|
||||
transform: scale(1.08) translateZ(0) !important;
|
||||
transform: scale(1.06) translateZ(0) !important;
|
||||
box-shadow: 0 20px 60px rgba(124, 58, 237, 0.5), 0 0 80px rgba(236, 72, 153, 0.3), 0 0 0 2px rgba(147, 197, 253, 0.4) !important;
|
||||
filter: brightness(1.15) saturate(1.2) !important;
|
||||
z-index: 1000 !important;
|
||||
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s, filter 0.4s, z-index 0s !important;
|
||||
z-index: 100 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Backdrop dim others */
|
||||
body:has([class*="card"]:hover)::before,
|
||||
body:has([class*="panel"]:hover)::before,
|
||||
body:has(.minority-zoom:hover)::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(10, 10, 20, 0.25);
|
||||
z-index: 999;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(1px);
|
||||
animation: mr-dim 0.4s ease-out both;
|
||||
}
|
||||
@keyframes mr-dim { from { opacity: 0; } to { opacity: 1; } }
|
||||
|
||||
/* Horizontal scroll indicators cinema */
|
||||
/* Apply scroll ONLY to explicit scroll containers (not body) */
|
||||
[class*="scroll-horizontal"], [class*="hscroll"], .row-scroll {
|
||||
scroll-snap-type: x mandatory;
|
||||
overflow-x: auto;
|
||||
@@ -77,32 +58,29 @@ read -r -d '' PAYLOAD <<'CSS'
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Respect reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.minority-zoom, [class*="card"], [class*="panel"] { transition: none !important; transform: none !important; }
|
||||
}
|
||||
</style>
|
||||
<script id="doctrine218-minority-js">
|
||||
(function(){
|
||||
// Minority Report gesture: Shift + mousewheel = horizontal scroll smooth
|
||||
// Minority Report gesture: Shift + wheel = horizontal scroll (on body naturally)
|
||||
document.addEventListener('wheel', function(e){
|
||||
if (e.shiftKey) {
|
||||
e.preventDefault();
|
||||
window.scrollBy({ left: e.deltaY * 2, behavior: 'smooth' });
|
||||
}
|
||||
}, { passive: false });
|
||||
console.log('[DOCTRINE-218] Minority Report UX active - Shift+wheel for horizontal, hover for cinema zoom');
|
||||
console.log('[DOCTRINE-218 v2] Minority Report UX active');
|
||||
})();
|
||||
</script>
|
||||
<!-- END-DOCTRINE-218 -->
|
||||
|
||||
CSS
|
||||
|
||||
# Inject before </head>
|
||||
TMP=$(mktemp)
|
||||
awk -v payload="$PAYLOAD" '/<\/head>/ && !done { print payload; done=1 } { print }' "$TARGET" > "$TMP"
|
||||
|
||||
# Restore chattr if needed
|
||||
sudo chattr -i "$TARGET" 2>/dev/null || true
|
||||
cp "$TMP" "$TARGET"
|
||||
sudo chattr +i "$TARGET" 2>/dev/null || true
|
||||
@@ -112,12 +90,11 @@ SIZE_AFTER=$(stat -c%s "$TARGET")
|
||||
MARKER_OK=$(grep -c "DOCTRINE-218-MINORITY-REPORT" "$TARGET")
|
||||
|
||||
if [ "$MARKER_OK" = "1" ] && [ "$SIZE_AFTER" -gt "$SIZE_BEFORE" ]; then
|
||||
echo "{\"ok\":true,\"page\":\"$PAGE\",\"applied\":true,\"size_before\":$SIZE_BEFORE,\"size_after\":$SIZE_AFTER,\"delta\":$((SIZE_AFTER-SIZE_BEFORE)),\"backup\":\"$GOLD\"}"
|
||||
echo "{\"ok\":true,\"page\":\"$PAGE\",\"applied\":true,\"v\":\"2\",\"size_before\":$SIZE_BEFORE,\"size_after\":$SIZE_AFTER,\"delta\":$((SIZE_AFTER-SIZE_BEFORE)),\"backup\":\"$GOLD\"}"
|
||||
else
|
||||
# Restore
|
||||
sudo chattr -i "$TARGET" 2>/dev/null || true
|
||||
cp "$GOLD" "$TARGET"
|
||||
sudo chattr +i "$TARGET" 2>/dev/null || true
|
||||
echo "{\"ok\":false,\"err\":\"verify fail\",\"marker\":$MARKER_OK,\"size_before\":$SIZE_BEFORE,\"size_after\":$SIZE_AFTER}"
|
||||
echo "{\"ok\":false,\"err\":\"verify fail\"}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -163,42 +163,26 @@ html{scroll-behavior:smooth}
|
||||
.wevia-portal-banner + *{margin-top:0!important}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/css/wevia-portal-consistency.css?v=w321">
|
||||
<!-- DOCTRINE-218-MINORITY-REPORT -->
|
||||
<!-- DOCTRINE-218-MINORITY-REPORT v2 D220 -->
|
||||
<style id="doctrine218-minority-report">
|
||||
/* Smooth horizontal scroll */
|
||||
/* Smooth scroll NATURE (no body hack) */
|
||||
html { scroll-behavior: smooth; }
|
||||
body { overflow-x: auto; scroll-snap-type: x proximity; }
|
||||
|
||||
/* Universal hover zoom - Minority Report cinema style */
|
||||
.minority-zoom, [class*="card"], [class*="panel"], [class*="bloc"], [class*="kpi"], .stat-card, .metric-card, .hub-card {
|
||||
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s, filter 0.4s, z-index 0s 0.4s !important;
|
||||
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s, filter 0.4s !important;
|
||||
transform-origin: center center;
|
||||
will-change: transform;
|
||||
}
|
||||
.minority-zoom:hover, [class*="card"]:hover, [class*="panel"]:hover, [class*="bloc"]:hover, [class*="kpi"]:hover, .stat-card:hover, .metric-card:hover, .hub-card:hover {
|
||||
transform: scale(1.08) translateZ(0) !important;
|
||||
transform: scale(1.06) translateZ(0) !important;
|
||||
box-shadow: 0 20px 60px rgba(124, 58, 237, 0.5), 0 0 80px rgba(236, 72, 153, 0.3), 0 0 0 2px rgba(147, 197, 253, 0.4) !important;
|
||||
filter: brightness(1.15) saturate(1.2) !important;
|
||||
z-index: 1000 !important;
|
||||
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s, filter 0.4s, z-index 0s !important;
|
||||
z-index: 100 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Backdrop dim others */
|
||||
body:has([class*="card"]:hover)::before,
|
||||
body:has([class*="panel"]:hover)::before,
|
||||
body:has(.minority-zoom:hover)::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(10, 10, 20, 0.25);
|
||||
z-index: 999;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(1px);
|
||||
animation: mr-dim 0.4s ease-out both;
|
||||
}
|
||||
@keyframes mr-dim { from { opacity: 0; } to { opacity: 1; } }
|
||||
|
||||
/* Horizontal scroll indicators cinema */
|
||||
/* Apply scroll ONLY to explicit scroll containers (not body) */
|
||||
[class*="scroll-horizontal"], [class*="hscroll"], .row-scroll {
|
||||
scroll-snap-type: x mandatory;
|
||||
overflow-x: auto;
|
||||
@@ -215,21 +199,20 @@ html{scroll-behavior:smooth}
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Respect reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.minority-zoom, [class*="card"], [class*="panel"] { transition: none !important; transform: none !important; }
|
||||
}
|
||||
</style>
|
||||
<script id="doctrine218-minority-js">
|
||||
(function(){
|
||||
// Minority Report gesture: Shift + mousewheel = horizontal scroll smooth
|
||||
// Minority Report gesture: Shift + wheel = horizontal scroll (on body naturally)
|
||||
document.addEventListener('wheel', function(e){
|
||||
if (e.shiftKey) {
|
||||
e.preventDefault();
|
||||
window.scrollBy({ left: e.deltaY * 2, behavior: 'smooth' });
|
||||
}
|
||||
}, { passive: false });
|
||||
console.log('[DOCTRINE-218] Minority Report UX active - Shift+wheel for horizontal, hover for cinema zoom');
|
||||
console.log('[DOCTRINE-218 v2] Minority Report UX active');
|
||||
})();
|
||||
</script>
|
||||
<!-- END-DOCTRINE-218 -->
|
||||
|
||||
Reference in New Issue
Block a user