Aplikacje no-code z Bubble: Sekcja reviews

0:01Witam Cię w kolejnej lekcji, której tym

0:02razem skupimy się na sekcji Review na naszej stronie listingu.

0:06Jak widzisz poczyniłem odpowiednie

0:08przygotowania i wdrożyłem sporą część układu.

0:11Znów nie chcę marnować na to Twojego czasu.

0:12Zaraz sobie to dokładnie omówimy.

0:14Nie ma tu natomiast nic skomplikowanego,

0:17ale wykorzystamy przede wszystkim jeden z nowych komponentów, a w zasadzie pluginów.

0:21Aby wyświetlić tutaj odpowiedni pasek procentowy.

0:25Dodatkowo porozmawiajmy jeszcze o jednej bardzo ważnej rzeczy.

0:28Chcemy tutaj wyświetlać recenzje dotyczące tego konkretnego listingu.

0:33Natomiast nasz Option Set,

0:35który będziemy musieli zaraz dodać, zawiera tak naprawdę wszystkie review.

0:40Podobnie to będzie zresztą w Twojej bazie danych.

0:41Jeżeli użytkownicy będą wystawiać jakąś

0:43recenzję, to one wszystkie wskoczą pod jeden typ danych i będą reviews.

0:48W jaki więc sposób jesteśmy w stanie ograniczyć wszystkie te recenzje i

0:52wyświetlać tylko te, które dotyczą konkretnego listingu?

0:56Otóż jest to bardzo proste, ale w

0:58pierwszej kolejności przejdźmy do samej bazy Variable i tutaj do tego s review.

1:05Jak widzisz mamy tutaj takie pole i bardzo dziwne wartości.

1:09Zaraz do tego przejdziemy.

1:10Tu, w tych polach korzystamy ze standardowych typów danych.

1:13Tutaj jest to po prostu obrazek.

1:15Variable to po prostu nazwa, tak jak my to zamieniliśmy na obrazek Babel.

1:20To jest po prostu tekst, tekst, data, data i oczywiście number.

1:25Natomiast ta kolumna, ten filtr linkuje do innej bazy.

1:30Możemy to zrobić bardzo prosto, podobnie zresztą jak Power Table Portable.

1:36Tutaj wskazujemy link tu i wybieramy do jakiej innej bazy.

1:41Powinniśmy kierować.

1:42Mamy tutaj wszystkie tabele.

1:44Jakie mamy w tej całej, całej tej bazie, z tej Nest.

1:48W ten sposób.

1:49Ja mogę powiedzieć, że ten record review ma dotyczyć właśnie

1:55tego konkretnego listingu wyciągniętego właśnie z tej tabeli.

2:00Jak widzisz, w tym przypadku będzie to ile dobrze pamiętam.

2:03Było to chyba Bali of an Front Serenity.

2:07I w ten sposób możemy wskazywać, do jakiego listingu ten review jest.

2:12Co znaczy dana opinia wystawiona przez

2:14użytkownika, skoro nie wiemy, czego ona tak naprawdę dotyczy.

2:17Dlatego też właśnie musimy tutaj

2:18zastosować takie łączenie pomiędzy dwoma tabelami i wskazać jasno i wyraźnie,

2:23do jakiego listingu taka opinia została wystawiona.

2:27A więc przejdźmy do edytora i spróbujmy zacząć dodawać taki option set.

2:31Skopiuję sobie tutaj jego nazwę.

2:35Przechodzimy do Data Option Set, dodajemy nowy set,

2:41klikam Create i zaczynamy dodawać poszczególne kolumny.

2:46Zacznijmy od tych najprostszych, czyli autor awatara.

2:52Będzie tak jak mówiłem po prostu obrazek, czyli ten basic tabs.

2:55Tu mamy tutaj podziału na różne typy tych danych.

2:58To jest basic tabs po prostu image.

3:04Autor City i autor nam to będą po prostu teksty.

3:08A więc możemy dodać.

3:09Autor City.

3:12Tekst.

3:15Autor name.

3:17To też oczywiście będzie tekst.

3:24Mamy tutaj jeszcze Start date and date.

3:27To są oczywiście daty.

3:29Czyli start date i w tym przypadku wybieram Basic Type Date.

3:37End date.

3:38Dokładnie tak samo.

3:45I mamy tutaj jeszcze rating.

3:51Tu jest typu number.

3:53No i pozostaje nam teraz dodanie

3:55ostatniego atrybutu ostatniej kolumny o nazwie listing.

4:00Chcemy się odnieść do konkretnego setu.

4:03W naszym przypadku jest to Office Things. I to w zasadzie tyle.

4:07Jeżeli to ma być pojedynczy rekord, to zostawiamy to w ten sposób, a jeżeli miała

4:10to być lista rekordów, to oczywiście musielibyśmy zaznaczyć tutaj ten checkbox.

4:15U nas review zawsze będzie dotyczyło pojedynczego listingu.

4:18Klikamy więc Create i teraz dodajmy tutaj pierwsze reviews.

4:23Zaraz zobaczysz, w jaki sposób będę mógł tutaj nawiązać do konkretnego rekordu.

4:28Przejdźmy tutaj.

4:31Klikam tu, żeby to rozwinąć.

4:33Kopiuję tą wartość i to będzie Bali Houston Front Serenity.

4:38OK.

4:39Tak.

4:42Modify atrybut.

4:44I teraz mamy tutaj listing.

4:45Jak widzisz mogę sobie kliknąć i wskazać

4:48jasno, wyraźnie, którego rekordu to dotyczy.

4:50U nas jest to billion front.

4:53A teraz oczywiście pozostaje mi uzupełnić te pozostałe dane.

4:56Natomiast to już są wiadomo, te standardowe typy danych, z którymi już nie

5:00raz pracowałeś i nie raz się z nimi spotkałeś dodając

5:03kolejne sety, więc myślę, że sobie w zupełności z tym poradzisz.

5:07Mi chodziło tylko o to, abyś wiedział w

5:09jaki sposób wskazać jako typ danych inne opcje i jak wybrać sobie konkretny rekord.

5:16Tu w wskazówkach masz wszystkie rekordy,

5:18do których powinieneś się kierować przy review.

5:22A teraz oczywiście daj mi chwilę czasu,

5:25żeby za pomocą magii ekranu uzupełnić te wartości.

5:28I będziemy zaraz kontynuować naszą pracę.

5:54Tu jeszcze jedyny problem jaki możesz napotkać to wpisywanie danych w Babel.

5:58Jeżeli ja sobie spróbuję skopiować tą

5:59wartość i wkleić ją w to miejsce to jak widzisz wychodzą mi tu jakieś

6:06kompletne bzdury i niestety trzeba to zrobić w Polsce.

6:08Ma to być 21 lipiec 2023.

6:13Czyli Babel.

6:14Zaczynamy od miesiąca, a więc 07.

6:180 1 2 0 2 3 to musimy wpisać jakąś godzinę.

6:24Niestety jest to wymagane.

6:25Jeżeli dodajemy to ręcznie wpisujemy po prostu 12:00 AM.

6:32I teraz to samo musimy zrobić dla End date.

6:34W tym przypadku będzie to 0 7 10 2 0, 2 3.

6:39I znów ta sama godzina 12:00 am a.

6:44Teraz oczywiście dodajemy tutaj jeszcze rating.

6:49Taka wartość. I zaraz sobie dodamy obrazek.

6:57Będzie to katalog nast.

6:59To jest Revue Revue.

7:01Autor 1.

7:03I teraz pierwszy rekord mam już dodane.

7:06Wiesz już jak pracować z tym polem Listing Wiesz jak pracować z polem data?

7:10I teraz dopiero uruchamiamy Magia ekranu i zaraz do Ciebie wracam.

7:14Po dodaniu wszystkich tych rekordów.

7:22Dzięki magii ekranu cały mój listing jest już gotowy.

7:25Myślę, że nie powinno Ci to sprawić najmniejszego problemu.

7:28Wiem, że jest masa roboty, zwłaszcza z uzupełnianiem tych dat.

7:32Jedyna rzecz, która mogłaby Cię tutaj zaskoczyć to fakt, że jeżeli tutaj wpisał

7:37bym 5 0 to niestety Babel sobie tą kropkę za to pomija i zostawia samą piątkę.

7:42Ale tym się nie przejmujemy.

7:44Możemy po stronie frontu zadbać o

7:45odpowiednie wyświetlanie takich wartości liczbowych.

7:47Zresztą potem to zrobimy.

7:50Na chwilę obecną skoro cały nasz set jest gotowy, to przejdźmy do designu.

7:57Przejdźmy do sekcji Revue.

8:00Omówmy jak ja skonstruowałem.

8:03Przede wszystkim mamy tutaj.

8:05Livebox Group.

8:08Tylko border Standardowe color zaokrąglenie narożników 8 pikseli.

8:13Layout typu router GAP 24 piksele, column

8:17gap 48 pikseli i padding z każdej strony równe 24 piksele.

8:24Kolejno dodajemy tutaj jedną grupę o nazwie.

8:28Winno być reviews left.

8:33Tutaj jest ta kolumna.

8:35Będę chciał strzelić te elementy góra dół, czyli wstawić tutaj Space Between.

8:40Dodatkowo rozciągnąć tą grupę na całą wysokość dostępnego kontenera rodzica.

8:46I jak widzisz tutaj to jeszcze zaznaczam

8:48tylko tu content nie dodaje żadnych marginesów padding ani nic podobnego.

8:53Tą grupę po prostu writing może sobie skopiować.

8:58Na przykład właśnie tutaj, z tego miejsca.

9:02Ja tak zrobiłem i jedynie to musiałem tutaj zmienić.

9:05To wielkości ikonka na 36 pikseli.

9:09A ten tekst tutaj to Reading trzeciego typu kolor Neutral 800.

9:16Całość zgrupować dodatkową grupę Reviews Left Top Group.

9:21Nie dodałem tylko GAP równe 8 pixeli i kontener ustawiłem na column.

9:28Tu z kolei dodałem przycisk wysokość 40 pikseli.

9:34Jest to styl Button Outlet.

9:36Small.

9:38I jest to oczywiście tekst ustawiony na kolor GW.

9:43Następnie mamy tutaj drugą grupę Reviews RAID Group.

9:49Tu z kolei mamy kolumn 24 piksele na pół.

9:53W środku mamy.

9:56Grupy o nazwie Reviews ROW Group.

9:58Tutaj row to strzelane wartości do lewej

10:00do prawej krawędzi, czyli znowu Space between, tym razem dla ROW.

10:07Tutaj mamy grupę z tekstami.

10:10Znajdźmy sobie na style to jest pod SM.

10:1314 pikseli 500 body SM 14 pikseli 400.

10:18Tu z kolei mamy kolejną grupę.

10:23Oczywiście musielibyśmy poprawić jej nazwy, ale ja na razie to pomijam.

10:27Ustawione na 8.

10:29W środku mamy tekst.

10:31Jest to body M2 16 pikseli 700.

10:34I teraz chcę tutaj wstawić odpowiedni

10:36progress bar, bo na chwilę obecną mam taki modulowany shape aby dodać progress bar.

10:41Przechodzimy do pluginów.

10:44Klikamy Add plugins i wybieramy, a w zasadzie wpisujemy Progress Bar.

10:49Jest to pierwsze utworzone właśnie przez samo Babel.

10:51Klikamy Install.

10:55I teraz wracamy do naszego edytora.

10:58Czyli design.

11:01Szukamy Progress bara powinien się tutaj pojawić.

11:05Jest Progress Bar.

11:07Wstawiam go w to miejsce.

11:09Jak widzisz mamy tutaj wartość procentową, którą możemy sobie ustawić.

11:14Mamy ten kolor tutaj.

11:15Dla tego progresu mamy kolor tła.

11:17Dodatkowo pojawia nam się tutaj jeszcze

11:19ten tekst, a jego wartości możemy ustawić tutaj odpowiednie fonty itd.

11:24Ja nie chcę tutaj mieć żadnego tekstu, a więc.

11:28Wielkość fontu ustawiam na 0 pikseli.

11:32Tu będę wpisywał na stałe wartości

11:35z palca, czyli ma to być 80 procent, a więc wpisujemy 80.

11:40Będzie to positive.

11:45Taboret Progress Bar.

11:48I teraz tak tutaj Progress Bar Color zmieniam na Color Nasz Success 600.

11:59Background style ustawiam flat color.

12:03Znowu. Success.

12:05600, ale na 50%.

12:11Nie chcę mieć tutaj żadnego burdelu, a

12:13jedynie zaokrąglenia narożników równe 4 piksele.

12:18Przechodzę do layoutu i zmieniam wartości na stałą szerokość równą 60 pikseli.

12:25I wysokość równą powiedzmy 4 pikselach.

12:28Chyba tak ustawialiśmy ten shape tak 64.

12:32Mogę się go pozbyć?

12:35Jak widzisz mam teraz taki fajny progress bar.

12:38Mogę go skopiować i wstawić tutaj do tej grupy.

12:43Pozbyć się Shape a.

12:46To będzie 15.

12:50Neutral to będzie nasz kolor.

12:53Ten, czyli kolorowy wzornik 600.

12:58Oczywiście background color to też warning 600 ustawiony na 50%.

13:04Jeszcze tylko stawiamy tempo, gdy zbada do ostatniej grupy.

13:09I zmieniamy wartość napięć.

13:15A kolory tutaj na error 600 a w zasadzie

13:18Danger 600 u nas tak nazywa się taką nazwę nosi.

13:21Ten nasz kolor tutaj jest zmienna kolorystyczna Danger 600.

13:25Pantera 650.

13:31A więc tą grupę mamy tutaj gotową.

13:33Dodatkowo wstawiłem tutaj jeszcze znany Ci już Divided.

13:37I dla niego ustawiłem rozciągnięcie na całą wysokość dostępną szerokość 1 piksel.

13:43A więc tutaj tą sekcję review mamy już gotową.

13:46Ja przygotowałem też taki zarys naszej karty.

13:49Zaraz utworzymy z tego odpowiedni element.

13:52Nie ma tutaj nic trudnego.

13:54Mamy układ typu kolumnowy o 12 pikseli.

13:57Ten element skopiowałem sobie bezpośrednio z elementu o nazwie Block card, o ile

14:02dobrze pamiętam i po prostu wstawiłem go tutaj.

14:06Na razie nie przekazujemy tutaj żadnych dynamicznych danych.

14:10To wyczyściłem, żeby Babel nie sypało mi tutaj błędami.

14:15Tutaj dodałem tekst.

14:16Jest to Body SM 14 pikseli 500.

14:19Tutaj znowu kolejna grupa oraz szalone elementy.

14:26Writing. Po prostu go skopiowałem i znowu tutaj

14:28wstawiłem, a tutaj dodałem na razie na sztywno taki tekst.

14:33Odnoszący się do daty.

14:37To co zrobiłem jeszcze, to skopiowałem sobie

14:41pop up ze strony serca i tym razem nazwałem go po prostu reviews pop up.

14:47Ma on niemal takie same właściwości jak ten dostarcza.

14:50Natomiast to co pozmieniałem tutaj, to ustawiłem Type of Content na osi Strings

14:54i wybrałem ten przypisany do naszego rapera, bo tam przekazujemy ten cały

14:59główny listing, który wyświetlamy na naszej stronie.

15:02Layout to dokładnie to co było, czyli align to parent.

15:05Maksymalna szerokość 520 pikseli, wysokość 760 pikseli.

15:10W środku mamy header.

15:13Oczywiście musimy tutaj zmienić jego nazwę, czyli review.

15:24Pop up header a line to parent.

15:27Mamy tutaj off listing tylko po to, żeby

15:29wyciągnąć nazwę takiego listingu i od to miejsce wyświetlić.

15:33Kolejna. Mamy tutaj oczywiście footer.

15:36Też zmieniamy nazwę.

15:41Tutaj pozostawiłem takie wartości jak wysokość ustawioną na stałe na 60 pikseli.

15:46Ten kolor flat color primary 25 dla background.

15:52Oczywiście border top.

15:54Tutaj znowu wstawiłem sobie tą grupę z

15:56ratingiem i tylko z mniejszą i tylko zwiększyłem ten tekst do head linku.

16:01Cześć, tu mam body SM 14 pikseli 500 wartość

16:05pisana z palca i tutaj jest grupa Reviews popup content.

16:10Która ma ustawioną stałą wysokość na 640 pikseli i włączone do scrollowania.

16:16Jak to ma działać?

16:17Otóż przejdźmy do naszej strony i omówmy to działanie.

16:21Jak to w ogóle ma tutaj wyglądać?

16:23Ja będę chciał, aby tutaj

16:25sekcja Review pojawiała się tylko i wyłącznie wtedy, kiedy rzeczywiście mamy

16:30jakieś review dotyczące tego konkretnego listingu.

16:33Oczywiście mógłbyś tutaj zostawić ten nagłówek i wyświetlić tutaj krótką

16:37informację, że jeszcze nie dodano żadnej recenzji dotyczącej tego listingu.

16:42Ja po prostu pójdę na łatwiznę i usunę

16:44sobie całą tą grupę, a w zasadzie to ukryję odpowiednimi conditions falami.

16:49I teraz tak po kliknięciu w teorii View będziemy standardowo wyświetlać nasz

16:54popup, z tą różnicą, że tu chcę wyświetlać maksymalnie 3 recenzje.

16:59Oczywiście będziemy potrzebować Scripting

17:01Group i przekazywania tutaj odpowiednich View.

17:04Natomiast po kliknięciu w ten guzik wyświetleniu popup a chcę tutaj dodać

17:09wszystkie recenzje jakie dotyczą właśnie tego listingu.

17:12I oczywiście tutaj to skalowanie,

17:14żeby ten popup nie robił nam się tutaj kilometrowe na wysokość.

17:18A więc przystąpimy do działania.

17:21Wracamy do edytora.

17:24Zamykamy nasz popup i przechodzimy do sekcji Reviews.

17:28I to, od czego będę chciał zacząć tutaj od

17:30dodania repeat grupy, która będzie wyświetlała nam tą listę tutaj recenzji.

17:36A więc daje repeat grupę.

17:40Pozbywamy się oczywiście minimalnej

17:42szerokości i ustawiam tutaj na przykład row.

17:46Będzie to.

17:48Vivus ERG.

17:51I teraz zastanówmy się co chcemy.

17:54Ja chcę wyświetlać 3 rzędy.

17:57Tak jak mówiłem maksymalnie trzy recenzje, jedną kolumnę.

18:02I dodajmy tutaj jeszcze separator pomiędzy tymi kolumnami.

18:06A w zasadzie rzędami to będzie solid.

18:09Nasz kolor biały i 24 pixele.

18:14Natomiast jaki typowy content chcemy tutaj ustawić?

18:17Przede wszystkim os. Review.

18:19To powinno być dla Ciebie jasne.

18:21A data Source?

18:22Zacznijmy od All OS Review.

18:26Natomiast to nam oczywiście wyświetli wszystkie recenzje, a my musimy je

18:29ograniczyć tylko do tych, które dotyczą właśnie tego konkretnego listingu.

18:33Podobne ograniczenia już wcześniej

18:35stosowaliśmy za pomocą tutaj opcji filtra i znowu możemy ją wykorzystać.

18:40Czyli wpisuję sobie filtr, OT jaki filtr chcemy ustawić, A w zasadzie jaki stan?

18:46Otóż chcę się odnieść do this other review, czyli tego pojedynczego rekordu,

18:52odnieść się do jego listingu i powiedzieć, że ten listing.

18:58Jest to równe.

19:00No właśnie, skąd Chcemy wyciągnąć główny listing?

19:02Oczywiście spać w rapera.

19:07Jak widzisz, dzięki temu, że zastosowaliśmy właśnie tutaj ten typ

19:10kolumny ustawiony po prostu na chaos listing, możemy się właśnie teraz w prosty

19:15sposób odnieść do niego, wyciągnąć właściwy listing, spać w rapera

19:19i w ten sposób właśnie tutaj sobie zawęzić te rekordy.

19:23Klikam close i to wszystko.

19:26Natomiast to, co chcę jeszcze zrobić.

19:29To tak jak mówiłem pokazywać tą grupę

19:30tylko wtedy, kiedy to nam cokolwiek zwróci.

19:34Jak się odnieść do konta?

19:36Kopiuję sobie tutaj tą wartość kopie Expression.

19:40Przychodzę tutaj do całej sekcji Review, a w zasadzie po prostu tej grupy.

19:47I przechodzę do conditions.

19:48A.

19:51Wklejam tutaj as expression.

19:53Natomiast muszę się odnieść do jakiejś

19:55wartości, bo to nam daje całą listę, a do condition nic nam tutaj nie pomoże.

20:00Muszę tutaj wybrać Count i powiedzieć, że on ma być większy od zera.

20:07A więc jak to teraz zadziała w praktyce?

20:08Najpierw pobieramy sobie listę wszystkich

20:10od Review, potem stosujemy filtr, który ogranicza je tylko do tych,

20:16które dotyczą tego konkretnego listingu, a następnie wyciągamy sobie

20:21wartość, czyli count, czyli ile takich rekordów tutaj jest.

20:25I mówimy, że ta liczba ma być większa od zera.

20:27I tylko wtedy chcę, żeby ten element był widoczny.

20:30Oczywiście, czyli zaznaczamy ten box.

20:33A co robimy na dziendobry?

20:35Oczywiście możemy go sobie tutaj ukryć

20:37i wybrać kolaps hidden, natomiast zaraz do tego wrócimy.

20:41Nie chcę, żeby tutaj to zniknęło.

20:42Jeżeli się okaże,

20:43że akurat ten listing, który teraz otworzyłem nie ma żadnych review.

20:47A więc.

20:49To co muszę teraz zrobić, to zaznaczyć

20:50sobie całą tą Review Card Group i zamienić ją w element.

20:58A więc standardowo ubieram ją dodatkowo w grupę.

21:02Nie muszę nadawać żadnej nazwy i wybieram po prostu tylko.

21:06Edit.

21:08Konwertuj element i to będzie.

21:12Review Card.

21:15E.

21:20I teraz musimy oczywiście ustalić tutaj.

21:25Type of content.

21:26Będzie to OST reviews, a w zasadzie OST reviews, czyli nasz open set.

21:33I teraz przekazywać to oczywiście dalej.

21:36Czyli to, co już robiliśmy wcześniej.

21:38Dla pozostałych element.

21:50Co my tutaj mamy W środku mamy w środku obrazek.

21:54Podoba mi się to, że autor po prostu, a nie blog posta.

21:56Autor.

22:01I nie będzie to liczone week, tylko oczywiście wartość dynamiczna.

22:08A więc Parents Group OS Review, Autor Avatar zostawiamy.

22:19Tutaj przekazujemy od zlewu.

22:22Standardowa.

22:26I tak to będzie.

22:32Autor nam.

22:37Auto City.

22:40To będzie po prostu całe Revue.

22:43I oczywiście tutaj display.

22:47Jeszcze tutaj muszę wskazać odpowiedni typ.

22:57Oczywiście nie listing, tylko freeware.

23:01I tutaj będę chciał sformatować datę.

23:04Zaraz się pokaże jak to zrobić.

23:06Rating zostawiamy

23:08w zasadzie nie mamy tam też rating, więc możemy go sobie przekazać.

23:11Pamiętam, że dodawaliśmy tam wartość z ratingiem.

23:17Czyli zaznaczamy tą wartość i mówię, że tak.

23:19Chcę się odnieść do.

23:22W ratingu.

23:24I sformatowane jako to będzie number te small place.

23:29Ile miejsc po przecinku chcemy wyświetlać?

23:31Nas będą to dwa.

23:33To jest separator.

23:34Niech to będzie kropka.

23:35Nie potrzebujemy separatora tysięcy.

23:38Takich wartości nie będziemy mieli.

23:40Dla takich wartości nie będziemy mieć

23:42przecież dla ratingu, a więc pozostawiamy to tylko w tej formie.

23:46Więc nawet jeżeli Babel 5 0 zamieni nam na 5, to tutaj będziemy mieć 5 kropka 00.

23:54A więc Clouds.

23:57Teraz przejdźmy do tej grupy.

23:59A w zasadzie to mamy chyba tylko tekst

24:01i w jaki sposób wyświetlić daty właśnie w takim formacie?

24:05Zacznijmy od tej pierwszej, czyli zaznaczam January 2024.

24:11Tą część wybieram sobie.

24:15Start date.

24:17I znowu mogę sobie wybrać formatowanie.

24:19Znów mamy tutaj kilka różnych.

24:22Jeżeli znajdziesz tutaj takie, które Ci odpowiada, no to masz szczęście.

24:25Natomiast w naszym przypadku takiego tutaj nie ma, więc musimy je utworzyć sami.

24:30Wybieram custom i jedyne co robię to po prostu tutaj wpisuję.

24:371, 2, 3, 4 razy em.

24:40To nam da całą nazwę miesiąca.

24:42Spacja i cztery razy Y.

24:48Mogę sobie to skopiować?

24:51I to samo zrobić dla end date, czyli zaznaczyć.

24:54Tą wartość.

24:58Odnieść się do dat.

25:01Formatek z.

25:03Custom.

25:07Klaus.

25:09I to w zasadzie już jest tutaj wszystko.

25:11Wszystko mamy ustawione dla naszej karty.

25:13Wracamy więc na stronę listingu.

25:17Przechodzimy tutaj do sekcji Review.

25:22I wstawiamy naszą kartę.

25:25Oczywiście tutaj to Reporting Group

25:28pozbywamy się tej starej służące jako wzorzec i jedyne co musimy

25:33zrobić to przekazać tutaj oczywiście current.

25:37Ostre.

25:39Zerknijmy, jak to wygląda.

25:41Odświeżamy.

25:43Czy mamy tutaj jakieś.

25:45Recenzje dotyczące tego listingu.

25:48Jak się okazuje mamy.

25:50Natomiast ten odstęp tutaj wydaje mi się jakiś bardzo duży.

25:52Zaraz do tego wrócimy.

25:54To co chcę zrobić, to przejść do edycji takiego elementu.

25:58Zaznaczyć tutaj całą tą.

26:01Grupę.

26:03Aby robił karierę.

26:05Przejdź do layoutu i ustawmy tutaj minimalną wysokość

26:10na jakoś dużo, bo mamy tutaj jakieś dziwne odstępy.

26:14Spróbujmy to.

26:16To nam się skurczy odpowiednio, natomiast i tak będzie tutaj zachowana cała.

26:20Cały ten układ i cała wysokość do tych elementów.

26:24To się dostosuje po prostu do tych wartości w środku.

26:27Zerknijmy teraz do podglądu, czy to już trochę się poprawiło.

26:32OK. Tu się poprawiło.

26:34Czyli musimy zmniejszyć te odstępy.

26:38Przechodzimy do Listing.

26:43Zaznaczam taki pojedynczy element pozbywamy się tu minimalnej wysokości.

26:49OK.

26:50I chyba dopiero teraz tak naprawdę nam się to poprawiło.

26:53Przynajmniej taką mam nadzieję.

26:54Tutaj mamy jakąś grupę, która nie wiadomo skąd nam tutaj wyskoczyła.

26:59OK, mogę się jej pozbyć.

27:02Teraz przejdźmy dopiero do podglądu.

27:07OK, teraz dopiero to wygląda tak jak powinno.

27:10Czyli mamy tutaj nasze recenzje

27:12wyłącznie 3, które dotyczą tego konkretnego listingu.

27:18Mamy tutaj Sakura Heaven, Sakura Heaven, Sakura Heaven.

27:21To co chcę teraz zrobić to sobie skopiować całą tą Republikę LG,

27:27czyli naszą repeat grupę i wstawić ją jak się domyślasz.

27:32Tutaj.

27:35To pop up u.

27:37Pozbądźmy się minimalnej wysokości.

27:41I tutaj powinniśmy się pozbyć tych rzędów.

27:44Ustawić to na 100%.

27:48W ten sposób wyświetlimy tutaj te wszystkie archiwum.

27:51Oczywiście w przyszłości powinniśmy zadbać

27:53o to, aby na sam początek wyświetlać tylko część i potem np.

27:58po kliknięciu w guzik doładowywać

28:00następne, żeby właśnie tak jak kiedyś ostrzegałem nie załadować tutaj np.

28:04tysiąca recenzji dotyczących tego

28:06konkretnego listingu, bo na chwilę obecną nie musimy się o to martwić.

28:10Mamy ich niewiele, a więc zostawiam to

28:13przynajmniej na ten moment właśnie w ten sposób zamalowane.

28:17To co chcemy zrobić, to wrócić tutaj.

28:21I sprawdzić czy to nam się przekazuje.

28:24OK, to nam się przekazuje tylko.

28:28Tu jest jakiś problem.

28:29Mamy scrollowania. Zaraz zerkniemy.

28:31Dlaczego?

28:37Zerknijmy na ten element, na całą tą kartę.

28:41Aha, mamy tutaj minimalną szerokość, która nam skoczyła osobno na 680.

28:47Tutaj się tego pozbywamy.

28:49Zaznaczam sobie tutaj fit, fit, tu content i sprawdźmy teraz.

28:58OK. Teraz już jest dużo lepiej.

29:01Wiadomo, że ten kontent jest tutaj chwilowo za duży, bo mamy tylko trzy

29:03recenzje, ale gdyby ich było więcej, to oczywiście wskoczy nam ten scroll i

29:08będziemy mogli je sobie po kolei przeglądać.

29:12Więc niemal tutaj wszystko jest gotowe.

29:14Zadbajmy jeszcze o ukrywanie tej sekcji archiwum.

29:17Czyli przechodzę do edytora.

29:19Przechodzę tutaj, do tej całej grupy i grup.

29:23I tak jak mówiłem, ukrywamy ją na załadowanie się strony.

29:27Kolejno wybieramy collapse hidden.

29:30I zerknijmy teraz, jak to zadziała.

29:34Odświeżamy.

29:38Tutaj mamy recenzje, więc wszystko jest ok.

29:40Ale przejdźmy do strony index owej.

29:48I spróbujmy przejść do naszego listingu i

29:50wybrać taki, który nie powinien posiadać żadnych recenzji.

29:53Aby to sprawdzić, mogę sobie wrócić tutaj.

29:57Przejrzeć na szybko tą listę około.

30:01Wydaje mi się, że nigdzie nie widziałem tam.

30:04Tego listingu.

30:07Przechodzimy, mamy obrazki, zjeżdżamy niżej.

30:12Jak widzisz sekcja archiwum zniknęła.

30:15Nie mamy żadnej recenzji dotyczącej tego

30:17listingu, więc oczywiście ta grupa nie jest tutaj wyświetlana.

30:20A więc osiągnęliśmy dokładnie taki efekt, na jakim nam zależało.

30:23Ty nauczyłeś się, że mamy nowy typ danych, który pozwala nam linkować np.

30:28właśnie do obszaru setu.

30:31Bardzo podobny sposób będziemy mogli

30:32linkować również pomiędzy danymi z różnych typów w bazie danych, ale o tym

30:37porozmawiamy sobie oczywiście w sprincie nr 2.

30:40Na chwilę obecną zrobiliśmy to, co powinniśmy zrobić w tej sekcji.

30:44A więc dziękuję Ci za uwagę i widzimy się za moment.