Rozjeżdżanie się wpisu na mikroblogu

Odpowiedz Nowy wątek
2019-02-09 14:13
Moderator Delphi/Pascal

Rejestracja: 8 lat temu

Ostatnio: 1 minuta temu

Lokalizacja: Tuchów

1

Zakładam wątek na ten temat, dlatego że gdzieś jest problem i póki co nikt nie znalazł powodu takiego stanu rzeczy.

Ostatnio sam zauważyłem, że mój wpis jest nieprawidłowo wyświetlany, podczas gdy jest zwinięty – tekst paragrafów wyjeżdża poza prawą stronę obramowania. Po rozwinięciu wpisu układ wraca do normy.

Wczoraj do południa był z tym problem, a po południu u mnie już nie występował i do teraz w przeglądarce na PC wyświetla się prawidłowo. Natomiast dziś po ósmej rano @Hispano-Suiza napisał mi, że nadal jest problem:

Screenshot-2019-02-09-08-07-48-872-org-mozilla-firefox.png


edytowany 1x, ostatnio: furious programming, 2019-02-09 14:14
Zaraz, zaraz... limit 12k znaków to dalej mikroblog? :D - Marooned 2019-02-11 09:37
A limit 10k to jeszcze mikroblog, czy już makroblog? ;) - furious programming 2019-02-11 14:54

Pozostało 580 znaków

2019-02-11 10:50
Administrator

Rejestracja: 17 lat temu

Ostatnio: 4 godziny temu

Lokalizacja: Poznań

4

Ok, wygląda na to, że mam rozwiązanie. Sprawdzałem tylko na FF, ale wygląda dość prosto.
Jak już wspomniał @Adam Boduch, problem taki, że .microblog-text używa display: table; table-layout: fixed; by zawijać całą swoją zawartość, ale tabelka zawsze ma wysokość swojej zawartości. Zmiana na display: block pozwala ją skrócić, ale zabiera ten magiczny bajer zawijania na siłę.

Moim rozwiązaniem jest.. otoczenie .microblog-text wrapperem, który to będzie miał display: block (z urzędu) plus max-height potrzebne do schowania części i dania opcji Zobacz całość.

screenshot-20190211105042.png


Pozostało 580 znaków

2019-02-11 20:16

Rejestracja: 8 lat temu

Ostatnio: 1 dzień temu

0

problem takze wystepuje na komorkach

Pozostało 580 znaków

2019-03-30 21:08

Rejestracja: 5 lat temu

Ostatnio: 1 miesiąc temu

Lokalizacja: Warszawa

1

Podpinam się – @Marooned czy coś zostało zrobione (nie sprawdzałem nazw podpiętych klas w HTML-u)? U mnie, na najnowszym Firefoksie, blog się rozjeżdża. Wydaje się, że dodanie śródliniowego stylu display: inline; do każdego elementu <div class="media-body" rozwiązuje u mnie problem (nie wiem, czy ta klasa gdzieś indziej nie występuje). Poza tym chciałbym zapytać, jeśli ktoś wie – czemu właściwość width dla klasy .media-body jest ustawiona na 10000px (10 tysięcy)?


UPDATE: Też to, co wspomniałeś, @Marooned, w drugim poście: klasa .microblog-text, właściwość display – daje efekt. Ze wszystkich 44 możliwości zmiany wartości tej właściwości obsługiwanych przez narzędzia deweloperskie Firefoksa, zmiana wartości na grid lub inline-grid pozwala i zachować ukrywanie, i zmieścić zawartość w odpowiedniej szerokości (obecnie jest block i się rozjeżdża).


edytowany 3x, ostatnio: Silv, 2019-03-30 22:12

Pozostało 580 znaków

2019-04-01 12:17
Administrator

Rejestracja: 17 lat temu

Ostatnio: 4 godziny temu

Lokalizacja: Poznań

1

Przyznam, że poza moim "śledztwem" i napisaniem tego posta, nic więcej nie zadziałałem. Jeśli masz chęć, możesz przygotować PR na githubie.
Mam wrażenie, że moja propozycja to najmniej zmian oraz trzymanie się najprostszych stylów (bo nie wiem, jak ze wsparciem grid i inline-grid, nie miałem z nimi do czynienia).


Pozostało 580 znaków

2019-08-26 22:54

Rejestracja: 5 lat temu

Ostatnio: 1 miesiąc temu

Lokalizacja: Warszawa

Jak niektórym pewnie wiadomo, @MasterOf zrobił pewną poprawkę w temacie błędnego wyświetlania postów wpisów na mikroblogu, opisaną na mikroblogu tutaj (a tutaj pull request na GitHubie). Ponieważ pull request został już scalony, postanowiłem potestować zmiany z perspektywy użytkownika.

Przygotowałem sobie zawczasu, przed scaleniem pull requesta, 9 przypadków testowych (przygotowałem je na szybko; i tak mam już dość dużo na głowie; wolę skończyć "testy na szybko", niż w ogóle nie zacząć "testów naprawdę"). Linków do wpisów, które się rozjeżdżają, szukałem w tym wątku oraz na 50 pierwszych stronach mikrobloga.

Opiszę dla każdego przypadku, czy błędna sytuacja, którą dany przypadek obrazuje, została zmieniona poprawką @MasterOf, czy też nie. Przypadki będę dodawać po kolei, żeby się nie pogubić.

Konfiguracja środowiska testowego

  • Przeglądarka internetowa: Firefox 68 64-bit
  • System operacyjny: Fedora 30

Przypadek testowy nr 1


Przypadek testowy nr 2


Przypadek testowy nr 3


Przypadek testowy nr 4


Przypadek testowy nr 5


Przypadek testowy nr 6


Przypadek testowy nr 7

  • Adres wpisu: https://4programmers.net/Mikroblogi/View/41721

  • Adres, pod jakim wpis był wyświetlony: (ten sam, co adres wpisu)

  • Sposób wyświetlenia: tryb mobilny, sprawdzane szerokości ekranu: 716px i mniej

  • Jak sytuacja wyglądała przed poprawką:

    PS. Przy pierwszych dwóch zrzutach ekranu nie chodzi o to, że zawartość się wizualnie rozjeżdżała, tylko o to, że jest możliwość, że wychodziła (trudno mi to oszacować nie sprawdziwszy kodu). Zauważcie, że przy zmianie szerokości z 716px na 715px wyraz na został przeniesiony do nowej linii. Przy dalszym jej obniżaniu nic już nie zostało przeniesione, tylko cały tekst był wysuwany (systematycznie) poza prawą granicę wpisu.

    • Przy rozdzielczości 716px w poziomie:
      7-716px-before.png

    • Przy rozdzielczości 715px w poziomie:
      7-715px-before.png

    • Przy rozdzielczości 650px w poziomie:
      7-650px-before.png

  • Jak sytuacja wygląda po poprawce:

    • Przy rozdzielczości 716px w poziomie:
      7-716px-after.png

    • Przy rozdzielczości 715px w poziomie:
      7-715px-after.png

    • Przy rozdzielczości 650px w poziomie:
      7-650px-after.png

  • Czy ten przypadek naprawiony: TAK

Przypadek testowy nr 8

  • Adres wpisu: https://4programmers.net/Mikroblogi/View/41794#entry-41794

  • Adres, pod jakim wpis był wyświetlony: (ten sam, co adres wpisu)

  • Sposób wyświetlenia: tryb mobilny, sprawdzane szerokości ekranu: 1203px i mniej

  • Jak sytuacja wyglądała przed poprawką:

    Jak w przypadku nr 7 (wyżej): przy pierwszych dwóch zrzutach ekranu nie chodzi o to, że zawartość się wizualnie rozjeżdżała, tylko o to, że jest możliwość, że wychodziła (trudno mi to oszacować nie sprawdziwszy kodu). Zauważcie, że przy zmianie szerokości z 1203px na 1202px wyraz na został przeniesiony do nowej linii. Przy dalszym jej obniżaniu nic już nie zostało przeniesione, tylko cały tekst był wysuwany (systematycznie) poza prawą granicę wpisu.

    • Przy rozdzielczości 1203px w poziomie:
      8-1203px-before.png

    • Przy rozdzielczości 1202px w poziomie:
      8-1202px-before.png

    • Przy rozdzielczości 1000px w poziomie:
      8-1000px-before.png

  • Jak sytuacja wygląda po poprawce:

    • Przy rozdzielczości 1203px w poziomie:
      8-1203px-after.png

    • Przy rozdzielczości 1202px w poziomie:
      8-1202px-after.png

    • Przy rozdzielczości 1000px w poziomie:
      8-1000px-after.png

  • Czy ten przypadek naprawiony: TAK


Przypadek testowy nr 9 (ostatni)

  • Adres wpisu:

  • Adres, pod jakim wpis był wyświetlony: (ten sam, co adres wpisu)

  • Sposób wyświetlenia: tryb mobilny, sprawdzane szerokości ekranu: 9999px

  • Jak sytuacja wyglądała przed poprawką:

    Wpis rozjeżdżał się przy szerokości 9999px. Jednak, na oko, jest to szerokość wykraczająca poza maksymalną szerokość wpisu (nie sprawdzałem kodu), przez co wpis najprawdopodobniej zawsze rozjeżdżał się.

9-before.png

  • Jak sytuacja wygląda po poprawce:
    9-after.png

  • Czy ten przypadek naprawiony: TAK


Podsumowanie

Ile przypadków testowych przeszło? — 9/9 (czyli wszystkie).

Wszystkie więc sprawdzone sytuacje obecnie wyglądają poprawnie. Jednak, ponieważ testy robione przez 1 osobę są jedynie połowicznie dobre w moim odczuciu, toteż fajnie by było, jakby ktoś jeszcze sprawdził wszystkie te przypadki (nie musi wklejać swoich zrzutów ekranu ;) ).


edytowany 20x, ostatnio: Silv, 2019-08-27 20:23
Niech tylko teraz ktoś mi zarzuci, że to można było przetestować automatycznie. ;) - Silv 2019-08-26 23:30
Wołam pozostałe osoby potencjalnie zainteresowane – autorów wpisów, które sprawdzałem: @kmph, @Visual Code, @xxx_xx_x - Silv 2019-08-27 00:20
wow, łap plusika za włożony wkład w tego posta :) - Adam Boduch 2019-08-27 06:47

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0