First topic message reminder :

Moje Łobuzy.

Wzięłam się za poprawę kodu, ponieważ wynika coraz więcej błędów dla graczy korzystających z Chrome'a.

To będą tylko kosmetyczne poprawy, ale gdybyście mieli jakieś dodatkowe inspiracje bądź prośby - to najlepszy czas na to.

Na pewno modyfikacji ulegną profile (oraz ich podglądy). Wrzuci się gdzieś też jakieś wyróżnienie w związku z grupami. Menu zostanie wrzucone na górę, bo doszły mnie słuchy, że był problem z przestawieniem się. Podkreślę też bardziej na głównej nowe posty, bo są dość niezauważalne. Te rzeczy zakodowałam.

Dodatkowo Hikaru Ren wspomniała, że kursor jest nieczytelny. Dajcie znać co o tym sądzicie, abym miała bieżące info, bo póki co nikt się nie wypowiedział w tej kwestii.

Tyle na chwilę obecną.
Czekam na wasze wytyczne.

Ikony pod subfora już są, podobnie udało mi się ogarnąć problem suwaka.

Jak chodzi o menu rozwijane oraz multikonta - zajmować się tym już będę od jutra. To trochę więcej pracy, jak się okazuje. Choć postaram się z tym rozprawić w miarę możliwości.

Za responsywność tematów w kompendium też zabiorę się jutro. Lub dzisiaj w nocy.

1. responsywność tematów w kompendium
   
2. nawigacja podręczna
   
3. multikonta
   
4. autor ostatniej wiadomości w liście tematów
   

Hej!!

Zauważyłam, że duże obrazki na chatboxie rozwalają system rozmowę swoją potęgą i mocą (dziękuję @Matsumoto Hiroshi za bycie modelem), więc przychodzę ze sugestią, aby dodać do CSS kodzik automatycznie zmieniający maksymalną szerokość obrazka:

Cała szerokość chatboxa (podgląd):

Kod:

#chatbox .msg img{max-width: 100%;}


3/4 szerokości chatboxa (podgląd):

Kod:

#chatbox .msg img{max-width: 75%;}


Połowa szerokości chatboxa (podgląd):

Kod:

#chatbox .msg img{max-width: 50%;}


To działa też na chatboxie w osobnym oknie. Jako że parametr jest procentowy, to się skaluje zgodnie z resztą elementów. Co prawda możemy zmieniać szerokość poprzez ustawienie parametru szerokości, np. [img(300px,auto)], ale jesteśmy leniwi i nie zawsze nam się chce wchodzić do tematu z edycją posta

Edit: tak, wiem teraz, kiedy wrzuci się link do obrazka, a nie obrazek w [img], to automatycznie daje max-height: 180px, więc można byłoby dla klarowności i spójności dać nadpisanie max-height: none!important; z pozostawieniem max-width wedle wybranego procentu szerokości.

Dzień dobry, to znowu ja  

Zauważyłam, że to powiadomienie o ciasteczkach, partnerach i innych tego typu, narzucone przez forumotion/forumpolish jest takie nieładne i kompletnie nie pasuje do stylu, jaki reprezentuje Haraedo. I w ogóle te solucje z ciasteczkami, coby nie łamać dyrektywy, które są tak rozwalone i tak nieumiejętnie zrobione z dużą ilością div, żeby uuu, ludzie tego nie modyfikowali przypadkiem, bo ble, powinny być karane.

Z nudów i z powodu zainstalowania Stylisha uznałam to za rzucony rękaw i podjęłam się akcji "nie wypalamy oczu w nocy":

Pierwotnie to tak wygląda (można kliknąć dla podglądu):



Po zmianach i wprowadzeniu nowego kodu wygląda tak (można kliknąć dla podglądu):



Kod:

Kod:

#sd-cmp {
--background-color-dark: var(--b2a)!important;
--text-color-dark: var(--f3)!important;
--font-family: prompt!important;
--title-color-dark: var(--f1)!important;
--border-color-dark: var(--o1)!important;
--main-color-dark: var(--f6)!important;
--font-family-title: "Roboto Condensed"!important;
--font-size-base: 12px!important;
}

#sd-cmp > div > div > div > div > div > div > div > div *
{
letter-spacing: 0.5px;
}

#sd-cmp > div > div > div > div > div > div > div > div > div:nth-of-type(1) > span
{
text-transform: uppercase;
letter-spacing: 5px;
}

#sd-cmp > div > div > div > div > div > div > div:nth-child(2) > div > button > span, #sd-cmp > div > div:nth-child(2) > div > div > div > button > span
{
letter-spacing: 1px;
text-transform: uppercase;
}

#sd-cmp > div > div > div > div > div
{
border: var(--o1);
}

Przetestowane na Opera GX, Brave, Vivaldi i Firefoxie. Wzięłam zmienne używane przez resztę CSS-a na forum, aby się ładnie dostosowywało.


Druga rzecz, jaką zauważyłam, to ikonka obserwowania tematu.

Kiedy nie obserwuję tematu, to ikonka jest przesunięta delikatnie w prawo:


Kiedy obserwuję temat, to ikonka jest na środeczku:


Nie wiem, czy to było zamierzone, ale tutaj też rzucam propozycję, co pozwoli na zachowanie ikony na środku i zmianę ikony wedle tego, czy temat jest obserwowany, czy jednak nie.

Kiedy nie obserwujemy tematu:


Kiedy obserwujemy temat:


W rozwiązaniu zmieniłam sposób pozycjonowania na flex, żeby się ładnie dostosowywało. Kod:

Kod:

.watch-me a:before
{
    margin-bottom: 0px;
    text-align: center;
    margin-left: 0px;
    width: 16px;
    font-size: 16px!important;
    align-content: center;
    font-family: 'cappuccicons';
}

.watch-me a[href$="?unwatch=topic"]:before, .watch-me a[href$="?unwatch=forum"]:before
{
    content:'\e908';
}

.watch-me a[href$="?watch=topic"]:before, .watch-me a[href$="?watch=forum"]:before
{
    content:'\e909';
}

.topic-actions-buttons > a, .topic-actions-buttons > span, .topic-actions-buttons > #addthis-toolbar, .opis-ikony > .watch-me, .opis-ikony > .watch-me > a:before {
    display: flex;
    margin: auto;
    width: 100%;
    align-content: center;
    justify-content: center;
    line-height: 100%;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
    padding: 0px!important;
}

.watch-me
{
    padding-top: 0px;
}

CSS bierze z parametru "href" ostatnie elementy i je porównuje, wybierając ikonę wedle tego, które wyrzuca prawdę.

Ok, uciekam. Proszę nie jeść.

EDIT:

Na szybko wracam, bo jeszcze jedna rzecz mnie zastanawia; czy to okienko z logowaniem powinno się wyświetlać, czy jednak niespecjalnie? Widzę w inspektorze, że jest display:none, ale - ze względu na to, iż parametr "display:block" jest zastosowany w stylu w html, nie w CSS, nie wchodzi:


Jeżeli to okienko nie jest potrzebne do szczęścia, to można je wyrzucić nadpisaniem !important, dorzucamy:

Kod:

#login_popup, #like_popup, #inactive_popup
{
    display:none!important;
}

JUŻ UCIEKAM

EDIT 2 (wip):

No, to ten, nudzi mi się, tak.

Proponuję zmianę awataru na stronie logowania zrobionej wg skryptu i kodu z Multi-step Login Form. Ten standardowy totalnie nie pasuje do stylistyki forum, it's time to change that  

Przed:



Po:




Zamieniamy ten kod:

Kod:

<span class="fa_login_avatar"><img src="https://2img.net/i/fa/invision/pp-blank-thumb.png"><img id="fa_avatar_real" src="https://2img.net/i/fa/invision/pp-blank-thumb.png"></span>


Na ten kod:

Kod:

<span class="fa_login_avatar"><img src="https://i.imgur.com/ZguNdDl.png"><img id="fa_avatar_real" src="https://i.imgur.com/ZguNdDl.png"></span>

Ten kod:

Kod:

/* create the profile rows based onto the accounts you logged into */
    createProfile : function(id, o) {
      var row = document.createElement('DIV');
      row.id = 'account_user_' + id;
      row.className = 'account_list_row';
      row.innerHTML = '<div class="account_list_inner"><img class="account_list_avatar" src="https://2img.net/i/fa/invision/pp-blank-thumb.png"/> <div class="account_list_username">' + o.username + '</div></div><a class="account_list_delete" title="skasuj z listy" href="javascript:fa_form_login.deleteProfile(\'' + id + '\');">X</a>';
      row.firstChild.onclick = function() {
        fa_form_login.toggleAccounts();
        document.getElementById('fa_login_username').value = $('.account_list_username', this).text();
        fa_form_login.next(this.parentNode.id.slice(13));
      };


Na ten kod:

Kod:

/* create the profile rows based onto the accounts you logged into */
    createProfile : function(id, o) {
      var row = document.createElement('DIV');
      row.id = 'account_user_' + id;
      row.className = 'account_list_row';
      row.innerHTML = '<div class="account_list_inner"><img class="account_list_avatar" src="https://i.imgur.com/ZguNdDl.png"/> <div class="account_list_username">' + o.username + '</div></div><a class="account_list_delete" title="skasuj z listy" href="javascript:fa_form_login.deleteProfile(\'' + id + '\');">X</a>';
      row.firstChild.onclick = function() {
        fa_form_login.toggleAccounts();
        document.getElementById('fa_login_username').value = $('.account_list_username', this).text();
        fa_form_login.next(this.parentNode.id.slice(13));
      };


Ten kod:

Kod:

// check if account row is created to get an avatar that's already loaded
        if (row) avatar.src = row.getElementsByTagName('IMG')[0].src;
        else {
          $.get(id ? '/ajax/index.php?f=m&user_id=' + id : '/profile?mode=viewprofile&u=' + username.value, function(d) {
            var ava = id ? $('.tooltip-content img', d)[0] : $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', d)[0];
            avatar.src = ava ? ava.src : 'https://2img.net/i/fa/invision/pp-blank-thumb.png';
            avatar.className = 'avatar_visible';
          });
        }

Na ten kod:

Kod:

// check if account row is created to get an avatar that's already loaded
        if (row) avatar.src = row.getElementsByTagName('IMG')[0].src;
        else {
          $.get(id ? '/ajax/index.php?f=m&user_id=' + id : '/profile?mode=viewprofile&u=' + username.value, function(d) {
            var ava = id ? $('.tooltip-content img', d)[0] : $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', d)[0];
            avatar.src = ava ? ava.src : 'https://i.imgur.com/ZguNdDl.png';
            avatar.className = 'avatar_visible';
          });
        }

Dodatkowo, aby nie dochodziło do rozciągania awatara i nie było niepotrzebnych marginesów, zmieniamy CSS na tej stronie (pod /* AVATAR AND USERNAME */ znajduje się deklaracja tej klasy):

Kod:

.fa_login_avatar img {height:156px; width:96px;margin-top:2px;margin-left:2px;}

Na:

Kod:

.fa_login_avatar img {height:147px;width:93px;margin-left:2px;margin-top:1px;}

Zmienamy z:

Kod:

.fa_login_avatar, #fa_avatar_real.avatar_visible {    display: block;
    width: 100px;
    height: 147px;
    overflow: hidden;
    position: relative;
    border: var(--o1);
    box-shadow: var(--sh);
    background: var(--b4);
    border-radius: 7px;}

Na:

Kod:

.fa_login_avatar, #fa_avatar_real.avatar_visible {    display: block;
    width: 93px;
    height: 147px;
    overflow: hidden;
    position: relative;
    border: var(--o1);
    box-shadow: var(--sh);
    background: var(--b4);
    border-radius: 7px;}

Dorzucamy:

Kod:

#login_step_1 > .fa_login_row {margin-left:-10px;}
#login_step_2 > .fa_login_row:nth-child(2) {margin-left: -20px;}

EDIT 3:

Za każdym razem, gdy ładowana jest strona, pojawiają się elementy, które ulegają następnie ukryciu (menu z odnośnikami). Można tę listę ukryć, aby ograniczyć ilość animacji. Z użyciem menu i tak zostaje nadpisany parametr display w tych elementach poprzez style="" po kliknięciu, więc nie ma potrzeby trzymania na pół sekundy widocznej listy, żeby potem została ukryta.

Kod:

Kod:

.lista1, .lista2
{
    display:none;
}

EDIT 4:

Zdecydowałam się w amoku kodowania nieco poddać poprawkom przycisk do dodawania multikonta i generalnie listę, żeby nie nachodziła na posty, gdy tych kont trochę się nazbiera. Z tego, co widziałam i co przetestowałam, to one nie stackują się w kolumnę. Można normalnie przeciągać, zmieniać kolejność itp.

Przed:






Po:






Kod (odpowiednie wartości wstawiamy/zamieniamy):

Kod:

.switcheroo__squircle
{
    width: auto;
}

.switcheroo[direction="horizontal"] .switcheroo__squircles
{
    flex-direction: column;
}

.lista1
{
    max-height: none;
    width: 100%;
    max-width: 134px;
}

EDIT 5:

Zauważyłam, że w liczbie głosów lajków i nielajków, gdy liczba będzie dwucyfrowa, dochodzi do nachodzenia na siebie tekstu i niemożności rozczytania, ile dokładnie głosów zostało oddanych, tak więc podrzucam kolejny kodzik.

Przed:


Po:


Kod (wartość najlepiej wstawić):

Kod:

.glosowanie .fa_like_div span
{
    text-wrap: nowrap;
}

@Umemiya Eiji Dziękuję bardzo!

Wezmę pod uwagę co mogę, ale jak wspominałam w ogłoszeniu - robiony jest nowy styl, poprawiony. Dlatego większość z tego będzie zwyczajnie nieaktualna, z części skryptów kompletnie rezygnujemy. Tym niemniej jeżeli coś się uda zastosować to na pewno ogarnę i dam znać, że to twoja robota.

edit: poprawiłam to, co nie wymaga wielkich zmian - czyli listy. Od razu lepiej!