lms
lms copied to clipboard
chilek
Modyfikacja Layoutu - responsywne szablony HTML
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)
-
[x] 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)
-
[x] przy zmniejszeniu okna edytor wizualny wychodzi poza ekran (formularze eventadd/eventedit)
-
[x] pojawia się scroll przy menu :(
-
[x] 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
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?
- Zwinięcie szablonów {add,edit} do modify. Tak.
- Nad responsywnością musimy pogadać.
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.
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ść.
Co do responsywności weźmy najpierw na tapetę moduł event bo jako pierwszy został rozdłubany. OK?
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#
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.
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ć.
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 :)
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.
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ń.
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 ?
@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.
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">
@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
Odnośnie: https://freshdesk.com/signup
Pięknie/ładnie, ale co dla innych kontrolek niż proste pola edycyjne?
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).
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?
ikona-etykieta | pole ---------------------------- (delikatny separator pól).
a może po prostu format jak w : ikona [ etykieta_w_polu______ ]
po co ten separator?
cf246d996 - odnośnie przywracania stanu aktywności edytora wizualnego między przesłaniami formularza.
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.
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 :laughing:
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?
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.
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ś :rofl:
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.
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?:-)