From 3a74e16bb8365affac608668910a188284a8f15f Mon Sep 17 00:00:00 2001 From: MrEgosar Date: Sun, 25 Oct 2026 17:45:41 +0100 Subject: [PATCH] =?UTF-8?q?Gr=C3=B6=C3=9Fere=20Map-Kacheln=20und=20Ban/Pic?= =?UTF-8?q?k-Leiste?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ab dem Veto bekommt das Map-Board die volle Breite (4 Spalten), die Teamkarten rücken darunter. Die Schrittleiste zeigt pro Schritt das Team. --- client/src/components/VetoBoard.jsx | 1 + client/src/pages/MatchPage.jsx | 2 +- client/src/styles.css | 45 +++++++++++++++++++---------- 3 files changed, 31 insertions(+), 17 deletions(-) diff --git a/client/src/components/VetoBoard.jsx b/client/src/components/VetoBoard.jsx index 22dbbd7..51d817f 100644 --- a/client/src/components/VetoBoard.jsx +++ b/client/src/components/VetoBoard.jsx @@ -103,6 +103,7 @@ export default function VetoBoard({ state, viewer, act, busy, compact = false })
  • {STEP_SHORT[s.type]} + {s.team ? teams[s.team].name : 'automatisch'}
    • ))} diff --git a/client/src/pages/MatchPage.jsx b/client/src/pages/MatchPage.jsx index 73d0fa2..b47e14f 100644 --- a/client/src/pages/MatchPage.jsx +++ b/client/src/pages/MatchPage.jsx @@ -98,7 +98,7 @@ export default function MatchPage() { {viewer.role === 'public' && } -
    +
    diff --git a/client/src/styles.css b/client/src/styles.css index 338d146..f35ea51 100644 --- a/client/src/styles.css +++ b/client/src/styles.css @@ -167,8 +167,8 @@ input:focus, select:focus { border-color: var(--link); outline: none; } .choice-card.is-off { opacity: .45; cursor: not-allowed; } .choice-card:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; } .flow-preview { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 12px 0 0; } -.flow-step { font-size: .75rem; padding: 3px 8px; border-radius: 3px; background: var(--surface-2); display: flex; flex-direction: column; line-height: 1.2; } -.flow-step small { color: var(--muted); font-size: .6875rem; } +.flow-step { font-size: .875rem; padding: 6px 12px; border-radius: 3px; background: var(--surface-2); display: flex; flex-direction: column; line-height: 1.2; } +.flow-step small { color: var(--muted); font-size: .75rem; } .flow-ban { box-shadow: inset 0 -2px 0 var(--error); } .flow-pick { box-shadow: inset 0 -2px 0 var(--ok); } .flow-decider { box-shadow: inset 0 -2px 0 var(--text); } @@ -184,6 +184,9 @@ input:focus, select:focus { border-color: var(--link); outline: none; } .match-facts dd { margin: 0; font-weight: 600; } .match-grid { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 280px); gap: 20px; align-items: start; } +/* Ab dem Veto bekommt das Map-Board die volle Breite, die Teamkarten stehen darunter nebeneinander */ +.match-grid.stage-wide { grid-template-columns: 1fr 1fr; } +.match-grid.stage-wide .stage { grid-column: 1 / -1; grid-row: 1; } .stage { min-width: 0; } .stage-note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .stage-note .btn { margin: 8px 0 8px; } @@ -234,11 +237,12 @@ input:focus, select:focus { border-color: var(--link); outline: none; } .turn.is-you .turn-hint { color: var(--text); font-weight: 600; } .turn-done { font: 600 1.375rem var(--display); --team: var(--ok); } -.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } +.map-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .map-tile { --by: var(--line-strong); + --chamfer: 20px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; - aspect-ratio: 4 / 3; padding: 12px; border: 0; color: var(--text); font: inherit; cursor: default; + aspect-ratio: 16 / 10; padding: 16px 18px; border: 0; color: var(--text); font: inherit; cursor: default; background: var(--surface-2); clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer))); transition: transform .15s, filter .25s; @@ -259,8 +263,8 @@ input:focus, select:focus { border-color: var(--link); outline: none; } background: linear-gradient(180deg, rgba(var(--bg-rgb), .05) 30%, rgba(var(--bg-rgb), .88) 100%); } .map-name, .map-status { position: relative; z-index: 1; } -.map-name { font: 700 1.625rem/1 var(--display); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); } -.map-status { font-size: .8125rem; color: color-mix(in srgb, var(--text) 75%, transparent); margin-top: 4px; } +.map-name { font: 700 clamp(1.625rem, 2.6vw, 2.25rem)/1 var(--display); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); } +.map-status { font-size: .9375rem; color: color-mix(in srgb, var(--text) 75%, transparent); margin-top: 4px; } .map-tile:not(:disabled) { cursor: pointer; } .map-tile:not(:disabled):hover { transform: translateY(-2px); } .map-tile:focus-visible { outline: none; } @@ -270,13 +274,13 @@ input:focus, select:focus { border-color: var(--link); outline: none; } .map-tile.status-banned { filter: grayscale(.9) brightness(.6); } .map-tile.status-banned::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; - background: linear-gradient(to top right, transparent calc(50% - 3px), var(--by) calc(50% - 3px), var(--by) calc(50% + 3px), transparent calc(50% + 3px)); + background: linear-gradient(to top right, transparent calc(50% - 4px), var(--by) calc(50% - 4px), var(--by) calc(50% + 4px), transparent calc(50% + 4px)); } .map-tile.status-banned .map-status { color: var(--text); } /* Gewählt, Entscheidungsmap, Auswahl: Rahmen als Overlay über dem Map-Bild */ .map-tile.status-picked::after, .map-tile.status-decider::after, .map-tile.is-selected::after, .map-tile.is-side::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; - box-shadow: inset 0 0 0 3px var(--frame, var(--by)); + box-shadow: inset 0 0 0 4px var(--frame, var(--by)); } .map-tile.status-picked .map-status { color: var(--by); font-weight: 600; } .map-tile.status-decider { --by: var(--text); } @@ -285,7 +289,7 @@ input:focus, select:focus { border-color: var(--link); outline: none; } .map-tile.is-selected.sel-ban { --frame: var(--error); } .map-tile.is-selected.sel-pick { --frame: var(--ok); } .map-tile.is-side::after { animation: side-pulse 1.6s ease-in-out infinite; } -@keyframes side-pulse { 50% { box-shadow: inset 0 0 0 3px var(--pending); } } +@keyframes side-pulse { 50% { box-shadow: inset 0 0 0 4px var(--pending); } } .veto-confirm .btn { width: 100%; } .side-choice { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } @@ -309,12 +313,14 @@ input:focus, select:focus { border-color: var(--link); outline: none; } .side-option:disabled { opacity: .5; cursor: not-allowed; } .side-icon { flex: none; } -.step-track { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; } +.step-track { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; } .step { --team: var(--muted); - font-size: .75rem; padding: 4px 8px; border-radius: 3px; background: var(--surface); - border-bottom: 2px solid color-mix(in srgb, var(--team) 45%, transparent); color: var(--muted); + display: flex; flex-direction: column; min-width: 92px; line-height: 1.2; + font: 600 1rem var(--display); padding: 8px 14px; border-radius: 4px; background: var(--surface); + border-bottom: 3px solid color-mix(in srgb, var(--team) 45%, transparent); color: var(--muted); } +.step small { font: 500 .8125rem var(--body); opacity: .85; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .step-A { --team: var(--team-a); } .step-B { --team: var(--team-b); } .step.done { color: var(--text); background: var(--surface-2); border-bottom-color: var(--team); } @@ -326,9 +332,10 @@ input:focus, select:focus { border-color: var(--link); outline: none; } .veto-history li.hist-A { border-left-color: var(--team-a); } .veto-history li.hist-B { border-left-color: var(--team-b); } .veto-history time, .event-log time { color: var(--muted); font-size: .8125rem; margin-right: 8px; font-variant-numeric: tabular-nums; } -.veto-compact .map-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; } -.veto-compact .map-tile { aspect-ratio: 16 / 9; padding: 8px; --chamfer: 10px; } -.veto-compact .map-name { font-size: 1.125rem; } +.veto-compact .map-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } +.veto-compact .map-tile { aspect-ratio: 16 / 9; padding: 10px 12px; --chamfer: 14px; } +.veto-compact .map-name { font-size: 1.375rem; } +.veto-compact .map-status { font-size: .8125rem; } /* ---------- Serie ---------- */ .series { margin-bottom: 20px; } @@ -404,6 +411,7 @@ input:focus, select:focus { border-color: var(--link); outline: none; } @media (max-width: 1040px) { .match-grid { grid-template-columns: 1fr 1fr; } .stage { grid-column: 1 / -1; grid-row: 1; } + .map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .match-grid { grid-template-columns: 1fr; } @@ -413,7 +421,12 @@ input:focus, select:focus { border-color: var(--link); outline: none; } .brand-app { font-size: 1rem; padding-left: 10px; } .create-teams { grid-template-columns: 1fr; } .vs.big { justify-self: center; } - .map-grid { grid-template-columns: repeat(2, 1fr); } + .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } + .map-tile { --chamfer: 14px; padding: 10px 12px; } + .map-name { font-size: 1.375rem; } + .map-status { font-size: .8125rem; } + .match-grid.stage-wide { grid-template-columns: 1fr; } + .step { min-width: 0; padding: 6px 10px; font-size: .9375rem; } .side-options { grid-template-columns: 1fr; } .series-item { grid-template-columns: 1fr auto; } .series-no { grid-column: 1 / -1; }