lixen/chess
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.8.1 web ui responsive style improved

Browse Source
This commit is contained in:
Lixen Wraith
2025-11-19 08:43:12 -05:00
parent ef60cfaac5
commit 0a85cc88bb
2 changed files with 35 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
cmd/chess-client-cli/exit_wasm.go
View File

@ -10,10 +10,13 @@ import (
func handleExit() (restart bool) { func handleExit() (restart bool) {
display.Println(display.Cyan, "Goodbye!") display.Println(display.Cyan, "Goodbye!")
display.Println(display.Yellow, "\n━━━━━━━━━━━━━━━━━━━━━━━━") display.Println(display.Yellow, "\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━")
display.Println(display.Yellow, "Session ended.") display.Println(display.Yellow, "Session ended.")
display.Println(display.Yellow, "Restarting the client.") display.Println(display.Yellow, "Restarting the client.\n")
display.Println(display.Yellow, "━━━━━━━━━━━━━━━━━━━━━━━━\n") display.Println(display.Yellow, "For a complete restart:")
display.Println(display.White, "• Refresh the page (F5 or Ctrl+R)")
display.Println(display.White, "• Or close and reopen this tab")
display.Println(display.Yellow, "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n")
return true return true
} }

58
internal/server/webserver/chess-client-web/style.css
View File

@ -73,13 +73,13 @@ body {
main { main {
display: grid; display: grid;
grid-template-columns: 1fr 340px; grid-template-columns: 1fr clamp(280px, 17.71vw, 340px);
gap: 2rem; gap: clamp(1rem, 2vw, 2rem);
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
max-width: 980px; max-width: clamp(800px, 51vw, 980px);
margin: 0 auto; margin: 0 auto;
align-items: center; align-items: center;
} }
@ -88,7 +88,7 @@ main {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 440px; min-width: clamp(360px, 22.92vw, 440px);
overflow: visible; overflow: visible;
height: 100%; height: 100%;
} }
@ -97,16 +97,16 @@ main {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 440px; width: clamp(360px, 22.92vw, 440px);
height: 440px; height: clamp(360px, 22.92vw, 440px);
padding: 20px; padding: clamp(16px, 1.04vw, 20px);
position: relative; position: relative;
} }
.board-wrapper { .board-wrapper {
position: relative; position: relative;
width: 400px; width: clamp(328px, 20.83vw, 400px);
height: 400px; height: clamp(328px, 20.83vw, 400px);
margin: 0; margin: 0;
} }
@ -269,13 +269,13 @@ main {
.info-panel { .info-panel {
background: var(--host-bg); background: var(--host-bg);
border-radius: 8px; border-radius: 8px;
padding: 1rem; padding: clamp(0.75rem, 0.83vw, 1rem);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: clamp(0.75rem, 0.83vw, 1rem);
overflow: hidden; overflow: hidden;
width: 340px; width: clamp(280px, 17.71vw, 340px);
height: 440px; height: clamp(360px, 22.92vw, 440px);
align-self: center; align-self: center;
} }
@ -651,9 +651,9 @@ input[type="range"]::-webkit-slider-thumb {
} }
.board-container { .board-container {
width: 440px; width: clamp(360px, 45vw, 440px);
height: 440px; height: clamp(360px, 45vw, 440px);
padding: 20px; padding: clamp(16px, 2.04vw, 20px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -662,8 +662,8 @@ input[type="range"]::-webkit-slider-thumb {
} }
.board-wrapper { .board-wrapper {
width: 400px; width: clamp(328px, 41vw, 400px);
height: 400px; height: clamp(328px, 41vw, 400px);
position: relative; position: relative;
margin: 0; margin: 0;
} }
@ -689,13 +689,13 @@ input[type="range"]::-webkit-slider-thumb {
} }
.info-panel { .info-panel {
width: 440px; width: clamp(360px, 45vw, 440px);
height: 200px; height: clamp(180px, 20.4vw, 200px);
display: grid; display: grid;
grid-template-columns: 180px 1fr; grid-template-columns: clamp(150px, 18.4vw, 180px) 1fr;
grid-template-rows: min-content min-content 1fr; grid-template-rows: min-content min-content 1fr;
gap: 0.5rem 1rem; gap: 0.5rem 1rem;
padding: 1rem; padding: clamp(0.75rem, 1.02vw, 1rem);
align-self: center; align-self: center;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
@ -763,12 +763,12 @@ input[type="range"]::-webkit-slider-thumb {
body { body {
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
min-width: 530px; min-width: clamp(440px, 100vw, 530px);
} }
.outer-container { .outer-container {
width: 530px; width: clamp(440px, 100vw, 530px);
min-width: 530px; min-width: clamp(440px, 100vw, 530px);
padding: 8px; padding: 8px;
min-height: 100vh; min-height: 100vh;
height: auto; height: auto;
@ -779,8 +779,8 @@ input[type="range"]::-webkit-slider-thumb {
} }
.container { .container {
width: 514px; width: calc(100% - 16px);
min-width: 514px; min-width: clamp(424px, calc(100vw - 16px), 514px);
border-radius: 12px; border-radius: 12px;
min-height: calc(100vh - 16px); min-height: calc(100vh - 16px);
height: auto; height: auto;
@ -794,7 +794,7 @@ input[type="range"]::-webkit-slider-thumb {
.board-container, .board-container,
.info-panel { .info-panel {
width: 440px; width: clamp(360px, 83vw, 440px);
min-width: 440px; min-width: clamp(360px, 83vw, 440px);
} }
} }