Aplikacje no-code z Bubble: Wdrażamy RWD
Wdrożenie projektu
15 godz. 6 min · UI, UX i Webdesign
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Z jakich narzędzi i serwisów korzystać, by zaprojektować interesujący i ciekawy layout.
- Podstawowych technik pracy z narzędziem Figma, by nasz statyczny design zamienić na aplikację.
- Pracy z edytorem Bubble, gdzie skupimy się na jego podstawowych elementach i funkcjonalnościach
- Tego jak przygotować nowoczesny landing page, posiadający wszystkie niezbędne elementy strony sprzedażowej
- Dodatkowo wdrożymy również inne strony w naszym serwisie - czyli logowania/rejestracji, wyszukiwania, stronę pojedynczego itemu oraz stronę profilową i stronę rezerwacji
- Na koniec zajmiemy się również wdrożeniem w pełni funkcjonalnego dashboardu dla naszych użytkowników i wynajmujących
Dla kogo jest ten kurs?
Materiał szkoleniowy został zaprojektowany tak, aby mogło z niego skorzystać jak najszersze grono odbiorców. Nieważne czy jesteś totalnym laikiem, czy też posiadasz już wiedzę z zakresu programowania lub designu, na pewno znajdziesz tu coś dla siebie. A więc kto jeszcze może skorzystać z wiedzy zawartej w tym kursie?
Witam Cię w kolejnej lekcji, której nadal kontynuujemy naszą przygodę z RWD i tym
razem naszym zadaniem będzie dostosowanie strony listingu pod jej wymagania.
Natomiast jeżeli zastanawiasz się po poprzedniej lekcji, kiedy stosować
break pointy, czyli kiedy użyć 9, 9, 2, 7, 6, 8 itd.
To odpowiedź jest bardzo prosta.
Po pierwsze staraj się je wszystkie mieć z tyłu głowy umieszczone, czyli żebyś
dokładnie wiedział z jakich break pointów chcesz korzystać, a następnie
przechodzisz do podglądu strony w trybie responsywny, czyli np.
w przeglądarce chrom, tak jak mamy to
teraz na ekranie i zaczynasz zmieniać szerokość całej strony.
Twoim głównym zadaniem jest odpowiedzieć sobie na pytanie, czy dane elementy
wyglądają dobrze albo kiedy przestają wyglądać dobrze.
To będzie oznaczało, że musisz zastosować
jakiś odpowiedni break point, A więc po prostu zastanówmy się tutaj niżej.
Mnie najbardziej interesuje ta sekcja
price i zaczynam zmieniać teraz szerokość ekranu.
Jak widzisz wartość zmienia mi się tutaj, w tym miejscu.
Przy 1. 200 jeszcze jest.
Wydaje mi się, że ok.
A widzisz mamy ten pierwszy Black 1200.
Wszystko jest w porządku, całkiem fajnie to wygląda, ale zejdźmy do 9,2.
I tutaj zaczyna się problem.
To nam się zaczyna rozjeżdżać.
A więc ta sekcja price powinna moim
zdaniem dla tego break point całkowicie zniknąć i wtedy powinniśmy wyświetlać
właśnie tylko tą dolną, którą utworzyliśmy sobie w jednej z poprzednich lekcji.
A więc wracamy do edytora.
Muszę tutaj namierzyć sekcję spray z ringiem.
W naszym przypadku jest to cała grupa Acid
Group i to co chcę zrobić to ustawić dla niej collapse undefined,
jeżeli do tej pory nie mieliśmy tego ustawionego.
Następnie przejść do Condition Ala i dodać tutaj odpowiedni warunek.
Czyli odnieść się do Page White.
Mniejsze, równe 9 9.
Dwa piksela i to co chcę zrobić to po prostu całkiem ukryć tą sekcje,
czyli design, elementy z Visible i oczywiście to odznaczamy.
A skoro ta sekcja.
Dlatego brak nam znika.
To właśnie od tego momentu będziemy chcieć
pokazywać tą grupę rezerw Mobile Floating Group.
A więc na dzień dobry ją sobie ukrywamy.
Natomiast u nas mamy już taki warunek, że ten custom state musi być równy.
Jest.
Więc do niego musimy dopiero dodać ten warunek dotyczący szerokości czyli end.
Czyli oba te warunki musza być spełnione.
Czyli custom state musi być równy jest i
dopiero dla tej szerokości to musi się tam pojawiać czyli page.
Mniejsze, równe 99.
2.
Tu będzie min. Hit i This is visible.
I dopiero teraz cała nasza Floating Group się tutaj odpowiednio pojawi.
Możemy to zresztą sprawdzić.
Przejdźmy nie tutaj, tylko do Chrome'a.
Odświeżamy.
I zerknijmy. OK.
Ta grupa z Price Kingiem nam się ukryła bardzo dobrze.
Natomiast ok.
Tutaj ta grupa powinna się jednak
pojawiać, więc musimy sobie odpowiednio zdefiniować te warunki.
W jaki sposób?
No już tutaj zaraz to odpowiednio ustawimy.
Czyli ten warunek jest zły, bo chcemy pokazywać całą tą grupę.
Kiedy Current Page Fit jest mniejsza bądź równa 9,2.
Natomiast ustawić tą minimalną wysokość
tylko wtedy, kiedy właśnie ten custom stat jest spełnione.
Czyli był to mój błąd. Mogę się tego pozbyć?
Nie ma problemu.
Zróbmy to w ten sposób, ale kasujemy te niepotrzebne warunki.
Usuńmy to.
I teraz dodajmy.
Ten właściwy.
Oczywiście This is visible.
Możemy go wrzucić na samą górę.
I teraz dopiero powinno nam to zadziałać prawidłowo.
Ustawmy 992.
Mamy jeszcze ten tutaj troszkę wyżej.
Jak widzisz znika nam ten Floating group.
Pojawia się tutaj sekcja Price, a więc wszystko jest tak jak trzeba.
Jesteśmy niżej. OK.
Dzięki temu mamy tutaj dużo więcej przestrzeni.
Zawsze staraj się najpierw dopasowywać takie duże sekcje, bo dzięki temu, jak
widzisz tutaj cała reszta całkiem fajnie się dostosowuje.
Będziesz miał po prostu mniej roboty.
A więc jedźmy tutaj.
Tu na razie chyba wszystko jest ok.
A więc zacznijmy zjeżdżać niżej.
Mamy break point 9,2.
Chociaż tę grupę wydaje mi się, że zaczynają się już robić
za bardzo wąskie, to już kurde prawie to na siebie nachodzi.
A więc może zadbajmy właśnie teraz, przede
wszystkim jeszcze tutaj o te padding główne dla kontenera i o tą grupę także.
Ja staram się tak ogólnie patrzeć na całą
stronę i zastanawiać się, w którym momencie coś przestaje wyglądać dobrze.
Nie ma tu jakiś złotej zasady.
Natomiast jeżeli uda Ci się ją znaleźć, to
mam nadzieję, że się nią ze mną podzielisz.
A ja wracam do edytora i przede wszystkim tak patrzę Wrapper.
Czy mamy tutaj.
Nie mamy mamy container.
Oczywiście chodziło mi o container.
Dodajmy tutaj condition, ale.
Dobrze pamiętasz? To było tak Page Five.
Mniejsze, równe 7, 6, 8.
I tutaj chciałem zmieniać właśnie padding.
Lewy i prawy.
Mamy tutaj jeszcze padding top 48 pikseli.
Myślę, że możemy go sobie spokojnie zmniejszyć do.
Do 24, a tutaj ustawić 16.
To mamy dla całego kontenera.
Kolejno kopiujemy sobie przynajmniej ten warunek.
Przejdźmy tutaj i w przypadku Reality Groupe zmiana tego układu jest
niesamowicie wręcz prosta dzięki temu, co ostatnio dodał Babel.
Mianowicie wybieram sobie tutaj ten.
Mówię, że dla break point poniżej 992 pikseli.
Chcę się odnieść do Rows i do kolumn.
Chcę mieć tutaj tak dwie kolumnę.
Dwa rzędy.
Przejdźmy odświeżony.
Powiedzmy niżej.
Moim zdaniem już jest zdecydowanie dużo lepiej.
Tu są jakieś duże odstępy pomiędzy tymi kolumnami.
Zaraz zerknijmy dlaczego.
Czy mamy tutaj jakieś maksymalne szerokości?
Nie mamy.
Natomiast to co możemy zmienić to tutaj dla całej grupy.
Layout ustawmy tutaj sobie nawet zerknijmy jak nam to zadziała.
Czasami jest to po prostu metoda prób i błędów, aby to odpowiednio dostosować.
Nie widzę tutaj jakiejś wielkiej różnice.
Tam jest. Nie jest to moim zdaniem najgorzej.
Na razie zostawmy to w ten sposób.
Nie przedłużamy tutaj.
Weźmy tutaj teraz szerokością. Niżej.
Zobaczmy, gdzie nam się tutaj znowu coś zacznie psuć.
OK, na razie jest ok, więc przeskoczymy na 7, 6, 8 na widok tabletu i sprawdzamy.
Mapka jest ok.
Teraz ten listing wygląda naprawdę całkiem fajnie.
Sekcja reviews wydaje mi się, że jest ok.
Tutaj też nie mamy jakichś większych problemów.
Natomiast zacznijmy zjeżdżać niżej.
Tu jeszcze jest ok, ale spróbujmy przejechać na 576.
To się zaczyna robić bardzo ciasno, jak widzisz.
A więc może właśnie wykorzystajmy ten break point 5 7.
6, żeby wyświetlać 1 element na liście.
I zadbać również o to, żeby.
Ta grupa przeskoczyła tutaj poniżej.
Tu jeszcze chyba jest miarę ok, Chociaż ja też bym już chyba od tego widoku
zadbał o to, żeby wyświetlać tylko po jednej kolumnie.
Podobnie z resztą tutaj i na pewno musimy zadbać o to, żeby tutaj wyświetlać tylko
jeden obrazek, a więc mamy całkiem sporo do roboty.
Wracamy i jedziemy.
Do góry.
Zamierzam tutaj tą grupę fasoli z grup.
To rama zawiera w zasadzie te dwa obrazki.
Oczywiście layout.
Zaznaczam koniecznie collapse hidden.
A my tutaj condition mamy.
Mówiliśmy o 5, 7, 6.
Wskoczył nam dwa razy, potem zerknę o co chodzi.
This element invisible nie ma zostać ukryte.
Cały ten obrazek rozciągnie się tutaj na dostępną szerokość, więc będzie ok.
Kopiujemy.
Cały ten condition.
Przejdźmy tutaj.
Do tej grupy.
I ustaw My tutaj.
Columns.
Na 1.
Nie mamy stałej liczby rzędów, więc się automatycznie dostosuje.
Zjeżdżamy niżej.
To samo robimy tutaj.
Tu nie mamy repeat grupy, więc oczywiście musimy zadbać o to, aby te pojedyncze
grupy rozciągały się na maksymalną szerokość.
I zerknijmy jeszcze, czy dla rzędów też mamy tutaj odpowiedni GAP.
Mamy, A więc jak się domyślasz zaznaczamy tą grupę Host Listing Group.
Stawiam.
I tu będzie minus.
Równe 100%.
Kopiuje.
I dodaje dla wszystkich tych grup.
Tu było ok, bo mieliśmy tylko po jednym elemencie na liście.
To writing. Grupę musimy dostosować.
Czyli Columns zmieniamy na 1.
Mamy tutaj liczbę.
Nie, nie mamy też nie ma problemu.
I teraz tak chcę zadbać o to, aby. Napięcie 7.
6. Tego brakuje 5.
Ta grupa mi się tutaj rozciągnęła i podobnie z resztą ta cała grupa.
Chcę również tutaj sprawdzić Rock up.
Mamy ustawione, więc teraz powinno to przeskoczyć.
Zadbajmy jeszcze o ten divided.
I go sobie tutaj odpowiednio dostosujemy,
tak żeby on z pionowego zrobił się poziome.
Czyli łatwe to będzie 100%.
Height zmieniamy na 1 piksel.
Czyli max height ustawmy mu na 1 piksel.
I zerknijmy teraz.
Odświeżamy sobie.
To wygląda całkiem nieźle.
Moglibyśmy jeszcze zadbać o to, aby
ten obrazek nie był 1 do 1, bo jest strasznie duży, ale zaraz o to zadbamy.
Sekcja features wygląda świetnie, Description jest ok.
Tutaj wszystko jest w porządku.
Tu jest miarę ok.
Musimy tylko odpowiednio wyrównać te elementy i od siebie odsunąć.
Gdzieś nam tutaj zniknął ten Divided.
Trzeba będzie zaraz sprawdzić co tam się zadziało.
Natomiast jedźmy niżej. OK.
Tutaj musimy zdecydowanie wyświetlać jeden element na liście.
A więc wracamy.
Przejdźmy najpierw tu.
Całej tej rip dating grupy.
I ustawmy tutaj.
Tak.
Jedną kolumnę.
I powiedzmy trzy rzędy.
Żeby tych elementów nie było za dużo.
Teraz tak mogę sobie przejść do responsive, żeby mi się łatwiej pracowało.
Wybrać 5 7 6.
I teraz namierzyć odpowiednią grupę.
Gdzie my to mamy?
To jest features description.
Tutaj oczywiście pewnie zniknęła nam tutaj grupa.
W kontenerze.
Content.
Grupa reverse, która mamy domyślnie
ukrytą, a właśnie musiała ją sobie pokazać.
I teraz tak zaznaczam tą grupę Reviews
Level Group i dodaję tutaj Gap Space link na ROW Równe.
Niech to będzie 32 piksele.
Cała ta grupa ma typ kolumn, więc.
Kopiuję sobie ten condition.
Zaznaczam tą grupę.
I tym razem chcę się odnieść do Horizon Alpine.
A w zasadzie czemu zrobiliśmy ją na max FIV.
Więc to nam się tutaj fajnie działo.
Więc mogę się odnieść w zasadzie tylko do tego tekstu.
I dla niego ustawić horizontal.
I nawet centrowanie.
Teraz już jest ok.
To wygląda to całkiem, całkiem w porządku.
To oczywiście nam się ta karta odpowiednio koncentruje, ale o to chciałbym, żebyś
sobie tam spróbował zadbać we własnym zakresie.
Ja to posprawdzam między lekcjami
odpowiednio dostosuję i w razie czego powiem Ci co było nie tak.
Natomiast wracamy do podglądu, odświeżamy.
I tak pozostaje nam ten obrazek.
Tu jest ok. Więc może jedźmy do widoku takiego 425.
Jest ok.
Tu jest ok.
Już mamy tutaj masę scrollowania.
Spróbujmy 320 pikseli.
Tą szerokością nie powinieneś się przejmować.
Po prostu bardzo mało urządzeń już z niej korzysta.
Nas interesuje szerokość minimalna 375 pikseli.
Od takiej powinieneś sobie po prostu zaczynać sprawdzać te widoki.
No tu się pojawia problem.
Te przyciski są zdecydowanie za duże.
Natomiast myślę, że jeżeli ukryjemy te
teksty, to one się tutaj całkiem fajnie odpowiednio będą wyświetlały.
A więc.
Wracam sobie na samą górę.
Odnoszę się do tych tekstów na przyciskach.
Oczywiście.
To lap słony hidden.
Odnoszę się do elementy z Visible odznaczamy.
Jak widzisz, w większości przypadków
korzystamy niemal dokładnie z tych samych właściwości, czyli ukrywania lub
pokazywania jakiś elementów i odpowiedniego wyśrodkować ich na.
I odpowiedniego rozmieszczania ich na stronie.
Tak więc nie ma tutaj jakoś bardzo dużo pracy.
Ja bym ten warunek.
Nie chcę, żeby był widoczny.
I teraz tak zadbajmy jeszcze o ten obrazek.
Jeden na jeden zdecydowanie za dużo.
A więc musimy wrócić do Buildera.
Ja chcę zaznaczyć ten obrazek.
Niestety nie będziemy mogli poprzez Condition, ale zmienić aspect ratio.
A więc zróbmy to troszkę inaczej i będzie to tak.
Main.
Zmieniam jego nazwę na Desktop Main Image.
Zaznaczmy tutaj.
Collapse hidden i ukryje go powiedzmy na polach poniżej 768 pikseli.
Bo kiedy ukrywaliśmy tę grupę, a tę grupę ukrywaliśmy poniżej 576, to nawet lepiej.
Tutaj będę chciał go ukryć.
A więc w momencie, kiedy ukrywamy te dwa
obrazki, ten rozszerza nam się na całą dostępną szerokość.
Będziemy chcieli go ukryć.
A więc tylko odkrywamy.
To, co chcę teraz zrobić, to zaznaczyć ten obrazek i go powielić.
Zmienić nazwę na Mobil.
Main Image.
I dlatego brak Pan tego pokazywać.
Natomiast layout od razu ustawić na trzy do dwóch.
I domyślnie go ukryć.
A więc po załadowaniu się strony będzie widoczny ten obrazek.
Zjeżdżamy do tego break 5, 5, 7, 6 i ukrywamy tą grupę z tymi dwoma.
Ten też nam znika i pojawia się ten tutaj z tym odpowiednim aspect ratio.
Zaraz zobaczysz, że będzie to dużo lepiej wyglądało niż taki kwadratowy obrazek.
Jeśli jest miarę OK,
to możemy jeszcze zadbać o odpowiednie centrowanie tego przycisku.
Pewnie ten obrazek tutaj gdzieś nam. Zaskakuje.
Czy mamy tu jakiś padding dla tej grupy?
Nie mamy tutaj minimalną wysokość.
To jest pewnie problem.
Teraz zerknijmy.
OK.
Jak widzisz teraz wszystko nam to wskoczyło tak jak trzeba to mamy same
ikonki, a więc również na widoku mobilnego.
Wszystko nam się zgadza.
Mamy tutaj jeszcze problem oczywiście z naszym NAV Barem.
Może zaraz się tym zajmiemy, przynajmniej tym tekstem.
I tutaj tym logotypem.
Natomiast zerknijmy na resztę strony.
Wydaje mi się, że wszystko już jest ok.
Wypada to całkiem nieźle.
Jeszcze jedną rzecz, którą chciałbym tutaj zmienić.
To rozmiary tekstów.
Teraz Ci pokażę, jak ja z reguły do tego podchodzę.
Przechodzę sobie do stylu.
Wybieram style dla tekstu i najczęściej
zmieniam je tylko dla nagłówków od h1, h2, h3.
Tutaj mamy 64 piksele.
Od takiego zaczynamy i dla H1 z reguły staram się je zmniejszać o 10, czyli dla.
Tagged with.
Mniejsze równe 9 9 2.
Staram się ustawić wartość o 10 pikseli mniejszą, czyli font size na 54 piksele.
A Page Five.
Mniejsze, równe 7, 6, 8.
Font size na 44 piksele.
Oczywiście ja tutaj wykonałem odpowiednie
testy, bo sprawdzałem jak się to prezentuje.
Wszystko zależy od tego jaki rozmiar
fontów będziesz wykorzystywał na swojej stronie, ale takie podejście po
zmniejszaniu H1 o 10 pikseli całkiem fajnie się sprawdza w przypadku H2.
Tutaj mam trochę mniejszy rozmiar fontu.
A więc.
Dla 992.
Chcę tutaj font size ustawić.
Mieliśmy 40.
Zmieniliśmy go do 36.
Natomiast tablet owego.
Czyli 7, 6, 8.
Ustawmy go na 32 piksele.
Teraz odświeżamy.
Jak widzisz te teksty są zdecydowanie mniejsze i całkiem fajnie wyglądają.
Nie są takie duże na ekranie, zwłaszcza na ekranie mobilnym.
A więc to już w zasadzie mamy skończone.
Spróbujmy jeszcze przynajmniej częściowo dostosować nasz header.
Skoro mamy chwilę czasu, wróćmy więc.
Do naszego na w bara.
I tak mamy tutaj tą grupę become a host.
Zerknijmy kiedy ona zaczyna się za bardzo panoszyć w naszym nagłówku.
OK, czyli na widoku powyżej 576 pikseli jeszcze jest całkiem nieźle.
Ten tutaj link wygląda w porządku, cała reszta nam się mieści.
Oczywiście musimy zadbać tutaj na
zmianę padding dla kontenera, więc może od tego zacznijmy.
Czyli 7, 6, 8.
Jak widzisz staram się zawsze stosować
dokładnie takie same brak pointy i odpowiednio to ustawiać.
To będzie padding left.
I padding write.
16 pikseli.
To przesuniemy na samą górę.
To jest jeden z naszych najważniejszych warunków.
Natomiast teraz.
Ten element jest tutaj.
Ukrywamy go na stronie z tarcza.
OK, więc to jest w porządku.
Dodajmy ten kolejny, czyli 5 7, 6.
Mniejsze, równe 5 7 6.
Chciałbym tak całkiem ukryć tą grupę w Barlinku z grupą.
Czyli odznaczamy Standardowo dbamy o klap słonych i dan.
Natomiast nie chciałbym, żeby ten link w
ogóle zniknął z możliwości dostępnych dla użytkownika.
Dlatego też otwórzmy sobie.
Nasze menu. OK.
Aha, mamy tutaj become a host.
Natomiast skoro mamy je tu i tu. OK.
Czy chcemy je ukrywać w odpowiednich
rozdzielczościach, czy pozostawić widoczne oba?
Myślę, że nie ma problemu, jeżeli to będzie również tutaj widoczne.
Dzięki temu nawet jak w tych widokach
mobilnych ukryjemy ten link, to użytkownik i tak zawsze będzie mógł
trafić na tą stronę właśnie wybierając ten link z menu.
A więc przejdźmy do podglądu.
Odświeżamy.
Jesteśmy na widoku mobile i teraz już jest zdecydowanie lepiej.
Dalej możemy wybrać Become a host
a nasza strona naprawdę fajnie się prezentuje teraz na tych różnych
rozdzielczościach, co możemy zresztą sobie sprawdzić.
Tutaj spróbuję odświeżać te widoki.
Tak, aby ładowały się tutaj na różnych stronach.
Tutaj pojawia się jakiś problem ze
skalowaniem przynajmniej na widoku na 600 pikseli.
Gdzieś gdzieś tam grupa tutaj rozjeżdża.
I wymusza tutaj jakąś szerokość.
Sprawdźmy na szybko czy udało mi się to namierzyć.
W ogóle mapka nam zniknęła.
Czasem niestety tak się dzieje.
Jeżeli korzystasz z tych pluginów.
OK, tutaj też mamy ten odstęp, o który musimy zadbać.
Czyli w momencie kiedy pojawia się cały ten nasz boxing, cała ta flock,
string, grupa musimy odsunąć tą stronę odpowiedni margines.
Zerknijmy sobie właśnie.
Na stronę listingu.
Jaką wysokość ma ta cała grupa?
Spróbujmy gdzieś tutaj najechać, żeby nam się odpowiednia opcja pojawiła.
Czasami jest to ciężkie, ale.
No nic, spróbujmy.
Czy to aby minimalną wysokość 72 pikseli.
OK, a więc mogę przejść do Page wrapper a.
Którymi ubiera całość.
Pod spodem mamy futer, a więc do futra powinnyśmy się tej minimalnej wysokości.
I dodajmy tutaj odpowiedni margines na
dole, kiedy pojawia nam się cała ta floating grupa.
A więc tutaj w tym momencie już.
Kopiuję sobie ten condition, przechodzę do futerału.
Stawiam.
I tym razem chcę mu nadać margin bottom.
Bottom margin równe 72 piksele.
To powinno rozwiązać ten problem.
Footer znika nam główną grupą ok.
Teraz wyświetla się w całości, natomiast z Karolem chwilowo się nie przejmuje.
Tutaj znowu musielibyśmy dokładnie posprawdzać całą naszą stronę.
Jak widzisz nawet tutaj te karty też już nie do końca wyglądają tak jak powinny.
Ale tak jak mówiłem, nie staraj się dopasować swojej strony do absolutnie
wszystkich urządzeń, ponieważ jest to po prostu niemożliwe.
Oczywiście moglibyśmy to dostosowywać,
dodawać kolejne warunki i zamiast spędzić te powiedzmy 30 minut na
tej lekcji, siedzieli byśmy tutaj 3 godziny, aby to odpowiednio dostosowywać.
Ogólne założenie jest takie jeżeli na
większości widoków wygląda to dobrze, to znaczy, że jest ok.
Przynajmniej w przypadku MVP.
Oczywiście jeżeli Twój serwis wyjdzie potem do ludzi,
będziesz miał miliony użytkowników, to warto zadbać o to, aby wyglądał na jak
najlepiej na jak największej ilości urządzeń.
Ale my sobie to pominiemy.
Jeżeli odświeżam, to okazuje się, że jest całkiem ok.
Przynajmniej na tych ekranach.
Podobnie zresztą tutaj.
Też jest całkiem w porządku.
A więc nasza praca w tej sekcji jest
zakończona, a my widzimy się już za moment.