From a41f422700b875657c012bc34acf6d165930f29b Mon Sep 17 00:00:00 2001
From: Kevin Dungs <kevin@dun.gs>
Date: Thu, 7 Aug 2014 09:56:47 +0200
Subject: [PATCH] Small fixes and brushing up the UI.

---
 css/style.css | 19 -------------------
 index.html    | 18 ++++++++++++++----
 mobile.html   | 10 ++++++++--
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/css/style.css b/css/style.css
index c499e74..4eac57b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -28,25 +28,6 @@ h1 br {
    z-index: 1;
 }
 
-#ResearchHist {
-  margin: 20px;
-}
-
-.bar rect {
-  fill: steelblue;
-  shape-rendering: crispEdges;
-}
-
-.bar text {
-  fill: #fff;
-}
-
-.axis path, .axis line {
-  fill: none;
-  stroke: #000;
-  shape-rendering: crispEdges;
-}
-
 .scrollable {
   overflow: auto;
   padding-top: 50px;
diff --git a/index.html b/index.html
index ee95131..606b4db 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,12 @@
             <h4 class="modal-title">Mobile version</h4>
           </div>
           <div class="modal-body">
-            <p>You seem to be using a mobile device. The experience with this website might be very unpleasant for you. This is why we made a mobile version of Particle Clicker.</p>
+            <p>
+              You seem to be using a mobile device. The experience with this website might be very unpleasant for you. This is why we made a mobile version of Particle Clicker.
+            </p>
+            <p class="bg-warning">
+              This is an early release for you to play with. It's best played in landscape mode. If you find any bugs please report them on our <a href="https://github.com/particle-clicker/particle-clicker/issues"><i class="fa fa-github"></i> issue tracker</a>.
+            </p>
             <p class="small">Hint: If you use the "Save to home screen" function of your browser, you can even play the game in full screen mode.</p>
           </div>
           <div class="modal-footer">
@@ -176,9 +181,10 @@
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-            <h4 class="modal-title" id="achievements-label">Achievements <span class="badge">{{ ac.achievements.length }} / {{ ac.achievementsAll.length }}</span></h4>
+            <h4 class="modal-title" id="achievements-label">Achievements</h4>
           </div>
           <div class="modal-body">
+            <p class="text-center"><strong>Progress</strong> <span class="label label-info">{{ ac.achievements.length }} / {{ ac.achievementsAll.length }}</span></p>
             <ul class="list-group">
               <li class="list-group-item" ng-repeat="a in ac.achievements | reverse">
                 <span class="glyphicon {{ a.icon }}"></span>
@@ -202,9 +208,11 @@
             <h4 class="modal-title" id="myModalLabel">Particle Clicker</h4>
           </div>
           <div class="modal-body">
-            <h5>About</h5>
+            <h4>About</h4>
+            <p class="small">Version: 0.3 (mobile-beta)</p>
+            <p class="small bg-warning">This is a pre-release. If you encounter any bugs please report them using <a href="https://github.com/particle-clicker/particle-clicker/issues"><i class="fa fa-github"></i> GitHub issues</a>. This game runs best in landscape mode. Performance of the event display may rely heavily on your hardware.</p>
             <p>Particle Clicker is a game that was made during the <a href="https://webfest.web.cern.ch">CERN Webfest 2014</a>. The idea is borrowed from <a href="http://orteil.dashnet.org/cookieclicker/">Cookie Clicker</a>, an amazing and addictive cookie-themed game.</p>
-            <img class="pull-right" width="200" src="http://www.citizencyberscience.net/wiki/images/1/1b/Cernwebfest.png" alt="">
+            <img width="200" src="http://www.citizencyberscience.net/wiki/images/1/1b/Cernwebfest.png" alt="">
             <h5>Libraries</h5>
             <p>This game is realised using a few libraries. Those are</p>
             <ul>
@@ -224,6 +232,8 @@
               <li><a href="https://github.com/ntadej">Tadej Novak</a></li>
               <li><a href="https://github.com/zhangjiannan">Jiannan Zhang</a></li>
             </ul>
+            <h5>Source</h5>
+            <p>The source code of this game is freely available on <a href="https://github.com/particle-clicker/particle-clicker"><i class="fa fa-github"></i> GitHub</a> under the terms of an MIT license.</p>
           </div>
         </div>
       </div>
diff --git a/mobile.html b/mobile.html
index 7cc88f1..a662ac5 100644
--- a/mobile.html
+++ b/mobile.html
@@ -89,6 +89,7 @@
           </div>
           <!-- Achievements -->
           <div class="tab-pane" id="achievements" ng-controller="AchievementsController as ac">
+            <p class="text-center"><strong>Progress</strong> <span class="label label-info">{{ ac.achievements.length }} / {{ ac.achievementsAll.length }}</span></p>
             <ul class="list-group">
               <li class="list-group-item" ng-repeat="a in ac.achievements | reverse">
                 <span class="badge">{{ a.time }}</span>
@@ -105,9 +106,14 @@
           </div>
         <!-- About -->
           <div class="tab-pane" id="about">
+            <div class="btn-group pull-right">
+              <a class="btn btn-default" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcern.ch%2Fparticle-clicker&t=Particle%20Clicker" target="_blank" title="Share on Facebook"><i class="fa fa-facebook"></i></a>
+              <a class="btn btn-default" href="https://twitter.com/share?url=http%3A%2F%2Fcern.ch%2Fparticle-clicker&t=Particle%20Clicker&text=Particle%20Clicker%3A%20An%20addictive%20incremental%20game%20that%20was%20made%20during%20the%20CERN%20Webfest%202014.%20%23particleclicker" target="_blank" title="Share on Twitter"><i class="fa fa-twitter"></i></a>
+              <a class="btn btn-default" href="https://plus.google.com/share?url=http%3A%2F%2Fcern.ch%2Fparticle-clicker" target="_blank" title="Share on Google+"><i class="fa fa-google-plus"></i></a>
+            </div>
             <h4>Particle Clicker</h4>
-            <p class="small">Version: 0.2.2.1 (mobile-beta)</p>
-            <p class="small bg-warning">This is a pre-release. If you encounter any bugs please report them using <a href="https://github.com/particle-clicker/particle-clicker/issues"><i class="fa fa-github"></i> GitHub issues</a></p>
+            <p class="small">Version: 0.3 (mobile-beta)</p>
+            <p class="small bg-warning">This is a pre-release. If you encounter any bugs please report them using <a href="https://github.com/particle-clicker/particle-clicker/issues"><i class="fa fa-github"></i> GitHub issues</a>. This game runs best in landscape mode. Performance of the event display may rely heavily on your hardware.</p>
             <p>Particle Clicker is a game that was made during the <a href="https://webfest.web.cern.ch">CERN Webfest 2014</a>. The idea is borrowed from <a href="http://orteil.dashnet.org/cookieclicker/">Cookie Clicker</a>, an amazing and addictive cookie-themed game.</p>
             <img width="200" src="http://www.citizencyberscience.net/wiki/images/1/1b/Cernwebfest.png" alt="">
             <h5>Libraries</h5>