diff --git a/public/css/main/sidebar.css b/public/css/main/sidebar.css index 879c909..5283a78 100644 --- a/public/css/main/sidebar.css +++ b/public/css/main/sidebar.css @@ -204,6 +204,20 @@ margin: auto; } +#no_image{ + text-align: center; + font-size: 24px; + font-weight: bold; + font-style: normal; + font-stretch: normal; + line-height: normal; + letter-spacing: normal; + color: black; + margin-top: 60px; + margin-bottom: 6px; + max-width: 85%; +} + #sidebar-image-credit { position: absolute; bottom: 0; @@ -269,4 +283,4 @@ span#sidebar-heritage-number { } #sidebar-heritage-description-container.active { display: inline-block; -} \ No newline at end of file +} diff --git a/public/index.html b/public/index.html index 485eac9..959393f 100644 --- a/public/index.html +++ b/public/index.html @@ -110,6 +110,7 @@ <h5>Nearest address: <span id="sidebar-vacant-address"></h5> </div> </div> <div id="sidebar-tree"> + <span id="no_image">No photos available</span> <div id="sidebar-image" class="shadow hidden sidebar-image"> <div id="leftButton" class="sliderButton"><button onclick="lastSlideImage()"><</button></div> <div id="rightButton" class="sliderButton"><button onclick="nextSlideImage()">></button></div> diff --git a/public/js/Sidebar.js b/public/js/Sidebar.js index 158cb98..eb1dd85 100644 --- a/public/js/Sidebar.js +++ b/public/js/Sidebar.js @@ -17,6 +17,7 @@ var initialY = null; this.treeContainer = document.getElementById('sidebar-tree'); this.errorScreen = document.getElementById('sidebar-error'); this.image = document.getElementById('sidebar-image'); + this.no_image = document.getElementById('no_image'); this.imageCreditLink = document.getElementById('sidebar-image-credit-link'); this.commonName = document.getElementById('sidebar-common-name'); this.botanicalName = document.getElementById('sidebar-botanical-name'); @@ -41,8 +42,8 @@ var initialY = null; this.detailsButton = document.getElementById('sidebar-details-button'); //Heritage Trees this.heritageContainer = document.getElementById('sidebar-heritage-container'); - this.heritageTreeNumber = document.getElementById('sidebar-heritage-number'); - this.heritageTreeNumber = document.getElementById('sidebar-heritage-number'); + this.heritageTreeNumber = document.getElementById('sidebar-heritage-number'); + this.heritageTreeNumber = document.getElementById('sidebar-heritage-number'); this.heritageYearInscribed = document.getElementById('sidebar-heritage-year-inscribed'); this.heritageDescriptionContainer = document.getElementById('sidebar-heritage-description-container'); this.heritageDescription = document.getElementById('sidebar-heritage-description'); @@ -130,12 +131,14 @@ var initialY = null; this.image.style.backgroundImage = 'url(' + tree.images[1].url + ')'; this.image.style.backgroundSize = 'cover'; this.image.classList.remove('hidden'); + this.no_image.classList.add('hidden'); this.imageCreditLink.href = tree.images[1].author.url; images = tree.images; } else { this.image.style.backgroundImage = ''; this.image.classList.add('hidden'); + this.no_image.classList.remove('hidden'); } if (tree.heritage === true) { this.heritageContainer.classList.add('active');