Rozjeżdżanie się wpisu na mikroblogu

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

0
<div class="microblog-text" style="max-height: 300px;display: grid;">

Załatwia sprawę z perspektywy dev tools. Nie widzę też żeby psuło coś innego ale zakładam też takową możliwość :P

0

https://4programmers.net/Forum/1318110

Już kiedyś mieliśmy podobny problem. Stosujemy style zaproponowane przez @Marooned w w/w poście. Nie mam pomysłu jak to "ulepszyć".

U mnie na chrome jest ok.

0

Problem zauważyłem właśnie na Chrome (Android).

0

U mnie na klasycznej Operze jest w porządku – Firefox też poprawnie wyświetla mój wpis.


Edit: niestety nadal nie jest dobrze. Co prawda mój wpis wyświetla dobrze, ale niektóre inne nie. :/

0

Teraz to się nawet rozjeżdża na PC / Linux / Firefox:
Mój pierwszy post na mikro b...

(ale na głównej stronie)

0
vpiotr napisał(a):

Teraz to się nawet rozjeżdża na PC / Linux / Firefox:
Mój pierwszy post na mikro b...

(ale na głównej stronie)

Zamiast

.media-body, .media-left, .media-right {
    display: table-cell;
}

Załatwia sprawę dla FF i Chrome.

.media-body, .media-left, .media-right {
    display: contents;
}

Edit
Jednak nie bo psuje tabelkę z ogłoszeniami o pracę :-)

0

Podepnę się bo także mam problem z wpisami na mikro.
Przeglądarka: Chrome
Rozdzielczość:1366x768

screenshot-20190211100143.png

0

Ok, jak ktoś wie jak to rozwiązać to zapraszam :)

Problem pojawia się tylko wówczas gdy część wpisu jest ukryta. Po naciśnięciu "Zobacz całość" jest dobrze, prawda? Wszystko dlatego, że przy zwiniętym wpisie nadawany jest styl: display: block; a powinno być display: table aby zadziałało prawidłowe łamanie wpisu.

No, ale wtedy nie działa max-height: 300px ;)

0

Z tego co widzę, to problemem jest znacznik <code>, który ma white-space: pre a nie pre-wrap. Niestety, ponieważ nowy moduł kolorowania składni ma numerowanie linii, ustawienie pre-wrap ładnie zawija wiersze, ale rozsynchronizowuje (jest taki wyraz?) linie po prawej z numerami po lewej. Jeśli zrezygnować z numerowania linii (usunąć .line-numbers z <pre>), to wygląda na to, że było by ok.

Popatrzę jeszcze czy da się to naprawić bez wywalania numerowania.

0

U mnie

  • na prywatnym laptopie (matryca FHD, Firefox 65) się rozjeżdża, teksty wpisów na mikro zachodzą na panele po prawej
  • na pracowym laptopie / monitorze (w obu wariantach matryca FHD, Chrome 72) się rozjeżdża, teksty wpisów na mikro zachodzą na panele po prawej
  • w wersji mobile (matryca 720x1280, Chrome 72, Android) nie tylko rozjeżdża się jak w wersji desktop, dodatkowo rozpycha całą stronę, przez co ikony z prawej są przesunięte daleeeeko, o jakieś 1-2 ekrany telefonu, przy rozwijaniu np. powiadomień czy menu z linkami do Forum/Mikro etc. trzeba najpierw przescrollować ekran w prawo do ikony, potem z powrotem w lewo by zobaczyć gdzie co jest :D
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

0

problem takze wystepuje na komorkach

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).

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).

8

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 ;) ).

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