esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

MAPG-174 create separate div for description and align description vertically middle

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-24 22:32:54 +02:00
parent 721b611cdb
commit 9f839d3f5d
2 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/static/css/maps.css
View File

@ -46,6 +46,12 @@ div.mapItem>div.inner>div.info {
grid-template-columns: auto auto; grid-template-columns: auto auto;
} }
div.mapItem>div.inner>div.description {
display: flex;
justify-content: center;
align-items: center;
}
div.mapItem>div.inner>div.info>p:nth-child(1) { div.mapItem>div.inner>div.info>p:nth-child(1) {
text-align: left; text-align: left;
} }

44
views/maps.php
View File

@ -30,7 +30,9 @@ $cssFiles = [
-->~ <?= $map['area'][0] ?> <?= $map['area'][1] ?><sup>2</sup> -->~ <?= $map['area'][0] ?> <?= $map['area'][1] ?><sup>2</sup>
</p> </p>
</div> </div>
<p class="small center marginTop"><?= $map['description'] ?></p> <div class="description marginTop">
<p class="small center"><?= $map['description'] ?></p>
</div>
</div> </div>
<?php if ($isAdmin): ?> <?php if ($isAdmin): ?>
<div class="buttonContainer"> <div class="buttonContainer">
@ -64,7 +66,7 @@ $cssFiles = [
const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>'; const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
var Maps = { var Maps = {
innerDivs: null, descriptionDivs: null,
addStaticMaps: function () { addStaticMaps: function () {
var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer'); var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer');
@ -81,29 +83,29 @@ $cssFiles = [
} }
}, },
initializeInnerDivs: function () { initializeDescriptionDivs: function () {
Maps.innerDivs = document.getElementById('mapContainer').getElementsByClassName('inner'); Maps.descriptionDivs = document.getElementById('mapContainer').getElementsByClassName('description');
for (var i = 0; i < Maps.innerDivs.length; i++) { for (var i = 0; i < Maps.descriptionDivs.length; i++) {
var inner = Maps.innerDivs[i]; var description = Maps.descriptionDivs[i];
var boundingClientRect = inner.getBoundingClientRect(); var boundingClientRect = description.getBoundingClientRect();
inner.defaultHeight = boundingClientRect.height; description.defaultHeight = boundingClientRect.height;
} }
}, },
calculateInnerDivHeights: function () { calculateDescriptionDivHeights: function () {
var currentY; var currentY;
var rows = []; var rows = [];
for (var i = 0; i < Maps.innerDivs.length; i++) { for (var i = 0; i < Maps.descriptionDivs.length; i++) {
var inner = Maps.innerDivs[i]; var description = Maps.descriptionDivs[i];
var boundingClientRect = inner.getBoundingClientRect(); var boundingClientRect = description.getBoundingClientRect();
if (currentY !== boundingClientRect.y) { if (currentY !== boundingClientRect.y) {
rows.push([]); rows.push([]);
} }
rows[rows.length - 1].push(inner); rows[rows.length - 1].push(description);
currentY = boundingClientRect.y; currentY = boundingClientRect.y;
} }
@ -113,17 +115,17 @@ $cssFiles = [
var maxHeight = 0; var maxHeight = 0;
for (var j = 0; j < row.length; j++) { for (var j = 0; j < row.length; j++) {
var inner = row[j]; var description = row[j];
if (inner.defaultHeight > maxHeight) { if (description.defaultHeight > maxHeight) {
maxHeight = inner.defaultHeight; maxHeight = description.defaultHeight;
} }
} }
for (var j = 0; j < row.length; j++) { for (var j = 0; j < row.length; j++) {
var inner = row[j]; var description = row[j];
inner.style.height = maxHeight + 'px'; description.style.height = maxHeight + 'px';
} }
} }
} }
@ -131,11 +133,11 @@ $cssFiles = [
Maps.addStaticMaps(); Maps.addStaticMaps();
Maps.initializeInnerDivs(); Maps.initializeDescriptionDivs();
Maps.calculateInnerDivHeights(); Maps.calculateDescriptionDivHeights();
window.onresize = function () { window.onresize = function () {
Maps.calculateInnerDivHeights(); Maps.calculateDescriptionDivHeights();
}; };
})(); })();
</script> </script>