Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modyfikacja Layoutu - responsywne szablony HTML #1420

Open
4 of 11 tasks
interduo opened this issue Oct 9, 2018 · 43 comments
Open
4 of 11 tasks

Modyfikacja Layoutu - responsywne szablony HTML #1420

interduo opened this issue Oct 9, 2018 · 43 comments

Comments

@interduo
Copy link
Collaborator

interduo commented Oct 9, 2018 •
edited
Loading

Pomysły do akceptacji/odmowy / problemy do rozwiązania:

  • przy mniejszych szerokościach okna mogą chować się opisy pól (status, czas, opis....) a zostawać same ikonki z {tip} lub wyświetlanie pól nad sobą da to sporo wolnego miejsca (które się bardzo przyda bo patrz niżej) (wszystkie formularze)

  • super sprawą są również np w https://freshdesk.com/signup opisy w polach INPUT, pola te w ogóle są duże co poprawia mocno czytelność, w ogóle ten formularz wygląda na komórce również super,
    (wszystkie formularze)

  • największym problemem jest wielkość elementów interfejsu (czcionki, pola input buttony) np na moim telefonie mam taką samą rozdzielczość co na ekranie komputera (FullHD) - mogę zoomować ale to jest cholernie niewygodne,
    (wszystkie formularze)

  • okno nie może być mniejszone do szerokości 425px (Mobile M)

  • panele na monitorach 4K mogłyby się mieścić 3 na szerokość, (customerinfo,netdevinfo,nodeinfo) a nawet więcej na szerszych monitorach (widescreen)

  • przy zmniejszeniu okna edytor wizualny wychodzi poza ekran (formularze eventadd/eventedit)

  • pojawia się scroll przy menu :(

  • menu zabiera dużo miejsca na urządzeniach mobilnych, idealne byłoby takie chowane jak np na githubie ale (pływające w pierwszej linii)
    (np. https://moxy.studio/work/hellywood, https://pl.todoist.com ?)

  • zwinięte menu ma niewyśrodkowane ikonki,

  • zwinięte menu ma nieczytelne pozycje submenu (może je zwijać?)

  • pole warning/requied/error - obecnie pisane powinny być odróżnione kolorystycznie,
    proponuję: warning - pomarańczowy, requied(żółty), error(bez zmian), obecnie używane - mogłoby mieć taką ramkę jak we freshdesku
@interduo
Copy link
Collaborator Author

interduo commented Oct 9, 2018

O, opcja open issue w githubie generuje link z błędem.

Otwieram nowy temat bo PR jest tematycznie o czym innym.

Wracają do wspólnej, bardziej interaktywnej pracy - proponuję przerobić w ten sposób formularze customerinfo, customeradd, customeredit, nodeadd, nodeinfo, nodeedit. Oczywiście szablony customer{add,edit} i node{add,edit} zwinęlibyśmy do pojedynczych szablonów - żeby już na poziomie szablonów nie mieć duplikacji kodu. Co Ty na to?

  1. Zwinięcie szablonów {add,edit} do modify. Tak.
  2. Nad responsywnością musimy pogadać.

@interduo interduo mentioned this issue Oct 9, 2018
Closed
@interduo
Copy link
Collaborator Author

interduo commented Oct 9, 2018

Przy nodemodify od razu chyba warto uwzględnić wariant tego formularza dla urządzeń sieciowych?

Node i netdevices to inne tabele zawierają inne dane. Nie połączysz tego w jeden.

@chilek
Copy link
Owner

chilek commented Oct 9, 2018 •
edited
Loading

Node i netdevices to inne tabele zawierają inne dane. Nie połączysz tego w jeden.

Spora część jest wspólna - można zależnie od $layout.module warunkować widoczność części formularza lub ich niedostępność.

@chilek
Copy link
Owner

chilek commented Oct 9, 2018

Ale to teraz i tak nie jest takie istotne.

@interduo
Copy link
Collaborator Author

interduo commented Oct 9, 2018 •
edited
Loading

Co do responsywności weźmy najpierw na tapetę moduł event bo jako pierwszy został rozdłubany. OK?

@interduo
Copy link
Collaborator Author

interduo commented Oct 9, 2018

Testuję właśnie jak się responsywnuje na różnych urządzeniach.

@interduo
Copy link
Collaborator Author

interduo commented Oct 9, 2018 •
edited
Loading

[przeniesione do 1 posta]

@interduo
Copy link
Collaborator Author

interduo commented Oct 9, 2018

Przydałoby się zdefiniować tak rozmiar elementów by na każdym urządzeniu wyglądały tak samo - czy to na telewizorze 4K czy na komórce.

Znalazłem że w CSS można definiować rozmiary w "mm" ale nie wiem czy to jest dobra opcja.
https://stackoverflow.com/questions/21680629/getting-the-physical-screen-dimensions-dpi-pixel-density-in-chrome-on-androi#

@chilek
Copy link
Owner

chilek commented Oct 10, 2018

Znalazłem że w CSS można definiować rozmiary w "mm" ale nie wiem czy to jest dobra opcja.

W cm też można. Najlepsza opcja to definiowane w em.

@chilek
Copy link
Owner

chilek commented Oct 10, 2018

super sprawą są również np w https://freshdesk.com/signup opisy w polach INPUT, pola te w ogóle są duże co poprawia mocno czytelność, w ogóle ten formularz wygląda na komórce również super.

To już chyba najlepiej pójść w kierunku czegoś takiego jak powyżej, bo reszta propozycji doprowadziłaby do dość skomplikowanych layoutów, które nieliczni byliby w stanie modyfikować czy przygotowywać.

@chilek
Copy link
Owner

chilek commented Oct 10, 2018

Przy okazji zauważ, że tam nie ma całej tęczy kolorów dla ikon. To co jest obecnie moim zdaniem jest przedobrzone jeśli chodzi o zróżnicowanie kolorów ikon :)

@interduo
Copy link
Collaborator Author

Pamiętaj, że kolory można zdjąć np jakoś w CSS zrobić podklasę z zawartością color: black i !important. Pomyślę nad kolorami bardziej gdy zamienimy wszystkie IMG na fontawesome.

Przydałby się pełny projekt makiety UI od A do Z.

@interduo
Copy link
Collaborator Author

interduo commented Oct 10, 2018 •
edited
Loading

Co do kolorów - jest jeszcze kwestia przyzwyczajenia. Pamiętaj, że identyfikujesz elementy nie tylko po kształtach. Im więcej je odróżnia od siebie tym lepiej bo szybciej da się odszukać interesujacy kontent.
Jeszcze co do braku kolorów ikonek we freshdesku nie możesz podchodzić tak ogólnie do tego że kolory są złe bo nawet freshdesk ich nie używa. Zobacz że tam jest inny design. Ikonki są rysowane cienką linią bez wypełnień.

@interduo
Copy link
Collaborator Author

W cm też można. Najlepsza opcja to definiowane w em.

Czy to sprawi że elementy będą mieć rozmiar fizyczny identyczny na urz.mobilnych i identyczny na 4K ?

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

@interduo specjaliści piszą, że jednostka em jest najlepsza, żeby zachować skalowalność witryny przy powiększaniu i pomniejszaniu, bo opiera się na wielkości litery M.

@kyob
Copy link
Contributor

kyob commented Oct 11, 2018

Dokładnie tak tylko em jak chcesz skalować. Do pełni szczęscia dobrze będzie dodać:

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

@kyob: dzięki za wskazówkę. Dodałem coś takiego w header.html (fajnie, że teraz już wystarczy to zrobić tylko w jednym miejscu):
https://github.com/chilek/lms-plus/commit/f2c04ad6a40d706878c31d8fcf65313c05003eaa

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

Odnośnie: https://freshdesk.com/signup

Pięknie/ładnie, ale co dla innych kontrolek niż proste pola edycyjne?

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

Ogólne przemyślenie jest takie, że prawdopodobnie warto byłoby przejść z pozycjonowaniem pól formularza postaci dotychczasowej:
ikona-etykieta-pole
na:
ikona-etykieta
|
pole
---------------------------- (delikatny separator pól).

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

przy zmniejszeniu okna edytor wizualny wychodzi poza ekran (formularze eventadd/eventedit)

Temu przed chwilą raczej zaradziłem, ale mnie denerwuje jeszcze trochę jedna rzecz:
Gdy w danym formularzu wyłączymy edytor wizualny i zrobimy przesłanie do serwera to edytor wizualny wraca do stanu ustawionego przez phpui.default_editor! Nie powinno być tak, że phpui.default_editor ma tylko wpływ na stan początkowy edytora, gdy pierwszy raz wchodzimy do danego formularza?

@interduo
Copy link
Collaborator Author

interduo commented Oct 11, 2018 •
edited
Loading

ikona-etykieta
|
pole
---------------------------- (delikatny separator pól).

a może po prostu format jak w :
ikona [ etykieta_w_polu______ ]

po co ten separator?

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

cf246d9 - odnośnie przywracania stanu aktywności edytora wizualnego między przesłaniami formularza.

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

a może po prostu format jak w :
ikona [ etykieta_w_polu______ ]

A jak to by wyglądało dla selectów, checkboksów, radiosów, sliderów, etc.?
Proste formularze takie jak we wskazanej przez Ciebie aplikacji można tak robić, ale jednak to chyba nie jest uniwersalne rozwiązanie.

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

pojawia się scroll przy menu :(

Z tego nie warto robić problemu, bo scroll przydaje się jak dużo pozycji jest rozwiniętych.
Nie rób proszę problemu z czegoś co nie jest do zmiany. Równie dobrze mógłbyś napisać, że powinno po prostu działać idealnie, a to jest mało techniczne podejście 😆

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

menu zabiera dużo miejsca na urządzeniach mobilnych, idealne byłoby takie chowane jak np na githubie ale (pływające w pierwszej linii)

To już praktycznie mamy - wystarczy dla szerokości powiedzmy poniżej 900px bezwzględnie chować przy ładowaniu strony. Co prawda obecny przycisk pokaż/schowaj jest malutki - może lepiej byłoby, żeby menu było jednak widoczne cały czas z lewej tylko przy małej szerokości byłoby prawie schowane (tzn. byłby fragment widoczny, ale dopiero po kliknięciu fragmentu by wyjeżdżała całość)? Ewentualnie pasek z ikonkami byłby widoczny?

@interduo
Copy link
Collaborator Author

Z tego nie warto robić problemu, bo scroll przydaje się jak dużo pozycji jest rozwiniętych.
Nie rób proszę problemu z czegoś co nie jest do zmiany. Równie dobrze mógłbyś napisać, że powinno po prostu działać idealnie, a to jest mało techniczne podejście laughing

Nie zauważyłeś widzę istoty problemu. Pojawiający się scroll zmniejsza miejsce na content którego na urządzeniach mobilnych jest mało.

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

Nie zauważyłeś widzę istoty problemu. Pojawiający się scroll zmniejsza miejsce na content którego na urządzeniach mobilnych jest mało.

Ależ zauważyłem - dlaczego zakładasz, że czegoś nie zauważam - ja zawsze dostrzegam wszystko z wyprzedzeniem i tu również to zauważyłem, a Ty akurat pewnych rzeczy nie zauważyłeś 🤣

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

Gdy masz długie menu w pionie to nie dasz rady inaczej zrobić jego przewijania niż poprzez suwak. No chyba, że suwak mógłby być ukryty, a całość byś ciąganiem palcem w menu przesuwał - nie wiem czy takie coś jest możliwe, żeby ukryć suwak i zachować możliwość przewijania.

@interduo
Copy link
Collaborator Author

Ależ zauważyłem - dlaczego zakładasz, że czegoś nie zauważam - ja zawsze dostrzegam wszystko z wyprzedzeniem i tu również to zauważyłem, a Ty akurat pewnych rzeczy nie zauważyłeś rofl

Ale może nie wszystkie zauważasz - dlatego wolę się upewnić. A Ty dlaczego zakładasz że pewnych rzeczy nie zauważyłem?:-)

@chilek
Copy link
Owner

chilek commented Oct 11, 2018 •
edited
Loading

A zauważyłeś ikonkę 🤣, bo chyba nie? Z doświadczenia to widzę.

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

Odnośnie ukrywania scrollbara i zachowania możliwości scrollowania myszką lub palcem:
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll

@chilek
Copy link
Owner

chilek commented Oct 11, 2018

Szkoda, że nie możemy silnika webkit wymagać 😢

@interduo
Copy link
Collaborator Author

A zauważyłeś ikonkę rofl, bo chyba nie?

Zauważyłem, tak się ogólnikowo droczę ;]

chilek added a commit that referenced this issue Oct 11, 2018
@chilek
improvement: hide vertical scrollbar in menu panel with preserve scro…
129a98c 
…lling capability (LMS #1420)
@chilek
Copy link
Owner

chilek commented Oct 11, 2018

Rzuć okiem teraz po powyższej zmianie - suwak menu schowany a przesuwanie zachowane - testuj ;-)

@interduo
Copy link
Collaborator Author

To już praktycznie mamy - wystarczy dla szerokości powiedzmy poniżej 900px bezwzględnie chować przy ładowaniu strony. Co prawda obecny przycisk pokaż/schowaj jest malutki - może lepiej byłoby, żeby menu było jednak widoczne cały czas z lewej tylko przy małej szerokości byłoby prawie schowane (tzn. byłby fragment widoczny, ale dopiero po kliknięciu fragmentu by wyjeżdżała całość)? Ewentualnie pasek z ikonkami byłby widoczny?

Poprzeglądałem różne strony. U nas na stronie banku BS jest fajne zachowanie.

  • na stałe pasek menu na górze pływający z przyciskiem rozwijającym menu
    (zarówno na desktopie i na urządzeniach mobilnych to działa fajnie)
  • menu rozsuwane jak w LMS z boku,
  • jest kilka pozycji stałych np. pozycja wyloguj, która jest osadzona zawsze na dole menu (scrollują się w tym wypadku tylko pozostałe pozycje menu)

chilek added a commit that referenced this issue Oct 11, 2018
@chilek
improvement: hide vertical scrollbar in menu panel with preserve scro…
dcec875 
…lling capability (LMS #1420)
chilek added a commit that referenced this issue Oct 11, 2018
@chilek
improvement: hide vertical scrollbar in menu panel with preserve scro…
5375673 
…lling capability (LMS #1420) - use dom properties directly as jquery return false results on firefox
@chilek
Copy link
Owner

chilek commented Oct 11, 2018

Jeszcze poszły poprawki suwaka pod kątem Firefox - niestety nie można korzystać z funkcji jQuery przy takich manipulacjach - trzeba bezpośrednio z właściwości DOM, żeby margin-right ustawić na ujemną wartość szerokości suwaka pionowego (tym samym go ukryć).

chilek added a commit that referenced this issue Oct 11, 2018
@chilek
improvement: partly auto hide left menu panel on viewport width less …
26b00bb 
…than 900px (LMS #1420)
@chilek
Copy link
Owner

chilek commented Oct 11, 2018

menu zabiera dużo miejsca na urządzeniach mobilnych, idealne byłoby takie chowane jak np na githubie ale (pływające w pierwszej linii)

Ostatni commit przy szerokości przeglądarki <= 900 px powoduje, że menu częściowo się chowa - częściowo, dzięki czemu nadal można dość szybko nawigować - wystarczy wjechanie w obszaru menu myszką lub posunięcie palcem.

chilek added a commit that referenced this issue Oct 11, 2018
@chilek
improvement: partly auto hide left menu panel on viewport width less …
467b11b 
…than 900px (LMS #1420) - clear pending animations' queue
chilek added a commit that referenced this issue Oct 11, 2018
@chilek
improvement: partly auto hide left menu panel on viewport width less …
6e1c55e 
…than 900px (LMS #1420) - clear pending animations' queue
chilek added a commit that referenced this issue Oct 11, 2018
@chilek
improvement: partly auto hide left menu panel on viewport width less …
69bcc2e 
…than 900px (LMS #1420) - clear pending animations' queue
@chilek
Copy link
Owner

chilek commented Oct 11, 2018

panele na monitorach 4K mogłyby się mieścić 3 na szerokość, (customerinfo,netdevinfo,nodeinfo)

Pewnie przy okazji przerabiania tych formularzy na responsywne można to będzie uwględnić. Z drugiej strony nie ma też sensu za wszelką cenę robić więcej niż panele - przy karcie/edycji klienta to może być warte rozważenia, ale już przy urządzeniu sieciowym - niekoniecznie - w końcu jak masz szeroki ekran to i zwykle jest on wysoki :)

@interduo
Copy link
Collaborator Author

interduo commented Oct 11, 2018 •
edited
Loading

w końcu jak masz szeroki ekran to i zwykle jest on wysoki :)

To nie jest prawda. Nadchodzi era widescreenów. Zobaczysz ... szczgólnie w miejscach pracy będą one użyteczne tam gdzie obecnie ma się dwa/trzy monitory.

@interduo
Copy link
Collaborator Author

interduo commented Feb 7, 2020

W któryś (z ostatnich?) zmian ktoś zmienił kolor stanu komputera.

Dawniej zielony był online teraz jest to zólty. Czemu tak?;) IMO zielony bardziej pasował do online.

@interduo
Copy link
Collaborator Author

interduo commented Feb 7, 2020 •
edited
Loading

Dzięki za zamianę przywrócenie koloru aktywnego komputera.
Jeszcze jest to samo w przełączniku:
image

Też proponuje zastosować zielony/czerwony kolor zamiast obu "żółtych" i różniących się tylko pozycją prawy lewy.

@chilek
Copy link
Owner

chilek commented Jul 31, 2020

Sporo zmian pod kątem responsywności znajduje się w obecnej gałęzi master.

@interduo
Copy link
Collaborator Author

Myślę, że dobrym kierunkiem też jest zastąpienie tipów i labeli placeholderami w/przy polach typu INPUT hurtem wszędzie. Znacznie uprościł by się interfejs

@DomiiBunn DomiiBunn mentioned this issue Jun 30, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kyob @chilek @interduo