Improve mobile warning

This commit is contained in:
tobspr 2020-05-23 09:19:56 +02:00
parent 91e713fc00
commit 3178974d78
2 changed files with 19 additions and 16 deletions

View File

@ -4,6 +4,8 @@
background: #333438 !important;
@include S(padding, 20px);
box-sizing: border-box;
justify-content: center;
flex-direction: column;
.logo {
width: 80%;
@ -17,20 +19,23 @@
margin-bottom: 13px;
font-size: 16px;
line-height: 20px;
max-width: 300px;
text-align: left;
a {
color: $colorBlueBright;
}
}
.standaloneLink {
width: 100%;
width: 200px;
height: 80px;
min-height: 40px;
background: uiResource("get_on_itch_io.svg") center center / contain no-repeat;
overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
margin-top: 20px;
margin-top: 10px;
pointer-events: all;
transition: all 0.12s ease-in;
transition-property: opacity, transform;

View File

@ -9,22 +9,20 @@ export class MobileWarningState extends GameState {
getInnerHTML() {
return `
<div class="mobileWarning">
<img class="logo" src="${cachebust("res/logo.png")}" alt="shapez.io Logo">
<img class="logo" src="${cachebust("res/logo.png")}" alt="shapez.io Logo">
<p>
I'm sorry, but shapez.io is not yet available on mobile devices!
(There is also no estimate when this will change, but feel to make a contribution! It's
&nbsp;<a href="https://github.com/tobspr/shapez.io" target="_blank">open source</a>!)</p>
<p>If you want to play on your computer, you can also get the standalone on itch.io:</p>
<p>
I'm sorry, but shapez.io is not yet available on mobile devices!
(There is also no estimate when this will change, but feel to make a contribution! It's
&nbsp;<a href="https://github.com/tobspr/shapez.io" target="_blank">open source</a>!)</p>
<p>If you want to play on your computer, you can also get the standalone on itch.io:</p>
<a href="${
THIRDPARTY_URLS.standaloneStorePage
}" class="standaloneLink" target="_blank">Get the shapez.io standalone!</a>
</div>
<a href="${
THIRDPARTY_URLS.standaloneStorePage
}" class="standaloneLink" target="_blank">Get the shapez.io standalone!</a>
`;
}