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.

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

Modyfikacja Layoutu - responsywne szablony HTML #1420

Open
interduo opened this issue Oct 9, 2018 · 41 comments
Open

Modyfikacja Layoutu - responsywne szablony HTML #1420

interduo opened this issue Oct 9, 2018 · 41 comments

Comments

@interduo
Copy link
Contributor

@interduo interduo commented Oct 9, 2018

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

This comment has been minimized.

Copy link
Contributor Author

@interduo 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

This comment has been minimized.

Copy link
Contributor Author

@interduo 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

This comment has been minimized.

Copy link
Collaborator

@chilek chilek commented Oct 9, 2018

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

This comment has been minimized.

Copy link
Collaborator

@chilek chilek commented Oct 9, 2018

Ale to teraz i tak nie jest takie istotne.

@interduo

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Oct 9, 2018

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

@interduo

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Oct 9, 2018

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

@interduo

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Oct 9, 2018

[przeniesione do 1 posta]

@interduo

This comment has been minimized.

Copy link
Contributor Author

@interduo 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

This comment has been minimized.

Copy link
Collaborator

@chilek 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

This comment has been minimized.

Copy link
Collaborator

@chilek 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

This comment has been minimized.

Copy link
Collaborator

@chilek 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

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Oct 10, 2018

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

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Oct 10, 2018

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

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Oct 10, 2018

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

This comment has been minimized.

Copy link
Collaborator

@chilek 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

This comment has been minimized.

Copy link
Contributor

@kyob 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

This comment has been minimized.

Copy link
Collaborator

@chilek 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):
chilek/lms-plus@f2c04ad

@chilek

This comment has been minimized.

Copy link
Collaborator

@chilek chilek commented Oct 11, 2018

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

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

@chilek

This comment has been minimized.

Copy link
Collaborator

@chilek 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

This comment has been minimized.

Copy link
Collaborator

@chilek 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

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Oct 11, 2018

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

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

po co ten separator?

@chilek

This comment has been minimized.

Copy link
Collaborator

@chilek chilek commented Oct 11, 2018

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

@chilek

This comment has been minimized.

Copy link
Collaborator

@chilek 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

This comment has been minimized.

Copy link
Collaborator

@chilek 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

This comment has been minimized.

Copy link
Collaborator

@chilek 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

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Oct 11, 2018

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

This comment has been minimized.

Copy link
Collaborator

@chilek 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

This comment has been minimized.

Copy link
Collaborator

@chilek 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

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Oct 11, 2018

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

This comment has been minimized.

Copy link
Collaborator

@chilek chilek commented Oct 11, 2018

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

@chilek

This comment has been minimized.

Copy link
Collaborator

@chilek chilek commented Oct 11, 2018

@chilek

This comment has been minimized.

Copy link
Collaborator

@chilek chilek commented Oct 11, 2018

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

@interduo

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Oct 11, 2018

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
…lling capability (LMS #1420)
@chilek

This comment has been minimized.

Copy link
Collaborator

@chilek chilek commented Oct 11, 2018

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

@interduo

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Oct 11, 2018

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
…lling capability (LMS #1420)
chilek added a commit that referenced this issue Oct 11, 2018
…lling capability (LMS #1420) - use dom properties directly as jquery return false results on firefox
@chilek

This comment has been minimized.

Copy link
Collaborator

@chilek 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
…than 900px (LMS #1420)
@chilek

This comment has been minimized.

Copy link
Collaborator

@chilek 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
…than 900px (LMS #1420) - clear pending animations' queue
chilek added a commit that referenced this issue Oct 11, 2018
…than 900px (LMS #1420) - clear pending animations' queue
chilek added a commit that referenced this issue Oct 11, 2018
…than 900px (LMS #1420) - clear pending animations' queue
@chilek

This comment has been minimized.

Copy link
Collaborator

@chilek 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

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Oct 11, 2018

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

This comment has been minimized.

Copy link
Contributor Author

@interduo 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

This comment has been minimized.

Copy link
Contributor Author

@interduo interduo commented Feb 7, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.