zakarya/puzzles
1
0
Fork 0
mirror of git://git.tartarus.org/simon/puzzles.git synced 2025-04-21 08:01:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Hide some words in top-level menu items on small viewports

Browse Source 
In their normal state, most of the top-level menu items are a verb and
an object, like "Undo move".  This is admirably clear, but on a small
screen the menu can take a lot of space.  In each case the verb alone
is sufficient to know what the button does, so use a media query to
suppress the noun is the viewport is very narrow.  "Very narrow" here
is roughly where the menus would overflow onto four lines in my
browser.
This commit is contained in:
Ben Harris
2022-10-07 11:15:32 +01:00
committed by Simon Tatham
parent e98ede7a72
commit 85d2a7da62
1 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
html/jspage.pl
View File

@ -129,6 +129,14 @@ EOF
background: inherit; background: inherit;
} }
\@media (max-width:18em) {
/* Suppress some words in top-level menu items when viewport
* is very small */
.verbiage {
display: none;
}
}
#gamemenu ul ul { #gamemenu ul ul {
/* Second-level menus and below are not displayed by default */ /* Second-level menus and below are not displayed by default */
display: none; display: none;
@ -211,11 +219,11 @@ ${unfinishedpara}
></ul></li ></ul></li
><li>Type...<ul id="gametype"></ul></li ><li>Type...<ul id="gametype"></ul></li
><li class="separator"></li ><li class="separator"></li
><li id="new" class="afterseparator">New game</li ><li id="new" class="afterseparator">New<span class="verbiage"> game</span></li
><li id="restart">Restart game</li ><li id="restart">Restart<span class="verbiage"> game</span></li
><li id="undo">Undo move</li ><li id="undo">Undo<span class="verbiage"> move</span></li
><li id="redo">Redo move</li ><li id="redo">Redo<span class="verbiage"> move</span></li
><li id="solve">Solve game</li ><li id="solve">Solve<span class="verbiage"> game</span></li
></ul></div> ></ul></div>
<div align=center> <div align=center>
<div id="resizable" style="position:relative; left:0; top:0"> <div id="resizable" style="position:relative; left:0; top:0">