Flexbox: Pasek nawigacyjny cz. 2

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

0:04do faktycznego stylowania tego markup'u który przygotowaliśmy w poprzedniej

0:08lekcji zacznijmy może od tego że stworzymy sobie nowy

0:13plik zalinkujemy go od razu w

0:19head'zie ustawimy mu href jako

0:23nav css teraz

0:27ten plik oczywiście musimy tutaj stworzyć i

0:34w nav css będziemy teraz kodowali nasz przykład ja tylko sprawdzę czy site nav

0:38to jest faktycznie odpowiednia nazwa tego pliku tak

0:43to jak widzimy to jest cały nasz side nav on oczywiście będzie

0:47mniejszy możemy w sumie od tego zacząć czyli przejdziemy sobie do

0:51youtuba zobaczymy jaką on to ma wysokość jest to 56 pikseli

0:55ustawimy wysokość na

0:5956 pikseli no i przy okazji może już w tym momencie ustawimy

1:06sobie box-sizing na border-box tak

1:10aby model pudełkowy był troszkę łatwiejszy w obsłudze oczywiście

1:14moglibyśmy to przenieść do odpowiedniego pliku później bądź użyć normalize bądź css

1:20resets generalnie każda metoda jest dobra na ten moment zrobiłem

1:24to w ten sposób i w razie potrzeby też będę ręcznie na pozostałych elementach

1:28resetował style zobaczmy od razu jeszcze jaki tu

1:32jest odstęp pomiędzy tymi elementami to jest 19 tu jest 19 zobaczmy

1:41może faktycznie jeszcze jak to wygląda w przypadku tego selecta

1:46wyszukiwarki jest to 13 na 13 to ustawimy

1:50padding na 13 pikseli czyli

1:55pierwszą rzeczą którą oczywiście trzeba zrobić jest włączenie flexa na naszym kontenerze site nav

2:01diplay flex domyślnie oczywiście elementy będą układane poziomo

2:06ponieważ main axis jest osią poziomą w tym momencie z racji

2:10tego że flex direction jest ustawiony na row natomiast jak widzisz tutaj ta

2:15lista nawigacyjna jest dalej pozycjonowana z góry od dołu ponieważ ona nie jest

2:19flex container'em więc od razu też to zrobimy czyli na site nav

2:23user actions zobaczmy

2:28czy to to to chyba ten element display flex

2:33okej i elementy są już ułożone poziomo super może

2:37pozbądźmy się od razu tego list-style'a czyli ustawiamy

2:41list-style-type na none no i w tym momencie już prawie nie wygląda to jak

2:45lista nawigacyjna natomiast dalej nią jest to jest semantycznie bardziej poprawne testujemy

2:50padding oraz margines no i elementy

2:54są już praktycznie w jednej linii może przenieśmy jednak w domyślny

2:59usuwanie marginesu i paddingu ze wszystkich elementów możemy

3:05też usunąć domyślny border ustawiając go na none background

3:10ustawimy na transparent szukajka

3:14jest na środku natomiast lista z akcjami nawigacyjnymi pokroju

3:18wiadomości aplikacje notyfikacje ona była dociągnięta do prawej więc

3:22my zostaniemy przy justify content flex start

3:26który jest ustawiony domyślnie na site-nav'ie natomiast na user actions ustawimy margin-left

3:31na auto no i tak jak jeśli dobrze pamiętasz w lekcji

3:35dziesiątej element przesunął się do przeciwnej

3:40strony niż tej w której zdefiniowaliśmy margines na auto zobaczmy

3:44co tam dalej się dzieje jak mówiliśmy przez

3:49każdy możliwy breakpoint ta wyszukiwarka ma z lewej i prawej ten sam

3:53margines mojego tutaj zunifikujemy do powiedzmy

3:5755 pikseli więc wracamy tutaj i ustawiamy

4:01na site nav search

4:06wrapper czyli na tym elemencie margin

4:110 50 pikseli tutaj

4:18ten ostatni element to był user avatar którego my jeszcze

4:22tutaj nie stworzyliśmy za pomocą css'a więc może do tego przejdźmy zobaczmy

4:27tylko jaki ten avatar jest duży 32 piksele na 32 piksele

4:31więc ustawiamy site nav albo po prostu

4:36is user avatar tylko że on jest

4:40pusty więc się nam po prostu nawet nie może podświetlić więc ustawimy na nim

4:44pseudo element after i żeby pseudo się

4:48pokazał musimy ustawić jako content display powiedzmy na inline-block

4:53określamy jego wysokość i szerokość to będą 32

4:57piksele na 32 piksele

5:01background ustawimy mu na szary okej

5:05no i trzeba jeszcze go tylko zaokrąglić jakkolwiek ustawimy border-radius

5:09na połowę wysokości szerokości czyli w tym momencie 16 pikseli

5:13okej mamy css'owe kółeczko no i możemy

5:17tak naprawdę wyrównać te elementy wewnątrz site nav user actions

5:22ustawiając align-items na center

5:26i może powiększymy te ikony żeby faktycznie wyglądały

5:30tak jak te youtubowe kontener ma 24

5:35piksele jako że to są iconic fonty no to niestety musimy

5:40ustawić to poprzez font size on tutaj nam pokazuje że jest to 11 pikseli nie wiem

5:44ile w tym jest prawdy tutaj youtube używa svg więc

5:49ja to zrobię po prostu na oko natomiast my musimy używać font-size'a ponieważ

5:53robiliśmy import font awesome z cdn i

5:57tam nie ma nawet możliwości aby elementy były svg w naszym kodzie

6:01źródłowym dodamy dodatkową klasę do każdej naszej ikonki

6:05chociaż ta klasa już jest więc po prostu wykorzystamy klasę

6:09fas czyli site-nav fas

6:15będzie miał font-size ustawiony na 16 pikseli no

6:19i te elementy już są w miarę podobne może jeszcze jej troszkę powiększe do

6:2418 taki sam font-size ustawię

6:28na site nav search input

6:33i zdefiniujmy

6:37odległości pomiędzy tymi elementami i

6:41y czyli wchodzimy tutaj sprawdzamy jaka odległość jest między tym hamburgerem

6:45a logiem youtube jest to 27 pikseli cali może

6:49zostawimy tutaj 25 pikseli i pomiędzy nimi jest 30 tutaj

6:54również 30 tutaj 33 w zależności

6:59od ikonki to na pewno będzie miało różne wartości i tu jest jeszcze oczywiście padding

7:03więc jeśli by się dało to

7:09może faktycznie zrobimy taki sam padding jak jest tutaj ustawione zobaczmy

7:14jaki tu jest padding okej

7:18google używa custom

7:23properties 8 pikseli wychodzi na każdym buttonie więc

7:28możemy na naszym site nav fas ustawić

7:33padding 8 pikseli

7:37no i wtedy te elementy będą

7:43mogły mieć troszkę mniejszy ten margines zobaczmy

7:47jaki tu jest po prostu margines i go zaplikujemy wszędzie dalej margin-right 16

7:52pikseli no zobaczmy co z tego będzie margin-right

7:5716 pikseli okej

8:02wygląda całkiem nieźle oczywiście ten element

8:07search wrapper nam się już nie mieści w naszym viewporcie więc musimy go

8:12faktycznie zacząć kodować czyli na search wrapperze ustawmy display

8:17flex i

8:22w tym momencie on już się mieści w nim natomiast sam nav bar

8:27jest szerszy niż całe nasze body ustawmy

8:32może max width albo po prostu width na

8:37100 vw czyli viewport

8:41width i

8:46może na każdym bezpośrednim elemencie

8:53wewnątrz site'nav'a ustawimy flex-shrink na zero

9:00generalnie tego rodzaju selektory nie są najlepszą praktyką natomiast nie

9:04chcę już dodawać dodatkowych klas w tym momencie w

9:09naszym markup czyli

9:13każdy element w tym momencie nie będzie się kurczył każdy element który jest

9:17bezpośrednim dzieckiem naszego kontenera site-nav natomiast

9:21my chcemy żeby site-nav search

9:26input mi

9:30się wydaje że już taką klasę napisałem gdzieś wyżej oczywiście

9:34więc tą wyrzucę i napiszę to tam aha ale

9:38to jest klasa połączona więc tak czy siak tworzę nową klasę i

9:45tutaj ustawimy flex-shrink na 1

9:49tylko tutaj będzie problem bo przez ten selector

9:53podbijamy sobie specificity i ten selector nie w ogóle nie wchodzi do gry

9:57więc możemy jako haka zescope'ować to jeszcze na

10:01site-nav i w tym momencie ten element powinien się w

10:05momencie kiedy będziemy kurczyć ekran to

10:12powinien ten search bar również się kurczyć on się nie kurczy zobaczmy

10:17dlaczego on flex-shrink ma już ustawione na pewno

10:21za sprawą tego selektora który pisali podejrzewam

10:25że po prostu ten

10:29element może powiększmy sobie tutaj tylko trochę viewport ten

10:36element który u nas nazywa się user actions on

10:41ma stałą szerokość tutaj z 252 piksele poszerzymy to jeszcze troszkę

10:45i tu dalej są 252 piksele

10:49i myślę że też tak zrobimy w końcu odwzorowujemy

10:53layout youtube więc user actions ustawimy

10:58na sztywną szerokość powiedzmy width 250 pikseli i

11:04będziemy mogli usunąć ten

11:09margines który tutaj ustawiliśmy przynajmniej dla

11:15tych elementów wewnątrz user actions

11:19user actions

11:23kropka fas i

11:28tutaj margin-right ustawimy na 0 dobra i w tym

11:32momencie już elementy nam się mieszczą na ekranie jak będziemy kurczyć viewport

11:37to one dalej nam odjeżdżają ale możemy tutaj od razu justify-content

11:42ustawić na space-between one będą się nam

11:46układać wtedy w porządku może po prostu ustawmy

11:51tego flex-shrink'a również na search wrapperze

11:55dlatego tu nie mamy widocznie search wrapper tutaj ustawimy flex-shrink

12:02na 1 tak naprawdę oprócz flex-shrink możemy również

12:06ustawić flex-grow na 1 bo podejrzewam

12:11że w momencie kiedy mamy większy viewport to ten

12:15element powinien również rosnąć więc analogicznie ustawimy

12:19flex-grow na 1 na

12:23input czyli search input

12:27to jest flex-shrink i flex-grow dobra w tym momencie już faktycznie

12:31widać że ten search bar nam

12:35się rozciąga ale niestety dalej

12:39się nie kurczy dobra za chwilę do tego wrócimy na

12:44ten moment może ostylujmy ten search input oraz

12:49search trigger czyli znajdziemy sobie search

12:53input ustawimy

12:58mu border powiedzmy 2 piksele solid

13:02ddd padding

13:07mu ustawimy na 5 pikseli z

13:11lewej i z prawej i analogiczny

13:16kolor ustawimy na search trigger

13:20nie ma takiego selektora jeszcze więc stworzymy ten selector site-nav

13:24search trigger okej

13:29możemy

13:34usunąć border left żeby

13:38nie było tutaj zduplikowanej tej krawędzi no i moglibyśmy

13:42wyrównać ten element wewnątrz tego

13:46button'a tutaj jest ten padding więc może usuńmy mu ten padding tylko

13:53oczywiście musielibyśmy to zrobić na site-nav

13:57search trigger fas

14:04no i dlatego to jest też problem z tymi genetycznymi

14:09selektorami o których wam powiedziałem wcześniej z gwiazdkami bo teraz

14:13po prostu muszę faktycznie nadpisywać własne selektory

14:17które napisałem dlatego metodologie css'owe są bardzo potrzebne

14:21żeby po prostu wygodnie pracować z css'em

14:26no i wyrównamy go za pomocą flexa display flex

14:30justify-content center nie

14:35zadziałało zobaczmy dlaczego ponieważ fas search ma również

14:39margines więc tutaj zerujemy ten margines no

14:44i może ustawmy żeby szerokość tego buttona to było 60 pikseli

14:49zobaczymy jak to wygląda na youtubie okej

14:56jest podobnie tylko tutaj jest jeszcze oczywiście jakiś hover style ale

15:00sam button ma inny kolor nawet

15:05w tym stanie początkowym więc tutaj ustawimy background

15:09na jakąś pokrewną tego ddd powiedzmy

15:17że troszkę jaśniejszą na

15:21całym search wrapperze też pewnie powinniśmy ustawić

15:26align-items na center albo

15:31zostawić je tutaj na streczu bo faktycznie ona nam wyrównają te

15:35dwa elementy a na samym przycisku

15:39który ma zamykać na mobile naszą nawigację

15:44search back site-nav

15:49search back ustawimy

15:53align-self na center okej i ona

15:57jest teraz faktycznie po środku tego kontenera no a search bar jest

16:01wystretchowany na całą wysokość wrappera tutaj

16:06może jeszcze na site-nav'ie ustawmy align-items na

16:10center to logo

16:15youtube nie jest jeszcze równe zobaczmy dlaczego no

16:19powiedzmy że wypozycjonujemy go również na flexie zobaczymy

16:23jaka to była klasa site-nav

16:28logo link z myślnikiem już się trzymajmy konwencji którą sobie wymyśliliśmy

16:32i zrobimy

16:37display flex no i to wystarczyło żeby to wyrównać no

16:41i pozostał problem tego kurczenia się search bar'a

16:46natomiast ten problem może rozwiążemy już w kolejnej

16:50podlekcji tego kursu gdzie faktycznie będziemy dopisywać media queries

16:54żeby ten nav bar mniej więcej zachowywał się tak jak ten youtubowy