Flexbox: Pasek nawigacyjny cz. 3

0:00Cześć witam cię w kolejnej lekcji z kursu flexbox od podstaw i

0:04teraz na szybciutko będziemy poprawiali te niedociągnięcia związane

0:08z rwd które zostały w naszym w naszym nav bar'em

0:13na podstawie youtube i

0:17przejdziemy do kodowania pozostałych elementów witryny zacznijmy

0:22może od tego że ukryjemy te wszystkie elementy które

0:26nie powinny się znajdować w obecnym breakpoint'cie czyli ten trigger

0:30i ten przycisk do wyjścia z widoku mobilnego dla tego

0:34inputa czyli zobaczmy najpierw na jakiej rozdzielczości te

0:42elementy się nam chowają jesteśmy na 650 i

0:47656 już

0:53elementy są ukryte czyli jeśli

0:57napiszemy sobie taką regułę media i ustawimy max width

1:02na 656

1:07pikseli to możemy napisać style które będą

1:11się aplikowały w tym konkretnym breakpoint'cie

1:15czyli dla testów ustawmy sobie na body background

1:19na orange i w momencie kiedy będzie

1:24breakpoint większy niż 656 pikseli no to

1:28no to tła pomarańczowego nie będziemy mieli więc

1:33możemy napisać odpowiednie selektory na

1:38podstawie tego co wpisaliśmy

1:42tutaj w markup czyli sprawdźmy ten trigger action

1:47trigger to nie jest to co nas interesuje pierwsza rzecz którą która

1:51nas interesuje to jest is mobile search trigger a

1:56drugie jest to ten przycisk back site-nav search back

2:00czyli jeśli wpiszemy sobie tutaj selector is mobile search

2:04trigger ustawimy mu o display powiedzmy na blok

2:09a normalnie na

2:13desktopie ustawimy mu display na none

2:17to faktycznie na desktopie tego

2:22elementu tutaj nie będzie no i analogicznie możemy ustawić to display

2:27na none na tym search backu i

2:31dopiero na

2:35widoku mobilnym je wyświetlać czyli

2:39teraz jak zmniejszymy rozdzielczość to oczywiście te elementy tutaj są

2:44i to co tutaj zrobiłem to jest w sumie podejście desktop first

2:48generalnie ludzie preferują podejście mobile-first natomiast

2:52to zależy od aplikacji którą piszecie jeśli na przykład wasza

2:57strona www to jest coś w rodzaju edytora

3:02graficznego na przykład photoshopa w przeglądarce no to bez sensu jest

3:06pisać to mobile-first ponieważ nie jest to podstawowa tak jakby

3:10funkcjonalność witryny to że strona na mniejszych rozdzielczościach będzie

3:14się jakoś zachowywać nie jest tak istotne i tak naprawdę tak długo jak

3:18będziecie w stanie zarządzać waszym css'em i będzie zarówno

3:23wasz widok mobilny jak i desktopowy wyglądał poprawnie wtedy

3:27i desktop-first i mobile-first jest jak najbardziej okej więc rozwiążmy

3:31teraz ten problem nie kurczącego się search

3:36input'u może zróbmy to na takiej zasadzie że ustawimy

3:41na search wrapperze min-width na powiedzmy

3:4530 pikseli oraz na

3:50ten search

3:54inpucie też adekwatny

3:58min-width jeszcze nie wiem jaki więc wejdziemy sobie do

4:02faktycznego youtube no i ten input

4:09on ma może użyjemy dimensions około 82

4:13piksele z tym że on ma też padding powiedzmy

4:19te 30 pikseli z prawej strony zarezerwowane na

4:26tą oto klawiaturkę której my nie mam u siebie jeszcze w layout'cie więc

4:30uznajmy że będzie to 80 pikseli

4:35min-width 80 pikseli i

4:41w sumie ustawimy tutaj w takim razie zamiast 30

4:45pikseli na sto pikseli zobaczymy ten

4:51element nam się trochę skurczył na 25 pikseli może

4:55we wrapperze ustawimy jeszcze wysokość na sztywno 40

4:59pikseli powiedzmy że takiego

5:03rozmiaru byśmy oczekiwali i

5:07na tym inpucie ustawimy

5:15też padding right na

5:2040 pikseli tylko

5:27że w tym momencie nie chcemy aby ten element nam się kurczył więc na search

5:32triggerze musimy ustawić flex-shrink na zero i

5:37zobaczymy jak to się teraz zachowuje czyli na

5:43desktopie search bar zajmuje tak dużo przestrzeni jak jest w stanie

5:47jednocześnie i z lewej i z prawej odpowiedni margines

5:51gdy element już się wystarczająco skurczy no

5:56to pojawiają nam się elementy nawigacyjne jak

6:00ta strzałka z lewej czy

6:05trigger dla tego elementu ale my nie chcemy samego search wrappera pokazywać

6:09jeśli jesteśmy na widoku mobilnym czyli tak

6:14samo jak tutaj

6:18pokazywaliśmy elementy to site nav search

6:22wrapper

6:27uwaga na literówki ustawiamy

6:31na display none okej

6:36sprawdzamy zwężamy to jeszcze raz no i gdy

6:41element będzie już zbyt mały to on się schowa i

6:45teoretycznie będzie się go dało za pomocą tej lupy otworzyć

6:50i w tym momencie i na youtubie i u nas na

6:55tym breakpoint'cie element jest ukryty nasze elementy są

6:59wypozycjonowane mniejwięcej tak samo jak rozszerzymy

7:04ten breakpoint to na obu widokach

7:11mamy już ten input zobaczymy tylko

7:15jeszcze jaka to jest faktycznie wysokość tego

7:19inputa 25 pikseli plus border ja mam tutaj 30 pikseli zamiast

7:2440 na tym wrapperze żebyśmy nie mieli aż takiego rozjazdu no

7:29i okej możemy tutaj jeszcze zaokrąglić zarówno

7:35search

7:39input border top

7:44left radius ustawimy na 3 piksele i

7:50border bottom left radius też na 3 piksele może

7:57nawet na 5 i

8:03trigger tak samo tylko że z prawej strony zaokrąglamy

8:10no i mamy całkiem w

8:14porządku wyglądający layout przypomina on tego youtuba oczywiście nie

8:18jest pixel perfect natomiast nie to było

8:23naszym w tym ćwiczeniu my chcieliśmy tylko coś

8:28co wygląda mniej więcej jak pasek nawigacyjny youtube

8:32zachowuje się mniej więcej tak samo jak on

8:36ja jeszcze tylko aby

8:41ten element nam się jeszcze troszkę wyróżniał ustawię jakiś

8:45background dla body i dla

8:49site-nav'a background na

8:54biały ewentualne

9:01dodatki pokroju stworzenie tej klawiatury

9:05w search barze pozostawiam tobie a w tej lekcji to wszystko

9:10zapraszam cię do następnej gdzie będziemy kodowali nagłówek

9:15naszego kanału na youtubie