MAPG-69 unifying some style and text

This commit is contained in:
Bence Pőcze 2020-06-14 17:16:47 +02:00
parent 66b21ec710
commit a69ba3a99b
6 changed files with 78 additions and 88 deletions

View File

@ -69,10 +69,6 @@ sub {
bottom: -0.4em; bottom: -0.4em;
} }
.mono {
font-family: 'Roboto Mono', monospace;
}
.bold { .bold {
font-weight: 500; font-weight: 500;
} }
@ -261,13 +257,18 @@ div.modal {
visibility: hidden; visibility: hidden;
} }
p.formError { p.error, p.formError {
color: #7f2929; color: #7f2929;
font-weight: 500; font-weight: 500;
}
p.formError {
display: none; display: none;
} }
div.header { div.header {
display: grid;
grid-template-columns: auto auto;
background-color: #333333; background-color: #333333;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
@ -275,30 +276,25 @@ div.header {
color: white; color: white;
} }
div.header>div.grid {
display: grid;
grid-template-columns: auto auto;
}
div.header.small { div.header.small {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
div.header>div.grid>:nth-child(2) { div.header>p.header {
line-height: inherit; line-height: inherit;
text-align: right; text-align: right;
} }
div.header>div.grid>:nth-child(2)>span { div.header>p.header>span {
padding-left: 6px; padding-left: 6px;
} }
div.header>div.grid>:nth-child(2)>span>a:link, div.header>div.grid>:nth-child(2)>span>a:visited { div.header>p.header>span>a:link, div.header>p.header>span>a:visited {
color: inherit; color: inherit;
} }
div.header>div.grid>:nth-child(2)>span:not(:last-child) { div.header>p.header>span:not(:last-child) {
border-right: solid white 1px; border-right: solid white 1px;
padding-right: 6px; padding-right: 6px;
} }
@ -337,7 +333,7 @@ div.box {
} }
@media screen and (max-width: 599px) { @media screen and (max-width: 599px) {
div.header.small h1 span { div.header h1 span {
display: none; display: none;
} }
button, a.button { button, a.button {

View File

@ -72,7 +72,7 @@ var MapGuesser = {
closeButton.classList.add('gray'); closeButton.classList.add('gray');
closeButton.classList.add('marginTop'); closeButton.classList.add('marginTop');
closeButton.textContent = 'Cancel'; closeButton.textContent = 'Close';
closeButton.onclick = function () { closeButton.onclick = function () {
MapGuesser.hideModal(); MapGuesser.hideModal();
}; };

View File

@ -14,41 +14,39 @@ $jsFiles = [
?> ?>
<?php require ROOT . '/views/templates/main_header.php'; ?> <?php require ROOT . '/views/templates/main_header.php'; ?>
<div class="header small"> <div class="header small">
<div class="grid"> <h1>
<h1> <a href="/maps" title="Back to playable maps">
<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>
</a> </h1>
</h1> <p class="header">
<p> <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
<span class="bold"><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!-- --><span><!--
--><span><!-- <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
<?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">
--><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 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="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="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"/>
<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><!-- --><span><!--
--><span><!-- <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
<?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">
--><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"/>
<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><!-- --><span><!--
--><span><!-- <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
<?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">
--><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="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"/>
<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>
--></span> </p>
</p>
</div>
</div> </div>
<div id="metadata" class="modal"> <div id="metadata" class="modal">
<h2>Edit map data</h2> <h2>Edit map data</h2>

View File

@ -9,19 +9,17 @@ $jsFiles = [
?> ?>
<?php require ROOT . '/views/templates/main_header.php'; ?> <?php require ROOT . '/views/templates/main_header.php'; ?>
<div class="header small"> <div class="header small">
<div class="grid"> <h1>
<h1> <a href="/maps" title="Back to playable maps">
<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>
</a> </h1>
</h1> <p class="header">
<p> <span id="mapName" class="bold"><?= $mapName ?></span><!--
<span id="mapName" class="bold"><?= $mapName ?></span><!-- --><span>Round <span id="currentRound" class="bold"></span></span><!--
--><span>Round <span id="currentRound" class="bold"></span></span><!-- --><span>Score <span id="currentScoreSum" class="bold"></span></span>
--><span>Score <span id="currentScoreSum" class="bold"></span></span> </p>
</p>
</div>
</div> </div>
<div id="guessCover"></div> <div id="guessCover"></div>
<div id="panorama"></div> <div id="panorama"></div>

View File

@ -1,25 +1,23 @@
<div class="header"> <div class="header">
<div class="grid"> <h1>
<h1> <a href="/" title="MapGuesser">
<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>
MapGuesser </a>
</a> </h1>
</h1> <p class="header">
<p> <?php if (Container::$request->user()) : ?>
<?php if (Container::$request->user()) : ?> <span><a href="/profile" title="Profile">
<span><a href="/profile" title="Profile"> <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
<?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">
<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"/>
<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><!--
--></a></span><!-- --><span><a href="/logout" title="Logout">Logout</a></span>
--><span><a href="/logout" title="Logout">Logout</a></span> <?php else : ?>
<?php else : ?> <span><a href="/signup" title="Login">Sign up</a></span><!--
<span><a href="/signup" title="Login">Sign up</a></span><!-- --><span><a href="/login" title="Login">Login</a></span>
--><span><a href="/login" title="Login">Login</a></span> <?php endif; ?>
<?php endif; ?> </p>
</p>
</div>
</div> </div>

View File

@ -28,6 +28,6 @@
<div id="cover"></div> <div id="cover"></div>
<div id="modal" class="modal"> <div id="modal" class="modal">
<h2 id="modalTitle"></h2> <h2 id="modalTitle"></h2>
<p id="modalText" class="marginTop"></p> <p id="modalText" class="justify marginTop"></p>
<div id="modalButtons" class="right"></div> <div id="modalButtons" class="right"></div>
</div> </div>