Next.js 13 w Praktyce: Układ strony Dashboard

0:00Teraz, kiedy już mamy dane w naszym komponencie, możemy zająć się nową częścią

0:05naszego developmentu i możemy zacząć zajmować się naszym contentem.

0:10W jaki sposób to wszystko tutaj będziemy trzeba rozłożyć?

0:13Jeżeli spojrzymy na firmę i na design, to generalnie rzecz biorąc, jeżeli

0:17zobaczysz sobie tutaj tą część, to tak naprawdę można coś tutaj zobaczyć.

0:23Trzy kolumny można by zobaczyć.

0:24Tak naprawdę to jest jedna kolumna, tutaj będzie druga i trzecia.

0:29Czyli można ten obrazek podzielić na trzy części.

0:32Z tego względu, że tutaj ta ostatnia

0:34część, którą teraz przesuwam, ma mniej więcej jedną trzecią szerokości,

0:38tak, te tutaj zajmują dwie trzecie szerokości.

0:41Jeżeli chodzi o rzędy, to widzimy tutaj

0:43wyraźnie, że są dwa rzędy, jest jeden rząd taki, potem mamy drugi rząd.

0:47W taki sposób, Czyli możemy sobie

0:48spróbować właśnie w taki sposób ograć to jakimś GRID em tutaj.

0:52Wróćmy do naszego komponentu, do naszej przeglądarki.

0:55Ja sobie tutaj obraz przeglądarki tutaj powiększa.

0:58Jeżeli chodzi tutaj o

1:01nasz edytor kodu, to myślę, że też sobie to powiększymy, zamkniemy.

1:05I teraz zrobimy sobie main, który będzie głównym elementem na naszej stronie.

1:10W środku będziemy potrzebowali trzech rzeczy.

1:12Na pewno będziemy potrzebowali jeden div.

1:13Gdzie będą nasze statystyki, prawda?

1:16Czyli tutaj możemy sobie zrobić od razu statystyki.

1:20Drugim komponentem, który będziemy

1:22potrzebować tutaj, to na pewno będzie komponent z naszą tabelką z danymi.

1:27Czyli możemy sobie swobodnie napisać data table.

1:33I trzeci komponent, który będzie nam

1:35potrzebny na to będzie ten komponent już ze statystykami poszczególnych płatności,

1:39poszczególnych grup płatności, które mieliśmy w firmie, czyli grup.

1:44Mamy trzy główne komponenty, które będziemy musieli sobie tutaj zapakować.

1:48Najpierw zajmiemy się ogólnym layoutem.

1:50W jaki sposób powinniśmy to rozłożyć, czyli class name tego głównego elementu.

1:55Teraz rozpoczniemy o sobie od tego, że MX chcemy ustawić na auto z tego względu,

2:01że jeżeli rozszerzymy sobie tą stronę na bardzo szeroki ekran, to

2:05nie chcielibyśmy, żeby wszystko nam się tak bardzo rozszerzały.

2:08Chciałbym to ciągle

2:09pozostawić czytelne dla naszego końcowego użytkownika, żeby tak jak widzisz tutaj to

2:14też nie zajmuje całej szerokości naszego ekranu.

2:17Chcę, żeby po prostu te

2:19rzeczy tak naprawdę nie zajmowały zawsze wielkiego pola widzenia.

2:23Dlatego ograniczymy sobie nasz wewnętrzny wrapper i ustawimy margin na X na auto.

2:29Czyli wróćmy teraz do naszego komponentu i tak zaczniemy MX Auto.

2:33Jeżeli chodzi o display to chcemy tutaj posłużyć się GRID.

2:38Jeżeli chodzi o wysokość to chcemy to

2:40ustawić na full, żeby to była cała wysokość naszej strony.

2:44Jeżeli chodzi o maksymalną szerokość to

2:46możemy sobie ustawić na 7 XL to będzie 1280 pikseli.

2:51Jest to myślę ok.

2:53Szerokość dla osoby, która chciałaby

2:55przeczytać objąć wzrokiem całe dostępne dane.

2:59Jeżeli chodzi o grid cells to chcemy sobie

3:02ustawić na 3 równe kolumny jak już mówiliśmy.

3:05A jeżeli chodzi o grid rows

3:07no to tutaj będziemy musieli troszeczkę sobie popracować.

3:11I tutaj sobie ustawimy wartość customowe

3:14skorzystamy z takich nawiasów i w tym momencie chcę, żeby pierwszy rządek miał

3:2080 pikseli wysokości, a drugi rządek ustawimy sobie na na resztę po prostu 1.

3:26Jest to związane z tym, że zobaczymy sobie w naszym dizajnie firmie

3:31No to tutaj to co mamy tutaj, no to jest około 80 pikseli.

3:35No, mamy

3:36jeszcze złapałem, mam dziewięćdziesiąt osiem, ale to jest wysokość około 80

3:39pikseli, czyli tą część chciałbym ustawić na 80 pikseli, natomiast całą resztę na

3:45całą resztę, która pozostaje nam z pełnej wysokości naszego komponentu.

3:49Dodatkowo jeżeli chodzi o GAP pomiędzy tymi wszystkimi elementami ustawimy to

3:54sobie na 6 i padding na Y też ustawimy na 3.

3:58Zapiszemy sobie teraz to już w tym momencie.

4:00Jeżeli coś dodamy do tych dwóch, no to

4:02powinniśmy mieć tak naprawdę naszą strukturę, czyli zajmijmy się teraz

4:07rozmieszczeniem naszych dwóch, jeżeli chodzi o nasz

4:10komponent tutaj ze statystykami zaczniemy od tego class name.

4:14No i tutaj potrzebujemy call span na 3, to jest na najmniejszych ekranach.

4:22Jeżeli chodzi o row start to ustawimy sobie na jedynkę.

4:27Jeżeli chodzi o to ustawimy na dwójkę.

4:30Chcemy żeby to zajmowało tylko i wyłącznie tak naprawdę jeden rządek.

4:34Round XL zaokrągla ten element.

4:38Jeżeli chodzi o to, zrobimy sobie pięćdziesiątkę, żeby już to zobaczyć.

4:43I jeżeli chodzi o ekrany duże, to

4:45chciałbym, żeby to zajmowało dwie kolumny, Tak?

4:49Czyli jak sobie też od razu już zaczynamy

4:52troszeczkę zajmować się responsywności, ścią tego widoku.

4:56Dlatego teraz zapiszę to sobie.

4:58Przejdźmy teraz.

5:00Kolejnego elementu, który będzie tym elementem tutaj.

5:03Przyjrzyjmy się stylem, które musimy

5:05zastosować właśnie w tym elemencie z danymi, z tabelką z danymi.

5:11Przejdźmy tutaj do klas Name. Co nam tutaj będzie?

5:14Na pewno col span.

5:15Domyślnie chcemy na 3 rozstać.

5:18Chcemy mieć na.

5:20Zacząć od rzędu numer 2 rund.

5:23Chcemy skończyć to na rzędzie numer 3.

5:28Tak naprawdę chcemy ustawić sobie tutaj to wszystko na flex w środku.

5:33Może na razie ustawianiem się w środku nie zajmiemy.

5:35Dopiero jak będziemy mieli tabelkę z danymi.

5:38Na pewno musimy tutaj Randy XL zastosować to samo co mieliśmy tutaj.

5:43Jeżeli chodzi o BG to też zastosujemy BG

5:4750 i jeżeli chodzi o padding to niech też będzie 6.

5:51Tutaj w środku i na XL chcemy to zrobić na call span

5:57i chcemy żeby to zajmowało już nasze dwie kolumny.

6:00Tak, zapiszemy sobie To teraz wszystko.

6:02Wróćmy teraz do kolejnego elementu tutaj i

6:05zróbmy rozdzielenie tego ostatniego diva, czyli tych statystyk.

6:09Jeżeli chodzi o naszą kategorie breakdown statystyk, czyli zaczniemy od klas Name.

6:16I w tym momencie tak potrzebujemy.

6:18Na pewno row span ustawi sobie na 2

6:24jeżeli chodzi o małe ekrany domyślnie, żeby to było ukryte.

6:27Tak naprawdę jeżeli chodzi o zaokrąglenie

6:30to Ranger XL podobnie jak poprzednie elementy.

6:34Jeżeli chodzi o background to też to będzie string 50.

6:37I jeżeli chodzi o XL to niech to będzie ustawiony display na Flex.

6:44Zapiszemy to sobie teraz.

6:45Zobaczmy czy mamy tu już jakieś zmiany na naszym ekranie.

6:49No i po odświeżeniu naszej strony i po naprawieniu tutaj literówki, którą

6:52mieliśmy w słowie grid, wszystko zaczyna wyglądać tak jak powinno.

6:56Zobacz, już mamy poszczególne elementy tutaj wyszczególnione.

7:00Teraz możemy zająć się tak naprawdę

7:02pakowaniem tego wszystkiego w środek i kolejnej lekcji.

7:06Zajmiemy się tutaj tym komponentem ze statystykami.