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

make circle control items more general

Browse Source
This commit is contained in:
Bence Pőcze 2021-05-02 14:51:01 +02:00
parent f9c1829a00
commit 2edfd14437
Signed by: bence
GPG Key ID: AA52B11A3269D1C1
3 changed files with 54 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
public/static/css/game.css
View File

@ -150,39 +150,9 @@
}
#navigation {
position: absolute;
z-index: 2;
}
#navigation .navigationItem {
margin-top: 10px;
opacity: 70%;
cursor: pointer;
}
#navigation .navigationItem:hover {
opacity: 100%;
}
#navigation .navigationItem div {
position: absolute;
}
#navigation .circleBackground {
width: 100%;
height: 100%;
opacity: 50%;
}
#navigation .navigationIcon {
width: 75%;
height: 75%;
margin: auto;
margin-top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
@media screen and (max-width: 599px) {
#mapName {
display: none;
@ -209,10 +179,6 @@
#navigation {
bottom: 25px;
left: 10px;
width: 45px;
}
#navigation .navigationItem {
height: 45px;
}
}
@ -260,10 +226,6 @@
#navigation {
bottom: 50px;
left: 20px;
width: 60px;
}
#navigation .navigationItem {
height: 60px;
}
@media screen and (max-height: 424px) {
#guess {
@ -282,10 +244,6 @@
#navigation {
bottom: 30px;
left: 10px;
width: 45px;
}
#navigation .navigationItem {
height: 45px;
}
}
}

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

@ -443,6 +443,41 @@ div.box {
box-sizing: border-box;
}
.circleControl {
position: absolute;
bottom: 20px;
right: 10px;
}
.circleControl .controlItem {
margin-top: 10px;
opacity: 70%;
cursor: pointer;
}
.circleControl .controlItem:hover {
opacity: 100%;
}
.circleControl .controlItem div {
position: absolute;
}
.circleControl .controlBackground {
width: 100%;
height: 100%;
opacity: 50%;
}
.circleControl .controlIcon {
width: 75%;
height: 75%;
margin: auto;
margin-top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
@media screen and (max-width: 599px) {
header h1 span {
display: none;
@ -469,6 +504,12 @@ div.box {
div.box {
width: initial;
}
.circleControl {
width: 45px;
}
.circleControl .controlItem {
height: 45px;
}
}
@media screen and (min-width: 600px) {
@ -489,6 +530,12 @@ div.box {
padding-left: 20px;
padding-right: 20px;
}
.circleControl {
width: 60px;
}
.circleControl .controlItem {
height: 60px;
}
}
@media screen and (max-height: 399px) {

14
views/game.php
View File

@ -59,21 +59,21 @@
<button id="startNewGameButton" class="fullWidth">Play this map again</button>
</div>
</div>
<div id="navigation">
<div id="compassContainer" class="navigationItem">
<div id="navigation" class="circleControl">
<div id="compassContainer" class="controlItem">
<div>
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="controlBackground" />
</div>
<div>
<img id="compass" src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
<img id="compass" src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="controlIcon" />
</div>
</div>
<div id="returnToStart" class="navigationItem">
<div id="returnToStart" class="controlItem">
<div>
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="controlBackground" />
</div>
<div>
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="navigationIcon" />
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="controlIcon" />
</div>
</div>
</div>