Cześć w tym wideo zakodujemy widok mobilny komunikatora

więc w tej lekcji będziemy tworzyli layout komunikatora który będzie podobny do messengera, będzie wzorowany na messengerze, tak jak widzicie będziemy próbowali ten tutaj interfejs przetransformować na naszą stronę internetową

więc to o czym musimy zawsze pamiętać tworząc nasze responsywne strony internetowe jest to ten znacznik meta o nazwie "viewport", bez niego nasze media queries mogą nie działać no i generalnie praca z naszymi stronami www będzie o wiele trudniejsza

więc zaczniemy od tego dolnego panelu, czyli tutaj tej sekcji czaty, osoby
i relacje, no i stworzymy po prostu listę nienumerowaną o klasie "main-nav", więc każdy z naszych elementów listy nienumerowanej będzie składał się z obrazka oraz tekstu

więc na początku może zacznijmy od tekstu, czyli mamy tutaj czaty
osoby oraz relacje no i oczywiście będziemy potrzebowali tutaj takich właśnie ikonek

ja nie będę ich wycinał oczywiście z samej aplikacji messengera i
jest taka strona "glyphs.fyi", którą też możecie
znaleźć oczywiście w narzędziach deweloperskich na stronie "koduje.pl",

ale ja ją otworzę sobie w pełnym ekranie i tutaj wpiszemy "comment" i jak
widzimy mamy tutaj ikonkę która jest bardzo podobna do tej
właśnie facebookowej i możemy tutaj w tym miejscu po prostu
skopiować sobie nasz kod svg, więc ja zrobię właśnie to i tutaj nad naszym tekstem czaty, wkleję naszego svg-ka

no i oczywiście analogicznie możemy pobrać sobie pozostałe elementy czyli tutaj te osoby oraz relacje, więc ja tutaj wpiszę sobie "person"
i faktycznie widzimy tutaj jest jedna osoba tutaj są dwie osoby więc może skopiujemy sobie ten element, nad osobami wklejamy
‍

no i ostatnie no są to relacje więc tutaj akurat nie możemy wpisać "relation" bo to nam niestety tego nie wyszuka, ale możemy wpisać
na przykład "copy", więc faktycznie gdy skopiujemy sobie to ponownie no to będziemy mieli już naszą trzecią ikonkę

więc przejdźmy do naszego pliku "style.css"
i ustawmy jakiś podstawowy styl na tym naszym ".main-nav"
więc ".main-nav" będzie miało "list-style-type"
ustawione na "none", "margin: 0" "padding: 0", czyli resetujemy po prostu domyślne stylowanie każdej ul-ki, tych ul-ek będziemy mieć więcej więc ja po prostu ostyluje to w ten sposób

więc to co zrobimy to wykorzystamy sobie do tego flexboxa, więc
po wpisaniu "display: flex" widzimy że te elementy już są ustawione
w jednej linii, możemy użyć sobie tutaj "position: fixed"
tak aby ta lista była zawsze w tym samym miejscu, materiał o pozycjonowaniu absolutnym też znajdziesz na kanale, "bottom: 0" i faktycznie w momencie gdy będziemy mieć tutaj treść ta lista zawsze będzie przyklejona do samego dołu
‍

no i teraz na flexie możemy ustawić tutaj "justify-content"
ustawiony na "space-evenly", czyli w tej linii flexa domyślnej, czyli tutaj jest to linia pozioma nasze elementy wewnątrz niej będą ustawiały się w taki sposób, aby odstępy między nimi były równe, natomiast powinniśmy jeszcze tutaj ustawić sobie "width: 100%", tutaj ustawimy sobie
".main-nav li" ustawione również na "display: flex", z tym że zmienimy sobie "flex-direction" na "column" i w tym elemencie
mamy zagnieżdżonego flexa, czyli to jest to element wypozycjonowany na flexie, ale pojedyncze elementy "li" również są pozycjonowane na flexie, z tym że ich kierunek jest inny bo pozycjonujemy to w osi y
czyli w osi pionowej, w kolumnach,

więc teraz możemy sobie wycentrować ten tekst "justify-content"
"center" oraz "align-content" "center" wewnątrz naszego main-nava
nasze svg-ki, też ograniczymy do pewnych rozmiarów czyli "max-width" powiedzmy "40px", "max-height: 40px"
no i w tym momencie widzimy że te elementy już pasują do siebie nieco lepiej i teraz "align-content" ustawimy sobie na "align-items"
"center" i w tym momencie faktycznie te elementy są wyrównane
więc to co moglibyśmy zrobić aby zmienić kolor tych ikonek to na
naszym svg, który jest wewnątrz main-nava, ustawić kolor
ścieżki - czyli patha, na powiedzmy biały

tutaj zmieniamy to za pomocą właściwości "fill", możemy zmienić to na dowolny kolor czyli na przykład jeżeli wpiszemy sobie tutaj "#fff", będzie to kolor biały jeżeli zmienimy to na przykład na "red", no to
będzie to kolor czerwony i stylowanie w ten sposób
jest możliwe tylko dlatego że zawarliśmy nasze pliki svg wewnątrz naszego kodu źródłowego i jesteśmy w stanie dobrać się do tych znaczników za pomocą selektorów css-owych, więc zostawmy sobie ten nasz "main-nav" chwilowo i przejdźmy do naszego top-nava, czyli do tej
sekcji nawigacyjnej którą widzimy tutaj

jest tutaj nasz awatar obecnego użytkownika, nazwa obecnej karty
aktywowanej przez właśnie tutaj te odnośniki oraz przycisk do tworzenia
nowego posta, oczywiście to nie będą rzeczy interaktywne, w tym konkretnym wideo, jeżeli będziecie
chcieli abyśmy stworzyli z tego prawdziwą aplikację czatu, dajcie znać w komentarzu

więc ja tutaj sobie stworzę analogicznie "ul" "top-nav", będą tutaj trzy elementy listy no i w pierwszej będziemy mieli awatar
on oczywiście może być obrazkiem, nasz tekst
który reprezentuje aktywną kartę oraz przycisk który reprezentuje
new post i możemy wrócić sobie do naszego "glyphs.fyi"
i spróbować wpisać "write", no i widzimy że udało
się znaleźć ikonkę która byłaby podobna do tego co faktycznie
potrzebujemy, czyli tutaj możemy po prostu sobie ją wstawić i

przejdziemy z powrotem do naszego stylowania i analogicznie do tego co zrobiliśmy tak naprawdę tutaj na naszym top-navie
ustawimy sobie "display: flex" i te elementy będą ustawione
już w jednej linii, nasze selektory do svg tak naprawdę możemy
ujednolicić, tak aby te selektory działały na wszystkie svg-ki na naszej
stronie, nie ma z tym najmniejszego problemu, chyba że chcielibyśmy zmienić kolor tego właśnie przycisku na jakiś błękitny, to wtedy możemy to sobie po prostu nadpisać w taki sposób że na top-navie
wszystkie ścieżki będą miały kolor no powiedzmy jakiś "aqua", możemy go sobie tutaj z color pickera zmienić na jakiś taki bardziej delikatny
błękitny, powiedzmy na coś takiego

i to co musimy zrobić to oczywiście wyrównać te elementy tak aby były równe w osi przeciwległej do głównej osi flexa, czyli tutaj mamy domyślne
ustawienie "flex-direction: row", czyli jest to oś pozioma
więc w osi pionowej musimy wyrównać te elementy, w związku z czym
"align-items" ustawiam na "center" i "justify-content" na "space-between" tym razem i widzimy że faktycznie ta ikonka jest w prawym górnym rogu
ekranu, po lewej stronie będziemy mieli nasz awatar no i oczywiście możemy dodać tutaj jakiś "padding", powiedzmy 20px
albo nawet 10px, zmniejszymy go troszkę

no i może ustawmy ten awatar aby był poprawnym obrazkiem czyli zamiast tutaj diva ustawimy sobie obrazek o sourcie "koduje.png"
czyli tutaj ja po prostu zawarłem logo koduje, które
oczywiście też będziemy musieli ostylować, tak aby ładnie się wyświetlało
usuwamy zamykającego diva i teraz w naszym top-navie
ustawimy że awatar powinien mieć szerokość powiedzmy 20px
i wysokość również 20px, w związku z czym wszystkie obrazki muszą być kwadratem ponieważ ich "aspect-ratio" w przeciwnym wypadku zostanie naruszony, możemy to troszkę zwiększyć powiedzmy do 40px i teraz każdy awatar, niezależnie od tego gdzie będzie umieszczony naszej stronie, będzie miał "border-radius: 50%"
‍

i w tym momencie mamy faktycznie ładnie zaokrąglony obrazek, który reprezentuje nasz awatar użytkownika, cały nasz top-bar może mieć
"font-weight" ustawiony na "bold", no i analogicznie chcielibyśmy aby
ten element był przyklejony do górnej części ekranu, w związku z czym możemy tutaj ustawić "position: fixed",
"top: 0", "width: 100%" i aby pozbyć się tutaj tego marginesu box model
czyli "box-sizing" był ustawiony na "border-box" i w tym momencie
wewnątrz tego naszego "width: 100%", zawarta jest też szerokość paddingu, materiał o box model też znajdziesz na kanale

no i przejdźmy do tworzenia faktycznej treści którą będziemy scrollować, w momencie gdy będziemy korzystali z naszej aplikacji w związku z czym przejdziemy sobie do naszego pliku "index.html" możemy zawinąć te svg-ki, tak aby nam nie przeszkadzały albo całe listy, też nie ma z tym najmniejszego problemu aby je po prostu tutaj
zwinąć i w tym miejscu stworzymy sobie
"content-wrapper"

tutaj stworzymy najpierw inputa do wyszukiwania konwersacji w naszej aplikacji, no i stworzymy tutaj dwie sekcje, jedna będzie scrollowalna
w osi poziomej, a druga będzie scrollowalna
w osi pionowej
‍

więc zacznijmy od naszego inputa, będzie to input o typie
"search", ponieważ faktycznie będzie służył on do wyszukiwania
treści na naszej stronie i klasę nadajmy mu powiedzmy
"conversation-search" i ustawimy mu
"placeholder" również na "search"
‍

jak widzimy ten element już nam się tutaj pokazał, tylko
że jako że wypozycjonowaliśmy ten "top-bar" na "fixed",
no to on oczywiście będzie przysłaniał nam tego searcha, gdy
ustawimy mu jakiś "background-color", więc to co można
zrobić to albo zmienić sobie tutaj "positon: fixed", na "position: sticky"
‍

i w momencie kiedy tej treści będzie więcej to oczywiście ten
element zostanie przyklejony do górnej części ekranu, a w przeciwnym wypadku zachowuje się normalnie jak element blokowy, no i oczywiście
będziemy musieli też ostylować ten nasz ".conversation-search",
który jest inputem, więc zostawimy mu "border"
na "none", "padding" powiedzmy na
"10px", kolor tła ustawimy mu na jakiś szary
więc użyjemy tutaj notacji rgb, no i jeżeli użyjemy trzech takich samych wartości będzie to jakiś odcień szarości jeżeli gdzieś w połowie damy
czyli z 255 wpisujemy 100, no to ten kolor będzie takim troszkę ciemniejszym szarym, no i możemy oczywiście zmienić
kolor naszego placeholdera, w taki sposób że
na naszym ""conversation-search" użyjemy pseudoelementu
"placeholder" i ustawimy mu kolor na biały
‍

i w momencie gdy zaokrąglimy sobie ten "border-radius"
na powiedzmy znowu "20px", no to widzimy
że ten search już nam się ładnie zaokrąglił
no i możemy też ostylować cały nasz "content-wrapper"
w taki sposób, aby miał on również równy "padding" temu paddingowi, który ustawiliśmy na naszym top-barze no i nasz "content-wrapper" też możemy wypozycjonować na flexie, czyli "display: flex",
"flex-direction: column" i w tym momencie domyślnie "align-items" jest ustawiony na "stretch", w związku z czym w momencie zmiany kierunku osi flexa, wszystkie elementy będą rozciągane w kierunku "cross axis" i jako że ustawiliśmy "flex-direction" na "column" czyli elementy są ustawiane tutaj w tej osi pionowej
‍

co prawda mam tutaj tylko jeden element na ten moment ale jako że elementy układane są tutaj w pionie to "align-items" ustawione
na "stretch" domyślnie będzie rozciągało nam te elementy w szerokości
no i przejdźmy do stworzenia listy naszych
konwersacji czyli ponownie będzie to lista nie numerowana
o klasie conversations wewnątrz tej listy będziemy mieli pojedyncze elementy li wewnątrz których będziemy mieli obrazki ponownie o klasie ".avatar" i ustawimy im "src" od razu na jakiś obrazek i ja tutaj chciałbym zaproponować takie rozwiązanie że jako że ten tekst będziemy generowali za pomocą emmeta to możemy wykorzystać sobie takie api do pobierania przykładowych placeholderowych obrazków czyli
picsum.photo, no i tutaj jest taka składnia że możemy podać jako identyfikator danego obrazka liczbę porządkową i ta liczba porządkowa
może właśnie przychodzić z pętli emmetowych więc jeżeli wstawimy sobie tutaj dolara który reprezentuje obecną iteracji pętli w emmecie, oczywiście o emmecie też mogę zrobić osobny materiał jeżeli będzie na to zapotrzebowanie, no to tutaj będziemy mieli inne obrazki i zaraz zobaczycie jaki będzie tego efekt
‍

no i obok tego obrazka stworzymy sobie tylko diva wewnątrz
którego będą dwa spany pierwszy z nich będzie miał wartość
"Chat user" i będzie reprezentował nazwę naszego użytkownika
oraz druga to będzie po prostu "Message"
czyli treść wiadomości no i chcielibyśmy aby takich elementów
listy było dwadzieścia więc ja ten pseudo markup przerobię
teraz na składnie emmeta i zrobię to w ten sposób że po prostu
jako że chcemy mieć dwadzieścia takich li o takiej treści
to ja tutaj wstawię nawias otwierający i nawias zamykający następnie
ustawie że wewnątrz tego diva powinny być dwa elementy
obok siebie czyli tutaj składnia plusikiem
obok tego img również powinien być ten div w związku z czym jak usunę tutaj te białe znaki wstawię plusika i analogicznie
pozbędę się białych znaków między elementami
listy a naszym obrazkiem i teraz gdy pozbędziemy się ostatnich białych znaków i przemnożymy sobie cały ten markup powiedzmy razy dwadzieścia oczywiście ja to sobie skopiuję żebyśmy nie musieli tego pisać ponowniei nacisnę taba to zobaczymy że wygenerowały nam się różne zdjęcia w takim markupie jaki poprosiliśmy

czyli mamy element listy wewnątrz którego jest bezpośrednio obrazek i tutaj jak widzisz ten id jest inny w zależności od tego która to jest lista no i diva według którego mamy informacje o naszym użytkowniku więc to co
możemy teraz zrobić to po prostu przejść sobie do naszego css-a i na naszym conversations ponownie ustawić
"display: flex", "flex-direction" na "column"
i widzimy że te elementy są już ustawione
pionowo i teraz gdy zaczniemy scrollować to faktycznie ten top-bar
nam się przykleił oraz główna dolna nawigacja też została
u dołu tylko nie mają żadnego tła w związku z czym ustawmy im może tło takie jakie jest na samym naszym "background"
albo możemy je troszkę zmienić na jaśniejsze czyli top-nav
oraz main-nav będą miały "background: black" no i oczywiście
możemy color pickerem troszkę zmienić tą wartość
powiedzmy na taki troszkę jaśniejszy
odcień czerni no i na naszym main-nav na górze
może też ustawmy jeszcze jakiś padding
powiedzmy te dziesięć pikseli

no i "box-sizing: border-box", i w momencie gdy teraz się scrollujemy to faktycznie widzimy że te elementy zostały
na wierzchu no i nasza treść jest scrollowalna
więc wracając do naszego conversations
czyli tutaj tej listy wewnątrz której mamy te wszystkie elementy
możemy ustawić takie style że "conversations-avatar"
będzie miał szerokość siedemdziesięciu
pikseli ".conversations li" będą również pozycjonowane
na flexie tylko ustawimy im margin bottom powiedzmy
na dwadzieścia pikseli i w tym momencie mamy ładne odstępy pomiędzy naszymi użytkownikami czatu no i "conversations li"
‍

tutaj ten nasz separator oczywiście
mógłby mieć klasę natomiast ja tam nie ustawiłem tego na tym
divie, więc możemy to tak naprawdę cofnąć i zmienić sobie tego diva na po prostu klasę ".message-wrapper"
i ponownie dwadzieścia więc te wszystkie
nasze diwy będą teraz miały klasę message-wrapper więc możemy to ostylować bezpośrednio w ten sposób i "display"
ponownie "flex" z tym że "flex-direction"
ustawiona kolumn i te elementy są faktycznie wy pozycjonowane
wzdłuż osi pionowej "justify-content" możemy ustawić na center no i może na naszym avatarze "margin-right" również na dwadzieścia pikseli
i widzimy że nasz czat faktycznie wygląda już całkiem nieźle
to co możemy zrobić to jeszcze troszkę go ulepszyć czyli poprawić tutaj
te odstępy dodać tą sekcję wyróżnionych
kontaktów i stworzenie sekcji wyróżnionych kontaktów będzie tak naprawdę bardzo proste bo możemy wykorzystać dokładnie tego samego emmeta
‍

ja go sobie tutaj nawet wykomentuję żebyśmy mieli go pod ręką
i zmienić po prostu klasę naszego ul conversations na ul conversations
featured i możemy tak naprawdę pozbyć się też
tego wrappera wiadomości ponieważ tutaj widzimy że nie ma
treści wiadomości jest tylko nazwa użytkownika i pozbywamy się treści
wiadomości ponownie dwadzieścia elementów
więc "conversations.featured"
będzie sterowane praktycznie tak samo jak conversations z tym że
flex direction ustawimy na row
conversations featured li ustawimy na flex direction
column i aby zapobiec temu wychodzeniu naszego elementu poza
nasz viewport możemy ustawić na conversations featured
overflow na scroll i w tym momencie mamy ładną
listę nawigacyjną scrollowalną w prawo

więc poprawmy tylko marginesy między naszym inputem czyli
conversations search margin bottom dwadzieścia pikseli conversations featured avatar również powiedzmy margin bottom na dziesięć pikseli no i ogólnie conversations też mogą mieć swój margines
margin bottom dwadzieścia pikseli i w tym momencie
widzimy że te elementy są już ładnie scrollowalne
oraz mamy listę zarówno w pionie jak i w poziomie więc, to co możemy jeszcze zrobić to dodać taki efekt który tutaj jest widoczny
podczas scrollowania widzimy że tutaj pod tym naszym tekstem
czaty jest taki bardzo subtelny prześwit tego
jakie elementy są widoczne pod spodem i możemy do tego
wykorzystać prostą właściwość css ową ona jeszcze nie jest wspierana świetnie we wszystkich przeglądarkach ale tam gdzie zadziała będzie to troszkę lepsze experience a
tam gdzie nie będziemy mieli klasyczne experience bez przeźroczystości w związku z czym
jest to zgodne z duchem idei progressive enhancement o którym też materiał znajdziesz na kanale
‍

więc zarówno na naszym top-nav
i main-nav możemy ustawić sobie backdrop
filter i tutaj jako wartość możemy
podać różne filtry na przykład blur i tutaj po podaniu trzydziestu pikseli powiedzmy zobaczysz że ten element jeżeli zrobimy go troszkę bardziej
przeźroczystym powiedzmy na połowę będzie miał dokładnie taki efekt tutaj czylimy scrollując widzimy rozmytą
treść która znajduje się za tym czatem w związku z czym jest to naprawdę
dobre pod kątem user experience ponieważ użytkownik wie że coś
jest pod tym paskiem nawigacyjnym i dalej może scrollować

no i oczywiście przydałoby się zrobić tutaj taki margines bezpieczeństwa aby ten pasek nawigacyjny nigdy nie przysłaniał nam żadnej konwersacji w związku z czym na naszym content wrapperze możemy
ustawić padding bottom równy wysokości
tego elementu czyli w dev-toolsach jak sobie sprawdzimy jest to
około osiemdziesięciu pikseli więc po prostu wpiszmy tutaj padding
bottom osiemdziesiąt pikseli i w tym momencie gdy będziemy scrollowali się to zobaczymy że ten element nigdy
nie będzie przysłaniał naszej treści która jest zawarta
w naszej wyszukiwarce konwersacji no i oczywiście możemy tutaj ostylować rzeczy typu kolor tekstu, outline
czyli conversation search color możemy ustawić
na czarny albo biały zobaczymy co będzie lepiej wyglądało
prawdopodobnie biały outline color możemy ustawić na jakiś kolor
błękitny możemy go pobrać w sumie z tego elementu który
reprezentuje nam dodawanie nowej konwersacji czyli przy svg-ku
tutaj był gdzieś nasz fill ustawiony na właśnie taki kolor
morski więc wracając tutaj w ten outline color
możemy go ustawić na dokładnie taką wartość i w tym momencie mamy ładne podświetlenie outline-u, oczywiście tego outline nie powinniśmy ukrywać ponieważ jest to duży problem w kontekście dostępności

jeżeli chodzi o kontynuację tego przykładu no to tak naprawdę powinniśmy stworzyć z tego odpowiednie linki
tak aby one też były focusowalne z klawiatury oczywiście w tym momencie te elementynie są w ogóle interaktywne no i tak samo tutaj te sekcje czaty osoby i relacje również powinniśmy stworzyć jako linki moglibyśmy
‍

tutaj idąc dalej stworzyć sobie właśnie zaznaczenie obecnej
karty na kolor niebieski jeżeli będzie zainteresowanie to ja z chęcią ten przykład przerobię tak aby był w pełni interaktywny

tworzenie stron internetowych w taki sposób jak widzicie ja tutaj wykorzystałem sobie viewport z iphone se, tworzenie stron mobile first bez żadnych mediach queries ma też taki plus że w momencie gdy zmienimy sobie viewport
‍

tej naszej przeglądarki na szerokość czy wysokość
to tak naprawdę ten widget czatu zawsze wygląda dobrze
w tej sytuacji nie jest to zależne zupełnie od tego jaki mamy rozmiar przeglądarki

a i tak treści które będą prezentowane na naszym czacie będą
wyświetlane poprawnie w związku z czym obsługa większych
viewportów może sprowadzać się tylko i wyłącznie do pokazywania dodatkowych elementów bądź rearanżowania kolejności
ich przedstawiania.

[blooper]
gdzie moglibyśmy jeszczetona... blrlrlblrlbrl
oknami myją teraz? boże, co to się dzieje
pewnie będę widział zaraz człowieka który mi będzie tańczył
przed oknem no
[gra motyw mission impossible]

‍