Cześć,
Kierowany tutaj przez Skaje i Moskiera wrzucam propozycję wersji mobilnej do gry. Nie jest ona piękna, ale możliwie funkcjonalna. Można ją przetestować ściągając rozszerzenie do Chrome'a jak np. Custom CSS and JS i wklejając kolejno CSS i js z pliku dla domeny toril.pl i odpalając emulator (f12 i mała ikonka telefonu w lewym górnym rogu) jak znajdę coś sensownego już na fizyczny telefon w sklepie aplikacji to zaktualizuję posta.
Jak się przyjmie to mogę jeszcze dostosować ekran logowania i zamienić pocztę i pokoje sesyjne na coś na podobę messengera (to wymaga dłuższych kombinacji)
----Javascript-----
//musiałem dodać dynamicznie nagłówek viewport, można go umieścić w szablonie i usunąć poniższe viewportMeta
var viewportMeta = document.createElement("meta");
viewportMeta.name = "viewport";
viewportMeta.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0";
document.getElementsByTagName("head")[0].appendChild(viewportMeta);
var isMobile = () => {
var check = false;
(function(a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
return check;
};
if (isMobile() !== false) {
if (document.getElementById("art") !== null) {
var artContainer = document.getElementById("art");
var menuCheckbox = document.createElement("input");
var menuCheckboxLabel = document.createElement("label");
menuCheckbox.id = "toggle-menu";
menuCheckbox.type = "checkbox";
menuCheckboxLabel.htmlFor = "toggle-menu";
menuCheckboxLabel.innerText = "MENU";
artContainer.parentNode.insertBefore(menuCheckbox, artContainer.nextSibling);
artContainer.parentNode.insertBefore(menuCheckboxLabel, artContainer.nextSibling);
document.addEventListener("click", function(e) {
if (e.target && e.target.id === "toggle-menu") {
var bodyTag = document.getElementsByTagName("body")[0];
var navs = document.querySelectorAll(".nav");
navs[0].classList.toggle("menu--open");
navs[1].classList.toggle("menu--open");
if (bodyTag.style.position === "fixed") {
bodyTag.style.position = "";
} else {
bodyTag.style.position = "fixed";
}
}
});
}
if (document.querySelector('.login2') !== null) {
var loginButton = document.querySelector('.login2');
console.log(loginButton);
loginButton.value = "Zaloguj się";
}
if (window.location.href.indexOf('&view=read') !== -1) {
var responses = document.querySelectorAll('.s_under');
var responsesLength = responses.length;
var avatarFileName = document.getElementById('avatar').style.background.replace(/(url\("avatars\/mini\/)(.*)(.jpg".*)/g, "$2");
for (var i = 0; i < responsesLength; i++) {
console.log(responses[i].parentNode.parentNode.nextElementSibling);
if (responses[i].style.backgroundImage.indexOf(avatarFileName) !== -1) {
responses[i].parentNode.parentNode.classList.add('sender_me');
responses[i].parentNode.parentNode.nextElementSibling.classList.add('my_response');
}
}
artContainer.scrollTop = artContainer.scrollHeight;
}
}
--------CSS-------------
@media screen and (min-width: 768px) {
#toggle-menu,
label[for='toggle-menu'] {
display: none;
}
}
@media screen and (max-width: 767px) {
body {
overflow-x: hidden;
width: 100%;
margin: 0;
}
select,
option,
input,
textarea,
button {
box-sizing: border-box;
}
#login {
width: 100%;
background-size: 320px;
padding: 10px;
box-sizing: border-box;
padding-top: 88px;
}
#log_o {
width: 100%;
padding-top: 0;
height: auto;
text-align: center;
}
.login_window {
width: 100%;
margin: 0;
padding: 40px 10px;
box-sizing: border-box;
text-align: center;
font-family: 'Almendra', serif;
float: none;
}
.login2 {
color: #FFF;
font-family: 'Almendra', serif;
font-size: 24px;
float: none;
width: 100%;
height: auto;
margin: 0;
padding: 10px;
}
.login2:hover {
background: none;
}
#register {
float: none;
width: 100%;
height: auto;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
#register:hover {
background: none;
}
#register:after {
content: 'Zarejestruj się';
}
.min-link {
height: auto;
}
.min-link a {
padding: 10px;
}
.tooltipster-base {
display: none;
}
#rama {
width: 100%;
height: auto;
}
#navbar {
width: 100%;
height: auto;
padding: 10px 0 0;
border-bottom: 2px solid #CCC;
margin: 0;
height: 80px;
display: flex;
background-position: center top;
}
.nav {
margin-left: auto!important;
margin: auto;
width: 140px;
height: auto;
width: 40px;
position: fixed;
margin: 0!important;
z-index: 2;
right: -100%;
transition: all .2s linear;
overflow-y: auto;
top: 0;
text-align: center;
height: auto;
background: black;
}
.nav.menu--open {
right: 60px;
width: calc(100vw - 60px);
}
.nav a {
display: inline-block;
}
.nav a div {
width: auto;
height: auto;
padding: 9px;
background: none;
font-size: 12px;
margin: 0;
}
.nav a:first-child div:before {
content: 'Karta postaci';
}
.nav a:nth-child(2) div:before {
content: 'Ekwipunek';
}
.nav a:nth-child(3) div:before {
content: 'Księga czarów';
}
.nav a:nth-child(4) div:before {
content: 'Reputacja';
}
.nav a:nth-child(5) div:before {
content: 'Notatnik';
}
.nav:last-child a:first-child div:before {
content: 'Miasto';
}
.nav:last-child a:nth-child(2) div:before {
content: 'Kodeks';
}
.nav:last-child a:nth-child(3) div:before {
content: 'Mapa';
}
.nav:last-child a:nth-child(4) div:before {
content: 'Forum';
}
.nav:last-child a:nth-child(5) div:before {
content: 'Opcje';
}
.nav:last-child {
top: 76px;
}
.nav_link:hover {
background-position: center top -54px;
}
.witraz {
display: inline-block;
top: 70px;
left: 0;
position: absolute;
}
.witraz:nth-child(4) {
left: auto;
right: 0;
}
.wit {
width: 30px;
height: 30px;
border-radius: 30px;
border: 2px solid #CCC;
overflow: hidden;
top: -57px;
position: absolute;
}
.wit1 {
left: calc(50vw - 104px);
border-color: #4d160b;
background-position: -7px -58px;
}
.wit2 {
background-position: center -90px;
border-color: #1a4d1c;
left: calc(50vw - 148px);
}
.wit3 {
right: calc(50vw - 92px);
border-color: #4f390c;
background-position: -91px -57px;
}
.wit4 {
background-position: center -90px;
border-color: #102e55;
right: calc(50vw - 48px);
}
.lezka1 {
top: -12px;
left: -9px;
}
.lezka2 {
top: -1px;
left: -9px;
}
.lezka3 {
top: -12px;
left: 9px;
}
.lezka4 {
top: 0px;
left: -10px;
}
#nagico {
padding: 0;
width: 100%;
}
#ksiazka {
width: 100%;
margin: 0;
background: none;
height: auto;
z-index: 1;
}
#ciemne-tlo {
width: 100%;
top: 16px;
height: calc(100vh - 117px);
overflow-y: auto;
z-index: 1;
}
.ks-nag {
padding: 0 10px 20px;
box-sizing: border-box;
margin: 0;
float: none;
width: 100%;
}
.ks-tekst {
margin: 0;
box-sizing: border-box;
padding: 0 10px 30px;
width: 100%;
height: auto;
}
#ks-img {
margin: 0;
width: 100%;
}
#ks-close {
right: 10px;
top: 115px;
position: fixed;
z-index: 1;
}
#kscroll {
display: none;
}
#ks-left {
width: 100%;
background: url(../images/ksiazka.jpg) no-repeat top -66px left -128px;
}
#ks-right {
width: 100%;
background: #dbdac5;
border-top: 2px solid #504e39;
}
#avatar {
border: 2px solid #313b38;
border-bottom-left-radius: 75% 75%;
border-bottom-right-radius: 75% 75%;
border-top-left-radius: 75% 75%;
border-top-right-radius: 75% 75%;
float: none;
width: 60px;
height: 60px;
position: absolute;
top: 10px;
left: 50%;
margin-left: -60px;
}
#avatar img {
width: 100%;
}
#article {
width: 100%;
padding: 10px 10px 0;
margin-bottom: 0;
box-sizing: border-box;
background-image: none;
min-height: 0;
position: relative;
z-index: 1;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
background: #000;
border-top: 2px solid #CCC;
padding: 2px 0;
z-index: 1;
}
#art {
width: 100%;
height: calc(100vh - 154px);
overflow-y: auto;
display: flex;
flex-wrap: wrap;
}
#userlist {
width: 100%;
position: fixed;
background: #000;
top: 0;
z-index: 1;
right: -100%;
transition: all .2s linear;
height: 100vh;
overflow-y: auto;
box-sizing: border-box;
padding-right: 60px;
padding-top: 106px;
}
#userlist .gracz_name a {
font-size: 18px!important;
padding: 2px 0;
margin-right: 10px;
display: inline-block;
}
#toggle-menu:checked+#userlist {
right: 0;
}
#toggle-menu {
position: absolute;
right: 10px;
top: -57px;
display: none;
}
label[for='toggle-menu'] {
position: absolute;
top: -57px;
right: 0;
z-index: 2;
width: 60px;
text-align: center;
}
form[name='formularz'] textarea {
box-sizing: border-box;
max-width: 100%!important;
height: 40px;
}
.sesje_sender {
float:none;
width: 40px;
margin: 0;
}
.sesje_sender.sender_me {
display: none;
}
.sesje_text {
float:none;
color: #FFF;
margin-top: 20px;
width: calc(100% - 70px);
padding: 10px;
font-size: 14px;
box-sizing: border-box;
position: relative;
margin-right: 30px;
}
.sesje_text span {
font-size: 14px;
background: black;
}
.sesje_text:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #222;
z-index: -1;
border-radius: 0 10px 10px 10px;
}
.sesje_text.my_response {
float: none;
width: 100%;
font-size: 14px;
margin-left: 70px;
margin-right: 0;
}
.sesje_text.my_response:after {
background: #333;
border-radius: 10px 0 10px 10px;
}
.s_over {
display: none;
}
.s_border {
margin: 0;
height: auto;
display: inline-block;
}
.s_under {
width: 30px;
position: static;
margin: 0;
height: 30px;
border-radius: 40px;
border: 2px solid #CCC;
margin: 0;
}
div[align="center"] {
width: 100%;
}
#mapka {
width: 90%;
height: 300px;
overflow: auto;
}
#dopodgladu {
width: 100px!important;
}
.aspekty_jawne {
width: auto;
}
.hinty {
float: none;
}
#miasto-link {
width: 100%;
}
.miasto-link {
float: none;
width: 100%;
}
#miasto-link a {
display: block;
width: 100%;
text-align: center;
}
.gracz_lista {
text-align: center;
float: none;
height: auto;
}
.gracz_name {
float: none;
font-size: 18px;
display: inline-block;
max-width: calc(100vw - 30px);
}
#kar a {
float: none;
font-size: 18px!important;
padding: 4px 0;
display: inline-block;
width: 100%;
text-align: center;
}
#kp_name img,
.replacer img {
max-width: 100%!important;
}
.profillinki {
text-align: center;
}
.prolink {
width: 48%!important;
float: none;
display: inline-block
}
}
EDIT:
Zaktualizowałem kod, jest wsparcie dla ekranu logowania i "messengerowa" poczta oraz sesje prywatne. Jest kilka rzeczy, które mogą wyglądać lepiej, ale zostawiam to do oceny.
Kierując się sugestią Moskiera wrzucam zrzuty ekranu z emulatora - iPhone5 z racji, że to dobry przykład małego ekranu. Na większych powinno wyglądać przejrzyściej:
https://imgur.com/a/7SODY