Miroirs/xwords
1
0
Fork 0
mirror of git://xwords.git.sourceforge.net/gitroot/xwords/xwords synced 2025-01-01 06:19:57 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

size html elements based on window size

Browse source 
Should make things look better on different sized phone and tablet
screens.
This commit is contained in:
Eric House 2021-03-24 10:20:42 -07:00
parent bcf85fa849
commit e7669c427e
3 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
xwords4/wasm/main.c
View file

@ -1014,17 +1014,8 @@ initWindow( Globals* globals, int winWidth, int winHeight )
{
// we're ready to go IFF we are inited.
if ( !!globals->vtMgr ) { /* inited? */
/* Figure height as twice width, then set to use 3/4 of it */
int useWidth = winWidth;
int useHeight = useWidth * 2;
if ( useHeight > winHeight ) {
useHeight = winHeight;
useWidth = useHeight / 2;
}
useHeight = useHeight * 100 / 145;
globals->useWidth = useWidth;
globals->useHeight = useHeight;
globals->useWidth = winWidth;
globals->useHeight = winHeight;
if ( !!globals->window ) {
SDL_DestroyRenderer(globals->renderer);
@ -1033,7 +1024,7 @@ initWindow( Globals* globals, int winWidth, int winHeight )
globals->window = NULL;
}
SDL_CreateWindowAndRenderer( useWidth, useHeight, 0,
SDL_CreateWindowAndRenderer( winWidth, winHeight, 0,
&globals->window, &globals->renderer );
/* wipe the canvas to background */
@ -1041,10 +1032,11 @@ initWindow( Globals* globals, int winWidth, int winHeight )
SDL_RenderClear( globals->renderer );
if ( !!globals->draw ) {
wasm_draw_resize( globals->draw, useWidth, useHeight );
wasm_draw_resize( globals->draw, winWidth, winHeight );
resizeBoards( globals );
} else {
globals->draw = wasm_draw_make( MPPARM(globals->mpool) useWidth, useHeight );
globals->draw = wasm_draw_make( MPPARM(globals->mpool)
winWidth, winHeight );
}
GameState* gs = getCurGame( globals );
@ -2085,11 +2077,13 @@ gotDictBinary( GotDictProc proc, void* closure, const char* xwd,
}
void
onResize(void* closure, int width, int height)
onResize( void* closure, int width, int height )
{
CAST_GLOB( Globals*, globals, closure );
XP_LOGFF( "width=%d, height=%d)", width, height );
initWindow( globals, width, height );
updateGameButtons( globals );
updateDeviceButtons( globals );
}
/* On first launch, we may have an invitation. Or not. We want to ask for a

8
xwords4/wasm/shell_minimal.html
View file

@ -13,7 +13,7 @@
margin-right: auto;
}
button.xwbutton {
font-size: 2.6rem;
<!-- nothing right now -->
}
div.emscripten { text-align: center; }
div.emscripten_border { border: 1px solid black; }
@ -73,13 +73,11 @@
border-color: #000;
vertical-align: top;
padding: 10px;
font-size: 2.0rem;
}
textarea.stringedit {
height: 1em;
resize: none;
font-size: 2.0rem;
}
</style>
@ -96,9 +94,9 @@
<div class="emscripten_border">
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
</div>
<div class='buttonRow' id="game_buttons"></div>
<div class='buttonRow' id='game_buttons'></div>
<hr/>
<div class='buttonRow' id="device_buttons"></div>
<div class='buttonRow' id='device_buttons'></div>
<hr/>
<table class='centered'>
<tr><td>MQTT Dev ID:</td><td id="mqtt_span"></td></tr>

20
xwords4/wasm/xwutils.js
View file

@ -6,6 +6,10 @@ var state = {client: null,
connChangeStamp: 0,
};
function fontSize() {
return (state.height / 500) + 'rem';
}
function ccallString(proc, closure, str) {
Module.ccall('cbckString', null, ['number', 'number', 'string'],
[proc, closure, str]);
@ -210,8 +214,18 @@ function jssetup(closure, dbg, devid, gitrev, now, noTabProc, focusProc, msgProc
});
function callResize() {
ccall('onResize', null, ['number', 'number', 'number'],
[state.closure, window.innerWidth, window.innerHeight]);
state.width = window.innerWidth;
state.height = state.width * 2;
if ( state.height > window.innerHeight ) {
state.height = window.innerHeight;
state.width = state.height / 2;
}
state.height = state.height * 100 / 151;
document.getElementById('nbalert').style['font-size'] = fontSize();
ccall('onResize', null, ['number', 'number', 'number'],
[state.closure, state.width, state.height]);
}
window.addEventListener('resize', function() {
const innerWidth = window.innerWidth;
@ -270,6 +284,7 @@ function newButtonDiv(buttons, proc, asDivs) {
let button = document.createElement('button');
button.classList.add('xwbutton');
button.textContent = buttonTxt;
button.style['font-size'] = fontSize();
button.onclick = function() { proc(ii); };
if ( asDivs ) {
let bdiv = document.createElement('div');
@ -364,6 +379,7 @@ function nbGetString(msg, dflt, proc, closure) {
let tarea = document.createElement('textarea');
tarea.classList.add('stringedit');
tarea.style['font-size'] = fontSize();
tarea.value = dflt;
div.appendChild( tarea );