Merged in bugfix/MAPG-163-fix-modal-when-height-is-low (pull request #131)

MAPG-163 optimize modal height

public/static/css/mapguesser.css

@@ -42,7 +42,7 @@ h1>a:hover, h1>a:focus {
     text-decoration: none;
 }
 
-h2, div.header.small h1 {
+h2, header.small h1 {
     font-size: 24px;
 }
 
@@ -83,7 +83,7 @@ hr {
     font-weight: 500;
 }
 
-.small {
+p.small, span.small {
     font-size: 12px;
 }
 
@@ -119,6 +119,7 @@ svg.inline, img.inline {
     display: inline;
     width: 1em;
     height: 1em;
+    margin-right: 0.3em;
     vertical-align: -0.15em;
 }
 
@@ -250,11 +251,10 @@ input.big:focus, select.big:focus, textarea.big:focus {
 
 div.modal {
     position: fixed;
-    top: 100px;
     background-color: #ffffff;
     border-radius: 3px;
-    padding: 20px;
     box-sizing: border-box;
+    overflow-y: auto;
     z-index: 6;
     visibility: hidden;
 }
@@ -280,7 +280,7 @@ p.formError {
     display: none;
 }
 
-div.header {
+header {
     display: grid;
     grid-template-columns: auto auto;
     background-color: #333333;
@@ -290,33 +290,44 @@ div.header {
     color: white;
 }
 
-div.header.small {
+header.small {
     height: 40px;
     line-height: 40px;
 }
 
-div.header>p.header {
+header>p {
     line-height: inherit;
     text-align: right;
 }
 
-div.header>p.header>span {
+header>p>span {
     padding-left: 6px;
 }
 
-div.header>p.header>span>a:link, div.header>p.header>span>a:visited {
+header>p>span>a:link, header>p>span>a:visited {
     color: inherit;
 }
 
-div.header>p.header>span:not(:last-child) {
+header>p>span:not(:last-child) {
     border-right: solid white 1px;
     padding-right: 6px;
 }
 
-div.main {
+main {
     padding: 6px 12px;
 }
 
+footer {
+    background-color: #444444;
+    padding: 6px 12px;
+    color: white;
+    text-align: center;
+}
+
+footer>p {
+    font-size: 13px;
+}
+
 div.buttonContainer {
     height: 35px;
 }
@@ -347,9 +358,12 @@ div.box {
 }
 
 @media screen and (max-width: 599px) {
-    div.header h1 span {
+    header h1 span {
         display: none;
     }
+    footer>p:not(:first-child) {
+        margin-top: 4px;
+    }
     button, a.button {
         padding: 0;
         width: 100%;
@@ -363,6 +377,8 @@ div.box {
     div.modal {
         left: 20px;
         right: 20px;
+        padding-left: 15px;
+        padding-right: 15px;
     }
     div.box {
         width: initial;
@@ -370,9 +386,48 @@ div.box {
 }
 
 @media screen and (min-width: 600px) {
+    footer>p {
+        display: inline;
+    }
+    footer>p:not(:first-child) {
+        padding-left: 6px;
+    }
+    footer>p:not(:last-child) {
+        border-right: solid white 1px;
+        padding-right: 6px;
+    }
     div.modal {
         width: 540px;
         left: 50%;
         margin-left: -270px;
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}
+
+@media screen and (max-height: 399px) {
+    div.modal {
+        top: 20px;
+        max-height: calc(100% - 40px);
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+}
+
+@media screen and (min-height: 400px) and (max-height: 499px) {
+    div.modal {
+        top: 50px;
+        max-height: calc(100% - 100px);
+        padding-top: 15px;
+        padding-bottom: 15px;
+    }
+}
+
+@media screen and (min-height: 500px) {
+    div.modal {
+        top: 75px;
+        max-height: calc(100% - 150px);
+        padding-top: 15px;
+        padding-bottom: 15px;
     }
 }

scripts/run-sql.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+if [ "$#" -lt 1 ]; then
+    echo "Usage: $0 <sql_file>"
+    exit 1
+fi
+
+SQL_FILE=$1
+
+ROOT_DIR=$(dirname $(readlink -f "$0"))/..
+
+. ${ROOT_DIR}/.env
+
+if [ -z "${DEV}" ] || [ "${DEV}" -eq "0" ]; then
+    echo "This script can only be used in DEV mode!"
+    exit 1
+fi
+
+echo "Running SQL on DB..."
+mysql --host=${DB_HOST} --user=${DB_USER} --password=${DB_PASSWORD} ${DB_NAME} < ${SQL_FILE}

views/admin/map_editor.php

@@ -13,11 +13,11 @@ $jsFiles = [
 ];
 ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
-<div class="header small">
+<header class="small">
     <h1>
         <a href="/maps" title="Back to playable maps">
-            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
+            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
-            <span>MapGuesser</span>
+         --><span>MapGuesser</span>
         </a>
     </h1>
     <p class="header">
@@ -28,26 +28,26 @@ $jsFiles = [
                 <path fill-rule="evenodd" d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"/>
                 <path fill-rule="evenodd" d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"/>
                 <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
-            </svg>
+            </svg><!--
-            <span id="added" class="bold">0</span><!--
+         --><span id="added" class="bold">0</span><!--
         --></span><!--
         --><span><!--
             <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
             --><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.502 1.94a.5.5 0 0 1 0 .706a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>                    <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
-            </svg>
+            </svg><!--
-            <span id="edited" class="bold">0</span><!--
+         --><span id="edited" class="bold">0</span><!--
         --></span><!--
         --><span><!--
             <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
             --><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M3.5 8a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.5-.5z"/>
                 <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
-            </svg>
+            </svg><!--
-            <span id="deleted" class="bold">0</span><!--
+         --><span id="deleted" class="bold">0</span><!--
         --></span>
     </p>
-</div>
+</header>
 <div id="metadata" class="modal">
     <h2>Edit map data</h2>
     <form id="metadataForm" class="marginTop">

views/error/404.php

@@ -1,7 +1,6 @@
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
-<div class="main">
     <h2>404 | Page not found</h2>
     <p>The requested URL was not found on this server. <a href="/" title="MapGuesser">Back to start.</a></p>
-</div>
+<?php require ROOT . '/views/templates/footer.php'; ?>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/game.php

@@ -8,11 +8,11 @@ $jsFiles = [
 ];
 ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
-<div class="header small">
+<header class="small">
     <h1>
         <a href="/maps" title="Back to playable maps">
-            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
+            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
-            <span>MapGuesser</span>
+         --><span>MapGuesser</span>
         </a>
     </h1>
     <p class="header">
@@ -20,7 +20,7 @@ $jsFiles = [
         --><span>Round <span id="currentRound" class="bold"></span></span><!--
         --><span>Score <span id="currentScoreSum" class="bold"></span></span>
     </p>
-</div>
+</header>
 <div id="guessCover"></div>
 <div id="panorama"></div>
 <div id="showGuessButtonContainer">

views/login/activate.php

@@ -1,9 +1,8 @@
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
-<div class="main">
     <h2>Account activation</h2>
     <div class="box">
         <p class="error justify">Activation failed. Please check the link you entered or retry <a href="/signup" title="Sign up">sign up</a>!</p>
     </div>
-</div>
+<?php require ROOT . '/views/templates/footer.php'; ?>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/login/cancel.php

@@ -1,6 +1,5 @@
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
-<div class="main">
     <h2>Account cancellation</h2>
     <div class="box">
         <?php if ($success) : ?>
@@ -9,5 +8,5 @@
             <p class="error justify">Cancellation failed. Please check the link you entered! Maybe the account was already deleted, in this case no further action is required.</p>
         <?php endif; ?>
     </div>
-</div>
+<?php require ROOT . '/views/templates/footer.php'; ?>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/login/google_login.php

@@ -1,9 +1,8 @@
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
-<div class="main">
     <h2>Login up with Google</h2>
     <div class="box">
         <p class="error justify">Authenticating with Google failed. Please <a href="/login/google" title="Login with Google">retry</a>!</p>
     </div>
-</div>
+<?php require ROOT . '/views/templates/footer.php'; ?>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/login/google_signup.php

@@ -1,6 +1,5 @@
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
-<div class="main">
     <h2>Sign up</h2>
     <div class="box">
         <form id="googleSignupForm" action="/signup/google" method="post">
@@ -22,7 +21,7 @@
             </div>
         </form>
     </div>
-</div>
+<?php require ROOT . '/views/templates/footer.php'; ?>
 <script>
     (function () {
         var form = document.getElementById('googleSignupForm');

views/login/login.php

@@ -5,7 +5,6 @@ $jsFiles = [
 ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
-<div class="main">
     <h2>Login</h2>
     <div class="box">
         <form id="loginForm" action="/login" method="post">
@@ -21,5 +20,5 @@ $jsFiles = [
             </div>
         </form>
     </div>
-</div>
+<?php require ROOT . '/views/templates/footer.php'; ?>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/login/signup.php

@@ -5,7 +5,6 @@ $jsFiles = [
 ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
-<div class="main">
     <h2>Sign up</h2>
     <div class="box">
         <form id="signupForm" action="/signup" method="post">
@@ -31,5 +30,5 @@ $jsFiles = [
             </div>
         </form>
     </div>
-</div>
+<?php require ROOT . '/views/templates/footer.php'; ?>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/login/signup_success.php

@@ -1,9 +1,8 @@
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
-<div class="main">
     <h2>Sign up</h2>
     <div class="box">
         <p class="justify">Sign up was successful. Please check your email and click on the activation link to activate your account!</p>
     </div>
-</div>
+<?php require ROOT . '/views/templates/footer.php'; ?>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/maps.php

@@ -5,7 +5,6 @@ $cssFiles = [
 ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
-<div class="main">
     <h2>Playable maps</h2>
     <div id="mapContainer">
         <?php foreach ($maps as $map): ?>
@@ -13,25 +12,23 @@ $cssFiles = [
                 <div class="title">
                     <p class="title"><?= $map['name'] ?></p>
                 </div>
-                <div class="imgContainer">
+                <div class="imgContainer" data-bound-south-lat="<?= $map['bound_south_lat'] ?>" data-bound-west-lng="<?= $map['bound_west_lng'] ?>" data-bound-north-lat="<?= $map['bound_north_lat'] ?>" data-bound-east-lng="<?= $map['bound_east_lng'] ?>"></div>
-                    <img src="https://maps.googleapis.com/maps/api/staticmap?size=350x175&visible=<?= $map['bound_south_lat'] . ',' . $map['bound_west_lng'] . '|' . $map['bound_north_lat'] . ',' . $map['bound_east_lng'] ?>&key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>" alt="Map area">
-                </div>
                 <div class="inner">
                     <div class="info">
                         <p>
                             <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
                             <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                 <path fill-rule="evenodd" d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
-                            </svg>
+                            </svg><!--
-                            <?= $map['num_places'] ?> places
+                         --><?= $map['num_places'] ?> places
                         </p>
                         <p>
                             <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
                             <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                 <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" />
                                 <path fill-rule="evenodd" d="M14 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM2 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
-                            </svg>
+                            </svg><!--
-                            ~ <?= $map['area'][0] ?> <?= $map['area'][1] ?><sup>2</sup>
+                         -->~ <?= $map['area'][0] ?> <?= $map['area'][1] ?><sup>2</sup>
                         </p>
                     </div>
                     <p class="small justify marginTop"><?= $map['description'] ?></p>
@@ -62,7 +59,28 @@ $cssFiles = [
             <?php endfor; ?>
         <?php endif; ?>
     </div>
-</div>
+<?php require ROOT . '/views/templates/footer.php'; ?>
+<script>
+    (function () {
+        const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['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 img = document.createElement('img');
+
+            img.src = '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);
+        }
+    })();
+</script>
 <?php if ($isAdmin): ?>
 <script>
     (function () {
@@ -91,7 +109,9 @@ $cssFiles = [
         };
 
         var buttons = document.getElementById('mapContainer').getElementsByClassName('deleteButton');
-        for (var button of buttons) {
+        for (var i = 0; i < buttons.length; i++) {
+            var button = buttons[i];
+
             button.onclick = function() {
                 Maps.deleteMap(this.dataset.mapId, this.dataset.mapName);
             };

views/profile.php

@@ -5,7 +5,6 @@ $jsFiles = [
 ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
-<div class="main">
     <h2>Profile</h2>
     <div class="box">
         <form id="profileForm" action="/profile" method="post">
@@ -21,5 +20,5 @@ $jsFiles = [
             </div>
         </form>
     </div>
-</div>
+<?php require ROOT . '/views/templates/footer.php'; ?>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/templates/footer.php

@@ -0,0 +1,5 @@
+</main>
+<footer>
+    <p><span class="bold">MapGuesser</span> <?= VERSION ?></p><!--
+ --><p>&copy; Pőcze Bence <?= (new DateTime(REVISION_DATE))->format('Y') ?></p>
+</footer>

views/templates/header.php

@@ -1,18 +1,18 @@
-<div class="header">
+<header>
     <h1>
         <a href="/" title="MapGuesser">
-            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
+            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
-            <span>MapGuesser</span>
+         --><span>MapGuesser</span>
         </a>
     </h1>
-    <p class="header">
+    <p>
         <?php if (Container::$request->user()) : ?>
             <span><a href="/profile" title="Profile">
                 <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
                 <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
-                </svg>
+                </svg><!--
-                <?= Container::$request->user()->getDisplayName() ?><!--
+             --><?= Container::$request->user()->getDisplayName() ?><!--
             --></a></span><!--
             --><span><a href="/logout" title="Logout">Logout</a></span>
         <?php else : ?>
@@ -20,4 +20,5 @@
             --><span><a href="/login" title="Login">Login</a></span>
         <?php endif; ?>
     </p>
-</div>
+</header>
+<main>