Responsive Mobile-Design: PGN/Tabelle-Reihenfolge, Board-Vergrößerung, Round-Info verschoben, kompaktere Player-Infos
This commit is contained in:
29
app.js
29
app.js
@@ -114,6 +114,7 @@ function updateBoard() {
|
||||
if (board) {
|
||||
board.position(chess.fen(), true);
|
||||
board.orientation(orientation);
|
||||
board.resize();
|
||||
highlightLastMove();
|
||||
} else {
|
||||
board = Chessboard('board', {
|
||||
@@ -198,6 +199,8 @@ function updatePlayerInfo() {
|
||||
// Round info
|
||||
const roundInfo = `Runde ${currentGame.round} – ${currentGame.event || 'Turnier'}`;
|
||||
document.getElementById('round-info').textContent = roundInfo;
|
||||
const mobileRound = document.getElementById('round-info-mobile');
|
||||
if (mobileRound) mobileRound.textContent = roundInfo;
|
||||
|
||||
// Result info
|
||||
const resultEl = document.getElementById('result-info');
|
||||
@@ -317,7 +320,8 @@ function generatePGN(game) {
|
||||
|
||||
function updatePGNDisplay() {
|
||||
if (!currentGame) return;
|
||||
document.getElementById('pgn-text').textContent = generatePGN(currentGame);
|
||||
const text = generatePGN(currentGame);
|
||||
document.querySelectorAll('.pgn-text').forEach(el => el.textContent = text);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -573,16 +577,16 @@ document.getElementById('refresh-btn').addEventListener('click', () => {
|
||||
/**
|
||||
* PGN in Zwischenablage kopieren
|
||||
*/
|
||||
document.getElementById('copy-pgn-btn').addEventListener('click', async () => {
|
||||
const text = document.getElementById('pgn-text').textContent;
|
||||
document.querySelectorAll('.copy-pgn-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const panel = btn.closest('[class*="pgn-panel"]');
|
||||
const text = panel.querySelector('.pgn-text').textContent;
|
||||
if (!text) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
const btn = document.getElementById('copy-pgn-btn');
|
||||
btn.textContent = '✅';
|
||||
setTimeout(() => { btn.textContent = '📋'; }, 1500);
|
||||
} catch {
|
||||
// Fallback
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
document.body.appendChild(ta);
|
||||
@@ -591,6 +595,7 @@ document.getElementById('copy-pgn-btn').addEventListener('click', async () => {
|
||||
document.body.removeChild(ta);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Pfeiltasten-Navigation
|
||||
@@ -607,6 +612,20 @@ document.addEventListener('keydown', (e) => {
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Board-Resize bei Fenster- und Container-Änderungen
|
||||
*/
|
||||
window.addEventListener('resize', () => {
|
||||
if (board) board.resize();
|
||||
});
|
||||
|
||||
if (window.ResizeObserver) {
|
||||
const ro = new ResizeObserver(() => {
|
||||
if (board) board.resize();
|
||||
});
|
||||
ro.observe(document.getElementById('board'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Init
|
||||
*/
|
||||
|
||||
14
index.html
14
index.html
@@ -20,6 +20,7 @@
|
||||
|
||||
<div id="main-content">
|
||||
<!-- Linke Spalte: Schachbrett -->
|
||||
<h2 id="round-info-mobile" class="round-info-mobile"></h2>
|
||||
<div id="board-section">
|
||||
<div id="player-black" class="player-info">
|
||||
<div class="player-avatar">⬛</div>
|
||||
@@ -38,12 +39,12 @@
|
||||
</div>
|
||||
<div class="player-clock" id="white-clock">--:--:--</div>
|
||||
</div>
|
||||
<div id="pgn-panel">
|
||||
<div id="pgn-panel" class="pgn-panel--desktop">
|
||||
<div class="pgn-header">
|
||||
<span>PGN</span>
|
||||
<button id="copy-pgn-btn" title="In Zwischenablage kopieren">📋</button>
|
||||
<button class="copy-pgn-btn" title="In Zwischenablage kopieren">📋</button>
|
||||
</div>
|
||||
<pre id="pgn-text"></pre>
|
||||
<pre class="pgn-text"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -61,6 +62,13 @@
|
||||
<h3>Alle Partien von Lara</h3>
|
||||
<div id="all-games-list"></div>
|
||||
</div>
|
||||
<div id="pgn-panel-mobile" class="pgn-panel--mobile">
|
||||
<div class="pgn-header">
|
||||
<span>PGN</span>
|
||||
<button class="copy-pgn-btn" title="In Zwischenablage kopieren">📋</button>
|
||||
</div>
|
||||
<pre class="pgn-text"></pre>
|
||||
</div>
|
||||
<div id="standings-panel">
|
||||
<h3>Turniertabelle ODJM D 2026</h3>
|
||||
<div id="standings-content">
|
||||
|
||||
83
style.css
83
style.css
@@ -133,11 +133,20 @@ header h1 {
|
||||
#board [data-square].last-move-highlight {
|
||||
box-shadow: inset 0 0 3px 3px rgba(255, 200, 0, 0.7);
|
||||
}
|
||||
#pgn-panel {
|
||||
#pgn-panel,
|
||||
#pgn-panel-mobile {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
#pgn-panel-mobile {
|
||||
display: none;
|
||||
}
|
||||
.pgn-panel--desktop,
|
||||
.pgn-panel--mobile {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.pgn-panel--desktop {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.pgn-header {
|
||||
@@ -149,7 +158,7 @@ header h1 {
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#copy-pgn-btn {
|
||||
.copy-pgn-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: #ccc;
|
||||
@@ -160,10 +169,10 @@ header h1 {
|
||||
font-size: 1rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
#copy-pgn-btn:hover {
|
||||
.copy-pgn-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
#pgn-text {
|
||||
.pgn-text {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.5;
|
||||
@@ -198,14 +207,16 @@ header h1 {
|
||||
}
|
||||
#moves-panel,
|
||||
#all-games-panel,
|
||||
#standings-panel {
|
||||
#standings-panel,
|
||||
#pgn-panel-mobile {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
#moves-panel h3,
|
||||
#all-games-panel h3,
|
||||
#standings-panel h3 {
|
||||
#standings-panel h3,
|
||||
#pgn-panel-mobile h3 {
|
||||
margin-bottom: 12px;
|
||||
color: #e94560;
|
||||
font-size: 1rem;
|
||||
@@ -377,17 +388,77 @@ header h1 {
|
||||
background: #e94560;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.round-info-mobile {
|
||||
display: none;
|
||||
}
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
#main-content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
}
|
||||
#info-section {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#board-section {
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
}
|
||||
#board,
|
||||
.player-info {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#board {
|
||||
overflow: hidden;
|
||||
}
|
||||
#board > div {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.round-info-mobile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
font-size: 1.3rem;
|
||||
color: #e94560;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#round-info {
|
||||
display: none;
|
||||
}
|
||||
#result-info {
|
||||
display: none;
|
||||
}
|
||||
.pgn-panel--desktop {
|
||||
display: none;
|
||||
}
|
||||
#pgn-panel-mobile {
|
||||
display: block;
|
||||
}
|
||||
.player-info {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.player-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.player-name {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.player-clock {
|
||||
font-size: 1.1rem;
|
||||
min-width: 80px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
header h1 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
93
style.less
93
style.less
@@ -163,11 +163,22 @@ header {
|
||||
}
|
||||
}
|
||||
|
||||
#pgn-panel {
|
||||
#pgn-panel, #pgn-panel-mobile {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
#pgn-panel-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pgn-panel--desktop,
|
||||
.pgn-panel--mobile {
|
||||
background: @bg-dark;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.pgn-panel--desktop {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
@@ -181,7 +192,7 @@ header {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#copy-pgn-btn {
|
||||
.copy-pgn-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: #ccc;
|
||||
@@ -197,7 +208,7 @@ header {
|
||||
}
|
||||
}
|
||||
|
||||
#pgn-text {
|
||||
.pgn-text {
|
||||
font-family: @font-mono;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.5;
|
||||
@@ -234,7 +245,7 @@ header {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#moves-panel, #all-games-panel, #standings-panel {
|
||||
#moves-panel, #all-games-panel, #standings-panel, #pgn-panel-mobile {
|
||||
background: @bg-dark;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
@@ -440,11 +451,16 @@ header {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.round-info-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
#main-content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
#info-section {
|
||||
@@ -453,6 +469,75 @@ header {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#board-section {
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
#board,
|
||||
.player-info {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#board {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#board > div {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.round-info-mobile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
font-size: 1.3rem;
|
||||
color: @primary;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#round-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#result-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pgn-panel--desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pgn-panel-mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.player-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.player-clock {
|
||||
font-size: 1.1rem;
|
||||
min-width: 80px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user