Rozjeżdżanie się wpisu na mikroblogu

Odpowiedz Nowy wątek
2019-02-09 14:13
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
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
0

problem takze wystepuje na komorkach

Pozostało 580 znaków

2019-03-30 21:08
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
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

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

  • Adres wpisu: No i kolejny commit w #mon (...

  • Adres, pod jakim wpis był wyświetlony: Mikroblogi (obecnie: Mikroblogi, choć nie wiem dokładnie, jak to się stało; tylko 1 wpis został dodany od momentu zarejestrowania przeze mnie tamtego, a jednak wpis @kmph przesunął się o 2 wpisy)

  • Sposób wyświetlenia: okno zmaksymalizowane przy rozdzielczości 1366x768

  • Jak sytuacja wyglądała przed poprawką:
    3-before.png

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

  • Czy ten przypadek naprawiony: TAK


Przypadek testowy nr 4

  • Adres wpisu: Dziś nowy wpis na temat dost...

  • Adres, pod jakim wpis był wyświetlony: Mikroblogi (obecnie: Mikroblogi)

  • Sposób wyświetlenia: okno zmaksymalizowane przy rozdzielczości 1366x768

  • Jak sytuacja wyglądała przed poprawką:
    4-before.png

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

  • Czy ten przypadek naprawiony: TAK


Przypadek testowy nr 5

  • Adres wpisu: Chwilowo pracuję nad aplikac...

  • Adres, pod jakim wpis był wyświetlony: Mikroblogi (obecnie Mikroblogi)

  • Sposób wyświetlenia: okno zmaksymalizowane przy rozdzielczości 1366x768

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

    • Zawartość wpisu
      5-content-before.png

    • Komentarze
      5-comments-before.png

  • Jak sytuacja wygląda po poprawce:

    • Zawartość wpisu
      5-content-after.png

    • Komentarze
      5-comments-after.png

  • Czy ten przypadek naprawiony: TAK


Przypadek testowy nr 6

  • Adres wpisu: 33.9899317,-118.475652599999...

  • Adres, pod jakim wpis był wyświetlony: Mikroblogi (obecnie: Mikroblogi)

  • Sposób wyświetlenia: okno zmaksymalizowane przy rozdzielczości 1366x768

  • Jak sytuacja wyglądała przed poprawką:
    6-before.png

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

  • Czy ten przypadek naprawiony: TAK


Przypadek testowy nr 7

  • Adres wpisu: Dawno temu umieściłem wpis n...

  • 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: Mój pierwszy post na mikro b...

  • 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
Liczba odpowiedzi na stronę

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