Bubble: Dbamy o responsywność

0:00Rozpoczynamy naszą pracę od miejsca, w którym zakończyliśmy ją w poprzedniej

0:03lekcji i porozmawiamy krótko o tym, co chcemy tutaj osiągnąć.

0:07Zależy mi na tym, aby w rozdzielczości poniżej 960 pixeli usunąć to białe tło z

0:13cieniowaniem, która jest teraz nadane dla całej grupy pricing-cards.

0:16Dodatkowo takie białe tło i cień

0:18będę chciał dodać dla takich poszczególnych tutaj kart.

0:22To na czym mi jeszcze zależy to usunięcie tutaj tego marginesu.

0:26Jak widzisz, tutaj dla grupy pricing-card-pro

0:28podaliśmy margines górny -55 pixeli i gdy teraz przeskoczyła ona poniżej,

0:33zaczyna nam nachodzić na tą kartę powyżej niej.

0:37Kolejnym elementem jest tutaj margines pomiędzy grupą top a grupą pricing-cards.

0:43Tutaj rozdzielczości jest już zdecydowanie za duży.

0:45Tym się też zajmiemy.

0:47A skoro wiemy już co mamy robić, to przystąpmy do działania.

0:52Przechodzę więc z powrotem do builder'a.

0:56Zaznaczam grupę pricing-cards,

0:59i przechodzę do zakładki conditional, no z conditional już korzystaliśmy.

1:04Robiliśmy to jak wiesz tutaj dla przycisków, kiedy wskazywaliśmy

1:08jako warunek, że odnosimy się do tego elementu, czyli tego tekstu i mówimy, że

1:12kiedy użytkownik na niego najedzie, to chcemy zmienić tutaj jakieś właściwości.

1:17Natomiast w przypadku Bubble nie musimy się odnosić tylko i wyłącznie do tego

1:21elementu, ale również innych elementów bądź innych czynników.

1:24Zobacz jak to wygląda w praktyce.

1:26Dodajmy tutaj jakiś prosty button.

1:31Nazwijmy go tylko button-test.

1:35I teraz wróćmy do grupy pricing-card-pro.

1:38Przejdźmy do zakładki conditional.

1:41Dodajmy nowy warunek i tym razem nie chcę się odnosić do tej grupy.

1:45Czyli do całej grupy pricing-card-pro, ale chcę się odnosić do button'a.

1:50Powiedzieć, że kiedy użytkownik

1:52najedzie kursorem myszki na ten button, ja chcę zmienić kolor całej tej grupy.

1:59Wybieram więc tutaj background color

2:01i ustalmy ją może właśnie na taki ciemny kolor.

2:04Przejdźmy teraz do podglądu, odświeżmy.

2:08Tu jak widzisz, wykonywałem tę operację wcześniej, ale nic się nie przejmuj.

2:13Zjeżdżamy na sam dół.

2:14Jak widzisz, jeżeli teraz najadę

2:17kursorem myszki na ten button, to zmienia mi się wygląd całej tej grupy pricing-card-pro.

2:25Wracamy do edytora,

2:27usuwamy ten button.

2:28Jest nam on nam tutaj nie potrzebny,

2:31z całej karty pricing-card-pro możemy też usunąć teraz ten warunek

2:36i zastanówmy się, co w zasadzie teraz chcemy tutaj zdefiniować.

2:40Nam zależy na tym, aby odnosić się do aktualnej szerokości ekranu.

2:45Jak to zrobić? Bardzo prosto.

2:47Wystarczy, że wracam tutaj do grupy pricing- cards, definiuję sobie nowy warunek i tym razem

2:52mówię, że chcę się odnieść do parent page width.

2:57I jeżeli będzie ona mniejsza niż 960, to jest oczywiście wartość w pixelach.

3:04To co chcę zrobić?

3:05Przede wszystkim background color.

3:11Kolor mogę zostawić na biały, natomiast jego przezroczystość ustawię na zero.

3:15Więc zostanie ona tutaj usunięta.

3:17Dodatkowo jest tu jeszcze cieniowanie,

3:20więc wystarczy, że wybiorę sobie boxshadow color.

3:24Jak się domyślasz, wartość

3:25przezroczystości ustawię na 0, a więc poniżej rozdzielczości 960 pixeli.

3:31Usuniemy tutaj kolor tego tła i cieniowanie.

3:34Sprawdźmy, czy to rzeczywiście działa.

3:36Czyli przechodzimy do zakładki responsive.

3:39Jesteśmy w szerokości 1200.

3:41Przejdźmy na 992 tu jeszcze wszystko jest ok, ale zjedźmy niżej.

3:47Poniżej wartości 960 pixeli.

3:50Jak widzisz.

3:52Już jest dokładnie tak, jak chcieliśmy, a

3:54więc białe tło nam zniknęła z całej grupy pircing-cards,

3:57nie ma tu również cieniowania, czyli zrobiliśmy pierwszy krok.

4:01Wracamy więc do buildera i zajmujemy się tutaj pozostałymi elementami.

4:08To co chcę zrobić to przejść do grupy

4:10pricing-card-pro i tutaj zdefiniować bardzo podobny warunek.

4:15Czyli jeszcze raz, wybieram tutaj tą opcję

4:18i zaczynam wpisywać current z listy wybieram current page width,

4:24wybieram, że ma być mniejsza niż 960 pixeli i w takim przypadku

4:29teraz muszę się odnieść do marginesu górnego i go wyzerować, czyli wstawić tutaj wartość 0.

4:37Teraz ta karta będzie już wtedy wyrównana

4:39z tymi kartami będzie to wyglądało tak, jak wyglądać powinno.

4:43Natomiast teraz musimy jeszcze zadbać o wygląd tych poszczególnych kart.

4:46Można to zrobić na dwa sposoby.

4:50Mianowicie tutaj możemy zdefiniować

4:52wszystkie style jakie chcemy aby miały zastosowanie.

4:55Natomiast ja to robię troszkę inaczej.

4:57Pokażę Ci mój sposób.

4:59A więc tak przechodzę tutaj do grupy

5:02pricing-card-wrapper, nie, nie tej grupy, mi zależy na grupie pricing-card.

5:06Ponieważ samą to kartę chcemy ostylować.

5:09Usuńmy te style, dodajmy te,

5:12które będziemy chcieli mieć jako style końcowe, a więc kolor biały.

5:19Zaokrąglenia równe 16 pixeli.

5:23Odpowiedni cień.

5:270816.

5:32Nasz kolor middle, przezroczystość 15%.

5:37Jak widzisz te style zostały tutaj od razu

5:39zastosowane, a więc możemy tutaj wyzerować.

5:42Czyli jeżeli teraz ustawię przezroczystość na 0 tu i tu.

5:49To otrzymamy efekt początkowy, czyli taką kartę przezroczystą.

5:54Natomiast jeżeli wrócę do zakładki conditional.

5:59Dla grupy

6:00pricing-card tutaj zdefiniuje current page width.

6:07Mniejsze od 960 pixeli.

6:11Jak się domyślasz, zastosujemy operację

6:13odwrotną niż zastosowaliśmy dla całej mojej grupy

6:16pricing-cards, czyli znowu muszę się odnieść do background color.

6:21Tym razem przywrócić ten kolor do pełnej wartości przezroczystości, czyli

6:25100%, a więc ten kolor będzie już teraz widoczny.

6:30To samo robię na boxshadow color.

6:33Ustalam go teraz tutaj na 15%.

6:38I zerknijmy jak to wygląda w trybie responsywny.

6:41Jak widzisz jesteśmy w odpowiedniej rozdzielczości.

6:45I teraz ta karta ma zaokrąglone rogi.

6:48Dodany odpowiedni background, dodany odpowiedni shadow pod spodem.

6:52A więc to samo możemy teraz zastosować dla tej karty.

6:55Dodatkowo tutaj mamy teraz odpowiednie

6:57odsunięcie 50 pixeli, pomiędzy tymi kartami.

7:01Tak więc wracamy do designera.

7:04I tą samą operację tutaj powtarzamy

7:07dla tej karty, żebyś

7:09wyrobił sobie pamięć mięśniową, znów

7:11zrobimy to wszystko od początku.

7:13A więc usuwamy style.

7:16Nadajemy jednolity biały kolor.

7:19Przezroczystość ustawiamy na 0.

7:24Dajemy zaokrąglenie rogów równe 16 pixeli, dodajemy cień 0816.

7:37Kolor middle też na 0.

7:41Teraz możemy sobie skopiować ten warunek,

7:43ponieważ będzie miał dokładnie takie samo zastosowanie i tam.

7:47A więc wracamy tutaj, wklejamy.

7:51I teraz obie te karty będą zachowywały się dokładnie tak, jak zachowywać się powinny,

7:56czyli właśnie będą miały tutaj odpowiedni kolor tła, odpowiednie cieniowanie itd.

8:01Musimy jeszcze tutaj zadbać, jak mówiłem wcześniej o grupę top.

8:05Mogę sobie wstawić tutaj cały warunek.

8:08Jak widzisz, ten warunek został tutaj odpowiednio wstawiony.

8:11Natomiast muszę tutaj zdefiniować odpowiednią właściwość.

8:14Tym razem będzie to buttom margin, ustawiony w moim przypadku na 60 pixeli.

8:21Przejdźmy więc do podglądu.

8:23Zobaczmy, czy to wygląda teraz tak, jak powinno.

8:26Jak widzisz, mamy tutaj odpowiedni margines, odpowiednio wyglądające karty.

8:31Dodatkowo, ponieważ ustaliliśmy im

8:33stałą szerokość, jak pamiętasz karcię tutaj nadaliśmy, czyli temu elementowi

8:37pricing-card-wrapper

8:39layout ustawiony na stałą szerokość.

8:41To nie rozciąga nam się tutaj na całą dostępną przestrzeń

8:45i dzięki czemu te karty zachowują jednolity wygląd na każdej rozdzielczości.

8:50Natomiast chciałbym, żeby one były tutaj wyśrodkowane.

8:53Nic prostszego.

8:54Zaznaczam całą grupę pricing-cards i mogę tutaj teraz wybrać

8:59wyśrodkowanie.

9:00Wszystko wygląda dokładnie tak, jak wyglądać powinno.

9:04Wróćmy sobie więc do builder'a.

9:07Nasza praca w tej lekcji jest skończona,

9:09a my możemy przejść do budowy kolejnej sekcji.

9:12A to oczywiście zrobimy przy lekcji następnej.