The "Show mines" button is sort of useless - hide it on phones. Textual description of buttons is however important. Make it visible, just use smaller font.
1.1 --- a/minesweeper/src/main/webapp/pages/index.html Tue Aug 26 15:22:31 2014 +0200
1.2 +++ b/minesweeper/src/main/webapp/pages/index.html Tue Aug 26 15:38:41 2014 +0200
1.3 @@ -58,15 +58,15 @@
1.4 </a>
1.5 <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: false, click: normalGame">
1.6 <span>↻</span>
1.7 - <span class="hidden-phone">New Game!</span>
1.8 + <span class="info-text">New!</span>
1.9 </button>
1.10 - <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: !gameInProgress(), click: giveUp ">
1.11 + <button class="hidden-phone btn btn-default navbar-btn" disabled="true" data-bind="disable: !gameInProgress(), click: giveUp ">
1.12 <span>✗</span>
1.13 - <span class="hidden-phone">Show Mines!</span>
1.14 + <span>Show Mines!</span>
1.15 </button>
1.16 <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: !gameInProgress(), click: markMine">
1.17 <span>⚠</span>
1.18 - <span class="hidden-phone">Mark Mine!</span>
1.19 + <span class="info-text">Mark Mine!</span>
1.20 </button>
1.21 </div>
1.22 </div>
2.1 --- a/minesweeper/src/main/webapp/pages/mines-phone-small.css Tue Aug 26 15:22:31 2014 +0200
2.2 +++ b/minesweeper/src/main/webapp/pages/mines-phone-small.css Tue Aug 26 15:38:41 2014 +0200
2.3 @@ -51,3 +51,6 @@
2.4 .col-md-1 {
2.5 width: 100%;
2.6 }
2.7 +.info-text {
2.8 + font-size: xx-small;
2.9 +}
3.1 --- a/minesweeper/src/main/webapp/pages/mines-phone-smaller.css Tue Aug 26 15:22:31 2014 +0200
3.2 +++ b/minesweeper/src/main/webapp/pages/mines-phone-smaller.css Tue Aug 26 15:38:41 2014 +0200
3.3 @@ -52,3 +52,6 @@
3.4 .col-md-1 {
3.5 width: 100%;
3.6 }
3.7 +.info-text {
3.8 + font-size: xx-small;
3.9 +}