Flexbox: Lista wideo cz. 5

0:00Cześć witam cię w podsumowaniu ćwiczenia w którym tworzyliśmy

0:04naszą własną kopie youtube i teraz

0:08poruszę kilka rzeczy na które wcześniej mieliśmy czasu bądź które

0:12wyszły przy okazji tworzenia tego przykładu jak

0:17widać tu pierwszą rzeczą którą moglibyśmy tutaj naprawić

0:21jest to żeby wideo konkretnie jego tytuł

0:25miał zawsze 100% szerokości danej karty ponieważ jeśli

0:29tak nie jest no to oczywiście przy krótszych tytułach ten button będzie doklejony do końca

0:33tego ciągu znaków a nie do końca kontenera

0:37więc wchodząc do main css znajdźmy

0:42video name i ustawmy width na 100%

0:46po zapisaniu oczywiście jak już widać ten

0:51element będzie dobrze pozycjonował się danej karcie oczywiście

0:57ten layout ma dużo różnic względem

1:01oryginalnego youtuba na przykład ta

1:06lista nawigacyjna jest zawsze wycentrowana względem

1:10tej listy wideo oczywiście moglibyśmy to

1:14zrobić tworząc jakiś wrapper który będzie zamykał

1:18nam to w jednym rodzicu i ustawiając na przykład

1:22odpowiedni padding z tej strony bądź po prostu ustawiając

1:29max width na tym wrapperze i

1:33centrując całą treść przy pomocy na przykład margin 0 auto

1:37oczywiście drobne rzeczy pokroju różnice

1:41w wielkości fonta i tego typu rzeczy też można byłoby poprawić

1:45natomiast to nad czym ja się chciałem skupić jest

1:50przedstawienie problemów które wynikają częściowo być

1:54może z korzystania z flexa ale bardziej ze struktury markup'u którą

1:59sobie tutaj ustaliliśmy jeden feature którego na pewno brakuje to jest

2:03sticky scroll czyli szybsze scrollowanie naszej

2:07strony tak bardzo że element wyjeżdżałby

2:11już poza jej viewport to on przykleja się do

2:16danego elementu interfejsu i tam już

2:20zostaje ten efekt możemy uzyskać za

2:24pomocą position sticky tutaj swoją drogą znajdziecie wideo

2:28na ten temat natomiast jeśli chcielibyśmy po prostu na

2:33naszym channel

2:37header nav czyli musimy wrócić do pliku header css i wziąć

2:41channel header nav gdybyśmy ustawili

2:45tutaj position sticky i

2:50ustawili top powiedzmy na 0 no to to niestety

2:54nie zadziała a nie zadziała z tego powodu ponieważ mamy nie

2:58płaską strukturę w naszym markup'ie tutaj

3:03jest struktura następująca że bezpośrednio w body mamy nav'a

3:07header i main'a i dopiero w tym headerze jest kolejna

3:11lista nawigacyjna i przez to właśnie zagnieżdżenie że wewnątrz headera mamy tą listę

3:15no to natywne position sticky nie zadziała moglibyśmy je oczywiście

3:20emulować za pomocą javascriptu co nie byłoby też takie trudne natomiast nie jest to

3:24tematem tego kursu moglibyśmy przenieść

3:28sobie tego nav'a poza ten header oczywiście

3:32tutaj musielibyśmy troszkę naprawić te stylowanie chociażby

3:37zmienić tutaj background-color na taki

3:41jak tutaj ustawiśmy na całym headerze bo on backgroundu nie ma

3:45ten channel header nav więc musimy go dodać jawnie i teraz to wygląda

3:49oczywiście okej i sticky już też zadziała czyli w momencie gdy element

3:54wyjeżdżałby poza viewport to on będzie

3:58przyklejał się do góry ekranu musielibyśmy oczywiście tutaj jeszcze z-index

4:03ustawić na 1 i wtedy element faktycznie będzie

4:07się przyklejał tam gdzie chcemy tylko problem jest tutaj taki

4:11że semantycznie jest tutaj troszkę niepoprawny ponieważ wynikałoby

4:15że jest to nawigacja dla całej naszej witryny co niekoniecznie musi być prawdą

4:19ponieważ mimo wszystko ta nawigacja dotyczy tych

4:25wideo a nie całego youtube czyli nawigacji po

4:29profilu użytkownika i tak dalej i tak dalej więc ja bym

4:33proponował zostawić markup tak jak jest i

4:37za pomocą javascriptu na odpowiedniej pozycji scrolla oczywiście

4:41z odpowiednimi debounce'm i throttle'm ustawiać position fixed aby

4:46osiągnąć ten efekt drugim problemem jest oczywiście overflow

4:51w osi x i to co powinniśmy

4:55zrobić jest przelecenie każdego elementu w naszym

4:59markup'ie i sprawdzenie który element faktycznie spowodował ten overflow

5:04czyli moglibyśmy zacząć od usunięcia tego nav'a

5:08widzimy że overflow dalej jest możemy usunąć sobie tego

5:12nav'a okej usunęliśmy całą listę

5:17i widać że teraz tego overflow'a nie ma więc możemy

5:21oczywiście metodą redukcji

5:26tego co działa znaleźć sobie który element robi tego overflow x

5:31natomiast aby już w tym momencie tylko to uprościć możemy

5:35do base'a dopisać na body overflow x

5:44hidden i w tym momencie tylko oś x

5:48będzie miała ukryty scrollbar nie jest to rozwiązanie idealne i

5:52nie jest to też rozwiązanie produkcyjne natomiast jeśli będziecie mieli naprawdę ciężkie

5:57case'y gdzie nie wiadomo który element powoduje

6:02ten overflow a macie bug'a na produkcji i musicie fixnąć to na teraz

6:06no to to jest jakiś tam fix chwilowy

6:11który załagodzi po prostu ten konkretny pożar natomiast

6:16na youtubie jeszcze ta nawigacja główna ma również position

6:20sticky więc my możemy zaaplikować to na naszej stronie ponieważ ten

6:26navbar jest navbarem wewnątrz body czyli tutaj scrollable

6:30area czyli możemy na pliku

6:34nav css ustawić sobie w site nav'ie

6:39position sticky i

6:43ustawić mu top na 0 czyli w momencie kiedy element już będzie wyjeżdżał

6:47on się nam przyklei tylko tak jak poprzednio musimy ustawić mu

6:51z-index żeby był na wierzchu warstw ces'a

6:55i został tutaj no i oczywiście w momencie doscrollowania do tego

6:59menu jeśli zmienilibyśmy strukturę bądź dopisali js'a to to menu też

7:03również mogłoby się tutaj przykleić

7:11w kontekście wd tutaj na jeszcze mniejszej rozdzielczości te

7:17elementy wewnątrz site-nav'a również znikają więc zaadaptujmy to

7:21w ten sposób aby faktycznie było tutaj troszkę więcej miejsca czyli

7:26patrzymy jakie elementy zostały lupa dodaj wideo i aplikacje

7:30więc usuwamy wszystkie pozostałe elementy bierzemy

7:35sobie media max width powiedzmy jaka

7:40tutaj jest szerokość tego okna no powiedzmy

7:44400 pikseli i

7:50ukrywamy wszystkie elementy poza tym tym oraz

7:54tym czyli comment

8:00i bell ukrywamy czyli

8:05fa comment display

8:10none sprawdźmy

8:14jeszcze raz jaki

8:24tutaj jest display ustawione przez font-awesome jest

8:28ustawiony inline-block my możemy zrobić site

8:32nav fa comment display

8:37none tutaj jest jakaś przestrzeń więc prawdopodobnie w naszym markup'ie jeszcze

8:42zostawiliśmy acha

8:47oczywiście tutaj jest user action powinniśmy

8:53tak naprawdę ukryć całego li więc jedną

8:57rzeczą którą na przykład robi się w bootstrapie jest ustawienie flag za pomocą klas

9:01w css na przykład moglibyśmy zrobić tutaj is mobile hidden

9:06i wtedy na mobilce każdy element który będzie miał ten konkretny

9:10komentarz będzie ukryty na mobilce nie jest to do końca najlepsze

9:15ponieważ deklarujemy w markup'ie w html jak

9:19element powinien się zachowywać w rwd co jest tak naprawdę warstwą prezentacji ale

9:25też oczywiście możemy takie rozwiązanie wykorzystać

9:30i tutaj tą listę nawigacyjną być

9:40może też skrócić na mobilce do

9:46powiedzmy 100 pikseli trochę przegięliśmy

9:50powiedzmy 200 pikseli i

9:55teraz faktycznie gdy będziemy rozszerzali te elementy no to

9:59one się już ułożą w inny sposób na większej rozdzielczości więc

10:07to co mógłbyś bądź mogłabyś zrobić na własną rękę aby

10:11jeszcze ten markup ulepszyć to oczywiście zaaplikowanie sticky do

10:15pozostałych elementów na tej stronie obsługę javascriptu

10:20czyli to rozsuwane menu te

10:25scrollowalne sekcje dla

10:29main video i playlist i tak dalej oczywiście selectbox'y

10:33czy właśnie sticky

10:38dla tego elementu bez zmiany markup'u podsumowując

10:42to ćwiczenie staraliśmy się korzystać z flexboxa

10:46wszędzie gdzie było to aplikowalne były

10:50sytuacje że używanie flexboxa prowadziło do pewnych problemów i lepiej

10:55było go nie używać ale poza samym flexboxem oczywiście też trzeba

10:59być obytym z css'em żeby móc tworzyć efektywne

11:03layouty to wszystko w tym ćwiczeniu bardzo się cieszę

11:07że dotrwałeś do końca zachęcam cię do obejrzenia tej serii wideo jeszcze

11:12raz i kodowania powiedzmy równolegle do tego

11:17co ja robię na ekranie a w kolejnej iteracji już zupełnie zakodowania

11:21takiej strony bądź podobnej zupełnie samodzielnie po

11:26tych ćwiczeniach na pewno będziesz już swobodnie korzystać z

11:30flexboxa