UI tweaks; cleaning up some css scars.

Author: rcreasey

app/index.html

@@ -40,21 +40,7 @@
         <div id="hud" class="main-content"></div>
         <div id="system-map" class="main-content active"></div>
         <div id="hostiles" class="main-content">
-          <table id="hostiles-list" class="hostile">
-          <thead>
-            <tr>
-              <th class="ship-icon">&#160;</th>
-              <th class="name">Name</th>
-              <th class="alliance">Alliance</th>
-              <th class="ship-type">Ship Type</th>
-              <th class="system">System</th>
-              <th class="reported-at">Time</th>
-              <th class="actions">&#160;</th>
-            </tr>
-          </thead>
-          <tbody>
-          </tbody>
-          </table>
+          <div class="list"></div>
         </div>
         <div id="dicks" class="main-content">
           <table id="hostiles-list" class="hostile">
@@ -235,30 +221,32 @@ <h3>{{hostiles}} hostile{{#if hostiles}}s{{/if}} in {{name}}</h3>
     </script>
 
     <script type="text/x-handlebars-template" id="hostileTemplate">
-      <tr id="hostile-{{id}}">
-        <td class="ship-icon">{{{shipIcon}}}</td>
-        <td class="name"><a href="javascript:CCPEVE.showInfo(1377, {{id}});">{{name}}</a></td>
-        <td class="alliance">
-          {{#if allianceName}}
-            <a href="javascript:CCPEVE.showInfo(16159, {{allianceID}});">&lt;{{allianceName}}&gt;</a>
-          {{else}}
-            No Alliance
-          {{/if}}
-        </td>
-        <td class="ship-type" onClick="UIPanels.updateHostileDetailsPanel('{{id}}');">
-          {{#if shipTypeId}}
-            <i class="fa fa-eye"></i> <a href="javascript:CCPEVE.showInfo({{shipTypeId}});">{{shipType}}</a>
-          {{else}}
-            <i class="fa fa-eye-slash"></i> Non Visual
-          {{/if}}
-        </td>
-        <td class="system {{#if isDocked}}docked{{/if}}"><a href="javascript:CCPEVE.showInfo(5,{{systemId}});">{{systemName}}</a></td>
-        <td class="reported-at"><a title="Reported by {{reporterName}}">{{reported_at}}</a></td>
-        <td class="actions">
-          <a title="Set Destination" onClick="CCPEVE.setDestination({{systemId}})"><i class="fa fa-map-marker" title="Set Destination"></i></a>
-          {{killboard_link name id}}
-        </td>
-      </tr>
+      <table id="hostiles-list" class="hostile">
+        <tr id="hostile-{{id}}">
+          <td class="ship-icon">{{{shipIcon}}}</td>
+          <td class="name"><a href="javascript:CCPEVE.showInfo(1377, {{id}});">{{name}}</a></td>
+          <td class="alliance">
+            {{#if allianceName}}
+              <a href="javascript:CCPEVE.showInfo(16159, {{allianceID}});">&lt;{{allianceName}}&gt;</a>
+            {{else}}
+              No Alliance
+            {{/if}}
+          </td>
+          <td class="ship-type" onClick="UIPanels.updateHostileDetailsPanel('{{id}}');">
+            {{#if shipTypeId}}
+              <i class="fa fa-eye"></i> <a href="javascript:CCPEVE.showInfo({{shipTypeId}});">{{shipType}}</a>
+            {{else}}
+              <i class="fa fa-eye-slash"></i> Non Visual
+            {{/if}}
+          </td>
+          <td class="system {{#if isDocked}}docked{{/if}}"><a href="javascript:CCPEVE.showInfo(5,{{systemId}});">{{systemName}}</a></td>
+          <td class="reported-at"><a title="Reported by {{reporterName}}">{{reported_at}}</a></td>
+          <td class="actions">
+            <a title="Set Destination" onClick="CCPEVE.setDestination({{systemId}})"><i class="fa fa-map-marker" title="Set Destination"></i></a>
+            {{killboard_link name id}}
+          </td>
+        </tr>
+      </table>
     </script>
 
     <!-- build:js /js/lib.js -->

app/js/Data.js

@@ -68,7 +68,7 @@ var Data = {
 		hud: $('#hud'),
 		map: $('#system-map'),
 		hostiles: $('#hostiles'),
-		hostiles_list: $('#hostiles > table > tbody'),
+		hostiles_list: $('#hostiles > .list'),
 		members: $('#members'),
 		events: $('#events'),
 		scans: $('#scans')

app/js/UI.js

@@ -39,11 +39,11 @@ var UI = {
 		Data.ui.statusClear.on('click', $.proxy(UI.submitStatusClear, null));
 		Data.ui.statusHostile.on('click', $.proxy(UIPanels.showStatusPanel, null, false));
 
-		Data.ui.hostiles_list.slimScroll({
-    	height: 'auto',
-    	color: '#ffcc2a',
-    	alwaysVisible: true
-		});
+		// Data.ui.hostiles_list.slimScroll({
+    // 	height: 'auto',
+    // 	color: '#ffcc2a',
+    // 	alwaysVisible: true
+		// });
 	},
 
 	submitStatusClear: function() {

app/styles/main.css

@@ -40,17 +40,20 @@ div#page, div#content-wrapper { position: relative; height: 100%; width: 100%; b
 .sub-bar.left { left: 0 }
 .sub-bar.right { right: 0 }
 
-#top-bar, #top-menu, #bottom-bar, #bottom-menu, .sub-bar.left, .sub-bar.right, .member td {
+#top-bar, #top-menu, #bottom-bar, #bottom-menu, .sub-bar.left, .sub-bar.right, .member td, .hostile td {
 	background-color:#222;
 	border-bottom: 0.2rem solid #181818;
 	height: 2.4rem
 }
 #top-bar, #top-bar .sub-bar.right { background-color: #111; }
-#bottom-bar .sub-bar.left { background-color: transparent; }
+#bottom-bar .sub-bar.left { background-color: transparent; border-top: 0; }
 
-#top-bar, #top-menu, #bottom-bar, #bottom-menu, .sub-bar.left, .sub-bar.right{
+#top-bar, #top-menu, #bottom-bar, #bottom-menu, .sub-bar.left, .sub-bar.right {
+	border-top: 0.16rem solid #666;
+	border-bottom: 0.16rem solid #333;
+	background-color: #282828;
+	position: fixed;
 	z-index: 6;
-	position: fixed
 }
 .sub-bar.left { padding-left: 0.5rem; z-index: 7 !important; }
 
@@ -186,7 +189,7 @@ div#page, div#content-wrapper { position: relative; height: 100%; width: 100%; b
 	padding: 0.3rem 1rem 0rem 1rem;
 	cursor: pointer;
 	background-color: #222;
-	border-top: 0.16rem solid #666;
+	border-top: 0.16rem solid transparent;
 	border-left: 0.16rem solid #171717;
 	border-right: 0.16rem solid #171717;
 }
@@ -231,7 +234,7 @@ input#info-string-fleet-key {
  */
 
 #hud {
-	margin-top: 2px;
+	margin-top: 3px;
 }
 
 #hud div {