From 394c8b8830bb691fe3f9ea4f19da7b9ccd3f801d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Tue, 23 Jun 2020 22:01:14 +0200 Subject: [PATCH 1/2] MAPG-169 make static map background instead of img --- public/static/css/maps.css | 10 ++++------ views/maps.php | 7 ++----- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/public/static/css/maps.css b/public/static/css/maps.css index 7d51384..c29284f 100644 --- a/public/static/css/maps.css +++ b/public/static/css/maps.css @@ -29,12 +29,10 @@ div.mapItem>div.title>p.title { div.mapItem>div.imgContainer { width: 100%; padding-top: 50%; - background: #cccccc; -} - -div.mapItem>div.imgContainer>img { - width: 100%; - margin-top: -50% + background-color: #cccccc; + background-position: center; + background-repeat: no-repeat; + background-size: cover; } div.mapItem>div.inner { diff --git a/views/maps.php b/views/maps.php index 842d428..5c143fb 100644 --- a/views/maps.php +++ b/views/maps.php @@ -67,16 +67,13 @@ $cssFiles = [ for (var i = 0; i < imgContainers.length; i++) { var imgContainer = imgContainers[i]; - var img = document.createElement('img'); - - img.src = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' + + var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' + 'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' + 'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' + imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng + '&key=' + GOOGLE_MAPS_JS_API_KEY; - img.alt = 'Map area'; - imgContainer.appendChild(img); + imgContainer.style.backgroundImage = 'url("' + imgSrc + '")'; } })(); From 19aa4098e576bf89cf43ac052c2fc71f1e566a88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Tue, 23 Jun 2020 23:32:50 +0200 Subject: [PATCH 2/2] MAPG-169 set mapContainer's inners' height dynamically to be identical in a row --- public/static/css/maps.css | 1 + views/maps.php | 82 +++++++++++++++++++++++++++++++++----- 2 files changed, 73 insertions(+), 10 deletions(-) diff --git a/public/static/css/maps.css b/public/static/css/maps.css index c29284f..aeef091 100644 --- a/public/static/css/maps.css +++ b/public/static/css/maps.css @@ -38,6 +38,7 @@ div.mapItem>div.imgContainer { div.mapItem>div.inner { background-color: #eeeeee; padding: 10px 8px; + box-sizing: border-box; } div.mapItem>div.inner>div.info { diff --git a/views/maps.php b/views/maps.php index 5c143fb..3749e7d 100644 --- a/views/maps.php +++ b/views/maps.php @@ -63,18 +63,80 @@ $cssFiles = [ (function () { const GOOGLE_MAPS_JS_API_KEY = ''; - var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer'); - for (var i = 0; i < imgContainers.length; i++) { - var imgContainer = imgContainers[i]; + var Maps = { + innerDivs: null, - var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' + - 'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' + - 'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' + - imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng + - '&key=' + GOOGLE_MAPS_JS_API_KEY; + addStaticMaps: function () { + var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer'); + for (var i = 0; i < imgContainers.length; i++) { + var imgContainer = imgContainers[i]; - imgContainer.style.backgroundImage = 'url("' + imgSrc + '")'; - } + var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' + + 'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' + + 'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' + + imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng + + '&key=' + GOOGLE_MAPS_JS_API_KEY; + + imgContainer.style.backgroundImage = 'url("' + imgSrc + '")'; + } + }, + + initializeInnerDivs: function () { + Maps.innerDivs = document.getElementById('mapContainer').getElementsByClassName('inner'); + + for (var i = 0; i < Maps.innerDivs.length; i++) { + var inner = Maps.innerDivs[i]; + var boundingClientRect = inner.getBoundingClientRect(); + + inner.defaultHeight = boundingClientRect.height; + } + }, + + calculateInnerDivHeights: function () { + var currentY; + var rows = []; + for (var i = 0; i < Maps.innerDivs.length; i++) { + var inner = Maps.innerDivs[i]; + var boundingClientRect = inner.getBoundingClientRect(); + + if (currentY !== boundingClientRect.y) { + rows.push([]); + } + + rows[rows.length - 1].push(inner); + + currentY = boundingClientRect.y; + } + + for (var i = 0; i < rows.length; i++) { + var row = rows[i]; + + var maxHeight = 0; + for (var j = 0; j < row.length; j++) { + var inner = row[j]; + + if (inner.defaultHeight > maxHeight) { + maxHeight = inner.defaultHeight; + } + } + + for (var j = 0; j < row.length; j++) { + var inner = row[j]; + + inner.style.height = maxHeight + 'px'; + } + } + } + }; + + Maps.addStaticMaps(); + + Maps.initializeInnerDivs(); + Maps.calculateInnerDivHeights(); + + window.onresize = function () { + Maps.calculateInnerDivHeights(); + }; })();