Przesunięcie menu na prawą stronę w wersji mobilnej

1

Witam,

Złapałem się na tym, że jak na telefonie przeglądam forum i chce przejść na mikroblogi to po kliknięciu menu mam:

screenshot-20180308125759.png

Strasznie to niewygodne, ze klikam z prawej, a menu dostaje z lewej i jeszcze jest to tak blisko siebie, że mam problem z precyzyjnym tapnięciem na odpowiedni link...
Może to wina moich paluchów, ale wydaje mi się, że lepiej by było jakby w mobilnej wersji menu pojawialo się po prawej stronie z większym paddingiem, np. coś takiego:

screenshot-20180308130142.png

1

To i tak będzie źle wyglądało, bo marnuje przestrzeń i zasłania wszystko z góry do dołu. Gdyby te itemki zrobić poziomo, to by niczego nie zasłaniały, ew. zwijać je jak zakładki na desktopie, jesli wszystkie nie mieszczą się w jednej linii.

To samo, jeśli chodzi o listę opcji w ustawieniach profilu. U mnie wygląda to tak:

menu.png

Sporo miejsca w pionie zajmuje ta lista – dobre 200px dałoby się zaoszczędzić, przez co nie trzeba by tyle przewijać. W zakładce Ustawienia jest to samo.

0

Ale na mobile, to menu: Forum, Mikroblogi, Praca, Pastebin, Kompendium, Czat zmienia się w przycisk i to jest ok, chodzi o to, że IMO to co się rozwija nie jest wygodne do obsługi palcem, jak kliknę kciukiem z prawej i dostaje listę z lewej w dodatku taką "małą" to już tym samym kciukiem nie jestem wstanie kliknąć precyzjnie linka...

Zupełnie nie rozumiem, czemu dajesz screena z "desktopowej" wersji, bo do niej się nie odnoszę

0

Moja rozdziałka jest od dawna uznawana za desktopową – na monitorze mam mniej pikseli w poziomie niż na tablecie.

Dlaczego o tym wspominam? Bo pokazałeś kolejne miejsce, w którym zajmowana jest nadmiernie przestrzeń w pionie. IMO warto również i o tym porozmawiać, jeśli już poruszony został temat reorganizacji menu.

Panczo napisał(a):

[…] chodzi o to, że IMO to co się rozwija nie jest wygodne do obsługi palcem, jak kliknę kciukiem z prawej i dostaje listę z lewej w dodatku taką "małą" to już tym samym kciukiem nie jestem wstanie kliknąć precyzjnie linka...

Z tym się zgadzam – dziwne to, nieintuicyjne.

0

No ale to jest rozwijane, a nie widoczne cały czas...

1

Polecam ściągnąć repozytorium, przygotować zmianę w CSS i zaproponować ją na forum do oceny (najlepiej ze screenami przed/po) :)

1

@Marooned: screen przed/po masz w pierwszym poście.

Moja wiedza z front-endu nie pozwala mi na zmianę w samym CSS forum, ale te screeny to nie jest zabawa w programie graficznym, tylko dodanie bezpośrednio styli w kodzie strony (w narzędziach developerskich):

Przed:

<div class="active">
        <a href="https://4programmers.net/Forum">Forum</a>
 </div>

Po:

<div class="active" style="text-align: right;">
        <a style="padding: 1em; display: inline-block;" href="https://4programmers.net/Forum">Forum</a>
 </div>

Czyli div zawierający element menu dostał

text-align: right;

A sam odnośnik:

padding: 1em; 
display: inline-block;

więcej nie pomogę, bo nie potrafię i nie wiem czy to jest zgodne ze sztuką...

0

Jeszcze się zastanowiłem czy nie lepiej zamiast dorównywać do prawej, praktyczniejsze nie byłoby wyśrodkowanie, poglądowy screen:
screenshot-20180308220340.png

Jakby nie patrzeć wyrównanie nie jest tak istotne, ale padding ma istotny wpływ na obsługę paluchami...

1

Dzięki za propozycje zmian. Padding jest definitywnie do poprawy. Dodałem już zadanie na to. Będę informował o postępach prac :)

2

Poprawka leży już na repo i wkrótce będzie na produkcji.

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