Odświeżony wygląd wątku oraz refaktoryzacja kodu

Przyszedł czas na pozbycie się starego kodu JS z widoku danego wątku. Zmiany graficzne raczej kosmetyczne, bardziej ujednolicenie grafiki. Dodatkowo:

• szybka odpowiedź jako domyślna forma odpowiedzi
• szybka edycja zamiast normalnej edycji, przy zachowaniu obecnej funkcjonalności
• ... jeżeli macie jakieś propozycje które mogą trafić na listę TODO, to piszcie w tym wątku

Wersja desktop:

Mobile:

Pamiętaj, że obecnie szybka edycja nie umożliwia wszystkiego jak zmiana tematu, tagów czy załączników.

Może przy okazji tych zmian zmienić blokadę edycji pierwszego postu dla autorów? Obecnie po pewnym czasie albo gdy pojawią się odpowiedzi, edycja im znika. To jest ok, ale dałbym im możliwość zmiany tematu, bo ostatnio zwróciłem uwagę by ktoś poprawił tytuł, a okazało się, że nie ma do tego prawa.

Poza tym, to chyba nie ma większych zmian patrząc na Twój zrzut.

To pewnie byłoby powiązane z tym zadaniem: https://github.com/adam-boduch/coyote/issues/485

Minęło sporo czasu od momentu gdy zabrałem się za to zadanie. Nie zapomniałem o nim, zbliżam się wielkimi krokami do końca. Nadal są jakieś niedociągnięcia, ale postęp prac można zobaczyć pod adresem https://4programmers.dev/Forum

Na szybko kilka punktów rzucających się w oczy

1. stara ikonka jest czystsza, nowa wygląda jak źle zeskalowana
2. obecnie treść postu ma ciut ciemniejsze tło i linię rozdzielającą od daty oraz IP i UserAgenta, w nowym wszystko się zlewa na białym polu
3. moim zdaniem niepotrzebnie duże pionowe paddingi wydłużające całą stronę
4. w starej wersji info pod avatarem jest responsywne i robi się dwulinijkowe, w nowej jest kaszana
5. brak placeholdera oraz bardzo wąskie pole - to już przy stopce, nie ma co oszczędzać, 2x wyższe przynajmniej albo powiększanie w pionie onFocus

• powiększyłem ikonkę
• zmniejszyłem paddingi
• dodałem responsywność do informacji o użytkowniku
• dodałem placeholdera oraz powiększenie obszaru textarea
• dla testu dodałem "nagłówek" postu (data, nazwa użytkownika) ciemniejszym tłem co efekty widać poniżej:

Ufff, prawie skończone. Do zrobienia pozostały mi jeszcze ankiety oraz wyświetlanie ikony zalogowanego użytkownika. Można więc już testować i zgłaszać błędy. Zmian w kodzie było naprawdę dużo toteż spodziewam się sporo bugów. Przepisany został cały front end do edycji i publikacji postów, komentarzy oraz ich wyświetlania. Do tego zmiany w samym kodzie SCSS oraz backendzie.

Podaje URL do wersji testowej: https://4programmers.dev/Forum

.card {
    margin-bottom: 18px;
}

Myślę, że 8px by styknęło.

Obecnie przyciski pod postem pokazują, kiedy są aktywne (np. podczas pisania komentarza). W nowej wersji są bardzo statyczne.

Bardzo podoba mi się tamtejszy prządek:

Moglibyśmy go przenieść tutaj.

@Marooned: ten styl należy do Bootstrapa. Jest używany we wszystkich elementach serwisu (kategorie, oferty pracy, mikroblogu) i chciałbym zachować tutaj spójność.

Co do przycisków: dodałem zmianę koloru ikony gdy komentujemy lub edytujemy post, również z zachowaniem spójności chociażbym z mikroblogami.

Jak klikam " Odpowiedz i to nie jest ostatni post na stronie to nie działa

W konsoli jest błąd:

vue.min.js:6 TypeError: Cannot read property 'name' of null
    at a.reply (forum-0a11a3281af8dab5380a.js:1)
    at He (vue.min.js:6)
    at a.n (vue.min.js:6)
    at He (vue.min.js:6)
    at a.e.$emit (vue.min.js:6)
    at click (forum-0a11a3281af8dab5380a.js:1)
    at He (vue.min.js:6)
    at HTMLButtonElement.n (vue.min.js:6)
    at HTMLButtonElement.Yr.o._wrapper (vue.min.js:6)

Przy uzupełnianiu tagów, po wpisaniu każdego znaku pojawia się komunikat Server Error, w konsoli komunikaty o nieobsłużonym 500 w promise

Bożesz, jak ja nie lubię słowa odświeżony.To słowo w kontekście UX kompletnie niczego nie znaczy. Znaczy ewentualnie coś w kontekście designu: a... pozmienialiśmy coś znowu, żeby było inaczej, bo trzeba ciągle robić, żeby było inaczej, bo wszyscy inni też tak robią.

@szarotka: @superdurszlak dzięki za zgłoszenia. Poprawione.

Sugerowałbym zmianę nazwy ikonki do udostępniania bo jest wycinana przez adblockery

Hmm, sprawdziłem na uBlocku i ikonka wyświetla się normalnie. Jesteś pewien że to kwestia ad blockera? Może masz jakieś niestandardowe reguły?

Adam Boduch napisał(a):

Hmm, sprawdziłem na uBlocku i ikonka wyświetla się normalnie. Jesteś pewien że to kwestia ad blockera? Może masz jakieś niestandardowe reguły?

Wygląda na jakiś problem z cachem, bo teraz działa. Dziwne jest to, że jak wyłączałem AdBlocka i Ghostery to się pojawiała :D

mały rozjazd wyświetlania punktów na pasku

Poszło wdrożenie, w sumie ponad 160 commitów. Coś czuje, że ten wątek wkrótce ożyje ;)

Umm, przechodząc na https://4programmers.dev/Forum/All przechodząc w barze z z ostatni post na inną opcję nie ma podświetlenia wciśniętej opcji na czarno, dopiero za drugim przejściem jest, co jeden klik albo podświetla albo nie, sorry jeśli to niezrozumiale napisałem, ale jak przeklikacie, to zauważycie o co chodzi :D

Ożywiam :P

Po odświeżeniu, gdy zaglądam do dowolnego wątku posty ładują się niemiłosiernie długo - przez dobre 3-10s, zależnie od sytuacji. Przy czym w konsoli nie widzę, aby to żądania tyle czasu zjadały, za to widzę że niektóre wywołania funkcji JS trwają dość długo.

I chyba footer powinien się trzymać dołu

Kolejne zgłoszenie :) dodałem post w tym wątku, na liście wątków widnieje jako ostatni post:

Natomiast wyświetlając ten wątek z jakiegoś powodu nie widzę mojego postu, nie ma też powiadomienia o skasowaniu - ot, zniknął :D

Potwierdzam problemy z widocznością nowych postów

Dostałem maila o nowym poście, na liście wątków widać, że jest nowy post z północy, w widoku wątku go nie ma (wchodziłem parokrotnie)

Lewa kolumna ciasno
Prawa kolumna ciasno, masakruje oferty pracy (ucina tytuły ogłoszeń) i nazwy tematów na forum

A w main taka przestrzeń wolna z małym fontem, że leci 137 znaków w linii

echo "sytuacji. Przy czym w konsoli nie widzę, aby to żądania tyle czasu zjadały, za to widzę że niektóre wywołania funkcji JS trwają" | wc -c
     137

Gdy wc -c daje ponad 120 znaków w linii to się źle czyta tak sformatowany telst

Ok, z sygnaturkami to rzeczywiście bug, który został naprawiony.

Natomiast jeżeli chodzi o zniknięcie postów, to przyznam, że też mi się to przytrafiło. Przestraszyłem się, zacząłem szukać przyczyny i wówczas się pojawiło. Cache z cloudflare?

@superdurszlak u mnie posty renderują się jak burza. Sprawdziłem również na Firefox. Czy to występuje w każdym wątku? Sprawdziłem profilerem i jedynie Prism (biblioteka kolorowania składni) dość sporo czasu zabiera.

@BraVolt: jeżeli chodzi o prawą kolumnę to nic tu nie było ruszane. Jeżeli chodzi o kolorowanie składni oraz suwak na dole, to tez dawno zostało to wprowadzone, na wniosek użytkowników (aby nie łamać długich linii kodu). Co do lewej kolumny z avatarem, to tam przydałoby się dodawać ... na końcu jeżeli szerokość ekranu jest zbyt wąska a tekst się nie mieści.

Mi na FF działa szybko, ale te niewidzialne posty są problematyczne. Odświeżanie bez cache nie pomaga.

.

Zepsuł mi się post wyżej, nie mogę edytować (edit nr 4...)

127.0.0.1 Mozilla/5.0 (Windows NT 420.0; WinServerKernel128; x128; rv:81.0) Gecko/20100101 Firefox/1337.0

a po co to komu?

edit

Post po dodaniu dodaje się na aktualnej stronie (wizualnie) zamiast przenoszenia na ostatnią - tak powinno być?

Oraz: tutaj nie brakuje przypadkiem przycisku do usuwania posta?

edit2:

Usunięcie załącznika usuwa wszystkie :o

edit3.

Z jakiegoś powodu świeżo dodany komentarz ma "55 sekund temu"

Czas na PC zgadza mi się z https://time.is/pl/

edit4...
Przy próbie edycji posta dostałem

Między ostatnim postem w wątku a polem szybkiej odpowiedzi pojawiło się jakieś dziwne coś:

Do tego zbędny pasek narzędziowy pod usuniętymi postami: