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;
}
div.mapItem>div.inner>div.description {
display: flex;
justify-content: center;
align-items: center;
}
div.mapItem>div.inner>div.info>p:nth-child(1) {
text-align: left;
}

44
views/maps.php
View File

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