Bubble: Budujemy menu mobilne

0:00Kontynuujemy naszą przygodę z workflows w Bubble, a ponieważ w tej lekcji czeka nas

0:04sporo pracy, to omówmy sobie pokrótce, jakie zadania przed nami stoją.

0:08W pierwszej kolejności będziemy musieli utworzyć odpowiednią nawigację mobilną,

0:12którą będziemy pokazywać użytkownikom przy określonej szerokości ekranu.

0:17Dodatkowo będziemy musieli dodać

0:18odpowiedni workflows, który za pomocą kliknięcia w ikonę

0:23menu icon będzie taką nawigację pokazywał bądź ukrywał, a dodatkowo wszystkie linki

0:28w takiej nawigacji mobilnej będą musiały zachowywać się

0:31dokładnie w taki sam sposób jak te tutaj w nawigacji desktopowej.

0:36Skoro wiemy już co mamy zrobić, to przystąpimy do pracy.

0:40Ikonkę tutaj utworzyliśmy wcześniej, jak pamiętasz.

0:44Ponieważ jest ona pokazywana tylko przy szerokości ekranu poniżej 960 pixeli,

0:50to żeby nie przełączać się tutaj w podglądzie co chwilę w odpowiednią

0:53rozdzielczość, musimy zastosować pewną sztuczkę.

0:58W tym celu zaznaczam sobie tutaj całą grupę na nav-links.

1:02Chcę ją ukrywać przy załadowaniu strony.

1:06Kolejno przechodzę do grupy menu icon i tą z kolei chcę pokazywać. W ten sposób

1:12jeżeli teraz odświeżamy sobie stronę, to jak się domyślasz.

1:17Nawigacja desktopowa nam zniknęła, a pojawiła nam

1:19się ikonka, więc dużo łatwiej będzie nam z tym teraz pracować.

1:25To co musimy jeszcze zrobić, żeby nam

1:26tutaj ta nawigacja desktopowa nie przeszkadzała, to ukryć ją.

1:30Aby to zrobić wystarczy, że kliknę tutaj przy grupie nav-links w tą ikonkę oczka.

1:35Teraz mamy już

1:38sporo miejsca do pracy, a więc przystąpmy do działania.

1:43W pierwszej kolejności musimy utworzyć naszą mobilną nawigację.

1:48W tym celu wybieram tutaj element group focus.

1:52Klikam gdziekolwiek na ekranie w edytorze.

1:56Jak widzisz grupa została dodana, natomiast działa ona w ten sposób,

2:00że jest pozycjonowana względem jakiegoś pewnego elementu referencyjnego.

2:04Jak to działa? Już Ci pokazuję.

2:06Muszę go tutaj wskazać.

2:07W moim przypadku jest to po prostu grupa menu icon.

2:11Jak widzisz teraz grupa focus została

2:13tutaj odpowiednio wypozycjonowana względem tego elementu.

2:16Znajduje się poniżej niego i jest wyrównana do niego

2:20tutaj lewą krawędzią.

2:23Skoro to mamy gotowe, to przystąpimy teraz do odpowiedniej

2:26edycji takiej grupy, nazwijmy ją sobie menu mobile.

2:34Nadajmy jej tutaj jakieś określone style, czyli usuńmy ten domyślny.

2:40Zmieńmy kolor na biały.

2:43Zaokrąglenia rogów to 16 pixeli

2:47i cień jest już Ci doskonale znany, czyli 0816.

2:56Nasz kolor middle i przezroczystość równa 15%.

3:02Teraz musimy jeszcze tutaj tylko zmienić oczywiście layout.

3:04Naszym przypadku jak się domyślasz będzie to column.

3:09Na razie zostawmy stało szerokość i tutaj tą minimalną wysokość.

3:13To co musimy teraz zrobić to powstawiać tutaj odpowiednie linki.

3:17Mogę więc na chwilkę tylko, odkryć sobie tą grupę nav-links.

3:22Zaznaczyć jeden ten tekst.

3:24Skopiować.

3:27I wstawić go tutaj do grupę focus.

3:32Oczywiście chcemy aby te linki były tutaj

3:34wyśrodkowane, w moim przypadku pierwszy link będzie odsunięty od góry o 30 pixeli.

3:42Teraz mogę go zaznaczyć, skopiować i wstawić odpowiednie ilości.

3:49Mamy tutaj about, features, będzie to pricing, contact, sing in

3:56oraz sign out.

3:58Teraz zadbajmy oczywiście o odpowiednie teksty.

4:01Tutaj będzie to feauters.

4:06Margines u góry zmieńmy na 15 pixeli.

4:11Tutaj tekst to pricing.

4:18Margines

4:2015 pixeli.

4:24W tym przypadku będzie to text contact, znów margines 15 pixeli.

4:35Tutaj sign in.

4:4315 pixeli od góry.

4:46I w tym przypadku sign up, tu margines

4:53u góry to 15 pixeli, a margines na dole

4:57jak się domyślasz, będzie równe 30 pixeli.

5:00Dodatkowo dodaje tu sign up, chce od razu

5:03tutaj zmienić kolor z tego ciemnego na znany już kolor primary.

5:09Tak aby to się tu wyróżniało.

5:13Dodatkowo nasza grupa moim zdaniem jest chyba trochę za szeroka.

5:17Zmieńmy ją może na 220 pixeli.

5:21Teraz już jest zdecydowanie lepiej.

5:23Natomiast jest źle wypozycjonowana, aby ją przesunąć tutaj w lewo.

5:28Wystarczy, że wybiorę zakładkę appearance.

5:32I mam tutaj coś takiego jak lewy offset.

5:35Muszę ustawić ujemną wartość.

5:40Zastanówmy się, jaka tutaj wartość powinna być, cała ta grupa

5:45tutaj grupa menu.

5:50Ma szerokość 44 pixele, ta ma 220, a więc odejmijmy sobie 220

6:00minus 44 daje nam 176 pixeli, a więc ustawmy ten offset

6:08na -176 pixeli i zobacz, że teraz jest to

6:12tutaj odpowiednio wyrównane, tym razem do prawej krawędzi, a więc tak jak chciałem.

6:18Natomiast podejrzyjmy teraz jak to wygląda w projekcie gotowym.

6:27Okazuje się, że nasza grupa focus się nie pojawia.

6:29Dlaczego tak się dzieje?

6:31Otóż z bardzo prostego powodu grupa focus domyślnie jest ukryta.

6:36Musimy więc stworzyć odpowiedni workflows, który będzie ją pokazywał.

6:40Mam nadzieję, że już wiesz jak to zrobić.

6:42W tym przypadku

6:44elementem, czyli takim naszym trigger'em będzie nie cała grupa menu icon, ale ta ikonka

6:52iconify.

6:54W tym przypadku musimy najpierw zaznaczyć tą opcję is clickabel.

6:58Żeby po najechaniu na nią pojawiał się nam ta ikonka łapki, a następnie klikamy tutaj prawy

7:02przycisk myszki wybieramy start edit workflow.

7:08I teraz jak widzisz tutaj trigger został utworzony.

7:12To co chcemy zrobić?

7:13W tym przypadku chcemy pokazywać jakiś element, a skoro odnosimy się do elementu,

7:18to jak się domyślasz przenosimy się do tej sekcji i mamy tutaj opcja show.

7:25Wybieramy grupę focus, czyli naszą grupę menu mobile.

7:32Przejdźmy do podglądu.

7:34Zerknijmy czy to działa.

7:38Najeżdżam, klikam.

7:40No jak widzisz, tutaj nasza

7:41nawigacja mobilna pojawia się tak, jak pojawiać się powinna.

7:45Natomiast grupa focus ma jedno specyficzne zachowanie.

7:48Otóż żeby ją ukryć musimy kliknąć gdzieś poza,

7:52poza tą grupę, gdziekolwiek tutaj na ekranie, jak widzisz została teraz ukryta.

7:57Natomiast jeżeli kliknąłbym tutaj w ikonkę, żeby nam się ta grupa pojawiła

8:02i kliknął ją ponownie, to jak widzisz grupa nie została ukryta.

8:06No niestety nie jest to zachowanie, na którym nam zależy.

8:08Użytkownicy przyzwyczajeni są do tego, że

8:11jeżeli klikają w ikonkę menu raz, to takie menu się pojawia.

8:14Jeżeli klikają drugi raz, to takie menu się ukrywa.

8:17Tak więc jak tutaj zastosować takie zachowania i wprowadzić je w życie?

8:22Bardzo prosto.

8:23Wracamy do edytora i zamiast opcji show będziemy musieli wykorzystać inną.

8:29Aby usunąć tutaj ten krąg, wystarczy, że kliknę ten przycisk tutaj delete.

8:36Przychodzę tutaj do listy i tym razem nie wybieram show,

8:38ale tutaj taggle.

8:40I znowu muszę wskazać naszą grupę

8:44menu mobile.

8:47Toggle działa w ten sposób, że pokazuję element jeżeli jest on ukryty i ukrywa go,

8:53jeżeli jest już widoczny.

8:55A więc tym razem to wszystko powinno działać tak jak trzeba.

8:59Najeżdżam na ikonę klikam raz, menu się pojawia.

9:02Klikam w ikonkę drugi raz, menu się ukrywa.

9:06A więc mamy dokładnie takie zachowanie, na jakim nam zależało.

9:11Więc skoro nasze menu już się wyświetla poprawnie, to zadbajmy teraz o to, aby te

9:15linki kierowały użytkownika we właściwe miejsce.

9:19A więc wracamy do edytora.

9:23Wracamy do designu.

9:25Jak widzisz ta grupa czasami przeskakuje tutaj ten lewy górny róg, ale nie przejmuj się,

9:30na podglądzie strony będzie pojawiać się we właściwym miejscu.

9:33Jak się domyślasz, musimy teraz tutaj dodać workflows do wszystkich tych linków

9:38i odpowiednio zdefiniować, klikam więc na text about,

9:44started edit workflow.

9:47Oczywiście znane ci już scroll to.

9:52Sekcja about.

9:54W tym przypadku oczywiście jest to grupa about.

9:59Ok, przejdźmy do podglądu.

10:01Sprawdźmy, czy to zadziała.

10:06Otwieramy nasze menu, klikam na link,

10:09zostałem przekierowany, ale zobacz co się dzieje, jeżeli wrócę na górę.

10:15Nasza grupa menu nadal jest tutaj widoczna.

10:18To menu mobilne.

10:19Musimy więc zadbać o to, aby po kliknięciu i przescrollowaniu użytkownika do

10:23odpowiedniej sekcji, zamknąć tutaj tą naszą mobilną nawigację.

10:29W tym celu wracamy do edytora i dodajemy kolejną operację.

10:33Jak się domyślasz, skoro chcemy ukryć

10:35jakiś element, to przechodzimy tutaj do element actions i wybieramy hide.

10:41To co chcemy ukrywać to oczywiście nasze

10:43mobilne menu i teraz już wszystko będzie działało tak jak trzeba.

10:49Klikamy w link, scrollujemy użytkownika do właściwej sekcji,

10:53a przy okazji od razu ukrywamy nasze mobilne menu.

10:59Sprawdźmy to więc w praktyce.

11:03Otwieram nawigacja, klikam,

11:06zostałem przescrollowany.

11:07A jeśli wrócę,

11:09to jak widzisz, menu zostało ukryte.

11:12Natomiast teraz pojawia nam się tutaj pewien problem.

11:16Mamy tutaj text about is clicked i znowu text about

11:18is clicked.

11:20Ponieważ oba te teksty noszą dokładnie taką samą nazwę, text about

11:24i tutaj też mamy text about.

11:27W jaki więc sposób rozróżnić sobie to workflows?

11:30Są na to dwa sposoby.

11:31Moglibyśmy nadać oczywiście tutaj inne nazwy i np.

11:34tutaj powiedzieć, że to jest text desktop about.

11:42A to z kolei jest, mobile about, ok.

11:51I wtedy, jeśli wrócę teraz do workflow,

11:53to jak widzisz, tutaj te nazwy odpowiednio mi się pozmieniały.

11:56Teraz wiem, że to dotyczy nawigacji desktopowej.

11:59To dotyczy nawigacji mobilnej.

12:01Natomiast ja z reguły nie robię tego w ten sposób.

12:04Pokażę Ci mój sposób.

12:08Cofnijmy więc te zmiany.

12:12Mamy tutaj znowu te standardowe nazwy.

12:14Teraz wracamy do workflow.

12:18I tutaj mogę sobie zdefiniować

12:21odpowiedni folder, w którym będą takie workflows umieszczone.

12:26Na chwilę obecną nie mamy żadnego

12:28klikam więc create a new folder nazwijmy go desktop menu.

12:36Klikam ok i teraz.

12:39Ten workflow został przeniesiony do tego folderu.

12:42Na chwilę obecną wyświetlają się one wszystkie więc

12:44się może zastanawiać, gdzie to w zasadzie zostało przeniesione.

12:47Aby wyświetlić te foldery klikam tutaj pojawia mi się ikonka rączki.

12:52I teraz jak widzisz mam tutaj wszystkie

12:54workflows, ale mam również te, które dotyczą tylko desktop menu.

12:58Na chwilę obecną jest to tylko ten.

13:01Mam tutaj również

13:03zakładkę taką no folder assigned, czyli te, które nie są przydzielone do żadnego.

13:08A więc teraz zadbajmy o to, aby je odpowiednio po przydzielać.

13:13Usuńmy ten kolor, przywróćmy kolor szary

13:16i całą naszą desktopową nawigację przenieśmy do właściwego folderu.

13:22Czyli wybieram go tutaj z listy.

13:24Jak widzisz, teraz zostało to odpowiednio przeniesione.

13:29Mogę teraz kliknąć aboute all workflows

13:31albo po prostu, żeby mi było łatwiej to no folder assigned.

13:36Teraz klikam tutaj i oczywiście przenoszę

13:39do odpowiedniego menu, odpowiedniego folderu

13:41oczywiście.

13:43Text pricing, desktop menu.

13:50text sign in, desktop menu i oczywiście text sign up, desktop menu.

13:59Teraz cała moja mobilna nawigacja jest już w jednym folderze.

14:03Tu mogę też usunąć ten kolor.

14:09Jak widzisz teraz mamy to wszystko pogrupowane w odpowiedni folder.

14:13I to samo możemy zrobić teraz

14:16dla tych workflows oraz to klikam na text about tworzę nowy folder.

14:21Tym razem jak się domyślasz będzie to mobile menu.

14:29I to samo robię tutaj

14:31dla tej ikonki, przenoszę ją do mobile menu.

14:36I oczywiście musimy teraz zadbać o to,

14:39aby to właściwe worflows dodać do tych linków.

14:43Natomiast skoro już wiesz jak to robić, to

14:45mam nadzieję, że poradzisz sobie z tym bez problemu i będzie to

14:49oczywiście, jak się domyślasz Twoja praca domowa.

14:52To co na koniec musimy jeszcze zrobić, to

14:54oczywiście przywrócić tutaj właściwe działania.

14:56Czyli jeżeli poustawiasz te wszystkie linki

14:59tak jak działać powinny, to przejdź do grupy nav-links.

15:04Zaznacz tą opcję, aby pokazywać ją przy

15:07załadowaniu strony i pamiętaj o tym, aby do grupy menu icon ją odznaczyć.

15:13Wtedy wszystko tutaj będzie działało tak jak działać powinno.

15:16Dziękuję Ci za uwagę i widzimy się już za chwilę.