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

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

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-10 23:17:13 +02:00
parent 947ce6b183
commit ec7e806277
3 changed files with 51 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/static/css/mapguesser.css
View File

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

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

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

22
views/maps.php
View File

@ -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 for ($i = 0; $i < 4 - count($maps); ++$i): ?>
<?php if ($isAdmin): ?>
<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; ?>