Mascali
/
shapez
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/css/states/mobile_warning.scss
View File

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

26
src/js/states/mobile_warning.js
View File

@ -9,22 +9,20 @@ export class MobileWarningState extends GameState {
getInnerHTML() { getInnerHTML() {
return ` 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> <p>
I'm sorry, but shapez.io is not yet available on mobile devices! 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 (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> &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>If you want to play on your computer, you can also get the standalone on itch.io:</p>
<a href="${ <a href="${
THIRDPARTY_URLS.standaloneStorePage THIRDPARTY_URLS.standaloneStorePage
}" class="standaloneLink" target="_blank">Get the shapez.io standalone!</a> }" class="standaloneLink" target="_blank">Get the shapez.io standalone!</a>
</div>
`; `;
} }