Flexbox: Lista wideo cz. 3

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

0:04teraz zajmiemy się stylowaniem pojedynczej karty wideo więc

0:08pierwszą rzeczą którą tutaj widzimy jest to że to jest element listy

0:12więc on dalej ma ten punktor ponieważ nie mamy żadnego normalize'a czy css reset'a

0:17więc ustawiamy na video section list

0:22czyli tym elemencie na całej liście list-style-type

0:27na none ustawiamy padding na 0

0:31margin na 0 i teraz

0:35na pojedynczym video czyli

0:39nawet nie na pojedynczym list-item'ie tylko

0:43na samym odnośniku video linku możemy ustawić

0:47display flex czyli ustawiamy tutaj display

0:52flex no i ustawmy że każda karta

0:56ma określoną wysokość i szerokość

1:01czyli sprawdzamy sobie tutaj jak duży

1:05jest ten element 210 na 117 niech

1:09będzie tak zostawiamy to czyli

1:14ustawiamy width 210

1:18pikseli height 117 pikseli i

1:22ten rozmiar nie będziemy aplikowali co prawda na samym linku tylko na thumbnail'u

1:26więc to przeniesiemy ustawimy video section

1:33thumbnail

1:38ustawimy mu taką konkretną szerokość

1:43i wysokość flex-direction możemy ustawić na można by to

1:48zrobić na kolumnie w sumie wygląda to całkiem nieźle więc może zostawmy to

1:52na kolumnie tylko ustawmy żeby

1:56jednak cała karta miała te 270 pikseli

2:00a

2:05thumbnail miał po prostu width 100% no i na tym

2:09thumbnailu ustawimy background image

2:13na url faktycznie taki jak korzystaliśmy z

2:17z placeholdit'ów i tutaj wkleimy

2:23sobie nasz obrazek tylko musimy

2:28oczywiście zmienić mu rozmiary na adekwatne czyli 210 na

2:32117 kolor mu też

2:36zmienimy na 696e9e

2:41tekst zostawimy jaki jest tylko zmienimy jego treść

2:45na awesome tutorial okej

2:51spacje tutaj nam nie przejdą zróbmy po prostu

2:55awesome tutorial w ten sposób i mamy już kartę

3:01naszego video plus minus oczywiście teraz musimy ostylować

3:05czas ten button żeby to się odpowiednio pozycjonowało wewnątrz thumbnail'a

3:09i potem jak będziemy mieć więcej tych elementów to

3:14odpowiednio je układać na różnych breakpoint'ach więc

3:19zarówno video link jak i thumbnail będą pozycjonowane na flexie

3:23czyli ustawiamy display flex justify-content

3:29również możemy ustalić na column i

3:35wewnątrz tego thumbnail'a znajdują się dwa elementy thumbnail

3:39ale jest to button i ten span ten span

3:44pokolorujemy oczywiście zgodnie z designem youtube czyli rozmiary

3:48minimalne tego elementu to będzie

3:52powiedzmy te 40 na 16 pikseli background

3:56ustawimy na czarne z opacity 0.8 więc

4:00po kolei już to róbmy od razu czyli total

4:05time to będzie min width 40

4:10pikseli min height

4:14po prostu 16 pikseli kolor oczywiście biały

4:19background to będzie rgba

4:23czarne czarne czarne 0.8 przeźroczystości

4:27i zobaczmy czy tu jest

4:32jeszcze jakiś od razu tu widać margines 4 piksele margin'u

4:382 piksele paddingu z góry i z dołu i cztery po bokach więc też to aplikujemy od razu

4:42margin 4 piksele padding

4:462 piksele 4 zobaczmy jak to wygląda u nas

4:50okej i jeszcze font-size oczywiście trzeba zmienić jaki

4:56tu jest font-size 12 pikseli roboto czyli font-size

5:0112 pikseli możemy to od razu zaokrąglić

5:05border radius 2 piksele line-height

5:10równy size aby na pewno było

5:14wycentrowane no i powiedzmy że text-align

5:18center żeby to też na pewno było na środku moglibyśmy to zrobić oczywiście

5:23na flexie i nie na line-height i text-align ale też nie ma sensu wrzucać

5:28wszędzie flexa jeśli na przykład operujemy tylko na tekście więc

5:32skoro mamy już taki layout no to może ustawmy align

5:37items na flex-end tylko

5:41że w tym momencie elementy dociągnęły nam się do

5:49końca kolumny co jest dziwne bo main axis jest

5:53tak jakby ustawiona na row tutaj a

5:59no tak justify-content na column nie ma to sensu flex-direction

6:03na column no i teraz będzie nam o wiele łatwiej align

6:08items flex-end aby przeklnąć to na koniec osi

6:12cross axis no i żeby wypozycjonować

6:16elementy wzdłuż osi main axis na środku to

6:22teraz użyjemy justify-content-center albo

6:26nawet space-between i

6:31to wygląda już całkiem nieźle tylko że po pierwsze ten button

6:35powinien mieć inny kolor i rozmiary ale przede wszystkim on

6:40się nam powinien pokazywać tylko na hoverze więc może to zróbmy teraz

6:44video section watch

6:49later czyli

6:53ten element powinien mieć domyślnie display

6:57none ale tylko gdy mamy video

7:03section video link hover

7:08na tym elemencie no

7:12to on się powinien display blokować

7:27czemu ten element dalej jest widoczny zobaczmy zmniejszymy

7:33to sobie troszkę display

7:43on ma ustawionego inline-block'a przez font awesome i

7:49font awesome nam wygrywa tutaj w stylowaniu możemy

7:55to rozwiązać na zasadzie takiej że po prostu ten

8:00font awesome wstawimy tutaj jako spana okej

8:06w tym momencie tego już oczywiście tutaj nie ma i teraz po hoverze

8:10ten element się pokazuje ale przez to że domyślnie czyli

8:17jak nie najedziemy myszką na dany element jest

8:22tylko jedno dziecko wewnątrz tego thumbnail'a

8:26no to ono nam leci do góry więc możemy to rozwiązać troszkę inaczej

8:30ustawiając na total time

8:34jeszcze dodatkowo margin-top auto teraz

8:38niezależnie czy jest tam ten element czy nie ma on zawsze będzie

8:42na dole zobaczmy jak powinien wyglądać button

8:47on ma też 4

8:51piksele paddingu kolor ma biały background

8:56ma 1111

9:00no i font-size ma na 10 pikseli

9:04zobaczymy co z tego wyjdzie przeskoczmy na nasz

9:08layout i ustawmy mu margin

9:124 piksele font-size 10

9:17pikseli zobaczmy co z tego będzie kolor na white background na 111

9:25okej

9:29najedźmy myszką i wygląda to nieźle tylko tam no

9:33ta ikonka jest mniejsza więc może tutaj

9:38może zróbmy tak że jeszcze

9:42raz tutaj sprawdźmy to jest 24 piksele na 24 piksele to

9:48tak też wpiszemy tutaj width powiedzmy

9:5325 pikseli razem z tym paddingiem height 25 pikseli

9:59tutaj ustawiamy font-size powiedzmy no

10:04to jest większość tego buttona dodajemy 20 pikseli zobaczmy jak to będzie wyglądać troszkę

10:09za duże więc na 18 jest

10:13lepiej no i oczywiście tak samo border-radius

10:172 piksele żeby było spójne z tym tutaj i może

10:22mu zróbmy jeszcze jakieś tam opacity domyślne żeby nie był aż taki

10:26brutalny i takie samo opacity też

10:30ustawimy na tym czasie może troszkę

10:34zbyt brutalne na 0.9

10:38no i teraz po najechaniu myszką na dany element oczywiście się pojawia

10:42nam ten button moglibyśmy

10:47tutaj dodać te odpowiednie js'y bądź linki

10:51w zależności od tego co chcielibyśmy żeby ten button faktycznie robił i

10:55dalszą część tej karty video będziemy stylowali w kolejnej lekcji

11:00z tego kursu także dziękuję ci bardzo za uwagę i

11:04do zobaczenia wkrótce