More UI improvements

css/style.css

@@ -39,6 +39,11 @@ h1 br {
    z-index: 1;
 }
 
+#detector-info {
+  z-index: 10;
+  position: absolute;
+}
+
 .scrollable {
   overflow: auto;
 }
@@ -115,7 +120,6 @@ h1 br {
 #labname {
   border: 0px;
   padding: 0 4px;
-  font-size: 24px;
   margin-top: 20px;
   font-weight: 500;
   line-height: 1;
@@ -194,6 +198,14 @@ h1 br {
   .status {
     font-size: 18px;
   }
+
+  #labname {
+    font-size: 22px;
+  }
+
+  #detector-info {
+    top: 85px; right: 15px;
+  }
 }
 
 @media screen and (min-width: 992px) {
@@ -206,6 +218,10 @@ h1 br {
   .status {
     font-size: 20px;
   }
+
+  #labname {
+    font-size: 24px;
+  }
 }
 
 @media screen and (min-width: 1200px) {
@@ -242,4 +258,23 @@ h1 br {
   .status .col-xs-4 {
     min-width: 75px;
   }
+
+  #detector-info {
+    top: 15px; right: 15px;
+  }
+}
+
+/* Retina support */
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+    only screen and (min-resolution: 1.5dppx),
+    only screen and (min-resolution: 144dpi)
+{
+  .pc-icon {
+    background-image: url('../assets/pc32sw@2x.png');
+    background-size: 32px 32px;
+  }
+
+  .pc-icon:hover {
+    background-image: url('../assets/pc32@2x.png');
+  }
 }

index.html

@@ -89,7 +89,7 @@
                     <p ng-show="r.state.level > 0" class="small">Research yields <strong>{{ r.state.reputation | niceNumber }}</strong> reputation.</p>
                     <div class="btn-group">
                       <button class="btn btn-primary" ng-disabled="!rc.isAvailable(r)" ng-click="rc.doResearch(r)"><i class="fa fa-cogs"></i> <small>{{ r.state.cost | niceNumber }} data</small></button>
-                    <button class="btn btn-info {{ r.state.interesting ? 'blink' : '' }}" ng-show="r.state.level > 0" ng-click="rc.showInfo(r)"><i class="fa fa-exclamation"></i></button>
+                    <button class="btn btn-info {{ r.state.interesting ? 'blink' : '' }}" ng-show="r.state.level > 0" ng-click="rc.showInfo(r)"><i class="fa {{ r.state.interesting ? 'fa-exclamation' : 'fa-info' }}"></i></button>
                   </div>
                   </div>
                 </li>
@@ -102,7 +102,6 @@
       <div id="column-lab" class="col-xs-6 col-md-5 col-md-5s col-lg-6 col-no-padding-xs" ng-controller="LabController as lc">
         <input class="hidden-xs" id="labname" value="{{ lc.lab.state.name }}" ng-model="lc.lab.state.name" ng-cloak>
         <hr class="hidden-xs">
-        <button class="pull-right btn btn-info" ng-click="lc.showDetectorInfo()"><i class="fa fa-exclamation"></i></button>
         <div id="detector-holder">
           <div id="detector" ng-controller="DetectorController as dc">
             <canvas id="detector-core" width="400" height="400">
@@ -113,6 +112,7 @@
             </canvas>
           </div>
         </div>
+        <button id="detector-info" class="btn btn-info" ng-click="lc.showDetectorInfo()"><i class="fa fa-info"></i></button>
         <div class="row status" ng-cloak>
           <div class="col-xs-4 text-center col-no-padding-xs">
             <strong>Data</strong><br>