Use carousel for expert distributions

naamaarkin · Jun 19, 2023 · a7f5f61 · a7f5f61
1 parent e57f544
commit a7f5f61
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/grails-app/assets/javascripts/species.show.js b/grails-app/assets/javascripts/species.show.js
@@ -913,7 +913,7 @@ function prevDistribution() {
 
 function showDistribution() {
     $("#expertDistroDiv img").attr("src", distributions[distributionsIdx].url);
-    $("#dataResourceAreaName").text(distributions[distributionsIdx].name)
+    $("#dataResourceAreaName").text((distributionsIdx + 1) + ": " + distributions[distributionsIdx].name)
     if (distributions[distributionsIdx].dr) {
         var attr = $('<a>').attr('href', SHOW_CONF.collectoryUrl + '/public/show/' + distributions[distributionsIdx].dr).text(distributions[distributionsIdx].providerName)
         $("#expertDistroDiv #dataResource").html(attr);

diff --git a/grails-app/assets/stylesheets/atlas.css b/grails-app/assets/stylesheets/atlas.css
@@ -216,4 +216,23 @@ html, body {height:100%;}
 
 .margin-bottom-30 {
 	margin-bottom: 30px;
-}
+}
+
+/* expertDistro */
+.carousel-button {
+	height:316px;
+	font-size:30px;
+	color:gray;
+	background: #3a3a3a;
+	border:0;
+}
+
+.carousel-button:hover {
+	color:white;
+	/*background: #7a7a7a;*/
+}
+
+.carousel-button:disabled {
+	opacity: 0.0;
+}
+
diff --git a/grails-app/views/species/_overview.gsp b/grails-app/views/species/_overview.gsp
@@ -73,18 +73,28 @@
 
         <div class="col-md-6">
             <div id="expertDistroDiv" style="display:none;margin-bottom: 20px;">
-                <h3><g:message code="overview.map.occurrence.compile.mapa.attribution"/><span id="expertDistroCount"></span>
-                    <button id="expertDistroPrev" onclick="prevDistribution()" disabled> &lt; </button>
-                    <button id="expertDistroNext" onclick="nextDistribution()" disabled> &gt; </button>
-                </h3>
-                <img id="distroMapImage" src="${resource(dir: 'images', file: 'noImage.jpg')}" class="distroImg"
-                     style="width:316px;" alt="occurrence map" onerror="this.style.display = 'none'"/>
+                <h3><g:message code="overview.map.occurrence.compile.mapa.attribution"/><span id="expertDistroCount"></span></h3>
+
+                <div>
+                    <div style="background-color: #3a3a3a;text-align-last: center">
+
+                        <img id="distroMapImage" src="${resource(dir: 'images', file: 'noImage.jpg')}" class="distroImg"
+                             style="width:316px;" alt="occurrence map" onerror="this.style.display = 'none'"/>
 
+                        <button id="expertDistroPrev" onclick="prevDistribution()" disabled class="carousel-button" style="float:left;">
+                            <span> &lt; </span>
+                        </button>
+
+                        <button id="expertDistroNext" onclick="nextDistribution()" disabled class="carousel-button" style="float:right;">
+                            <span> &gt; </span>
+                        </button>
+                    </div>
+                    <p class="mapAttribution">
+                        <span id="dataResourceAreaName" style="font-weight: bold;font-style: italic;"></span>
+                        <g:message code="overview.map.occurrence.mapa.attribution.01"/>
+                        <span id="dataResource">[<g:message code="overview.map.occurrence.mapa.attribution.02"/>]</span></p>
+                </div>
 
-                <p class="mapAttribution">
-                    <span id="dataResourceAreaName" style="font-weight: bold;font-style: italic;"></span>
-                    <g:message code="overview.map.occurrence.mapa.attribution.01"/>
-                    <span id="dataResource">[<g:message code="overview.map.occurrence.mapa.attribution.02"/>]</span></p>
             </div>
 
             <div class="taxon-map">