MAPG-119 'add new map' button and some desing improvements on maps page

public/static/css/mapguesser.css

@@ -146,6 +146,16 @@ button.fullWidth, a.button.fullWidth {
     width: 100%;
 }
 
+button.noLeftRadius, a.button.noLeftRadius {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+button.noRightRadius, a.button.noRightRadius {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
 button.gray, a.button.gray {
     background-color: #808080;
 }
@@ -170,6 +180,14 @@ button.yellow:hover, button.yellow:focus, a.button.yellow:hover, a.button.yellow
     background-color: #c37713;
 }
 
+button.green, a.button.green {
+    background-color: #28a745;
+}
+
+button.green:hover, button.green:focus, a.button.green:hover, a.button.green:focus {
+    background-color: #1b7d31;
+}
+
 input, select, textarea {
     background-color: #f9fafb;
     border: solid #c8d2e1 1px;
@@ -291,7 +309,7 @@ div.box {
     div.header.small h1 span {
         display: none;
     }
-    button {
+    button, a.button {
         padding: 0;
         width: 100%;
     }

public/static/css/maps.css

@@ -4,11 +4,15 @@
 
 div.mapItem {
     width: 350px;
-    background-color: #eeeeee;
-    border-radius: 3px;
     margin: 10px auto;
 }
 
+div.mapItem.new {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 div.mapItem>div.title {
     background-color: #28a745;
     color: white;
@@ -27,6 +31,7 @@ div.mapItem>img {
 }
 
 div.mapItem>div.inner {
+    background-color: #eeeeee;
     padding: 10px 8px;
 }
 
@@ -43,6 +48,12 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
     text-align: right;
 }
 
+div.mapItem>div.buttonContainer {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+}
+
 @media screen and (min-width: 1504px) {
     #mapContainer {
         grid-template-columns: auto auto auto auto;
@@ -69,6 +80,6 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
 
 @media screen and (max-width: 374px) {
     div.mapItem {
-        width: initial;
+        width: 100%;
     }
 }

views/maps.php

@@ -30,14 +30,28 @@
                     </div>
                     <p class="small justify marginTop"><?= $map['description'] ?></p>
                 </div>
-                <a class="button fullWidth" href="game/<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
                 <?php if ($isAdmin): ?>
-                    <a class="button yellow fullWidth marginTop" href="admin/mapEditor/<?= $map['id']; ?>" title="Edit map '<?= $map['name'] ?>'">Edit this map</a>
+                    <div class="buttonContainer">
+                        <a class="button fullWidth noRightRadius" href="game/<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
+                        <a class="button yellow fullWidth noLeftRadius noRightRadius" href="admin/mapEditor/<?= $map['id']; ?>" title="Edit map '<?= $map['name'] ?>'">Edit</a>
+                        <button class="button red fullWidth noLeftRadius" title="Delete map '<?= $map['name'] ?>'">Delete</button>
+                    </div>
+                <?php else: ?>
+                    <a class="button fullWidth" href="game/<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
                 <?php endif; ?>
             </div>
         <?php endforeach; ?>
-        <?php if (count($maps) < 4): ?>
+        <?php if ($isAdmin): ?>
-            <?php for ($i = 0; $i < 4 - count($maps); ++$i): ?>
+            <div class="mapItem new">
+                <a class="button green fullWidth" href="admin/mapEditor" title="Add new map">
+                    Add new map
+                </a>
+            </div>
+        <?php else: ?>
+            <div class="mapItem"></div>
+        <?php endif; ?>
+        <?php if (count($maps) < 3): ?>
+            <?php for ($i = 0; $i < 3 - count($maps); ++$i): ?>
                 <div class="mapItem"></div>
             <?php endfor; ?>
         <?php endif; ?>