rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Desktop: Welten-Konfig als zentrierter Dialog, Chips kompakter

Browse source 
- Desktop (_isDesktop = innerWidth >= 768):
  Overlay zentriert (nicht Bottom-Sheet), max-width 1100px, border-radius 20px
  Grid: repeat(auto-fill, minmax(120px, 1fr)) statt repeat(4, 1fr)
  Chip-Höhe: 64px statt 80px, Gap 6px statt 8px
- Mobile: unverändert (Bottom-Sheet wie bisher)
- SW by-v1010, APP_VER 1010
This commit is contained in:
rene 2026-05-16 09:20:20 +02:00
parent 6721597779
commit 1b3b150b50
4 changed files with 17 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '1009'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '1010'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';
// Cache-Bust-Parameter nach Update-Reload sofort entfernen

22
backend/static/js/worlds.js
View file

@ -723,9 +723,12 @@ window.Worlds = (() => {
const bottomNav = document.getElementById('bottom-nav');
if (bottomNav) bottomNav.style.display = 'none';
const _isDesktop = window.innerWidth >= 768;
const ov = document.createElement('div');
ov.id = 'wc-overlay';
ov.style.cssText = 'position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;justify-content:flex-end';
ov.style.cssText = _isDesktop
? 'position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)'
: 'position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;justify-content:flex-end';
document.body.appendChild(ov);
const _removeDragListeners = () => {
@ -749,11 +752,14 @@ window.Worlds = (() => {
};
function _render() {
const _sheetStyle = _isDesktop
? 'position:relative;z-index:1;background:rgba(18,22,32,0.97);border-radius:20px;width:90%;max-width:1100px;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 20px'
: 'position:relative;z-index:1;background:rgba(18,22,32,0.97);border-radius:24px 24px 0 0;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 calc(env(safe-area-inset-bottom,16px)+16px)';
const _gridCols = _isDesktop ? 'repeat(auto-fill,minmax(120px,1fr))' : 'repeat(4,1fr)';
const _chipH = _isDesktop ? '64px' : '80px';
ov.innerHTML = `
<div id="wc-bg" style="position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px)"></div>
<div id="wc-sheet" style="position:relative;z-index:1;background:rgba(18,22,32,0.97);border-radius:24px 24px 0 0;
max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:0 0 calc(env(safe-area-inset-bottom,16px)+16px)">
${!_isDesktop ? '<div id="wc-bg" style="position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px)"></div>' : ''}
<div id="wc-sheet" style="${_sheetStyle}">
<!-- Header -->
<div style="display:flex;align-items:center;justify-content:space-between;
padding:20px 20px 16px;position:sticky;top:0;background:rgba(18,22,32,0.97);
@ -789,15 +795,15 @@ window.Worlds = (() => {
${w !== 'pool' ? `<span style="opacity:.5">(${chips.length})</span>` : ''}
</div>
<div class="wc-zone" data-zone="${w}"
style="display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:80px;gap:8px;
style="display:grid;grid-template-columns:${_gridCols};grid-auto-rows:${_chipH};gap:${_isDesktop?'6px':'8px'};
min-height:${w==='pool'&&chips.length===0?'40px':'auto'};
border:2px dashed transparent;border-radius:16px;padding:4px;
transition:border-color .2s">
${chips.map(c => `
<div class="wc-chip" data-page="${c.page}" data-zone="${w}"
style="background:rgba(38,46,62,0.95);border:1.5px solid ${col};
border-radius:16px;padding:10px 4px 8px;height:80px;box-sizing:border-box;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
border-radius:16px;padding:${_isDesktop?'6px 4px':'10px 4px 8px'};height:${_chipH};box-sizing:border-box;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:${_isDesktop?'3px':'5px'};
cursor:grab;position:relative;min-width:0;overflow:hidden;
user-select:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y">
${!c.pinned ? `