nybble
/
paco_sako
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

minor adaptive layout improvements

This commit is contained in:
Jesse D. McDonald 2020-03-15 02:44:11 -05:00
parent 3410e2d4f0
commit c6e02d15eb
2 changed files with 299 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
css/chess.css
View File

@ -1,10 +1,23 @@
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
#page {
width: 100%;
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
h1 {
font-family: 'Vollkorn', serif;
font-size: 2em;
line-height: 1.4em;
height: 1.4em;
margin-top: 8px;
margin-left: 8px;
margin-bottom: 0;
}
@ -22,10 +35,16 @@ button:disabled .silhouette {
flex-flow: row nowrap;
}
#cb_outer2 {
flex: 1 1 auto;
width: 100%;
max-width: calc(100vh - (8px + 2.8em + 8px));
margin-left: 8px;
}
#cb_outer {
width: 100%;
max-width: calc(100vh - 4em);
flex: 1 0 auto;
max-width: calc(100vw - (8px + 24px));
}
#cb_container {
@ -65,11 +84,32 @@ button:disabled .silhouette {
}
#cb_control_container {
display: flex;
flex-flow: column nowrap;
flex: 0 1000 auto;
margin-left: 1em;
width: 100%;
min-width: 24em;
max-height: calc(100vh - (8px + 2.8em));
}
#cb_control_form {
flex: 0 1 auto;
}
#cb_scrollable {
flex: 1 1000 auto;
padding-right: 8px;
overflow: auto;
}
#cb_scrollable p {
margin-top: 0;
}
#cb_controls, #cb_names, #cb_game, #cb_navigate {
margin-top: 0.5em;
white-space: nowrap;
}
#cb_history {
@ -212,14 +252,21 @@ button:disabled .silhouette {
color: #cccccc;
}
/*@media only screen and (max-width: 8in) {*/
@media only screen and (max-aspect-ratio: 4/3) {
@media only screen and (max-aspect-ratio: 3/2) {
#content {
flex-flow: column nowrap;
}
#cb_outer2 {
width: auto;
}
#cb_control_container {
margin-left: 0;
margin-left: 8px;
max-height: none;
overflow: visible;
width: 100%;
max-width: calc(100vw - (8px + 24px));
}
}

10
index.html
View File

@ -8,9 +8,11 @@
<title>Paco Ŝako</title>
</head>
<body>
<div id="page">
<h1>Paco Ŝako</h1>
<div id="content">
<div id="cb_outer2">
<div id="cb_outer">
<div id="cb_container">
<div id="cb_inner">
@ -139,6 +141,7 @@
</div>
</div>
</div>
</div>
<div id="cb_control_container">
<form id="cb_control_form" onsubmit="return false;">
@ -154,13 +157,13 @@
<label for="cb_light_name">Players:</label>
<input id="cb_light_name" placeholder="Light"> vs. <input id="cb_dark_name" placeholder="Dark">
</div>
<div id='cb_game'>
<div id="cb_game">
<label for="cb_select_game">Select game:</label>
<select id="cb_select_game">
<option id="cb_new_game">&mdash; New Game &mdash;</option>
</select>
</div>
<div id='cb_navigate'>
<div id="cb_navigate">
<button id="cb_nav_first" title="View First Turn" type="button" disabled="true">
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
<path d="M 6 24 H 24 V 120 H 6"/>
@ -199,6 +202,7 @@
</button>
</div>
</form>
<div id="cb_scrollable">
<p id="cb_history"></p>
<details>
<summary>Rule Reference</summary>
@ -220,6 +224,7 @@
<p id="cb_peers"></p>
</div>
</div>
</div>
<div id="cb_hidden" style="display: none">
<div id="cb_phantom" class="cb-phantom"></div>
@ -259,6 +264,7 @@
</form>
</div>
</div>
</div>
<script src="jquery-ui/external/jquery/jquery.js"></script>
<script src="jquery-ui/dist/jquery-ui.min.js"></script>