Add a refresh button

[clach04]

Some mobile devices (iOS Safari and Android built in Cyanogenmod built in browser to Android 2.3) occasionally need a manual refresh. Sometimes the built in browser refresh button on mobile platforms is awkward to get to.

Previously there was (ugly) refresh text. It would be great if there was a button like the user voice button that appears bottom right (fixed position, even when scrolling).

This diff adds a button based on the technique described at http://alexpeattie.com/projects/feedback_button/ - NOTE the position looks fine with Firefox but the built in browser for Cyanogenmod Android 2.3 does not display this "button" well.

diff --git a/cards/static/main.css b/cards/static/main.css
index 58bc5f5..9ddb017 100644
--- a/cards/static/main.css
+++ b/cards/static/main.css
@@ -52,3 +52,31 @@ body {
     }
 }

+#refresh {
+  height: 104px;
+  width: 104px;
+  position: fixed;
+  top: 95%;
+  right: 5%;
+  z-index: 999;
+}
+
+#refresh a {
+  display: block;
+  background: #f00;
+  height: 40px;
+  width: 100px;
+  padding: 8px 16px;
+  color: #fff;
+  font-family: Arial, sans-serif;
+  font-size: 17px;
+  font-weight: bold;
+  text-decoration: none;
+  border-bottom: solid 1px #333;
+  border-left: solid 1px #333;
+  border-right: solid 1px #fff;
+}
+
+#refresh a:hover {
+  background: #06c;
+}
diff --git a/cards/templates/game_view.html b/cards/templates/game_view.html
index 234602b..bdc0cdb 100644
--- a/cards/templates/game_view.html
+++ b/cards/templates/game_view.html
@@ -118,6 +118,9 @@
 </div>

 <div class="data" data-game_state="{{ game.game_state }}" data-round="{{ game.gamedata.round }}"></div>
+<div id="refresh">
+  <a href="">Refresh</a>
+</div>
 {% endblock %}

 {% block scripts %}