UI improvements

css/style.css

@@ -142,6 +142,10 @@ h1 br {
   margin-bottom: 0;
 }
 
+.media-list-no-margin {
+  margin-top: -15px;
+}
+
 .col-no-padding {
   padding-right: 0;
   padding-left: 0;

index.html

@@ -52,7 +52,6 @@
                 <li><a href="#" ng-click="restart()"><i class="fa fa-refresh"></i> Restart</a></li>
               </ul>
             </li>
-            <li><a target="_blank" href="http://home.web.cern.ch/about/updates/2014/12/take-part-cern-60-public-computing-challenge"><i class="fa fa-arrow-right"></i> Join the CERN 60 computing challenge!</a></li>
             <!--<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-users"></i> About</a></li>-->
           </ul>
           <ul class="nav navbar-nav navbar-right">
@@ -166,10 +165,11 @@
           </div>
           <div class="panel-body scrollable large" id="upgradesLarge">
             <div id="upgradesContent" ng-controller="UpgradesController as uc">
-              <ul class="media-list" ng-cloak>
+              <ul class="media-list media-list-no-margin" ng-cloak>
+                <li class="media" ng-show="false"></li>
                 <li class="media" ng-repeat="u in uc.upgrades" ng-show="uc.isVisible(u)">
                   <div class="media-body">
-                    <h4 class="media-heading">{{ u.name }} <i class="fa {{ u.icon }} media-object"></i></h4>
+                    <h4 class="media-heading"><i class="fa {{ u.icon }} media-object"></i> {{ u.name }}</h4>
                     <p>{{ u.description }}</p>
                     <p class="small">{{ u.effect }}</p>
                     <button class="btn btn-primary" ng-disabled="!uc.isAvailable(u)" ng-click="uc.upgrade(u)"><i class="fa fa-money"></i> <small>{{ u.cost | currency }}</small></button>
@@ -273,7 +273,6 @@
             <p class="small">Version: 0.9</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>
             <p>This game is realised using a few libraries. Those are</p>
             <ul>

js/ui.js

@@ -144,7 +144,7 @@ var UI = (function () {
     if (version != Helpers.version) {
       var alert = '<div id="outofdate" class="alert alert-info alert-dismissible" role="alert">';
       alert += '<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>';
-      alert += '<span class="glyphicon glyphicon-info-sign alert-glyph"></span> <span class="alert-text">Your saved state is out of date. <a href="#"><strong>Restart</strong></a> to use latest version of the game.</span>';
+      alert += '<i class="fa fa-info-circle alert-glyph"></i> <span class="alert-text">Your saved state is out of date. <a href="#"><strong>Restart</strong></a> to use latest version of the game.</span>';
       alert += '</div>';
       alert = $(alert);
       alert.find('a').click(function ()
@@ -162,7 +162,7 @@ var UI = (function () {
   if (typeof $.cookie('cookielaw') === 'undefined') {
     var alert = '<div id="cookielaw" class="alert alert-info" role="alert">';
     alert += '<button type="button" class="btn btn-primary">OK</button>';
-    alert += '<span class="glyphicon glyphicon-info-sign alert-glyph"></span> <span class="alert-text">Particle Clicker uses local storage to store your current progress.</span>';
+    alert += '<i class="fa fa-info-circle alert-glyph"></i> <span class="alert-text">Particle Clicker uses local storage to store your current progress.</span>';
     alert += '</div>';
     alert = $(alert);
     alert.find('button').click(function ()
@@ -174,6 +174,21 @@ var UI = (function () {
     $('#messages-container').append(alert);
   }
 
+  if (typeof $.cookie('cern60') === 'undefined') {
+    var alert = '<div id="cern60" class="alert alert-info" role="alert">';
+    alert += '<button type="button" class="btn btn-primary">Close</button>';
+    alert += '<i class="fa fa-area-chart alert-glyph"></i> <span class="alert-text"><a class="alert-link" href="http://home.web.cern.ch/about/updates/2014/12/take-part-cern-60-public-computing-challenge" target="_blank">Join the CERN 60 computing challenge!</a></span>';
+    alert += '</div>';
+    alert = $(alert);
+    alert.find('button').click(function ()
+    {
+      $.cookie('cern60', 'closed', { expires: 365 });
+      $('#cern60').slideUp(300, function() { $('#cern60').remove(); });
+    })
+
+    $('#messages-container').append(alert);
+  }
+
   return {
     showAchievement: showAchievement,
     showModal: showModal,