feat(observation): Improve display of observation photos

observations/templates/observations/detail.html

@@ -47,15 +47,19 @@
 				</div>
 			<p class="label">{% trans "Observation data" %}</p>
 			<p id="observationData"></p>
-			<div id="illustrationInfo">
-				<p class="label">{% trans "Illustrations" %}</p>
-				<div id="observationIllustration"></div>
-			</div>
 		</div>
 		<div class="col-md-7">
 			<div id="observationViewMap" class="map" style="height: 400px;"></div>
 		</div>
 	</div>
+	<div id="illustrationInfo" class="row">
+		<div class="col-md-12">
+			<div >
+				<p class="label">{% trans "Illustrations" %}</p>
+				<div id="observationIllustration"></div>
+			</div>
+		</div>
+	</div>
 	<div class="row">
 		<div class="col-md-12">
 			<p style="margin-top: 15px">
@@ -123,7 +127,7 @@
 				for(let i=0;i<observation.observationIllustrationSet.length;i++)
 				{
 					var illustration = observation.observationIllustrationSet[i]; 
-					document.getElementById("observationIllustration").innerHTML += "<img src='" + settings.vipslogicProtocol + "://" + settings.vipslogicServerName + "/static/images/observations/" + observation.organismId + "/" + illustration.observationIllustrationPK.fileName + "' class='img-responsive'/>";
+					document.getElementById("observationIllustration").innerHTML += "<img style='margin: 5px 0px;' src='" + settings.vipslogicProtocol + "://" + settings.vipslogicServerName + "/static/images/observations/" + observation.organismId + "/" + illustration.observationIllustrationPK.fileName + "' class='img-responsive'/>";
 				}
 		  	} else {
 				document.getElementById("illustrationInfo").hidden = true;