Merged in feature/MAPG-174-adjust-map-description-style (pull request #141)

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

public/static/css/mapguesser.css

@@ -84,7 +84,7 @@ hr {
 }
 
 p.small, span.small {
-    font-size: 12px;
+    font-size: 14px;
 }
 
 .justify {
@@ -148,6 +148,13 @@ button, a.button {
     line-height: 35px;
 }
 
+button.small {
+    font-size: 14px;
+    padding: 0 12px;
+    height: 32px;
+    line-height: 32px;
+}
+
 button:enabled:hover, button:enabled:focus, a.button:hover, a.button:focus {
     background-color: #29457f;
     outline: none;
@@ -336,6 +343,12 @@ div.buttonContainer>button {
     margin: 0 auto;
 }
 
+#cookiesNotice {
+    background-color: #eeeeee;
+    padding: 10px;
+    text-align: center;
+}
+
 #loading {
     position: fixed;
     width: 64px;

public/static/css/maps.css

@@ -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;
 }

views/maps.php

@@ -30,7 +30,9 @@ $cssFiles = [
                          -->~ <?= $map['area'][0] ?> <?= $map['area'][1] ?><sup>2</sup>
                         </p>
                     </div>
-                    <p class="small justify 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 () {
+            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 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) {
                         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) {
+                        if (description.defaultHeight > maxHeight) {
-                            maxHeight = inner.defaultHeight;
+                            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.initializeDescriptionDivs();
-        Maps.calculateInnerDivHeights();
+        Maps.calculateDescriptionDivHeights();
 
         window.onresize = function () {
-            Maps.calculateInnerDivHeights();
+            Maps.calculateDescriptionDivHeights();
         };
     })();
 </script>

views/templates/main_footer.php

@@ -14,5 +14,30 @@
             <script src="<?= $jsFile ?>"></script>
         <?php endforeach; ?>
     <?php endif; ?>
+    <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
+        <script>
+            (function () {
+                MapGuesser = {
+                    cookiesAgreed: false,
+
+                    agreeCookies: function () {
+                        if (MapGuesser.cookiesAgreed) {
+                            return;
+                        }
+
+                        var expirationDate = new Date(new Date().getTime() + 20 * 365 * 24 * 60 * 60 * 1000).toUTCString();
+                        document.cookie = 'COOKIES_CONSENT=1; expires=' + expirationDate + '; path=/';
+
+                        MapGuesser.cookiesAgreed = true;
+                        document.getElementById('cookiesNotice').style.display = 'none';
+                    }
+                };
+
+                window.onclick = function () {
+                    MapGuesser.agreeCookies();
+                };
+            })();
+        </script>
+    <?php endif; ?>
 </body>
 </html>

views/templates/main_header.php

@@ -22,6 +22,14 @@
     <link rel="icon" type="image/png" sizes="16x16" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/16x16.png?rev=<?= REVISION ?>">
 </head>
 <body>
+    <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
+        <div id="cookiesNotice">
+            <p class="small">
+                <?= $_ENV['APP_NAME'] ?> uses cookies to improve user experience. By using the app or clicking I agree, you consent to our use of cookies.
+            </p>
+            <button id="agreeCookies" class="small marginTop">I agree</button>
+        </div>
+    <?php endif; ?>
     <div id="loading">
         <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/loading.svg?rev=<?= REVISION ?>" width="64" height="64">
     </div>

web.php

@@ -49,6 +49,7 @@ Container::$routeCollection->group('admin', function (MapGuesser\Routing\RouteCo
     $routeCollection->post('admin.deleteMap', 'deleteMap/{mapId}', [MapGuesser\Controller\MapAdminController::class, 'deleteMap']);
 });
 
+if (isset($_COOKIE['COOKIES_CONSENT'])) {
     Container::$sessionHandler = new MapGuesser\Session\DatabaseSessionHandler();
 
     session_set_save_handler(Container::$sessionHandler, true);
@@ -58,6 +59,9 @@ session_start([
         'cookie_httponly' => true,
         'cookie_samesite' => 'Lax'
     ]);
+} else {
+    $_SESSION = [];
+}
 
 Container::$request = new MapGuesser\Request\Request($_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'], $_GET, $_POST, $_SESSION);