mobile fix
This commit is contained in:
parent
2b6ae9c640
commit
e95e424a1e
@ -106,5 +106,5 @@ if __name__ == '__main__':
|
||||
app.run(
|
||||
host=env('HOST', default='0.0.0.0'),
|
||||
port=env('PORT', default=5000),
|
||||
debug=env('DEBUG', default=False).lower() == 'true'
|
||||
debug=env('DEBUG', default="false").lower() == 'true'
|
||||
)
|
@ -1,8 +1,12 @@
|
||||
#snakeContainer {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
canvas#snakeCanvas {
|
||||
margin: 15px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid var(--secondary-background-color);
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
@ -110,4 +114,42 @@ dialog h2 {
|
||||
dialog p {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 850px) {
|
||||
.flex-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
form {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.min-width {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
.mobileOnly {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pcOnly {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 651px) {
|
||||
.mobileOnly {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.pcOnly {
|
||||
display: flex;
|
||||
}
|
||||
}
|
@ -14,11 +14,18 @@
|
||||
<p>
|
||||
It seems like the thing you are looking for is not here :[
|
||||
<br><br>
|
||||
<span class="pcOnly">
|
||||
while you're here, why not play some snake?
|
||||
</span>
|
||||
<span class="mobileOnly">
|
||||
You can't play snake on mobile, sorry :(
|
||||
</span>
|
||||
</p>
|
||||
<canvas id="snakeCanvas"></canvas>
|
||||
<div class="pcOnly" id="snakeContainer">
|
||||
<canvas id="snakeCanvas"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex-row">
|
||||
<section class="pcOnly flex-row">
|
||||
<section class="min-width">
|
||||
<h2>Submit score</h2>
|
||||
<form action="/404/submit" method="POST" id="snakeForm">
|
||||
@ -41,6 +48,18 @@
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
<section class="max-width mobileOnly" id="snakeLeaderboardSection">
|
||||
<h2>Leaderboard</h2>
|
||||
<ul id="snakeLeaderboard">
|
||||
{% for score in scores %}
|
||||
<li>
|
||||
<span>{{ score.position }}</span>
|
||||
<span>{{ score.name }}</span>
|
||||
<span>{{ score.score }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
{% if error %}
|
||||
<dialog id="errorDialog">
|
||||
<h2>Error</h2>
|
||||
|
Loading…
x
Reference in New Issue
Block a user