Author Topic: Propozycja odsłony mobilnej do obecnej wersji gry  (Read 945 times)

Eryzekiel

  • Gnoll
  • **
  • Posts: 10
  • Propsy: 3
    • View Profile
Propozycja odsłony mobilnej do obecnej wersji gry
« on: March 11, 2018, 12:39:17 am »
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-----

Code: [Select]
//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-------------
Code: [Select]
@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
« Last Edit: March 14, 2018, 10:53:52 pm by Eryzekiel »

Ref

  • Łupieżca Umysłu
  • *
  • Posts: 241
  • Propsy: 3
    • View Profile
  • ID: 822
  • Postać: Carret
  • Discord: Ref
Odp: Propozycja odsłony mobilnej do obecnej wersji gry
« Reply #1 on: March 11, 2018, 12:40:47 pm »
o stary ale super
nie
zawód? Design wzorów obić w komunikacji miejskiej

Chromy

  • Hobgoblin
  • ****
  • Posts: 96
  • Propsy: 3
    • View Profile
  • ID: 1287
  • Postać: A. Stein
Odp: Propozycja odsłony mobilnej do obecnej wersji gry
« Reply #2 on: March 11, 2018, 09:01:41 pm »
Nic mi ten kod nie mówi xD, ale jeśli działa to jak mówisz, to zrobiłeś kawał dobrej roboty :D

Eryzekiel

  • Gnoll
  • **
  • Posts: 10
  • Propsy: 3
    • View Profile
Odp: Propozycja odsłony mobilnej do obecnej wersji gry
« Reply #3 on: March 12, 2018, 04:28:10 pm »
Nie ma sprawy, dzięki za miłe słowa :)

jak ktoś chce wypróbować na telefonie to można to zrobić następująco:

  • pobrać firefoxa na telefon (chyba android/iOS, ale co do drugiego to nie wiem)
  • odpalić nowo zainstalowaną przeglądarkę i wejść na https://addons.mozilla.org/pl/firefox/addon/custom-style-script/
  • dodać to rozszerzenie (Custom Style Script (Inject desired CSS or JS))
  • zostawiamy tę instrukcję w osobnej karcie, a w nowej odpalamy opcje wtyczki, zjeżdzamy na dół, powinien być tam poziomy formularz do uzupełnienia, w pierwsze pole wpisujemy http://toril.pl/
  • teraz trochę gimnastyki - w opcjach tej wtyczki trzeba wkleić kolejno JS i CSS z pierwszego posta w tym wątku, czyli gimnastykujemy trochę palce z zaznaczaniem tekstu i wklejamy do pozostałych dwóch pól
  • po uzupełnieniu klikamy w plusa najbardziej z lewej i wychodzimy z opcji

od teraz na toril.pl powinny być style dla wersji mobilnej :)

Moskier

  • Admin
  • Łupieżca Umysłu
  • *****
  • Posts: 386
  • Propsy: 1
  • spec. ds. PB
    • View Profile
Odp: Propozycja odsłony mobilnej do obecnej wersji gry
« Reply #4 on: March 13, 2018, 02:00:37 pm »
Wrzuć jeszcze screeny jak możesz :) Jak się ludziom spodoba to wrzucimy to do ustawień konta w grze

Eryzekiel

  • Gnoll
  • **
  • Posts: 10
  • Propsy: 3
    • View Profile
Odp: Propozycja odsłony mobilnej do obecnej wersji gry
« Reply #5 on: March 14, 2018, 10:52:57 pm »
Poszło jako aktualizacja pierwszego posta :)

Ref

  • Łupieżca Umysłu
  • *
  • Posts: 241
  • Propsy: 3
    • View Profile
  • ID: 822
  • Postać: Carret
  • Discord: Ref
Odp: Propozycja odsłony mobilnej do obecnej wersji gry
« Reply #6 on: March 15, 2018, 09:14:49 am »
wygląda super. To wymaga zwykłego emulatora, tak?
nie
zawód? Design wzorów obić w komunikacji miejskiej

Eryzekiel

  • Gnoll
  • **
  • Posts: 10
  • Propsy: 3
    • View Profile
Odp: Propozycja odsłony mobilnej do obecnej wersji gry
« Reply #7 on: March 16, 2018, 12:50:15 am »
Dzięki ponowne, tak, trzeba wrzucić kod tak jak opisałem w pierwszym poście i powinno śmigać :)

Dobrzy rzeczywiście byłby taki przełącznik w opcjach konta, tylko trzeba by jeszcze dodać nagłówek meta viewport, żeby nie migała wersja na komputery.

Hydra

  • Obserwator
  • Banshee
  • *****
  • Posts: 1213
  • Propsy: 23
    • View Profile
    • Pocztówki z daleka
  • ID: 89
  • Postać: Kyriakos Serafeim
  • Discord: Hydra
Re: Propozycja odsłony mobilnej do obecnej wersji gry
« Reply #8 on: January 16, 2019, 06:10:31 pm »
Dez, zrobisz upgrade kodu? po przenosinach i upgradzie gry do wyższej wersji PHP (szczegółów i tak nie rozumiem) nakładka przestała działać :)
[18:37] Pharan: Mógłbym mieć z Tobą dziecko, któremu wpajałbym same złe zasady, żeby potem słuchać, jak mu wszystko tłumaczysz

[13:22] Zet: przez ciebie mam odruch pawłowa już. Jak napiszę, że jest odpis i widzę, że coś napisałaś, to pierwsza myśl: jaki błąd popełniłem tym razem?

22:56] Melweddyn (2247): Po argumentacji Hydry każdy zamyka się w sobie.

Sru

  • Skryba
  • Goblin
  • *
  • Posts: 21
  • Propsy: 0
    • View Profile
  • ID: 1515
  • Postać: Zoë Meynadier
  • Discord: Sru
Re: Propozycja odsłony mobilnej do obecnej wersji gry
« Reply #9 on: January 17, 2019, 12:39:20 pm »
Używam Opery i opcja mobilna z powiadomieniami działa, tylko trzeba za każdym wejściem odblokować "niezabezpieczoną zawartość" :P