Hi!
I took another stab at getting a board that seamlessly scales with screen/window size to work and this time around I was able to make it look good.
If you click on the daily surprise you'll see the new board which scales seamlessly with the window size (or screen size on devices). It hasn't been integrated everywhere yet so please check if it works fine on your mobile phone/tablet and let me know if it looks wrong.
To test:
1: Go to www.backgammonstudio.com
2: Scroll down to the bottom (if needed)
3: Click on the board (which should fit your device screen and not require scrolling to view)
You should now see the new board which should fit nicely on screen. Or at least a better fit than before!
You'll also see the new board graphics where you'll soon be able to specify the texture for the pegs, the background, the inner board and the frame.
On desktop you can see that the height of the board doesn't match the height of the info panel as I decided to keep the aspect ratio of the board image so on desktop you'll need to resize the window in order to make the height match if you want.
On devices I ignore the aspect ratio in order to make the board fit the available area. This will look rather daft in portrait mode so switch to landscape mode when viewing this site.
This is also another step towards making this site that works well as an app. Currently if you use 'Add to home screen' on iPhone (and similar on android) you end up with an ok looking page and the daily surprise board should look ok but there are still new pageloads when you use other sections of the site and I have to get rid of all of those.
From my iphone:
Here you'll see that the evaluation area now takes all space on the right hand side as there just isn't enough room to display everything. Switching between the different sections is through a dropdown menu as there isn't enough room for having a button for each tab.
Here I have clicked on the toggle details button and the info area now takes more room on the screen to display everything.
I have also added yet another way to view menus by using dialogs (as you can see in the top picture). I'll try to restrain myself from adding any more alternative menu display methods.. :-)
Give it a try!
TP