1.1 --- a/minesweeper/src/main/webapp/pages/index.html Mon Feb 10 16:50:08 2014 +0100
1.2 +++ b/minesweeper/src/main/webapp/pages/index.html Mon Feb 10 17:22:14 2014 +0100
1.3 @@ -33,25 +33,34 @@
1.4 <link href="mines.css" rel="stylesheet">
1.5 <!-- Target tablets -->
1.6 <link href="mines-tablet-large.css"
1.7 - media="(min-width:600px) and (max-width:780px), (min-height:620px) and (max-height:830px)"
1.8 + media="(min-width:640px) and (max-width:780px), (min-height:660px) and (max-height:830px)"
1.9 rel="stylesheet" />
1.10 <link href="mines-tablet-small.css"
1.11 - media="(min-width:500px) and (max-width:600px), (min-height:520px) and (max-height:640px)"
1.12 + media="(min-width:510px) and (max-width:640px), (min-height:520px) and (max-height:660px)"
1.13 rel="stylesheet" />
1.14 <!-- Target phones -->
1.15 <link href="mines-phone-large.css"
1.16 - media="(min-width:400px) and (max-width:500px), (min-height:400px) and (max-height:520px)"
1.17 + media="(min-width:410px) and (max-width:510px), (min-height:400px) and (max-height:520px)"
1.18 rel="stylesheet" />
1.19 <link href="mines-phone-small.css"
1.20 - media="(max-width:400px), (max-height:400px)"
1.21 + media="(min-width:250px) and (max-width:410px), (min-height:250px) and (max-height:400px)"
1.22 + rel="stylesheet" />
1.23 + <link href="mines-phone-smaller.css"
1.24 + media="(max-width:250px), (max-height:250px)"
1.25 rel="stylesheet" />
1.26 </head>
1.27 <body>
1.28 <div class="navbar">
1.29 <div class="navbar-inner">
1.30 <a id="apptitle" class="brand" href="#" data-bind="click: showHelp">Minesweeper</a>
1.31 - <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: false, click: normalGame">New Game!</button>
1.32 - <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: !fieldShowing(), click: giveUp ">Show Mines!</button>
1.33 + <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: false, click: normalGame">
1.34 + <span>↻</span>
1.35 + <span class="hidden-phone">New Game!</span>
1.36 + </button>
1.37 + <button class="btn btn-default navbar-btn" disabled="true" data-bind="disable: !fieldShowing(), click: giveUp ">
1.38 + <span>✗</span>
1.39 + <span class="hidden-phone">Show Mines!</span>
1.40 + </button>
1.41 </div>
1.42 </div>
1.43
2.1 --- a/minesweeper/src/main/webapp/pages/mines-phone-small.css Mon Feb 10 16:50:08 2014 +0100
2.2 +++ b/minesweeper/src/main/webapp/pages/mines-phone-small.css Mon Feb 10 17:22:14 2014 +0100
2.3 @@ -23,9 +23,9 @@
2.4 */
2.5 table.field td {
2.6 padding: 4px;
2.7 - width: 24px;
2.8 - height: 24px;
2.9 - font-size: 1.6em;
2.10 + width: 20px;
2.11 + height: 20px;
2.12 + font-size: 1.5em;
2.13 }
2.14 h1 {
2.15 font-size: 12px;
3.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
3.2 +++ b/minesweeper/src/main/webapp/pages/mines-phone-smaller.css Mon Feb 10 17:22:14 2014 +0100
3.3 @@ -0,0 +1,54 @@
3.4 +/**
3.5 + * The MIT License (MIT)
3.6 + *
3.7 + * Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
3.8 + *
3.9 + * Permission is hereby granted, free of charge, to any person obtaining a copy
3.10 + * of this software and associated documentation files (the "Software"), to deal
3.11 + * in the Software without restriction, including without limitation the rights
3.12 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
3.13 + * copies of the Software, and to permit persons to whom the Software is
3.14 + * furnished to do so, subject to the following conditions:
3.15 + *
3.16 + * The above copyright notice and this permission notice shall be included in
3.17 + * all copies or substantial portions of the Software.
3.18 + *
3.19 + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
3.20 + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
3.21 + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
3.22 + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
3.23 + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
3.24 + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
3.25 + * THE SOFTWARE.
3.26 + */
3.27 +table.field td {
3.28 + padding: 2px;
3.29 + width: 10px;
3.30 + height: 10px;
3.31 + line-height: 10px;
3.32 + font-size: 0.8em;
3.33 +}
3.34 +h1 {
3.35 + font-size: 8px;
3.36 +}
3.37 +.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
3.38 + float: none;
3.39 + }
3.40 +.col-md-6 {
3.41 + width: 100%;
3.42 +}
3.43 +.col-md-5 {
3.44 + width: 100%;
3.45 +}
3.46 +.col-md-4 {
3.47 + width: 100%;
3.48 +}
3.49 +.col-md-3 {
3.50 + width: 100%;
3.51 +}
3.52 +.col-md-2 {
3.53 + width: 100%;
3.54 +}
3.55 +.col-md-1 {
3.56 + width: 100%;
3.57 +}