style: Darker labels, adjust column width etc

VIPSWeb/static/css/vipsweb.css

@@ -794,10 +794,10 @@ td.dateCell {
 }
 
 #observationTimeSeriesDetails .label, #observationDetails .label  {
-	color: #C9C9C9;
-	font-size: 1.1em;
+	color: #969696;
+	font-size: 1.2em;
 	padding: 0;
-	font-weight: normal;
+	font-weight: lighter;
 }
 
 #observationData table {
@@ -806,7 +806,7 @@ td.dateCell {
 
 #observationData td {
 	border: 1px solid #C9C9C9;
-	padding: 2px;
+	padding: 2px 10px;
 }
 
 table.messageTable tr, table.messageTable td

observations/static/observations/js/observationList.js

@@ -361,7 +361,7 @@ var renderObservationTable = function(data)
         
         tbodyHTML.push("<td align='center'><a href='/observations/" + obs.observationId + "' target='new'><i class='fa fa-info-circle' aria-hidden='true'/></a></td>");
         if(Object.keys(measuredVal).length != 0){
-            tbodyHTML.push("<td align='center'><a tabindex='0' role='button' data-toggle='popover' data-placement='left' data-trigger='focus' data-html='true' data-content='" + printVal.join("<br/>").replace("'","&apos;") + "' ><i class='fa fa-balance-scale' aria-hidden='true'/></a></td>")
+            tbodyHTML.push("<td><a tabindex='0' role='button' data-toggle='popover' data-placement='left' data-trigger='focus' data-html='true' data-content='" + printVal.join("<br/>").replace("'","&apos;") + "' ><i class='fa fa-balance-scale' aria-hidden='true'/></a></td>")
         } else{
             tbodyHTML.push("<td></td>")
         }

observations/templates/observations/detail.html

@@ -26,7 +26,7 @@
 {% block content %}
 <div id="observationDetails" class="singleBlockContainer">
 	<div class="row">
-		<div class="col-md-5">
+		<div class="col-md-6">
 			<p class="label">{% trans "Observation" %} </p>
 			<h1 style="margin-top: 4px;margin-bottom: 30px"><span id="observationHeading"></span></h1>
 			<p class="label" id="observationTextLabel"></p>
@@ -48,7 +48,7 @@
 			<p class="label">{% trans "Observation data" %}</p>
 			<p id="observationData"></p>
 		</div>
-		<div class="col-md-7">
+		<div class="col-md-6">
 			<div id="observationViewMap" class="map" style="height: 400px;"></div>
 		</div>
 	</div>
@@ -95,7 +95,7 @@
 			if(observation.observationTimeSeries) {
 				console.info("observation.observationTimeSeries", observation.observationTimeSeries)
 				document.getElementById("timeSeriesInfo").hidden = false;
-				document.getElementById("timeSeries").innerHTML = "<a href='/observations/timeseries/" + observation.observationTimeSeriesId + "'>" + observation.observationTimeSeries.name + "</a>";
+				document.getElementById("timeSeries").innerHTML = "<a href='/observations/timeseries/" + observation.observationTimeSeriesId + "'><span class='timeseries-label'/>" + observation.observationTimeSeries.label + "</a>";
 			} else {
 				document.getElementById("timeSeriesInfo").hidden = true;
 			}
@@ -111,7 +111,7 @@
 			  	var observationData = JSON.parse(observation.observationData);
 			  	for(var fieldName in observationData)
 			  	{
-			  		observationDataHTML += "<tr><td width='180'>" + dataVars[fieldName] + "</td><td width='50' align='center'>" + observationData[fieldName] + "</td></tr>";
+			  		observationDataHTML += "<tr><td width='180'>" + dataVars[fieldName] + "</td><td>" + observationData[fieldName] + "</td></tr>";
 			  	}
 			  	observationDataHTML += "</table>";
 			  	document.getElementById("observationData").innerHTML = observationDataHTML;

observations/templates/observations/index.html

@@ -68,9 +68,9 @@
                             <th>{% trans "Organism" %}</th>
                             <th>{% trans "Crop" %}</th>
                             <th>{% trans "Heading" %}</th>
-                            <th>{% trans "Time series" %}</th>
-                            <th>{% trans "Details" %}</th>
-                            <th></th>
+                            <th width='50'>{% trans "Time series" %}</th>
+                            <th width='50'>{% trans "Details" %}</th>
+                            <th width='30'></th>
                     </thead>
                     <tbody id="observationTableBody">
                     </tbody>

observations/templates/observations/timeseries.html

@@ -24,7 +24,7 @@
 {% block content %}
     <div id="observationTimeSeriesDetails" class="singleBlockContainer">
         <div class="row">
-            <div class="col-md-5">
+            <div class="col-md-6">
                 <p class="label">{% trans "Time series" %} </p>
                 <h1 style="margin-top: 4px;margin-bottom: 30px"><span id="timeSeriesName"></span></h1>
                 <p class="label" id="timeSeriesDescriptionLabel"></p>
@@ -38,7 +38,7 @@
                 <p class="label">{% trans "Number of observations" %}</p>
                 <p id="observationCount"></p>
             </div>
-            <div class="col-md-7">
+            <div class="col-md-6">
                 <div id="observationViewMap" class="map" style="height: 400px;"></div>
             </div>
         </div>