Aplikacje no-code z Bubble: Lista kategorii i filtry

0:00Standardowo.

0:01Mam nadzieję, że praca domowa nie sprawiła Ci najmniejszych problemów i wystarczyło

0:05Ci cierpliwości, żeby dodać wszystkie sety.

0:08Będziemy z nich zaraz korzystać w naszym

0:09po Papie a, ponieważ ten papa będzie dosyć skomplikowany.

0:13To ja już część pracy rozpocząłem między lekcjami.

0:16Przejdźmy do zakładki Design i zacząłem tutaj już przygotowywać większą

0:21część tej naszej grupy o nazwie kategorii z grup

0:26i pokazuję jak to wygląda, tak, żebyś mógł zobaczyć i odwzorować.

0:30Przede wszystkim dodajemy tutaj pierwszą grupę o nazwie Your Search Group.

0:36Layout to kolumn row gap cztery piksele.

0:40W tym przypadku zaznaczamy Fit fit to content.

0:45Marginesy na dole to 15 pikseli.

0:47Reszta marginesów jest równa zero,

0:50podobnie jak padding i kolejno do środka dodałem ikonkę

0:54o wymiarach 24 na 24 piksele o takiej nazwie i taka nazwa tutaj z pakietu Solar.

1:01Kolor to secondary.

1:04Następnie tutaj dodajemy tekst o nazwie Your Search.

1:10Jak widzisz jest to nowy styl, jeszcze go nie mamy.

1:13Ja po prostu wykorzystałem style Body XS 12 pixeli 400 i to co zrobiłem to styl.

1:20Zmieniłem grubość na 600.

1:23I tutaj wybrałem sobie kolor secondary i

1:25go tutaj zapisałem właśnie jako taką wartość.

1:28Dodatkowo ten tekst jest tutaj wiec centrowanie.

1:32Także tutaj wyceny względem elementu rodzica.

1:36Następnie dodajemy tutaj shape, czyli nasz standardowy divided.

1:41Szerokość 1 piksel.

1:43Wysokość 48 pikseli.

1:45Marginesy to 12, na dole 24 z lewej, 16 z prawej.

1:51Potem powielasz taki divided

1:54i tym razem jedyne co zmieniasz to tutaj marginesy z prawej strony na 24 piksele.

1:59A więc mamy tą grupę.

2:00Mamy 2 Divide.

2:03I następnie dodajemy przycisk.

2:05Takich stylów jeszcze nie mieliśmy.

2:07A więc przejdźmy sobie do tego buttona.

2:10Ma on tak szerokość dostosowaną do

2:13contentu minimalną wysokość równą 40 pikseli.

2:18Padding to 10 pikseli, góra dół 16 pikseli.

2:21Lewa prawa strona.

2:25A Prins to font o grubości 700 wielkości 14 pikseli.

2:32Oczywiście w centrum danych.

2:34Font Color to nasz kolor Primary 600 background style to flat color.

2:40Parametry Contrast, czyli kolor biały.

2:43Tutaj zaokrąglenie narożników 8 pikseli.

2:46Border to solid 1 piksel primary 600.

2:52I dodajemy tutaj transkrypcję zarówno dla

2:55background style, jak i font color na 300 milisekund.

2:59I przejdź do zakładki Condition, ale w tym przypadku statusu is Howard.

3:05Zmieniamy tylko background color na kolor primary 25, a dla tej dla statusu i Preset

3:11zmieniamy background color na primary 600 i font color na nasz kolor biały.

3:15Możemy też od razu sobie zapisać takie style.

3:21Będzie to w naszym przypadku.

3:24Button outline.

3:27Small.

3:29Klikam Create.

3:32Ponieważ mam tutaj jeszcze taki counter do

3:34dane, to jak się domyślasz musimy ten button ubrać w grupę typu Align to parent.

3:39A więc mamy to tutaj.

3:41Tę grupę AirPlay Filters nazwałem w ten sposób All in parent fit fit tu content

3:47margines bottom równe 12 pikseli, reszta wartości ustawione na 0.

3:54Do środka dodałem sobie właśnie.

3:57Ten baton.

3:59Oraz grupę Apply Filter Scatter Group.

4:02Tu też ustawiłem All in to parent.

4:05Ale ustawiłem ją właśnie w tym momencie.

4:0924 na 24 piksele.

4:12Marginesy to minus 12 top minus 12 rate.

4:16Ten sposób nam się tutaj wysunęła.

4:21Flat Color Równe Secondary 600 Zaokrąglenie narożników równe 4 piksele.

4:28Do środka wstawiłem tekst.

4:30To jest znany Ci już ten styl D 114 pikseli 500.

4:35Jedyne co zmieniłem to po prostu kolor na kolor biały.

4:39Tu jeszcze widzisz ten element dotyczący Scrabble, ale zaraz do niego wrócimy,

4:43ponieważ tutaj wstawiamy repeat Link Group o nazwie Categories.

4:47RG Time of Content to oczywiście o s Categories.

4:51Jako Data Soros ustawiamy wszystkie rekordy z tego obszaru setu.

4:55Następnie definiujemy tu jeden rząd.

4:58Odznaczamy stałą liczbę kolumn.

5:01Ustawiamy minimalną szerokość kolumny na

5:0376 pikseli, aby dodać tutaj odstęp pomiędzy tymi kolumnami.

5:08Ja często stosuję właśnie do tego separator.

5:11Jeżeli dana kolumna nie posiada żadnych

5:13cieni i żadnych obramowania, to jest po prostu obramowania.

5:18Może mieć, ale jeżeli ma tam nadany jakiś cień to ten separator się nie sprawdza.

5:22Natomiast jeżeli u nas jest to po prostu

5:23zwykła grupa, to możemy właśnie odsunąć się między sobą stosując tutaj separator.

5:29Ja wybrałem tutaj kolor biały, czyli kolor tła i szerokość ustawioną na 6 pikseli.

5:36Tutaj do środka wstawiam po prostu całą tą

5:38grupę, czyli kopiujesz grupę Your Storage Group i wstawiasz sobie tutaj.

5:42Jedyne co musimy tutaj zmienić to przede wszystkim odznaczyć Featured content.

5:48Następnie.

5:50Tutaj oczywiście przekazać OS Categories i 800 z bieżącej komórki

5:57to będzie jak się domyślasz po prostu ikonka przekazana z naszego Option setu.

6:01To będzie parametr Display.

6:04I w ten sposób uzyskamy tutaj całą listę.

6:08Dodajemy oczywiście jeszcze tutaj

6:10ten plugin do zdefiniowania robala i ja go tutaj odpowiednio zdefiniowałem.

6:16Tylko jeszcze tak tutaj dla kategorii Scripting Group

6:21kopiujesz tą nazwę i wstawiasz ją tutaj na dole jako ID atrybutu.

6:26A potem odnosimy się do tego właśnie w tym pluginie.

6:29Element id to będzie po prostu categories.

6:32I takie ustawienia trzy piksele, trzy

6:34piksele, secondary 600 primary contrast i border radius równe 4.

6:41Jeżeli coś jest tutaj niejasne i coś

6:44tłumaczę za szybko, to pamiętaj, że zawsze możesz sobie zerknąć

6:47tutaj do mojego edytora i sprawdzić, czy wszystkie wartości przekazałeś.

6:50Zwłaszcza tutaj te marginesy, bo dzięki temu udaje nam się to jakoś miarę

6:54sensownie wyrównać, a przy podglądzie otrzymujemy taki efekt.

7:02A więc mamy tutaj naszą listę z kategoriami mamy button

7:06i mamy tutaj tą grupę Your Search i to co możemy teraz zrobić to przystąpić

7:10do głównego działania, czyli dodać nasz pierwszy popup, który

7:14będzie się otwierał po kliknięciu w przycisk.

7:17Wracamy więc do edytora i przystępujemy do działania.

7:21Wybieramy sobie pop up z sekcji container, klikam gdziekolwiek.

7:26I nasz pierwszy pop up został dodany.

7:29Pop up, podobnie jak Group fokus jest domyślnie ukryty.

7:31Przy załadowaniu się strony możemy go

7:33wyświetlić wykonując jakąś akcję, czyli po prostu za pomocą workflow.

7:37Dodatkowo, podobnie jak Group fokus, aby zamknąć popup wystarczy kliknąć

7:41gdziekolwiek poza właśnie ten biały box, czyli np.

7:44gdzieś na to ciemne pole.

7:46Natomiast jeżeli potrzebujesz taką opcję, można zablokować

7:49tutaj za pomocą właśnie tej opcji wystarczy zaznaczyć ten checkbox.

7:53I w ten sposób użytkownik nie będzie mógł zamknąć takiego popup u

7:56właśnie klikając gdzieś spoza niego lub za pomocą klawisza Escape,

8:00a tylko i wyłącznie taki sposób, w jaki mu pozwolimy, czyli np.

8:03dodamy jakiś guzik, który dopiero po kliknięciu będzie taki popup zamykał.

8:07Jest to bardzo przydatna opcja i na pewno

8:09wykorzystamy ją jeszcze w trakcie budowy naszego serwisu.

8:12A my teraz przejdźmy do tych podstawowych ustawień naszego pop upu.

8:16Przede wszystkim zmieniamy jego nazwę.

8:19Będzie to po prostu filters pop up.

8:27Co chcę zmienić tutaj to przede wszystkim tak background color ustawiamy na nasz

8:31biały kolor ze zmiennej kolorystycznej, czyli nasz primary contrast.

8:36Kraj auto kolor to będzie kolor secondary, ale ustawione w naszym przypadku na 30%.

8:45Czyli to właśnie takie ciemne tło poza naszym pułapem.

8:50Nie potrzebujemy tutaj żadnego biura.

8:53To, co chcę zrobić, to nadać tutaj zaokrąglenie równe 8 pikseli.

8:57I ustalić tutaj Oczywiście Shadow Stay na out set równy zero.

9:0530.

9:0830 0.

9:11Nasz kolor Primary 600 wartość równa 15%.

9:17Następnie przechodzimy do zakładki Layout.

9:19Zmieniamy to oczywiście w tym przypadku na razie na kolumnę.

9:23A dajmy tutaj maksymalną szerokość dla naszego pokładu równą 520 pikseli.

9:29Pozbywamy się tutaj minimalnej szerokości.

9:33Zmieńmy minimalną wysokość może na 620, żebyśmy mieli więcej miejsca

9:39do pracy i zacznijmy dodawać poszczególne elementy.

9:45Rozpoczynamy od grupy.

9:49Będzie to popup header, a w zasadzie filters.

9:58Pop up Header Group.

10:01W tym przypadku będę chciał tutaj ustawić Elaine Parent.

10:06Pozbywamy się.

10:08Minimalnej szerokości, ale wysokość chcę

10:10ustawić tutaj na stałą wartość na 60 pikseli.

10:16I teraz tak chcę tutaj dodać tekst.

10:20I w tym miejscu wędrować.

10:26Będzie to styl body MD 700.

10:29Mamy taki kolor neutral zmieniam na kolor secondary.

10:36Tekst.

10:38Moro Filters.

10:42Ja oczywiście

10:44pozbywam się tutaj minimalnej szerokości i minimalnej wysokości.

10:47Ustawiam fit fit tu content,

10:51teraz dodajemy tu ikonkę, za pomocą której będziemy mogli zamknąć nasz popup.

10:55Jest to standardowe rozwiązanie w przypadku pop upów i użytkownicy są do

10:58tego przyzwyczajeni, że mogą go zamknąć właśnie za pomocą ikonki.

11:03A więc ustawmy go tutaj.

11:05A w zasadzie joł, bo to ikonka, czyli pop up close.

11:14Wybierzmy ten.

11:20I w naszym przypadku będzie to 32 na 32 piksele.

11:29A ikonka.

11:32To właśnie taka nazwa Closterkeller Linear.

11:36Chcę to najpierw ustawić kolor neutral i wartość ustawić na 50%.

11:44Transmission zmienić na 300.

11:47I dodać jeszcze tutaj konto Seana.

11:50Po najechaniu, czyli dla statusu Howard.

11:56Chcemy zmienić tutaj kolor.

11:59Na kolor Neutral Secondary 600.

12:05Dla całej tutaj jeszcze grupy pop up

12:07header są tak ustawić padding z lewej i z prawej równe 24 piksele.

12:14I dodać jeszcze border na dole.

12:20Czyli border bottom solid 1 pixel jak się

12:24domyślasz na standardowy kolor czyli neutral 300.

12:29To co mogę zrobić teraz, to powiesić sobie.

12:32Całą tą grupę.

12:37Pozbyć się tej ikonki.

12:41I tak zaznaczamy sobie ten tekst.

12:43Zmieniamy go na Clear all.

12:48Będę chciał go tutaj jeszcze podkreślić.

12:51Więc mogę go sobie tutaj zaznaczyć i wybrać podkreślenie.

12:56Styl zmieniamy na body MD.

12:59500.

13:01Mamy ok.

13:07Wybierzmy tutaj jeszcze tranzycji en la ont color równą 300.

13:15I teraz tak przechodzimy do Condition.

13:18Kiedy ten tekst ma status Howard, to zmieniamy font color.

13:27Na nasz kolor Primary 600.

13:33A kolejny warunek tekst jest.

13:39Piąty kolor.

13:42Ustawione.

13:45Na kolor Primary 900.

13:48To co chcę zrobić to przesunąć ten tekst,

13:51czyli wstawić ten no name i dodać tutaj button.

13:56A w zasadzie zastanówmy się dobrze.

13:58Dajmy taki.

14:00Tylko tak zmieńmy styl.

14:01Będzie to.

14:03Zacznijmy od button Primary big. I.

14:06A w zasadzie secondary big.

14:10Odepnij my sobie tutaj te style.

14:13Zmieńmy rozmiar czcionki na 14 pikseli.

14:16Resztę pozostawiamy tutaj. Bez zmian.

14:18Przechodzimy do Layout.

14:24No i zmieniamy padding na 8 8, 16, 16.

14:33Wywalamy minimalną szerokość, dopasowujemy fit do kontentu.

14:38Minimalna wysokość to 40 pikseli.

14:43I będzie to.

14:46Show results.

14:49BTN.

14:52Condition, ale zostawiamy takie jak są.

15:01I zapisujemy ten styl jako.

15:05Baton.

15:08Secondary small.

15:12Klikam Create i tym razem przesuwam go do prawej krawędzi.

15:19I to co chcę zrobić to oczywiście tutaj zmienić nazwę.

15:21To będzie footer group, czyli filters, pop up, footer group.

15:30Te właściwości pozostawiamy takie same,

15:32czyli wysokość 60 pikseli padding i 24 z lewej i z prawej.

15:36Jedynie tylko tutaj chcę zmienić.

15:39Border z bottom na top znowu solid, jeden pixel i neutral 300.

15:47W ten sposób mamy tutaj header, mamy footer

15:51i teraz możemy zacząć dodawać tutaj content, a więc kolejną grupę.

15:57I przesuń ją sobie na środek.

16:00Czyli klikam Previous.

16:03Dokładnie w ten sposób.

16:05Tutaj będzie to oczywiście kolumn.

16:12Top Filters Content Group.

16:15Tak ją nazywamy.

16:20I przejdźmy dalej do ustawień.

16:22Zaznaczamy minimalną szerokość.

16:25Zmieńmy tą wysokość na 480.

16:28Chwilowo.

16:30Padding i 24 piksele z każdej strony.

16:36Cap Space Ink równy 32 piksele.

16:40I dodajmy tutaj pierwszą grupę.

16:42A w zasadzie zróbmy tak skopiuję sobie ten tekst i wstawimy go w to miejsce.

16:49Zaznaczyć i wkleić.

16:53W tym przypadku będzie to Helsing piątego typu.

16:58Kolor Neutral 800.

17:00Tutaj zostawiamy to bez zmian.

17:03To, co chcę zrobić to.

17:06Ubrać ten element dodatkową grupę typu column.

17:13To będzie.

17:16Property.

17:19Tab Group.

17:22I wstawić tutaj button.

17:31Cała grupa będzie miała.

17:34Tutaj Gap Space Ink równy 24 piksele.

17:41I teraz przejdźmy do edycji tego batona.

17:46Oznaczam. Minimalną szerokość daję tutaj.

17:50Może czytamy tutaj Fitbit tu content

17:52chwila waga ustaw my dajmy tutaj wysokość 40 i padding 8 8.

18:0116.

18:0316.

18:07Podepniemy oczywiście sobie testy na dajmy tu 14 pixeli.

18:13Font Color to będzie Color Secondary 600.

18:18Vagrant Tail ustawmy chwilowo na Primary

18:21kontrast, czyli kontrast białe zaokrąglenie równe 8 pikseli.

18:29Border solid 1 pixel.

18:33I wybierzmy tutaj właśnie nasze standardowe kolo, czyli Neutral 300.

18:38Pozbywamy się setu.

18:44Tu jeszcze tylko zmieńmy to z 600 na 500.

18:46Nie chcę takiego mocnego tutaj tekstu.

18:49I to co chcę teraz zrobić, to dodać tutaj Rapid Ink grupę.

18:55Będzie to po prostu.

18:58Property Type RG.

19:03Bez literówek to.

19:07Party Type.

19:09Wybieramy OS Listing Property type.

19:14Cały set.

19:171 roku.

19:19I dajmy tutaj 3 kolumne.

19:23Tutaj chcę zostawić separator ustawiony na kolor biały.

19:28I odstęp równy powiedzmy 12 pikseli.

19:32Teraz mogę sobie przeciągnąć buttona i

19:34wstawić go do grupy, ale najpierw dajmy jej tutaj jakiś layout typu np.

19:40pozbądźmy się minimalnej szerokości.

19:44I teraz ten button.

19:47Przesuń się tutaj do tej całej repeat grupy.

19:55Zostawmy może tutaj chwilowo featured content.

19:59Pozbądźmy się minimalnej wysokości.

20:06Ja bym zmienił jednak ten odstęp na 16 pikseli.

20:11I teraz dla Batona przekazał tutaj.

20:16Current sales of listing property type display.

20:24Powinno być tutaj ok.

20:30Teraz tak, żeby podejrzeć wprowadzone zmiany musimy

20:33oczywiście w jakiś sposób pokazać nasz popup i potem go jeszcze zamknąć.

20:37Zacznijmy może od prostej rzeczy, czyli od zamknięcia i zobaczę.

20:41Jeżeli kliknę tutaj na tę ikonkę.

20:44Teoretycznie mam Start edit workflow, ale to nie do końca działa.

20:48Zauważyłem jeżeli chodzi o ten plugin icon i File.

20:52Muszę sobie kliknąć tutaj.

20:55Przejść.

20:57No generalnie tutaj tego nie mam.

21:00Dobra, to jednak zostawiamy to w ten sposób, Przynajmniej na razie zostawmy.

21:04Pop up Close Icon jest light i to co chcę zrobić, to ukryć.

21:08Wtedy mieliśmy Shaun Element, a teraz chcę

21:10wybrać Hidden element i wybrać nasz pop up, czyli Filters pop up.

21:17Wróćmy teraz do designu.

21:20Na przycisk Apply Filters btn dodajemy Workflow.

21:24Jak się domyślasz, teraz pokażemy nasz popup, czyli szał.

21:28Ten element.

21:32Filters pop up.

21:34I teraz możemy przejść do podglądu i zobaczyć.

21:37To, co do tej pory zrobiliśmy.

21:41Klikam na filter.

21:43I nasz popup się otwiera najazdem na ikonkę.

21:46Klikam na nią i niestety nic się nie dzieje.

21:49To jest właśnie problem z tymi ikonkami.

21:51Ikonki fajne, ale na razie to zostawmy.

21:53Nie przejmujmy się tym w ogóle.

21:56Natomiast wystarczy, że kliknę gdziekolwiek.

21:58Poza tym papa mi się oczywiście zamknie.

22:01Wracamy więc do edytora.

22:03Przechodzimy do Popup u.

22:05I tutaj zmieniamy ten tekst.

22:12W tym przypadku będzie to property type.

22:14To co chcę zrobić, to dodać tutaj Divide et.

22:18Czyli dodać oczywiście Shape.

22:25Z tym to Twitter.

22:28Nazywamy go oczywiście designer.

22:34Pozbywamy się minimalnej szerokości.

22:36Wysokość ustawiamy na 1 piksel.

22:39I teraz tak, ponieważ będziemy tutaj potrzebować kilka właśnie takich RIP grup

22:44z różnymi filtrami, to mogę je sobie teraz zaznaczyć i skopiować.

22:51Tym razem będzie to typowe place.

23:06Typowy play scrub.

23:09Rzućmy jeszcze na chwilę tego buttona i

23:11zmieńmy jego nazwę na po prostu Property Type.

23:21A tutaj będzie to typowe placebo.

23:24Ten.

23:33Jak się domyślasz, musimy tutaj zmienić oczywiście dane dla tej grupy i jej nazwę.

23:45Dalej wybieramy OS Listing Type of place, którego jak się okazuje nie mamy.

23:51Ale to nic, możemy go na szybko dodać.

23:53Przechodzimy do Data.

23:56OS.

23:58Listing.

24:00Typowe place.

24:04Tu będziemy mieć tylko display i trzy opcje.

24:10Private room.

24:14Firma Shared Room.

24:18Oraz N Tire Place.

24:21Wracamy do zakładki Dizajn i wybieramy oczywiście właściwy set.

24:27Czyli OST Lighting Type of Place.

24:30Poprawiamy to tutaj.

24:33Resztę pozostawiamy bez zmian.

24:36Klikamy na button.

24:38Tutaj automatycznie wskoczyło

24:40właściwe tempo w klasę i display, a więc to zostawiamy bez zmian.

24:46Klikam.

24:48Powie nam tę grupę, powie nam. DVI-D.

24:52Przesuwam go we właściwe miejsca, czyli między tę grupę.

25:01I tak tutaj zmieniamy tą nazwę na.

25:05Betsson Buttons.

25:07I tutaj.

25:17Natomiast to co będę chciał teraz zrobić,

25:18to tak zaznaczyć tą writing grupę, zmienić jej nazwę na Best.

25:26I ubrać ją w dodatkową grupę.

25:29Typu kolumn.

25:32To będzie skrót.

25:39Layout typu column, natomiast gap passing tutaj ustawiony.

25:47Na 12 pikseli.

25:52Teraz zaznaczam ten tekst, kopiuję go.

25:56Zamierzam odpowiednią grupę w naszym drzewku elementów, czyli grupę BET.

26:01I wstawiam tutaj ten tekst.

26:06Przesuniemy go na samą górę i zmienimy czcionkę.

26:12Tu będzie to body SM 14 pikseli 500.

26:17I tekst to po prostu bez.

26:23Teraz przechodzę.

26:25Tutaj dodaj rating Groupe.

26:29Zmieniam to na OZ Listing Numbers.

26:34Wybieram All Select Listing numbers.

26:38I tym razem ustawiam tutaj 8 kolumn.

26:41A odstęp ustawmy nie na 8 tylko na nie na 16 tylko np.

26:47na 8 pikseli I zaraz zerknijmy czy tadam zadziałało odpowiednio odświeżamy.

26:57Klikamy Filters. I ok.

27:00Wygląda na to, że jest ok.

27:01To co musimy zrobić to pozbyć się tych brzydkich styli na batona.

27:08A więc kliknij ten jeden.

27:11Przejdźmy do Condition All.

27:12Ja bym tutaj po prostu całkowicie pozbył

27:14się jakichkolwiek conditions i zapisał sobie ten styl jako button filters.

27:27I oczywiście przypisał go wszędzie tam, gdzie z niego korzystamy.

27:35Teraz to co chcę zrobić to zaznaczyć tą grupę bez grup.

27:40Powielić, czyli command de.

27:43Zmienić nazwę.

27:50W ten sposób.

27:52Tutaj zmienić też nazwę.

27:57I to samo zrobić tutaj dla tej kapitan grupy.

28:01Tam jest pozostawiamy dokładnie ten sam type of content.

28:04Dlaczego robimy to w ten sposób?

28:05Dlaczego właśnie ja robię to na podstawie

28:07takich właśnie buttonów, gdzie użytkownik będzie mógł sobie

28:11wykrzykiwać te opcje, a nie wpisywać tego z palca?

28:15Z jednego prostego powodu użytkownicy nienawidzą wpisywać formularze.

28:20Dlatego zawsze staraj się ułatwić im życie i właśnie udostępniać takie opcje.

28:24Wystarczy, że klikną sobie tutaj tylko w dany przycisk albo w taką daną opcję.

28:29I to wszystko będzie tutaj bezproblemowo działało.

28:33Możemy więc wrócić do edytora i dalej kontynuować naszą pracę.

28:38Tak. To co chcę zrobić to zaznaczyć tą grupę.

28:42Typowe place.

28:44Powielić ją, zaznaczyć Divide i jego również powielić.

28:49Przesunąć go w odpowiednie miejsce.

28:53Oczywiście potem radzę Ci zadbać o

28:55odpowiednie nazewnictwo, usuwanie kopii 4 itd.

28:58Ja tym się chwilowo nie będę przejmował.

29:01Po prostu staram się pracować jak

29:03najszybciej, żeby ta lekcja nie zajęła całej godziny.

29:06I teraz tak zmieniamy tutaj nazwę.

29:10Będzie to emitent.

29:16Zmieniamy ją również tutaj.

29:21I to samo tutaj.

29:29O jest listing a menu this.

29:32Wszystkie tutaj opcje.

29:38I tak w tym przypadku będzie to dwa rzędy.

29:43A w zasadzie przepraszam 6 rzędów po dwie kolumny.

29:50Zostawiamy tutaj odstęp równy 12 pikseli.

29:55Natomiast tak pozbywamy się tego batona.

30:02Ta grupa nam się tutaj skurczyła, więc odznaczamy chwilowo tą opcję.

30:05Fit fit to content.

30:09Zresztą ona w tym przypadku nie będzie nam potrzebna.

30:12A to co chcę zrobić, to dodać tutaj grupę.

30:18I.

30:22I wstawić ją oczywiście do naszej Repeat Group.

30:26Czyli postarajmy się ją tutaj namierzyć.

30:28Mamy grupę.

30:30Przesuniemy ją tutaj.

30:32To repeat think groupe.

30:38Będzie to po prostu Mantis.

30:41A w zasadzie mity.

30:45Mam nadzieję, że taka jest liczba pojedyncza grup.

30:51I tak będzie to rok.

30:57Cap Space Ink ustawiony na 8 pikseli.

31:06Odznaczamy tę opcję.

31:10I tak wstawiamy tutaj najpierw tekst.

31:15Oraz ikonkę z ikoną Wi-Fi.

31:20I teraz wracamy do grupy.

31:23Wybieramy Fit Fit to content.

31:27Zaznaczamy minimalną wysokość i przystępujemy do pracy.

31:33Będzie to tak.

31:35Check icon.

31:4324 na 24 piksele koncentrujemy.

31:49Kolor Primary 600.

31:52Taka ikonka.

31:55To moglibyśmy w zasadzie zadbać, żeby

31:57namierzyć odpowiednią z pakietu Solar, ale tym zajmę się później.

32:04I oczywiście tutaj poprawiamy ten tekst.

32:10Font zmieniamy na body SM 14 pikseli 500.

32:16I teraz tak dla całej tej grupy oczywiście

32:18musimy wybrać typowy content OST Listing magnetic.

32:23Karen wcale.

32:26W ten sposób mogę tutaj przekazać.

32:30Parameter Display.

32:36I teraz zerknijmy do podglądu.

32:46Wygląda to naprawdę całkiem fajnie,

32:49więc to samo możemy zrobić tutaj dla języków hosta.

32:54Czyli wracamy, zaznaczamy sobie całą tą grupę, powielamy, powielamy nasz Divided.

33:03Przesuwamy go we właściwe miejsca.

33:07Tutaj będzie.

33:09Nazwa po prostu languages.

33:20Kopiuje.

33:25Zmieniam to w tym miejscu.

33:27Oczywiście zmieniam.

33:31To na właściwie 800.

33:39Tutaj będą to trzy rzędy i dwie kolumny.

33:45Zaznaczam całą tą grupę.

33:48Zmieniam jej nazwę.

33:52I oczywiście dobrze.

33:56To wskoczyło właściwie.

34:00Ikonka pozostaje ta sama, to pozostaje bez zmian.

34:03Czyli wyświetlamy tutaj parametr display.

34:09Zmieniamy tylko tutaj ten tekst.

34:14Przejdźmy do podglądu.

34:22Montaż pop up z filtrami coraz lepiej się prezentuje.

34:25Mamy tu już niemal wszystko.

34:27Brakuje nam jeszcze tylko slidera do ceny.

34:29A więc wracamy do edytora.

34:33Ja tym razem przejdę tu na samą górę i tak zaznaczę tą grupę.

34:40Stóp nie kupię i przesunę ją najpierw na

34:42samą górę tylko po to, żeby przesunąć ją pod ten divide.

34:49Tu będzie.

34:51Top Property Price.

34:54Tekst.

34:58Zmieniam nazwę grupy.

35:07I tak chcę się pozbyć tej rybki, tej grupy ze środka.

35:12A w zasadzie ten tekst to nie będzie price price wręcz.

35:21To możemy zostawić, a w zasadzie po prostu zróbmy to Price Group.

35:26I teraz tak dodajemy tutaj slider.

35:29Żeby to zrobić muszę wybrać.

35:32Top opcja Slider Input.

35:35Wstawić ją tutaj.

35:40I tak możemy tutaj ustawić odpowiednie

35:42wartości, czyli wartość minimalną oraz wartość maksymalną.

35:46Zestawmy ją od zera do dziesięciu.

35:49Step to po prostu krok, który będzie się zwiększać.

35:52Ta wartość wstawiamy tutaj 1.

35:55Slider Type Wybieramy Range, aby można było przesuwać oba te wskaźniki tutaj.

36:01I tak orientacja na horizontal.

36:04I tak wybieramy tak border color to będzie secondary 600.

36:12Ale ustawione na 5%.

36:22Background color.

36:24Zmieniam tutaj na ten kolor powiedzmy.

36:28Primary Contrast.

36:29My tutaj mamy mamy kolor o nazwie Surface.

36:32To jest kolor biały w zasadzie.

36:33A dobra, czyli nasz primary contrast.

36:36Nie, dziwniej to będzie po prostu kolor biały.

36:40Karol Huntington Primary 600.

36:47W Reinharda.

36:48Kolor to też Primary 600, ale wartość 25% dla przezroczystości.

36:53I to, co chcę teraz jeszcze zrobić.

36:58To przejdź tutaj To nazwy to będzie.

37:01Rise.

37:05Slider input.

37:12Zakładka Layout.

37:13Pozbywamy się minimalnej szerokości, a wysokość ustawiam na stałe na 20 pikseli.

37:22To nam da taki bardzo fajnie wyglądający slider.

37:26I teraz dodajemy tutaj kolejną grupę.

37:36To będzie.

37:38Price Min Group.

37:43Alain to Parent.

37:46Tutaj nic więcej nie muszę zmieniać, oczywiście oprócz pozbycia się.

37:51Tej minimalnej szerokości.

37:53Przechodzę do Appearance i będę chciał nadać border.

37:58Nasz standardowy kolor.

38:01Zaokrąglanie równe.

38:048 pikseli.

38:07Teraz wstaw tutaj tekst.

38:09Mogę sobie zaznaczyć ten tekst bez.

38:12Wstawić go w to miejsce.

38:16Przesunąć go do lewego górnego rogu i nadać mu padding z lewej strony równy.

38:23Już to sprawdza.

38:27To jest tak od góry 6 pikseli.

38:31Od lewej 10 pikseli.

38:38I będzie to body XS 12 pikseli 400.

38:42OK.

38:43Teraz jeszcze raz muszę dodać tutaj test padding czyli 6 i 10.

38:50Do środka będę chciał wstawić pole input.

38:56Też właśnie tutaj, w zasadzie w to samo miejsce.

38:59O ile dobrze pamiętam, nie będzie to wycena na.

39:06I tak pozbawiamy się minimalnej szerokości.

39:10Wysokość ustawiamy na 52 piksele.

39:14Padding to.

39:16A w zasadzie zanim nadamy padding to przejdźmy tutaj do styli.

39:22I zerknijmy, co my tutaj mamy.

39:31To będzie 14 pikseli.

39:33Nasz kolor secondary 600.

39:36Tutaj koloru czcionki.

39:38Grubość to 500.

39:42Place Holder ustawmy na.

39:45Secondary 600 ale na 50%.

39:52Pozbywamy się background.

39:55Solid.

39:58Czy mamy tutaj jakiś border?

40:01Nie wydaje mi się, że nie mamy żadnego, więc możemy się go pozbyć.

40:07Nie potrzebuję tutaj żadnego zaokrąglenia.

40:13Teraz będzie to main price input.

40:26Pozbywamy się tutaj.

40:28Pozbądźmy się chwilowo.

40:31Tego tu ustawmy tylko.

40:35Font Color.

40:37A w zasadzie może nawet.

40:40Też się tym nie przejmujmy.

40:41Wywal ten condition all.

40:46Przejdźmy do layoutu i tutaj ustawmy.

40:51Tak. Szesnaście pikseli.

40:54Od góry.

40:5610 od lewej, 10 z prawej.

40:59Teraz mogę zaznaczyć całą tą grupę Price min.

41:02Pozbyć się minimalnej wysokości.

41:06Mam tu już całkiem fajnie wyglądającą grupę.

41:09Teraz przechodzę do tego pola input i przechodzę do zakładki Appearance.

41:16I tutaj tak zmieniam place holder na.

41:20Znak dolara.

41:2299 99.

41:26Natomiast będę tutaj chciał ustalić initial content.

41:30Tak, żeby to od razu jakaś wartość załadowała.

41:33Jaka? Chcę ją pobrać z tego slidera.

41:35Aby to zrobić muszę go tutaj zaznaczyć skopiować jego nazwę.

41:41I tutaj wstawić to dynamicznie tak

41:44i wybrać wartość value i tutaj mine czyli tą minimalną.

41:49Content format zmieniamy tym razem na

41:51karencji, bo będziemy chcieli tutaj wyświetlać walutę.

41:55I znaczek zostawiamy na znaczek dolara.

41:59Teraz mogę zaznaczyć całą tą grupę.

42:01Muszę ją namierzyć w drzewku elementów.

42:04Czyli prace min.

42:08Skopiować.

42:10Wstawić do grupy Price.

42:15Czyli Piast.

42:19Będzie to Price Max Group.

42:24Następnie.

42:25C tą grupę.

42:27Zgrupować.

42:30Czyli group elements in row Container.

42:35Będzie to Price Range Group.

42:40Ustawmy pracę min.

42:42Do tej samej grupy, czyli tutaj.

42:43A więc mamy tu grupę Price Range Group, a w środku Price min.

42:47Oraz Price Max.

42:50Na całej price Range ustawmy tutaj Gap Space Ink równy 24 piksele.

42:58I wstawiamy do niej jeszcze.

43:01DVD r.

43:05Który chce.

43:07Tutaj ustawić na środek, nadać mu maksymalną szerokość.

43:14Równe 90 pikseli.

43:18I to jeszcze w centrum.

43:21Ponieważ teraz zaznaczam sobie grupę Price Max Group.

43:26Zmieniam tutaj max price input nazwe.

43:31I to co chcę zrobić to tutaj przekazywać

43:33tą wartość ze slidera, ale tym razem maksymalną.

43:36A więc klikam to min i wybieram max.

43:40A więc w tym przypadku jest to Price

43:42Slider input czyli ten slider value, czyli jego wartość maksymalna.

43:47A jak pamiętasz tutaj minimalną mieliśmy

43:490, maksymalną 10 i takie wartości wskoczyły nam do tego pola.

43:53Zresztą zaraz się o tym przekonasz, bo możemy przejść do podglądu.

43:59Odświeżyć.

44:01Jak widzisz tutaj mamy 0 10 dolarów, bo tu mamy takie wartości.

44:05A jeżeli będę przesuwał ten slider, to ta wartość będzie się

44:09zmieniała, bo ona będzie sobie pobierała właśnie tą minimalną wartość chwilowa.

44:12Jest to 3, a to mogę to zmienić do ośmiu.

44:16To co moglibyśmy jeszcze tutaj poprawić, to wyświetlanie tej ceny.

44:19Dodajmy tutaj kropkę, żeby to wyglądało bardziej jak prawdziwa cena.

44:23A więc.

44:25To pole tutaj input.

44:29I powiedzmy tutaj.

44:31Wybierzmy to.

44:33Jak mamy tutaj, to uznano. OK.

44:36Always show the Sims.

44:39Tu i tu.

44:42Teraz odświeżamy.

44:46Zamknijmy w nim te osoby.

44:48I teraz wygląda to już dużo lepiej, jak prawdziwa cena.

44:52Nasz pop up jest już niemal skończony.

44:56Wygląda naprawdę całkiem nieźle.

44:58Jedyne o co moglibyśmy zadbać, to

45:00dostosowanie go w taki sposób, aby właśnie on się tutaj nie królował na całą stronę.

45:06Jak to zrobić?

45:07Przechodzimy do edytora.

45:10I czeka nas kilka poprawek.

45:12Przede wszystkim chcę namierzyć całej

45:14filter pop up i zmienić jego layout nie na kolumnę.

45:20Ale na.

45:22To pierwsza rzecz.

45:26Następnie chcę tutaj.

45:28Wybrać stałą wysokość dla niego równą 760 pikseli.

45:36I teraz tak przechodzę do Filters Pop up

45:38Header, Wybieram Tennant i tak go zostawiam.

45:43Przechodzę tutaj do.

45:45Teraz po Pawle przenieśmy tak?

45:47Zróbmy to w ten sposób.

45:48Niech ta grupa wskoczy nam tutaj na środek.

45:51Czyli mamy Filters Pop up Header.

45:53Tutaj górna krawędź.

45:56Footer dolna.

45:59Content ma się tutaj wyceny stać.

46:03I dodatkowo chcę dla niego ustawić jeszcze stałą wysokość równą 640 pikseli.

46:14Oraz dodać do niego tutaj jeszcze marginesy.

46:1860 od góry, 60 od dołu, żeby uwzględniła to właśnie ten header.

46:25I tutaj nasz footer.

46:31Wydaje mi się, że to chyba już wszystko, co powinniśmy tutaj.

46:35Aha, musimy jeszcze zaznaczyć tą opcję, żeby dodał nam się scroll bar.

46:40Jak widzisz teraz to już nie zachodzi na te treści.

46:42A więc mamy header, mamy footer

46:45i mamy content, który będziemy mogli skalować właśnie wewnątrz tej grupy.

46:48Zaraz zobaczysz jak to będzie wyglądało.

46:50Odświeżamy.

46:56Teraz cały nasz pop up ma określoną

46:58wysokość, a my możemy sobie skalować treść w środku.

47:00Właśnie tutaj za pomocą tego skrobania dużo lepiej to wygląda.

47:04Nie skierujemy całej strony, tylko nasz pop up, co daje dużo fajniejszy efekt.

47:09Ja dziękuję Ci za uwagę.

47:10Była to bardzo długa lekcja, ale widzisz,

47:12wykorzystaliśmy tutaj mnóstwo ciekawych elementów.

47:15Przede wszystkim dodaliśmy nasz pierwszy pop up.

47:18Wykorzystaliśmy tutaj fajny układ elementu parent ze skalowaniem w środku,

47:22a także slider, input i przekazywanie dynamicznych wartości dla pól input.

47:28Wszystko jest gotowe.

47:29Ja dziękuję Ci za uwagę i widzimy się w kolejnej.