Aplikacje no-code z Bubble: Prawy panel i strona profilowa

0:00Cześć, Witaj w kolejnej lekcji, w której

0:01tym razem skupimy się przede wszystkim na wdrażaniu tej prawej kolumny,

0:06która jak widzisz zacząłem przygotowywać, a w zasadzie wdrożyłem ją w całości.

0:10Nie ma tutaj nic trudnego.

0:11To co zrobiłem, to po prostu skopiowałem

0:13sobie te grupy tą górną i dolną, bo wstawiałem tutaj w tej dolnej.

0:18Tylko tak zmniejszyłem sobie padding do 16 pikseli.

0:22Wstawiłem tekst z naszego footer i podobnie ikonki z naszymi sąsiadami.

0:27Tutaj zamiast tego logotypu dodałem obrazek.

0:30To jest 64 na 64 piksele.

0:33Wgrany po prostu na razie na sztywno z dysku.

0:37Tutaj mamy trzy teksty.

0:38Możesz sobie zerknąć na mój projekt wzorcowe, zobaczyć jakie tam są style.

0:43To pole jest wycięte po prostu bezpośrednio ze strony listingu, z tej

0:47grupy pressingu, gdzie mamy tutaj różne dane.

0:50Jak widzisz, ja mam tutaj od razu ustawiony zakres.

0:52Zaraz Ci pokażę jak możemy to właśnie ustawić.

0:55A tutaj na sztywno dodałem trzy grupy.

0:57To są po prostu wpisania wartości bezpośrednio z palca.

1:01Tak więc myślę, że bezprawie robią sobie tutaj poradzisz.

1:04Natomiast zanim przejdziemy do dalszej pracy, ja będę chciał przede wszystkim

1:08wprowadzić delikatne poprawki do naszego menu dolnego.

1:12Dodatkowo zająć się jeszcze tym navy

1:14barem, bo widzę, że mamy tutaj jakieś dziwne odstępy, ale to jest pewnie

1:17związane z tym, że mamy tutaj ustawiony container, którego nie potrzebujemy w

1:21przypadku Dashboard u, a kolejno przejdziemy do tego menu.

1:25Ja też się zacząłem powoli zmieniać.

1:27Tutaj po prostu pozmieniałem tytuły tych linków, a to zamiast linków wrzuciłem

1:33tekst, który ma dokładnie takie same style.

1:35Jak się domyślasz, po prostu dodałem tutaj workflow, które Wyloguj się użytkownika.

1:40Natomiast ten link będzie nas prowadził na

1:42stronę profilowe, którą zaraz zaczniemy budować.

1:45A więc wracamy do edytora.

1:48Zacznijmy od tego pola.

1:52Update Air date.

1:54Ja tutaj ustawiłem Initial Range Start date jako Current date

1:58a end date jako Current date + 14dni, dzięki czemu właśnie te wartości tutaj od

2:03razu wskakują, a reszta tak jak mówiłem po prostu

2:06sprawdziłem moim edytorem wzorcowym i tam ewentualnie pododawać odpowiednie style.

2:11Natomiast przejdźmy jeszcze do menu Mobile

2:14Floating Group i tutaj chcę zmienić Vertical offset nie na minus 1 tylko na 1.

2:20Dopiero wtedy wskoczy nam ta wartość, ponieważ.

2:24W przypadku osi Y minus jeden wychodzi

2:26poza ten element, a jeden dopiero wskakuje do środka.

2:30Dodatkowo chcę tu jeszcze ustawić background tail.

2:35Na nasz kolor.

2:36Tutaj Primary 25.

2:40Przejdźmy do podglądu.

2:43Odświeżamy.

2:46I zbadajmy.

2:487, 6, 8, a jak widzisz teraz dopiero to wskakuje poprawnie.

2:51Mamy tutaj ten border i odpowiednie tło.

2:54A więc nie przedłużając przejdźmy teraz do poprawek związanych tutaj z tym elementem.

3:00Na Dashboard area klikamy Edit element

3:04i przede wszystkim tak, muszę tu namierzyć sobie cały ten container.

3:10Mamy tutaj max wiz.

3:12My tego nie potrzebujemy.

3:15Natomiast mamy tutaj Condition.

3:16Ale ok, musimy dodać jeszcze jeden dla

3:19tych dużych rozdzielczości, czyli Karen Page Viv.

3:27Większe, równe 1920.

3:33I tu będę chciał padding zmienić zwiększyć w zasadzie do 64.

3:38Dokładnie tak jak robiliśmy tutaj dla contentu.

3:43Żeby nam się to zgadzało, przesuniemy ten warunek.

3:51To co chcę zrobić jeszcze tutaj, to

3:53zaznaczyć całą tą grupę na w Barrow Group i ukrywać ją.

4:00To jest głupi solver, a nie jakiś dziwny warunek.

4:04Mi tu wskoczył na Page Five.

4:07Mniejsze, równe 7, 6, 8.

4:11Będę chciał tą grupę ukryć. Nie.

4:15Jeszcze zerknijmy tutaj na layout mamy od strony Hidden.

4:19Zgadza się?

4:21Więc te drobne poprawki są już tutaj dodane.

4:24Teraz otwórzmy sobie menu.

4:26Ja tu po prostu usunąłem ten link Sign up.

4:31Ten Zmieniłem tutaj nazwę na View Profile.

4:34Zaraz otworzymy odpowiednią stronę.

4:36Tu po prostu pozmieniałem.

4:37Tak jak mówiłem tylko nazwę tych linków.

4:40Na razie nie mamy tych stron, więc pozostawiamy sobie tutaj ten indeks.

4:44A tu musiałem wstawić zwykły tekst, aby

4:46móc dodać workflow, bo niestety do linku nie jesteśmy w stanie go ustawić.

4:50On już sam wykonuje jakąś operację, a więc po prostu zwykły tekst.

4:55Postaraj się odwzorować po prostu te same

4:57style, które mamy tutaj dla linku, łącznie z tymi condition ami.

5:01I to w zasadzie wszystko.

5:02Dodaj tam po prostu tylko jeszcze workflow, które loguje użytkownika.

5:06A my teraz przystąpimy do najważniejszego działania, czyli do strony profilowego.

5:11W tym celu klikamy tutaj.

5:13Takiej strony jeszcze nie mamy, ale mogę ją utworzyć z tego miejsca.

5:16Klikam Create new page.

5:20Profile.

5:21I żeby ułatwić sobie życie ja wykorzystam stronę listingu.

5:24Jako klon klikam Create. Muszę chwilę poczekać.

5:29Babel pod spodem utworzy taką stronę, a ja

5:32jeszcze raz muszę sobie kliknąć tutaj i teraz dopiero mam tutaj stronę profilowe.

5:38Nie będziemy wysyłać tam żadnych danych.

5:40Zostawiamy to tylko w ten sposób.

5:42A więc teraz mogę przejść na stronę profil.

5:45Nowo utworzoną.

5:48I przystąpić do pracy.

5:50Przede wszystkim stara.

5:51Postaramy się zachować jak najwięcej

5:53z tej strony, wywalając tylko to, co jest nam niepotrzebne.

5:57I dodatkowo jak się domyślasz strona

5:59profilowana, podobnie jak to na listingu, powinna być stroną dynamiczną, czyli w

6:02przyszłości będziemy to po prostu przekazywać dane konkretnego użytkownika,

6:07tak jak przekazywaliśmy dane listingu i odpowiednio te wartości wyświetlać.

6:11Natomiast na razie zamieńmy ją na stronę

6:13statyczną najbardziej jak się da, czyli usuwamy wszędzie te odwołania dynamiczne.

6:19Clear Expression Wrapper Group.

6:23Klikamy, gdy jest on.

6:25Typowy content. Oferujemy to.

6:27Nam oczywiście wywaliło masę błędów, ale tym się nie przejmujemy.

6:30Będziemy to zaraz naprawiać.

6:32Natomiast zastanówmy się co nam jest tutaj potrzebne.

6:35Nam zostaje.

6:36Jest ok.

6:37Natomiast ja nie chcę mieć tutaj na

6:39stronie profilowego tego tekstu become a host, więc może od razu to poprawimy.

6:46Mamy tą grupę i mamy tutaj jakieś conditions ale.

6:49OK. Current page tam i z search.

6:51O widzę, że już chyba gdzieś to wcześniej dodałem.

6:53Jeżeli nie masz tego ustawionego to takie

6:55condition all powinieneś zmienić dla tej całej grupy na margines.

6:58Czyli jeżeli current page name is search lub po angielsku or current current page

7:05name is profile ten element powinien zostać ukryty.

7:08Ja pewnie gdzieś to zrobiłem między lekcjami.

7:11A więc popraw sobie ten condition all.

7:14Wracamy do strony profilowego.

7:20A więc naprawdę nam zostaje.

7:22Tej floating grupy nie potrzebujemy, więc możemy ją sobie spokojnie usunąć.

7:27A więc limit i wywalamy po pape.

7:31Na razie zostawmy, one nam się przydadzą,

7:33dostosujemy je sobie, a potem odpowiednio rozwijamy.

7:36Wrapper mamy tutaj container To jest ok.

7:40Natomiast tak nie potrzebuje top grup.

7:43Nie potrzebuję foto z.

7:46Nie potrzebuje location i tej grupy popular.

7:51Zostawiamy tutaj tylko grupę Tu Kool Group.

7:55Natomiast będę chciał zmienić tutaj tą

7:57kolejność, a więc site przesunąć teraz do prawej strony.

8:03Make first.

8:05To co będę potrzebował to wyciąć całą tą grupę Host Group.

8:12Czyli Edit i Cat.

8:14I wstawić ją do side.

8:20Classic z kolei wywalić Tak to rezerwy grup rezerw.

8:25HTML nam się przyda.

8:26Przesuniemy jego na razie na dół.

8:28Potem odpowiednio dostosujemy te style CSS.

8:33I teraz jeszcze przejdźmy do prawej kolumny, czyli tutaj do tej grupy content.

8:38Tu będę potrzebował trzy takie grupy.

8:42Tu mamy description ok, tam się przyda.

8:44A więc sobie zaznaczam ten pierwszy divide i go usuwam.

8:49Zaznaczam tą grupę features i ją też wywalam.

8:53Ten tekst zmieniam na razie na sztywno na About Cameron.

9:01Tutaj zamiast tego dynamicznego tekstu mamy tutaj jakieś odniesienie dynamiczne.

9:06Mamy typowy content, wywalamy clear.

9:10Clear.

9:12Zaznaczamy ten tekst.

9:14Wycinamy.

9:16Stawiamy do tej grupy.

9:21Jaki mamy tutaj font.

9:22Body MD 16 pikseli 400.

9:25Ustawmy to samo tutaj.

9:28I pozbądźmy się tego tekstu dynamicznego.

9:32A więc tak pierwszą grupę mamy taką, jaka powinna być.

9:35Będę tutaj jeszcze potrzebował review

9:39oraz jednej grupy, do której wstawimy sobie później nasz listing.

9:45A więc może zróbmy tak.

9:46Ta grupa Basic Info wylatuje.

9:51Łącznie z jednym Divide em. Co my tutaj mamy?

9:55Mamy jeszcze tą grupę review, którą sobie na stronie listingu domyślnie ukryliśmy.

10:00My ją będziemy chcieli teraz zawsze pokazywać.

10:03Tu mamy jakieś condition all.

10:06Oczywiście ten konfesjonale nam się w

10:08przyszłości przyda i będziemy mogli go przywrócić.

10:11Żeby nie wyświetlać serwisu w sytuacji, kiedy użytkownik nie ma żadnych opinii.

10:15Natomiast ja na razie się tu maksymalnie pozbywam jakichś dynamicznych odniesień, a

10:19więc klikam Remove ten condition, ale jedyne co będę chciał zrobić to sobie tak

10:24tą grupę reverse back przesunąć na sam dół.

10:27Czyli make last.

10:30I tak to całą tą grupę riffu przesunąć wyżej.

10:39Czyli mamy tak mamy tą grupę About Divide Grupa Review.

10:44Tu powinniśmy mieć jeszcze DVD R Mamy.

10:46Przesuniemy go sobie?

10:47Tak?

10:48I mamy tu grupę Cities. Tu nie mamy.

10:52Typowy content.

10:53Super.

10:54To będzie po prostu listing z.

10:59Tutaj zmieniam ten tekst na listing.

11:05Pozbywam się.

11:07Tak całej tej.

11:09A menu Scripting Group.

11:12Przejdźmy na przykład na stronę Morze Search.

11:16Tam mamy już tą grupę.

11:20Tutaj jest listing.

11:21Skopiuj ją.

11:23Wracamy na profil.

11:25I wstawiamy ją tutaj do tej grupy.

11:27Listing.

11:31I tylko zmienię sobie tutaj.

11:34Ustawienia na dwa rzędy i dwie kolumny.

11:39OK.

11:42No powiedzmy, że tak.

11:43Przynajmniej w głównym zakresie.

11:45Prawą część mamy gotową, a więc tutaj jeszcze dopasujemy sobie lewą.

11:49Zaraz będziemy się jeszcze bawić i usuwać te wszystkie błędy.

11:53Tak, nie potrzebuję tego tekstu.

11:57Tutaj jest to ok.

11:59Natomiast tak jak mamy to skonstruowane, zerknijmy.

12:06Mamy tak hosting grup gdzie mamy ustawiony RoF.

12:11OK.

12:12W środku mamy obrazek hosta. OK, informacje.

12:16Ja tu jeszcze będę chciał dodać ikonkę.

12:20Poszukajmy ikony File.

12:23OK i postaram się to wstawić tu w odpowiednie miejsce.

12:27Przesunąć ją na sam koniec.

12:32Zmienić te ustawienia na powiedzmy 24 na 24 piksele.

12:37Jaki rozmiar ma ta ikonka?

12:38OK, nawet w porządku.

12:41Chociaż może nie ona powinna być według mnie większa.

12:44Spróbujmy. 36 na 36.

12:46Na razie taką dosyć dużą będzie to edit Icon.

12:55Bez tego L.

12:59I tak taka nazwa ikonki.

13:02I w tym przypadku będę chciał tutaj ustawić sobie ten Neutral 600.

13:09Zerknijmy, jak to zaczyna wyglądać.

13:11Przejdźmy do podglądu.

13:14Odświeżamy.

13:16Możemy przejść na stronę View Profile.

13:21OK.

13:22Ta ikonka jest zdecydowanie za duża, zaraz ją zmniejszymy, natomiast reszta ok.

13:27To mamy jakiś preview i problem, ale tak listing nam się wyświetla.

13:32Ta sekcja about się wyświetla.

13:34A więc podstawowy układ mamy prawie gotowy, natomiast zaraz dopasujemy resztę.

13:40Wracamy do edytora.

13:43I tak to jednak spróbujmy tutaj 24 na 24

13:48tutaj w centrowania i spróbujmy Neutral 600 ustawić na 50%.

13:56Teraz.

13:58Zaznaczam taką pojedynczą grupę, nazwijmy ją tutaj w tym drzewku.

14:02Mamy tutaj dwa razy ostrą i te dwie grupy.

14:05Ja na tej środku będę chciał tu ustawić min.

14:08Viv.

14:09Powiedzmy na 100% chcę, żeby mi się ta grupa tutaj rozciągnęła.

14:13I to samo zrobić dla tej.

14:23OK.

14:25Tą część mamy gotową.

14:26Będę tutaj chciał dodać jeszcze jedną grupę.

14:30A więc.

14:35I tak w tym przypadku będzie to.

14:38Grupa.

14:41Nazwijmy ją chwilowo Host David.

14:46Group.

14:47Oczywiście będziemy musieli pozmieniać te

14:49nazwy, żeby to wszystko pasowało, ale ja się tym chwilowo nie przejmuję.

14:55Ustawiam tutaj kolumn.

14:57Dwanaście pikseli.

15:01Padding top na 14 pikseli.

15:06Pozbywam się tutaj oczywiście minimalnej szerokości.

15:12I tu będę chciał dodać border top.

15:16To standardowe.

15:22I do środka wstawić.

15:25Dwa teksty.

15:31Oraz przycisk.

15:36I zaraz to wszystko dostosujemy.

15:39Tylko pozbądźmy się.

15:41Tej minimalnej szerokości, a minimalnej wysokości.

15:45I zastosujmy tutaj te wszystkie ustawienia.

15:52Pierwszy tekst.

15:56Jest taki body SM 14 pikseli 500 to się zgadza, tylko kolor chcę zmienić na kolor.

16:03Tutaj ten nasz Danger 600.

16:12Następnie wstawić tutaj takie ostrzeżenie.

16:18I czcionkę zmienić na body XS 12 pixeli 400.

16:24Teraz tak button.

16:31Zacznijmy od Outline Smile.

16:36Dieta, styl.

16:39I zmieniamy to na Danger.

16:46Condition, ale Howard dobrze będzie to 5 25.

16:57W ten sposób.

17:00OK, będzie to Street.

17:04Account btn.

17:16I za jego pomocą użytkownik będzie mógł usunąć konto.

17:20Na razie nie będziemy wdrażać takiej funkcjonalności.

17:22Po prostu dodaliśmy tutaj

17:24odpowiednią informację, że nie będziemy usuwać takiego konta, tylko jest

17:27archiwizuje je na 60 dni, a dopiero potem wywali.

17:30Ale to jest temat, którym się oczywiście zajmiemy.

17:33Sprint nr 2.

17:34Na razie wystarczy nam tutaj tylko taka informacja.

17:37A to co będę chciał zrobić, to dodać tutaj workflow do tej ikonki.

17:44I tak musimy wybrać i skleić kabel.

17:48I wybrać Start Edit Workflow.

17:52I tutaj sobie wybrać.

17:56Szoł.

17:58Ten element.

18:00I to będzie tutaj galerii.

18:02Zaraz to zmienimy.

18:03Zmienimy tą nazwę.

18:06Co mamy tutaj mamy jakieś galerie image.

18:10I MG, którego nie powinniśmy mieć.

18:13A więc. To się.

18:16Tego się pozbyć.

18:17My tu mamy zamykanie.

18:20Dobra, ale reviews To nam otwiera review popup.

18:24Super.

18:25Wracam do designu.

18:27Przechodzę do Gallery Popup.

18:29Mamy tutaj listing, którego się pozbywamy.

18:35OK.

18:36Powinniśmy mieć tutaj chyba jeszcze jakieś custom state.

18:43OK.

18:43Zaraz po page wrapper nam wyskoczył typowy content.

18:47Dobrze, nie powinno go tutaj być.

18:49Mamy tutaj jakiś custom state, którego też się pozbądźmy.

18:53Natomiast ja chciałem zaznaczyć tutaj Gallery popup.

18:56Właśnie gdzieś kliknąłem.

19:00Clear Expression.

19:02Tutaj też mieliśmy custom state.

19:05Wywalamy.

19:08I ok. I tutaj idźmy teraz w tym kierunku.

19:11To nie będzie galeria pop up, tylko edit Profil pop up.

19:17Maksymalna szerokość 520 pikseli.

19:21W ten sposób przesuniemy sobie to.

19:24I przejdźmy tutaj.

19:27Oznaczmy sobie tą nazwę.

19:30I tak header.

19:33Zmieniamy nazwę.

19:36A więc mamy tutaj typowy content.

19:38Sterujemy.

19:40A ten tekst zmieniam na statyczne.

19:43To po prostu będzie, jak się domyślasz.

19:45Edit Profile.

19:49Tu mamy obrazek, który wywalamy.

19:53Mamy tutaj też zaraz zaznaczmy sobie to

19:56Gallery Popup content, zmieńmy nazwę, ustawmy chwilowo min.

20:01Height na 200.

20:04Dlatego, że chcę wywalić tutaj ze środka te reporting grupę.

20:11A więc limit.

20:15Przechodzę do fightera.

20:19Zmieniam nazwę i co mamy tutaj w środku?

20:23Mamy ten rating.

20:25Wywalamy.

20:28Mamy to info o hoście wywalamy.

20:32Wstawiamy tutaj button na środek.

20:38I tak filtruj to content 44 piksele będzie to Save button.

20:52Po prostu save.

20:55I styl button primary small.

20:59A może spróbujmy BIG a?

21:01Właśnie, trochę lepiej to wygląda.

21:04Tutaj jeszcze zerknijmy na ten footer.

21:06Mamy tutaj ok.

21:0716.

21:09Dobra, możemy to na razie zostawić w ten sposób.

21:11A tutaj musimy wstawić pola, za pomocą

21:13których użytkownik będzie mógł edytować swój profil.

21:17Natomiast nie będziemy sobie utrudniać

21:19życia, tylko przejdziemy na stronę od brandingu.

21:26Ukrywam. Step 21 pokazuje Step 2 Group.

21:33Zaznaczam całą grupę Step Details Group.

21:37Kopiuje.

21:39Wracamy na profil.

21:45I wstawiamy.

21:47Ja tutaj.

21:50Chwalmy tylko ten nagłówek już teraz mamy.

21:55W zasadzie gotowy pop up do edycji naszego profilu, więc tą część mamy

22:00gotową, a w zasadzie może nie do końca gotową, bo zamknijmy ten profil.

22:05I tutaj ten papa w zasadzie.

22:07Przejdźmy do tej grupy Host Group i to co chcę zrobić.

22:12To tak skopiować tą nazwę, ustawić ją tutaj jako ID atrybut

22:18tylko po to żeby móc właśnie sobie poprawić te style.

22:21To będzie host HTML czyli nasz element HTML.

22:27Zostawiamy.

22:29To co było, tylko podmieniamy nazwa Reserve Group na Host Group

22:33właśnie po to, żeby tamten position styki tutaj wskoczyła.

22:38Przejdźmy do podglądu.

22:39Zobaczmy czy to zadziała.

22:46OK. Działa tak jak powinna.

22:48Mamy tutaj steki position.

22:51Tą część mamy gotową.

22:52Nam się otwiera.

22:53Możemy go sobie zamknąć.

22:56OK, to teraz pracujmy tutaj tą prawą kolumnę.

23:00Tak, to jest gotowe.

23:02Listing jest gotowy.

23:03Musimy więc tutaj jeszcze poprawić ją.

23:06A więc pozostaje nam tylko do poprawienia sekcja Review.

23:09A więc tak wracamy.

23:12Tu.

23:15Tak co mamy tutaj.

23:17To nam otwiera popup.

23:20OK, to zerknijmy na ten review popup.

23:23Co mamy tutaj ustawione?

23:25Jak widzisz mamy tutaj też ustawiony

23:27typowy content, którego ja się będę chciał pozbyć.

23:32Czyli.

23:34W ten sposób.

23:36Na całego tego popu.

23:40Dla hejtera też.

23:45Ten tekst zmienimy na statyczne.

23:51Będzie to Cameron Reid.

23:58Tytuł pozostawiamy bez zmian.

24:01Tutaj mamy.

24:03Tak. Co my tutaj mamy?

24:05Zerknijmy.

24:07Mamy tutaj Reporting grupę gdzie filtrować sobie da record Review.

24:14Ja tego filtrowania chcę się tutaj pozbyć. A więc klikam.

24:18Dlatego zostawiam wszystkie reguły.

24:20Oczywiście w przyszłości będziemy musieli to dostosować.

24:24Natomiast na razie, tak jak mówiłem, im bardziej statyczne, tym lepiej.

24:28Nie mamy tutaj karty i podobnie zresztą

24:30chyba mamy tutaj właśnie na tej grupie też pozbywamy się filtrowania.

24:37Żeby nam się te elementy pojawiły.

24:40I tutaj też mamy review card.

24:43Ja się tego w zasadzie pozbywam.

24:48Z tego powodu, że przygotowałem kopię, która będzie troszkę inaczej wyglądała.

24:54A więc tak utworzyłem nowy

24:56element na bazie Read More i nazwałem go User Review Capture.

25:02Dlaczego utworzyłem kopię?

25:03Ponieważ tutaj układ będzie trochę inny.

25:06I dodatkowo chciałem Ci pokazać bardzo fajne zastosowanie tego pola.

25:10Na podstawie tej kolumny listing, którą dodaliśmy do rozwoju.

25:13Jak to powinno działać w praktyce?

25:15Spróbujmy przejść tutaj do naszego projektu wzorcowego.

25:21OK, jestem na stronie. Tutaj.

25:24Jak widzisz działa to w ten sposób, że mamy tutaj tak tekst review tutaj autora.

25:32Natomiast w tym miejscu chcę się odnieść

25:34nie do samego review, ale do listingu, którego on dotyczy.

25:37Z niego chcę wyciągnąć obrazek, wyciągnąć jego nazwę.

25:40Tutaj będzie link i po kliknięciu w ten link będę chciał otwierać stronę listingu.

25:45Jak widzisz tutaj to pozostało bez zmian, tylko zaraz poprawimy ten układ.

25:50Zaraz Ci pokażę jak to działa i w jaki

25:52sposób w ogóle z review wyciągnąć dane tutaj tego listingu.

25:59Tak, to jest ta grupa z autorem przesunięta na dół.

26:02Może zacznijmy od tych od początku.

26:06Typowy content to jest USOS reviews. To nam się zgadza.

26:09To przekazujemy tutaj dokładnie to s reviews.

26:15I tak zacznijmy tym razem od dołu.

26:17Mamy tą grupę z autorem to przekazujemy s Reviews tak jak było.

26:22Tutaj nic nie zmieniałem, po prostu przeniosłem tą grupę na dół.

26:25Na środku mamy tekst, który odnosi się do Reviews Display.

26:28To jest w porządku.

26:30Następnie dodałem tutaj header.

26:32Już Ci pokazuję jak on jest tutaj poustawiane.

26:35Jest to Row, tutaj Row gap kolumn GAP na 12 pikseli.

26:41W środku mamy obrazek 96 pikseli 3 na 2.

26:46Wyciągnął wartość dynamiczną.

26:47Zaraz ci pokażę jaką.

26:49A tutaj po prostu mam Tak, mamy to info,

26:54które mieliśmy wcześniej zgrupowane właśnie w grupę typu kolumn 4 piksele.

27:00A tu dodatkowo dodałem jeszcze link.

27:03Z którego wyciągam.

27:05O właśnie, co sobie wyciągam?

27:07Odnoszę się do Parent Group of View, następnie do pola Listing, a ponieważ

27:12kierujemy to po prostu do konkretnego listingu do całego tego option setu, to

27:16jestem w stanie wyciągnąć sobie z niego jak widzisz wszystkie jego atrybuty.

27:20Czyli najpierw odnoszę się do Option Status Review do rekordu z niego

27:25do niego mamy właśnie tutaj jako pole ustawione listing.

27:28I teraz mogę sobie wyciągnąć właśnie display i dokładnie w ten sam sposób

27:32wyciągam tutaj obrazek, czyli Parent group s review listing image main first item.

27:39Ponieważ właśnie linkujemy tutaj dynamicznie do tego całego setu,

27:43to mamy dostęp do wszystkich atrybutów takiego rekordu.

27:47To jest właśnie genialne.

27:48Jeżeli będziemy linkować pomiędzy różnymi

27:51konceptami, różnymi typami danych w bazie danych, o czym

27:55zresztą przekonasz się w przyszłym sprincie.

27:57Natomiast właśnie w ten sposób to działa.

28:00Czyli mamy tutaj listing

28:02i normalnie mamy dostęp do wszystkich atrybutów, a więc już się nie powtarza.

28:07Natomiast chcę tutaj przejść do tego linku, to wyciągamy.

28:12Oczywiście nazwę display, a to co chcemy zrobić, to uzyskać

28:17dokładnie ten sam efekt, jaki mieliśmy tutaj dla tej karty.

28:21Listing. Cartera, jak pamiętasz.

28:24Tutaj dwa workflow. Po jego kliknięciu

28:27kierowaliśmy użytkownika na stronę listingu i przekazywaliśmy ten parametr.

28:32Po prostu odnosiliśmy się do Listing Display.

28:34A więc możemy zrobić dokładnie to samo.

28:37Tu.

28:41Tylko tym razem nie będzie to workflow, ponieważ możemy wykorzystać zwykły link.

28:46Ja będę chciał, żeby po kliknięciu w ten

28:47tekst, a nie w całą tą kartę użytkownik otwierał sobie tą stronę z listing em.

28:53A więc tak. Internal page Tak, bo to jest strona

28:56wewnętrzna, jaka strona, stronę listingu i co chcemy tutaj jeszcze zrobić?

29:00Otworzyć ją w nowej zakładce i przesłać więcej parametrów.

29:07Czyli dodajemy L, bo tak go nazwaliśmy.

29:11I będzie to oczywiście Parent Group OS Review.

29:14Listing Display.

29:17I to wszystko.

29:19Jak widzisz było to niesamowicie proste.

29:21Teraz możemy taką kartę sobie zastosować na naszej stronie profilowego.

29:28A więc.

29:31Klikam, wstawiam tutaj.

29:34Przekazuję tutaj, jak się domyślasz, Karen Flores Review.

29:38Ten główny typ Data Source nam się zgadzał.

29:41I teraz przejdźmy do podglądu.

29:43Odświeżamy.

29:45Teraz taryfy powinny nam tutaj odpowiednio wskoczyć.

29:48Wskoczyły trzy.

29:50To się zgadza.

29:51Mamy ten układ nowy z nowej karty.

29:52Ja mogę kliknąć tutaj na ten link i powinna mi się otworzyć strona.

29:58I zgadza się.

29:58Widzisz, tutaj wyciągnęliśmy dynamicznie te dane.

30:01A jeżeli pokaże Ci pasek adresu?

30:03Jak widzisz przekazujemy tutaj parametr l równy listing i tutaj wyciągamy atrybut

30:09display, który przekazujemy do paska adresu.

30:14To co jeszcze musimy zrobić to dokładnie tą samą kartę wstawić po papu.

30:18A więc wracamy do edytora.

30:22Nie chcę dodawać pop upów, tylko chcę pokazać ten level pop up.

30:28Pokaż nam się tutaj.

30:31OK.

30:33Mamy content, mamy tutaj reporting grupę,

30:36a ona nam się po prostu chwilowo skurczyła.

30:38Dajmy jej jakąś minimalną wysokość.

30:40Na razie dwieście.

30:44I wstawiamy tę kartę.

30:48O właśnie. I teraz się tego pozbądźmy.

30:54Przekażmy tutaj odpowiedni data sos.

30:59I teraz już powinno to działać.

31:02W pełni poprawnie.

31:03Przejdźmy jeszcze raz do podglądu.

31:05Odświeżamy.

31:09Klikamy tutaj.

31:12A jak widzisz mamy tutaj wszystkie.

31:16Tutaj elementy.

31:18Coś się tu nie zgadza.

31:24Jakoś tutaj dziwnie wyskakują.

31:28Trzeba by było to po prostu posprawdzać.

31:32Zerknijmy co tu się dzieje z reviews.

31:36Cała ta reporting grupa.

31:40Aha, już widzę.

31:42Została nam tu River Card. OK.

31:44Dobra.

31:45Teraz dopiero River Point Group i User Card.

31:49I właśnie mieliśmy jakieś pozostałości, które nam się nie usunęły.

31:54Teraz.

31:56Odświeżamy.

32:01I ok. I teraz dopiero jest właściwie.

32:03Pojawia się tylko ta karta, która powinna się wyświetlać.

32:06To oczywiście musimy sobie dopasować te style, żeby nam się to nie przecinała.

32:11Natomiast to pozostawiam Tobie.

32:13Pewnie gdzieś wskoczyła tam jakaś minimalna czy maksymalna szerokość.

32:17Dodatkowo Twoim zadaniem będzie również dostosowanie tej strony pod RWD.

32:22Tutaj myślę, że nie będziesz mieć jakichś większych problemów.

32:26Jedyne co musisz zrobić to w odpowiedniej

32:28rozdzielczości tą grupę wyświetlić na całą szerokość, a tą prawą pod nią.

32:35Jedyne co tutaj może sprawić Ci problem

32:37moim zdaniem to fakt, że dodaliśmy tutaj te style CSS

32:41i ten element ma tutaj właśnie position sticky, natomiast on to position.

32:45Sticky powinien łapać dopiero o określonej szerokości ekranu.

32:50O ile dobrze pamiętasz, na stronie search też dodawaliśmy element HTML

32:55i tam pokazałem Ci jak wykorzystać właśnie Media Query.

32:58W tych stylach CSS.

33:00Jak się odnieść właśnie do określonej szerokości?

33:03Spróbuj sobie na to zerknąć.

33:05Ewentualnie poczytaj sobie o Media query w internecie.

33:09Wystarczy, że po prostu

33:10weźmiesz sobie ten przykład, który zastosowaliśmy

33:13na stronie serii i postarasz się go dostosować do tych swoich potrzeb.

33:17Ewentualnie ja to zaraz tutaj poprawie, więc zawsze do dyspozycji masz mój edytor.

33:23I ten właśnie projekt wzorcowy.

33:25A ja dziękuję Ci w takim razie za uwagę.

33:27Była to dosyć długa lekcja, ale zrobiliśmy tutaj masę ciekawych rzeczy.

33:31Tak więc widzimy się już za.