Messages

1

Archiwum / Odp: Nabór na Bajarzy

« on: November 26, 2018, 09:43:04 PM »

Własnie wróciłem do wątku, żeby w drugiej edycji poprawić, ubiegłaś mnie :D

2

Archiwum / Odp: Nabór na Bajarzy

« on: November 26, 2018, 09:37:15 PM »

ID 2233

Niedoszły wilk morski, praktykujący szczur lądowy Dez zgłasza swoją kandydaturę na sprawowanie niepewnej pieczy nad Diabłem Morskim.

Chciałbym animować możliwie w ustalonych godzinach w weekendy, jeżeli rozwój fabularny będzie tego wymagał to mogę również prowadzić późnymi wieczorami w dni powszednie.

Przez kilka poważniejszych incydentów, których kodeks Czarnego Pete'a na pokładzie jego galery nie uznawał za wymagające interwencji, ale ziemia Zazesspuru już tak, cuma przybytku rozluźniła się. By nie porwać statku na wygnańcze wody kapitan robi coś, czego najbardziej żelazna ręka trzymająca swą załogę w końcu nie uniknie - szuka kompromisu. A wściekłą załogą na lądzie jest prawo i bezpieczeństwo obywateli. Oczywiście dobry kapitan wie, że kompromis musi robić przechył na jego burtę. Toteż prowadzi wstępne rozmowy z właścicielem niedalekiego sierocińca, aby poświęcić jedną noc w tygodniu, nie miesiącu...do tego dojdziemy. Poświęcić jedną noc od czasu do czasu na ocieplenie wizerunku przybytku pod korsarskimi żaglami, wprowadzając przyjazną atmosferę dla młodocianych, urządzić szanty, pouczyć fachu na sucho, zorganizować turniej w wiązaniu węzłów. Robić wszystko, by zapewnić ciągłość przepływu, stojąc w porcie. By statek dalej ciął wody, czarne od interesów.

Znajdzie się rola i dla rzezimieszka i dla tych, którzy chcą doświadczyć "życia na wodzie" wracając na noc do ciepłych domostw.

3

Kieszonkowy Wymiar Administracyjny / Odp: Toril 1.5 - propozycja zasad + wybór nowego miejsca!

« on: November 13, 2018, 01:53:41 PM »

Proszę Państwa, Suzail wygląda jak fajna alternatywa i coś świeżego, ja chciałbym zmienić głos.

4

Warsztat Gonda / Odp: Propozycja odsłony mobilnej do obecnej wersji gry

« 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.

5

Warsztat Gonda / Odp: Propozycja odsłony mobilnej do obecnej wersji gry

« on: March 14, 2018, 10:52:57 PM »

Poszło jako aktualizacja pierwszego posta :)

6

Warsztat Gonda / Odp: Propozycja odsłony mobilnej do obecnej wersji gry

« 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 :)

7

Warsztat Gonda / 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