HTML5 CSS Toolbar + zoomable workspace that is mobile-friendly and adaptive

I have been working on a prototype level editor for Rabbit Escape, and I've had trouble getting the layout I wanted: a toolbar at the side or top of the screen, and the rest a zoomable workspace.

Something like this is very common in many desktop applications, but not that easy to achieve in a web page, especially because we want to take care that it adapts to different screen sizes and orientations, and, for example, allows zooming the toolbar buttons in case we find ourselves on a device with different resolution from what we were expecting.

level editor

Rabbit Escape

In the end I've gone with a grid-layout solution and accepted the fact that sometimes on mobile devices when I zoom in my toolbar will disappear off the top/side. When I scroll back to it, it stays around, so using this setup is quite natural. On the desktop, it works how you'd expect, with the toolbar staying on screen at all zoom levels.

Here's how it looks on a landscape display:

grid-layout

and portrait:

Read the full source code.

source code

As you can see from the code linked above, after much fiddling I managed to achieve this with a relatively small amount of CSS, and no JavaScript. I'm hoping it will behave well in unexpected scenarios, because the code expresses what I want fairly closely.

The important bits of the HTML are simple - a main div, a toolbar containing buttons, and a workspace containing some kind of work:

<div id="main">
   <div id="toolbar">
       <button></button><button></button><button></button><button></button><button></button><button></button><button></button><button></button>
   </div>
   <div id="workspace">
       <div id="work">
       </div>
   </div>
</div>

The keys bits of the CSS are:

/* Ensure we take up the full height of the page. */
html, body, #main
{
   height: 100%;
}

@media all and (orientation:landscape)
{
   /* On a wide screen, it's a grid with 2 columns,
      and the toolbar can scroll downwards. */
   #main
   {
       display: grid;
       grid-template-columns: 5em 1fr;
   }
   #toolbar
   {
       overflow-x: hidden;
       overflow-y: auto;
   }
}

@media all and (orientation:portrait)
{
   /* On a tall screen, it's a grid with 2 rows,
      and the toolbar can scroll right. */
   #main
   {
       display: grid;
       grid-template-rows: 5em 1fr;
   }
   #toolbar
   {
       overflow-x: auto;
       overflow-y: hidden;
       white-space: nowrap;
   }
}

That replaces an awful lot of code in my first attempt, so I'm reasonably happy. If anyone has suggestions about how to make "100%" really mean 100% of the real device width and height, let me know. If I do some JavaScript I can make Mobile Firefox fit to the real screen size, but Mobile Chrome (and, I assume, Mobile Safari) lie to me about the screen size when zoomed in.

Originally posted at 2017-09-20 22:42:11+00:00. Automatically generated from the original post : apologies for the errors introduced.

original post

-- Response ended

-- Page fetched on Mon May 27 02:22:35 2024