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 { body {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
#page {
width: 100%;
height: 100vh;
display: flex;
flex-flow: column nowrap;
} }
h1 { h1 {
font-family: 'Vollkorn', serif; font-family: 'Vollkorn', serif;
font-size: 2em; font-size: 2em;
line-height: 1.4em;
height: 1.4em;
margin-top: 8px;
margin-left: 8px;
margin-bottom: 0; margin-bottom: 0;
} }
@ -22,10 +35,16 @@ button:disabled .silhouette {
flex-flow: row nowrap; 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 { #cb_outer {
width: 100%; width: 100%;
max-width: calc(100vh - 4em); max-width: calc(100vw - (8px + 24px));
flex: 1 0 auto;
} }
#cb_container { #cb_container {
@ -65,11 +84,32 @@ button:disabled .silhouette {
} }
#cb_control_container { #cb_control_container {
display: flex;
flex-flow: column nowrap;
flex: 0 1000 auto;
margin-left: 1em; 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 { #cb_controls, #cb_names, #cb_game, #cb_navigate {
margin-top: 0.5em; margin-top: 0.5em;
white-space: nowrap;
} }
#cb_history { #cb_history {
@ -212,14 +252,21 @@ button:disabled .silhouette {
color: #cccccc; color: #cccccc;
} }
/*@media only screen and (max-width: 8in) {*/ @media only screen and (max-aspect-ratio: 3/2) {
@media only screen and (max-aspect-ratio: 4/3) {
#content { #content {
flex-flow: column nowrap; flex-flow: column nowrap;
} }
#cb_outer2 {
width: auto;
}
#cb_control_container { #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> <title>Paco Ŝako</title>
</head> </head>
<body> <body>
<div id="page">
<h1>Paco Ŝako</h1> <h1>Paco Ŝako</h1>
<div id="content"> <div id="content">
<div id="cb_outer2">
<div id="cb_outer"> <div id="cb_outer">
<div id="cb_container"> <div id="cb_container">
<div id="cb_inner"> <div id="cb_inner">
@ -139,6 +141,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="cb_control_container"> <div id="cb_control_container">
<form id="cb_control_form" onsubmit="return false;"> <form id="cb_control_form" onsubmit="return false;">
@ -154,13 +157,13 @@
<label for="cb_light_name">Players:</label> <label for="cb_light_name">Players:</label>
<input id="cb_light_name" placeholder="Light"> vs. <input id="cb_dark_name" placeholder="Dark"> <input id="cb_light_name" placeholder="Light"> vs. <input id="cb_dark_name" placeholder="Dark">
</div> </div>
<div id='cb_game'> <div id="cb_game">
<label for="cb_select_game">Select game:</label> <label for="cb_select_game">Select game:</label>
<select id="cb_select_game"> <select id="cb_select_game">
<option id="cb_new_game">&mdash; New Game &mdash;</option> <option id="cb_new_game">&mdash; New Game &mdash;</option>
</select> </select>
</div> </div>
<div id='cb_navigate'> <div id="cb_navigate">
<button id="cb_nav_first" title="View First Turn" type="button" disabled="true"> <button id="cb_nav_first" title="View First Turn" type="button" disabled="true">
<svg viewBox="0 0 144 144" class="media-button-svg silhouette"> <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
<path d="M 6 24 H 24 V 120 H 6"/> <path d="M 6 24 H 24 V 120 H 6"/>
@ -199,6 +202,7 @@
</button> </button>
</div> </div>
</form> </form>
<div id="cb_scrollable">
<p id="cb_history"></p> <p id="cb_history"></p>
<details> <details>
<summary>Rule Reference</summary> <summary>Rule Reference</summary>
@ -220,6 +224,7 @@
<p id="cb_peers"></p> <p id="cb_peers"></p>
</div> </div>
</div> </div>
</div>
<div id="cb_hidden" style="display: none"> <div id="cb_hidden" style="display: none">
<div id="cb_phantom" class="cb-phantom"></div> <div id="cb_phantom" class="cb-phantom"></div>
@ -259,6 +264,7 @@
</form> </form>
</div> </div>
</div> </div>
</div>
<script src="jquery-ui/external/jquery/jquery.js"></script> <script src="jquery-ui/external/jquery/jquery.js"></script>
<script src="jquery-ui/dist/jquery-ui.min.js"></script> <script src="jquery-ui/dist/jquery-ui.min.js"></script>