Flexbox: Nagłówek kanału cz. 4

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

0:04będzie to już ostatnia lekcja gdzie będziemy

0:08zajmowali się faktycznie headerem i po prostu dopracujemy ten

0:12kod troszkę żeby wyglądał zarówno lepiej wizualnie

0:17jaki był bardziej poprawny semantycznie bądź funkcjonalnie

0:21więc pierwszą rzeczą którą zrobimy w tym momencie jest ostylowanie tego search'a

0:25czyli robimy channel header

0:29search i

0:34ustawimy mu display na flex i align

0:39items na center jeśli

0:43dobrze trafiłem z klasą jest okej tylko on z jakiegoś powodu nie ma search

0:51każdy etap powinien

0:56być acha bo on nie ma tej samej wysokości co pozostałe elementy

1:00gdybyśmy chcieli wykorzystać tutaj funkcjonalność flexa mianowicie

1:06stretch'a align-items stretch żeby faktycznie ten te

1:10elementy się z tym wyrównały do jednej linii no to tutaj struktura

1:14ul li nam troszkę to utrudnia ponieważ każdy li jest

1:18osobnym flex item'em i tak naprawdę elementy wewnątrz

1:23tego flex item'u nie wiedzą jaką wysokość mają elementy wewnątrz

1:27innego flex item'a to moglibyśmy rozwiązać na przykład sassem

1:31ustawiając zmienną która będzie aplikowana do obu tych elementów albo

1:35spłaszczyć tą strukturę natomiast tego nie polecam robić bo semantyka po prostu

1:39na tym straci więc my na sztywno dodamy

1:44w tym momencie odpowiednią wysokość ustawiliśmy że powinno

1:48być 50 pikseli z tego co pamiętam ustalmy

1:53jeszcze konkretny rozmiar tej lupy 24 piksele kolor

1:58taki jaki ustaliliśmy na innych elementach ponownie moglibyśmy

2:02tutaj reużyć tego kodu powyżej font

2:07size 24 piksele bardzo duża się ta

2:11lupa zrobiła aż się zastanawiam czy to jest faktycznie ten font-size jest taki chcemy

2:15ustawić nie font jest 11 24 jest cały kontener

2:19więc 11 pikseli wstawiamy no

2:26już tak dofiksujmy to ręcznie na 15 pikseli kolor

2:30jest ustawiony okej więc teraz musimy faktycznie ukryć

2:35te elementy które nie są nam w tym momencie potrzebne czyli wszystko co wychodzi poza

2:39ten channel header tabs możemy ukryć więc bierzemy

2:43channel header tabs znaleźliśmy ustalamy

2:49overflow hidden i w tym momencie już tych

2:53elementów nie widać moglibyśmy tutaj a nawet powinniśmy zrobić overflow

2:57scroll tylko że w tym momencie będziemy mieć tutaj tego

3:01scrollbar'a którego musielibyśmy w jakiś sposób ukryć da się to też zrobić css'em

3:07korzystając z odpowiedniego wrappera i przycinając po prostu ten wrapper ten

3:11scrollbar co też jest ux'owo nie do końca dobre ponieważ

3:15użytkownik nie do końca musi być pewien że ta sekcja jest scrollowalna

3:19natomiast na potrzeby przykładu robimy tutaj overflow hidden jeśli

3:25byśmy chcieli to musimy oczywiście pozycję tego elementu jego

3:30scroll left w tym momencie ustawić na odpowiednią w momencie kliknięcia któregoś

3:34przycisku na makiecie domyślnie

3:39previous button jest ukryty więc dałem mu display

3:43na none okej coś

3:47tu jest nie tak prawdopodobnie specificity działa w ten sposób

3:51że ten element nie jest tutaj nie

3:57aplikuje mu się ten display więc przenieśmy to może na koniec zobaczymy

4:01co to się stało display none nie

4:06działa opacity zero działa jaki ten

4:12element ma computed style zobaczmy href

4:17to jest ten element cały button więc computed display

4:21display ma block'a zobaczmy czy on ma blocka

4:26display inline-block z all

4:31css czyli font awesome chyba

4:36coś tutaj nam psuje no

4:41nic możemy zrobić dwie rzeczy możemy

4:48podbić to specificity jeśli to zadziała nie zadziała

4:52albo dodać tutaj important i wtedy ten element na pewno

4:56zniknie to nie jest dobra praktyka natomiast nie chcę już też tego przedłużać zwłaszcza

5:01że ten element i tak będzie pokazywany i chowany przez javascript

5:06więc na odpowiedniej klasie można stworzyć odpowiednio mocny selektor

5:10który te font awesome'owe style domyślne no

5:16ale w tym momencie możemy to tak zostawić i ten heading wygląda już całkiem

5:20okej no na pewno nie jest to jeden do jednego youtube

5:26trochę mu pewnie brakuje jeszcze

5:31tylko czy znajdziemy jakieś acha no oczywiście jeszcze musimy zrobić tutaj rwd

5:35czyli z tego co pamiętam na około 700

5:39pikseli to ten avatar nam znika i widzę

5:44że te elementy mają tutaj jakąś dodatkową przestrzeń

5:48na czym to jest zrobione no dobra załóżmy że

5:52wyrównamy to do końca tej linii ja też widzę

5:56że chyba jak to zmniejszymy jeszcze bardziej no to

6:00tutaj ta główna też ma ten odstęp z zachowaniem strzałki

6:05co nie wiem czy ma sens bo ten element mógłby być spokojnie dociągnięty do tego do

6:09tej krawędzi no po prostu zrobimy że że na

6:13mobilce ten avatar będzie znikał i font-size też

6:18w sumie mógłby się troszkę zmienić no zmniejszymy też font-size więc

6:22teraz tak tworzymy sobie media query

6:27media min max

6:31width powiedzmy 700 pikseli

6:35channel

6:41header avatar ustawiamy na display

6:45none zobaczmy nie ma naszego avatara

6:49elementy są dociągnięte padding

6:53moglibyśmy troszkę zmienić i to zrobimy channel header

6:59details zrobimy na padding

7:050 80 pikseli tutaj

7:13było 16 pikseli to zostaniemy przy tych 16 pikselach od

7:17dołu 0 i tak samo dla channel header

7:22nav no i pozostaje nam zmniejszyć

7:26channel header name font size

7:30na adekwatny taki jak nam tutaj youtube podpowiada czyli 18

7:35pikseli nie wiem jakie tam było wcześniej chyba 24 18 pikseli

7:39font-weight zostawimy taki sam i tutaj 14

7:44pikseli na subskrypcjach

7:49ale to jest takie samo więc zostawimy tylko na channel header name

7:54mniejsze font-size i w tym momencie rozszerzając

8:00ten heading

8:05faktycznie nam się zwija no i widać że też te elementy które tutaj

8:09są domyślnie widoczne to na mniejszych rozdzielczościach znikają

8:13tam chociaż ten element nie jest wypozycjonowany

8:17poprawnie bo tutaj ustawiłem

8:22temu nav 16 pikseli

8:26paddingu z góry to może z tego zrezygnujemy zrobimy dwa osobne selektory

8:30i dla nav'a ustawimy po prostu padding

8:340 80 pikseli no

8:38i teraz ten element jest faktycznie równy po kliknięciu mamy animacje

8:43kółeczka no

8:47i na desktopie jest normalny pełny

8:52widok youtuba tutaj jest dużo rzeczy które można jeszcze zrobić oczywiście poza

8:56jakimiś dodatkowymi tranzycjamidycjami animacjami tutaj jest jeszcze na youtubie

9:01efekt paralaksy czyli i zobacz

9:05że ten hero section zwija się w taki konkretny sposób

9:09jakby heading szedł do góry a obrazek

9:13do dołu no oczywiście u nas tego efektu nie ma tak

9:19naprawdę nawet nie możemy w tym momencie przescrollować w dół ponieważ nie mamy treści żadnej

9:24na naszej stronie więc tak strona nie jest scrollowalna natomiast

9:29to zostawiam też do dalszej zabawy tobie

9:33jeśli będziesz chciał bądź chciała poćwiczyć css'a

9:37i flexa oczywiście