Szybka aktualizacja #lurkerdesign

1. Usunąłem style poprawiające ikony powiadomień, gdyż wujek @Thanos zaimplmentował moje rozwiązanie na produkcji
2. Poprawiłem lekko wygląd paginacji, żeby nie trzeba było klikać w cyferki z lupą w ręku.

---

Nie wiesz co to Stylus i skąd go wziąć? Wszystkie informacje znajdziesz tutaj

Linki do szybkiej instalacji (po ich kliknięciu powinien wywołać się Stylus):
All in one - Wszystkie style jako jeden plik.

[NEW]

Paginacja - Zmieniony wygląd paginacji, na taką bardziej user-friendly.
Komentarze - Lekko zmienione boxy komentarzy.
Linki - zmiana boxów z linkami, na takie, które zejmują mniej miejsca. Nie trzeba nie wiadomo ile scrollować posta, żeby dostać się do komentarzy, jak linków w nim jest całkiem sporo.
Wyłączenie preloadera - Nazwa mówi sama za siebie, preloader jest po prostu nie widoczny.
Tło - Delikatny wzór w tle strony.
Edytor - Poprawki dotyczące edytora (na razie sam rozmiar ikon)
Filtry - Lekko przestylowana belka z filtrami, jak również poprawiony przycisk zmieniający widok.
Tooltipy - Błyskawiczne i rzucające się w oczy podpowiedzi pod przyciskami filtrów i belki górnego menu.
#lurker #design #css #stylus

Dzień dobry!

Dzisiejszy dzień zaczynam od aktualizacji #lurkerdesign czyli mojego repozytorium do Stylusa poprawiającego UI/UX na Lurkerze.

Osoby nie w temacie zachęcam do zapoznania się z poprzednim wpisem.

Co nowego?
1. Zmieniłem style belki edytora, tak by przyciski nie były oderwane od samego pola tekstowego.
2. Pole tekstowe edytora może od teraz być skalowane jedynie w pionie.
3. Dodałem tooltipy na tych przyciskach - Zapisz jako szkic oraz Pomoc w edytorze wpisów, oraz Czarnolistuj domenę w kontenerach z wstawionymi linkami do wpisu.
4. Zmieniłem ikonę przycisku Zapisz jako szkic, gdyż sam na początku nawet nie wiedziałem do czego służy... Wiadro z farbą sugerowało mi, że coś mogę sobie pokolorować
5. Kontenery z linkami we wpisach są od teraz mniejsze (pokazują sam tytuł jak i przycisk do czarnolistowania domeny), ale rozwijają się po najechaniu kursorem.
6. Wyłączyłem preloader - dla niektórych osób może być denerwujący
7. Zmieniłem ikonę przycisku czarnolistującego domenę - jak klikam [X], to w pierwszej kolejności myślę o tym, że po prostu zniknie mi ładny podgląd linku, dlatego nastąpiła podmiana na kłódkę.

Może macie jakieś sugestie dotyczące dalszych poprawek UI/UX? Zainspirowałem się kilkoma pomysłami z tagu #zglospomysl, który będę regularnie przeglądał, więc zachęcam do pisania własnych pod tym właśnie tagiem.

Nie wiesz co to Stylus i skąd go wziąć? Wszystkie informacje znajdziesz tutaj

Linki do szybkiej instalacji (po ich kliknięciu powinien wywołać się Stylus):
All in one - Wszystkie style jako jeden plik.

[NEW]

Linki - zmiana boxów z linkami, na takie, które zejmują mniej miejsca. Nie trzeba nie wiadomo ile scrollować posta, żeby dostać się do komentarzy, jak linków w nim jest całkiem sporo.

[NEW]

Wyłączenie preloadera - Nazwa mówi sama za siebie, preloader jest po prostu nie widoczny.
Tło - Delikatny wzór w tle strony.
Edytor - Poprawki dotyczące edytora (na razie sam rozmiar ikon)
Filtry - Lekko przestylowana belka z filtrami, jak również poprawiony przycisk zmieniający widok.
Ikony powiadomień - Kolorowe, animowane ikony dzwonka i koperty w chwili otrzymania nowego powiadomienia/wiadomości.
Tooltipy - Błyskawiczne i rzucające się w oczy podpowiedzi pod przyciskami filtrów i belki górnego menu.

Dzisiaj nie ma filmu, więc musicie zerknąć na zmiany sami. Pamiętajcie, że w każdej chwili te style możecie wyłączyć, gdyby coś wam mocno namieszało.

Zapraszam do testów i proszę o opinie
#lurker #design #css #stylus

Postanowiłem założyć autorski tag #lurkerdesign na którym będę wrzucał wszystkie aktualizacje i nowości dotyczące moich postępów podczas stylowania Lurkera w stylusie. I tak oto powstaje dla was pierwszy wpis ze wszystkimi szczegółami dotyczącymi tego co zrobiłem i jak możecie korzystać z moich styli

Co do tej pory zrobiłem:
1. Dodałem tooltipy pokazujące się pod przyciskami na górnej belce menu, oraz pod filtrami, tak żeby użytkownik otrzymywał natychmiastowy feedback nt. przycisku, który ma zamiar kliknąć. Standardowy atrybut

title

jest upierdliwy, ale jak widać się przydał.
2. Zachowując zgodność między tooltipami, a ikonami powiadomień (dzwonek i koperta) na górnej belce (jedno z drugim się gryzło), dokonałem zmian, które bardziej w mojej ocenie przykuwają uwagę i informują o oczekującej wiadomości lub powiadomieniu.
3. Poprawiłem widoczność przycisków na belce filtrów tak, żeby były bardziej wyraźne.
4. Zmieniłem zachowanie przycisku zmieniającego układ wpisów (Widok klasyczny, pełny i zwinięty) tak, by bardziej odwzorowywał aktywny układ.
5. Poprawiłem widoczność przycisków na belce edytora (wpisy, komentarze).
6. Dodałem delikatne tło na stronie, żeby nie wyglądało tak monotonnie. W mojej ocenie efekt nie jest bardzo agresywny, a wręcz urozmaica otoczenie

Starałem się, żeby zmiany były kompatybilne z wszystkimi motywami, więc w niektórych miejscach mogą występować drobne różnice w kolorach.

Jeżeli ktoś zechce skorzystać z moich poprawek, a nie wie jak, już wyjaśniam.
W pierwszej kolejności należy zainstalować dodatek Stylus do swojej przeglądarki:
Chrome
Firefox
Opera

Po instalacji dodatku, wystarczy, że klikniecie w jeden z linków poniżej. Dodatek powinien sam załapać, że otwarty link jest przeznaczony "dla niego" i zapytać, czy chcemy zainstalować styl.
Polecam zaznaczyć opcję automatycznych aktualizacji, przydzadzą się w przypadku wprowadzanych w przyszłości poprawek
Instalujemy styl i to wszystko, jak wyskoczyło okienko ze Stylusa, można śmiało je zamknąć.

Jeżeli macie jakieś sugestie odnośnie poprawek UI/UX, które powinienem rozważyć, jestem otwarty na propozycje. Chętni mogą również zrobić forka mojego repo i wprowadzać swoje zmiany

Linki do szybkiej instalacji (po ich kliknięciu powinien wywołać się Stylus):
All in one - Wszystkie style jako jeden plik.
Tło - Delikatny wzór w tle strony.
Edytor - Poprawki dotyczące edytora (na razie sam rozmiar ikon)
Filtry - Lekko przestylowana belka z filtrami, jak również poprawiony przycisk zmieniający widok.
Ikony powiadomień - Kolorowe, animowane ikony dzwonka i koperty w chwili otrzymania nowego powiadomienia/wiadomości.
Tooltipy - Błyskawiczne i rzucające się w oczy podpowiedzi pod przyciskami filtrów i belki górnego menu.
Uwaga!
Jeżeli zainstalujecie same tooltipy, będą się wam działy dziwne rzeczy z ikonami powiadomień. Jest to spowodowane tym, że w stylusie korzystam z tego samego pseudoselektora :before co standardowo pojawiająca się w tamtych miejscach kropka, dlatego jak ktoś zechce wybrać same tooltipy, zalecam jednocześnie doinstalować ikony powiadomień

Link do repo jest tutaj
Zboczenie zawodowe każe mi wszystko pisać po angielsku, więc zrozumcie
@Thanos Gdyby te kosmetyczne zmiany Ci się spodobały, korzystaj do woli Na pewno mam nadzieję, że spodobają się społeczności Lurkera
@dodajkomentarz Ty również będziesz pewnie zainsteresowany

Na koniec szybki rzut okiem na omawiane zmiany
https://streamable.com/a6eqnh
#lurker #design #css #stylus

Nudziło mi się i przez to, że belka z filtrami lekko szczypie mnie w oczy, postanowiłem ją sobie przerobić za pomocą wtyczki Stylus

W pierwszej kolejności lekko powiększyłem ikony i napisy, bo standardowe są tak małe, że aż nie wyraźne w mojej ocenie, jakby "rozmyte". Mając ograniczone możliwości i mało czasu, "pogrubiłem" je, żeby były lepiej widoczne. Na grupy filtrów nałożyłem delikatny cień, co by je lekko wyróżnić, oraz zaokrągliłem dla bardziej przyjaznego efektu.

Najważniejsza rzecz, której mi brakowało i uważam, że powinna zostać zaimplementowana, to tooltipy (takie w miarę normalne, nie sam tytuł na przycisku), dlatego na szybkiego ogarnąłem je sobie również w CSS Tooltipy wyświetlają się pod filtrami, jak również pod przyciskami na górnej belce.

W trakcie pisania tego wpisu zauważyłem jeszcze te ikonki w edytorze, lekkiego zooma dostały

Wrzuciłem sobie jeszcze proste tło, co by nie wyglądało tak "pusto", więc jak komuś się nie podoba, śmiało możecie je pominąć

Style znajdziecie tutaj
Zapomniałbym wspomnieć, że ogarniałem to na ciemnym motywie, teraz idę spać, więc nie bijcie jak coś się wam pochrzani na jasnym Trzeba będzie, to wprowadzę jutro poprawki

Apropo, @Thanos
Mały drobiazg, ale w źródle strony są dwa kontenery z id app Możesz rozważyć wprowadzenie tooltipów w podobnej formie, myślę, że byłoby to na pewno wygodnym rozwiązaniem dla nowych użytkowników, którzy od razu otrzymywaliby feedback na temat przycsków na stronie. Mi chwilę zajęło ogarnięcie co do czego jest (mimo systemowych tooltipów, te w końcu wymagają czasu i stabilności kursora, żeby się pojawić xD)

Dobranoc ludziska, kolorowych koszmarów
#lurker #css #stylus #dobranoc