Flexbox: Lista wideo cz. 2

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

0:04od podstaw i faktycznie teraz przejdziemy do stylowania wcześniej przygotowanego markup'u

0:08do głównej sekcji z wideo w naszym

0:15fake youtubie czyli na video section czyli

0:19na tym elemencie ustawimy background

0:24na biały no i oczywiście jako że tutaj

0:29te elementy są białego koloru prawdopodobnie dlatego że

0:33linki stylowaliśmy na biało gdzieś na naszej stronie

0:37na dole robią się niewidzialne więc może od razu na video

0:41section link ustawimy

0:46kolor na czarny okej może

0:50nie na video section link zobaczymy na czym ten kolor jest faktycznie ustawiony color

0:55color white jest ustawiony w base css

1:02na wszystkich odnośnikach więc to powinno zadziałać tylko

1:07to nie jest video section link prawdopodobnie video

1:13link okej video link

1:17no i teraz oczywiście widać ten tekst konkretnego

1:21wideo no i jak już widzimy całą naszą strukturę

1:28strony no to zaczniemy ją stylować oczywiście na flex'ie czyli

1:32zamykamy tutaj wtedy te devtools'y i na video section

1:37nav ustawimy display flex zobaczymy

1:43jakie tutaj są paddingi na tym elemencie nie

1:49one są nie są ustawione bezpośrednio

1:54na tym elemencie mamy troszkę inną strukturę markup'u powiedzmy

1:58że 16 pixeli z lewej i z prawej strony to

2:02będzie cały padding dla video section czyli padding

2:06ustawimy na zero

2:1016 pikseli a no i zobaczmy jakiś font-size jeszcze na tych

2:14elementach 16 pikseli kolor 111 tutaj

2:2014 pikseli kolor 60 60 60 i tak samo 14

2:2460 60 60 czyli tak

2:29naprawdę powinniśmy nasze wideo label

2:34jakoś rozróżnić czyli

2:38video section label

2:42czyli te elementy acha

2:47tutaj zrobiłem błąd w markup'ie czyli chciałem ustawić tutaj klasę

2:51na tych label'ach a ustawiłem niepoprawne dla

2:56atrybutu for po spacji kolejną wartość więc

3:01w tym momencie oczywiście będziemy mogli za pomocą klasy stargetować ten

3:05element no i podejrzewam że tutaj też ten problem występuje

3:09więc od razu go tutaj też naprawiamy i

3:13możemy od razu rozróżnić te dwa elementy nazwijmy

3:17je sobie label primary i label secondary

3:22żeby

3:26mieć jakiekolwiek ich rozróżnienie a szczerze

3:30mówiąc nie jestem pewien dlaczego na youtubie one są inaczej ostylowane no po prostu

3:34pewnie jest jakiś tam powód albo może tak było im wygodnie tak komponenty

3:38mają stworzone więc teraz label primary stylujemy

3:43na wcześniej wspomniany kolor 111 font-size

3:48na 11 pikseli bardzo

3:52mały się wydaje 16 pikseli nie

3:5611 czyli ustawiamy 16 pikseli no

4:01i na label secondary

4:05ustawiamy kolor 60 60 60 font-size 14

4:11i text-transform na uppercase tutaj

4:17jest jeszcze ten button play all i on ma w sumie mieć takie same style jak ten uploaded

4:22videos więc może po przecinku zrobimy video

4:26section play all okej

4:30i on ma teraz takie same style tylko że paddingi

4:35nie ma paddingów okej to pewnie dlatego że mamy

4:40tutaj za dużo elementów i tutaj nie mamy żadnego flex wrap'a więc te elementy

4:45się ściśniają w tej dostępnej przestrzeni która jest im

4:49dostarczona a my oczywiście tych selectów tutaj nie będziemy pokazywali

4:53to można obrać javascriptem żeby stworzyć takie

4:58nie natywne selecty to są jednocześnie dostępne i wyglądają

5:02tak jak chcemy więc my

5:06tylko po prostu je ukryjemy czyli video

5:11section zobaczmy klasę okej

5:19one są osobno nazwane czyli video section sort i

5:25video section filter

5:30ostylujemy osobno i damy im display w tym momencie

5:34na none i oczywiście

5:38używając js oraz odpowiednich atrybutów area można

5:43sprawić żeby nie natywne selecty również były dostępne i

5:47wyglądały w porządku natomiast na tym etapie zostawiamy to tak jest no

5:51i tutaj jeszcze ustawimy justify-content na space-between

5:56i mamy już mniej więcej jakiś

6:00tam układ tych elementów oczywiście musimy ustawić im jeszcze odpowiednią wysokość

6:04i może nadać odpowiednie ikony z

6:09font-awesome więc zobaczmy może jak duże

6:13są te elementy one mają padding 10 16 pikseli więc za chwilę

6:17to ustawimy i ogólnie te elementy mają 36 pikseli

6:21wysokości więc ustawiamy na video

6:27section label primary video

6:32section play all i video section label

6:37secondary wysokość

6:41na 36 pikseli padding na 10 pikseli

6:4516 pikseli no i teraz jest

6:49to już jakkolwiek podobne tutaj one mają jeszcze jakiś

6:54odstęp od tego menu

7:00górnego no możemy strzelić że to jest powiedzmy też

7:04to 16 pikseli czyli ustawimy sobie że video section będzie miało

7:0816 pikseli paddingu z każdej strony no i

7:13uzupełnijmy te ikonki czyli

7:22dla upload videos ustawimy jeszcze spana o

7:27klasie fas

7:32fa tutaj powiedzmy że to będzie jakiś

7:36triangle czyli triangle okej

7:44caret left więc pewnie będzie caret down

7:49wpisujemy sprawdzamy i

7:55faktycznie jest tutaj ten caret down tylko ja go wstawiłem na upload videos to

8:00drugie tutaj musimy oczywiście ten label zmienić czyli uploaded

8:04videos tutaj wychodzi nam caret i tutaj jest sort

8:08by jako druga wartość czyli tutaj zamiast uploaded

8:12videos powinno być sort by i

8:17drugim elementem który tutaj mamy pewnie byłoby jakaś lista

8:21albo

8:28sort albo

8:35align okej powiedzmy że align

8:39left jest czymś co jest

8:43wystarczająco podobne do tego o co nam chodzi nie jest to oczywiście ta ikonka

8:47natomiast ona jest wystarczająco podobna więc align

8:51right okej

8:59no i oczywiście tutaj powinniśmy dać align left żeby było zgodne z designem

9:03i wstawić to przed ten tekst który nam reprezentuje tą ikonkę

9:08czyli w tym momencie wygląda to już jakkolwiek podobnie do tego co

9:12mamy na youtubie i moglibyśmy tutaj jeszcze tak naprawdę za

9:17tym labelem secondary video

9:26section label

9:32secondary na fas ustawić

9:36jeszcze margin-right powiedzmy na 5

9:40pikseli albo na 8 pikseli żeby był po prostu

9:44jakikolwiek odstęp między tym tekstem

9:49a ikonką którą właśnie ustawiliśmy zanim przejdziemy

9:53do stylowania faktycznie pojedynczego elementu video

9:57to może naprawmy ten my channel zobaczmy jaka

10:02tu jest klasa channel header details czyli wchodzimy

10:07sobie w ten element header

10:11zobaczmy channel header details

10:16i tam na dole robiliśmy media queries i na takim

10:20mniejszym breakpoint'cie powiedzmy że gdzieś

10:25w okolicach no 500 powiedzmy

10:30że 550 czyli max

10:35width ustawimy na 550

10:40ustalimy że channel header details

10:45będą miały padding jakieś

10:50tam mniejsze no powiedzmy nawet do 16 pikseli więc

10:57teraz jak będziemy mieli większy breakpoint

11:02no to oczywiście ten padding po bokach będzie większy natomiast przy mniejszym breakpoint'cie

11:06ten tekst na pewno nam się będzie mieścił podobnie

11:10do tego jak jest na youtubie tutaj nie ma żadnego paddingu ale my go już zostawimy tak

11:14jak jest u nas ponieważ wydaje mi się że wygląda to nawet lepiej tego

11:19odstępu nie będziemy fix'ować tak też jest na youtubie zwłaszcza że tutaj ma

11:23być to miejsce na element na ewentualny element jeśli

11:27będziemy przescroll'owani w prawo więc to tyle w tej lekcji w kolejnej lekcji zajmiemy

11:31się stylowaniem pojedynczej karty wideo