W tym artykule przedstawię jak prosto jest stworzyć sztywny design aplikacji mobilnej, w której jest
monitorowany czas snu.
Warto dodać, że przedstawiony design został wykonany przy użyciu darmowej paczki od MDB, którą możecie pobrać tutaj
Przygotowanie
Podstawowym działaniem będzie pobranie paczki, wypakowanie jej w dowolnym dla nas miejscu.
Jeśli mamy już to zrobione - otwieramy plik index.html
oraz style.css
w folderze css. Oba te
pliki otwieramy za pomocą dowolnego programu tekstowego, osobiście używam Visual Studio Code.
Po otwarciu plików przechodzimy do index.html
i usuwamy wszystko, co znajduje się pomiędzy "Start your
project here" i "End your project here". Plik nasz powinien wyglądać jak na grafice poniżej.

Jak widzimy do elementu body jest dodana klasa .special-color-dark. Odpowiada ona za kolor tła. Wszystkie klasy znajdziemy tutaj.
Przejdźmy do działania
Tworzymy div, który będzie ramką naszego smartfona.

Mamy nadane następują klasę: .mdb-color darken-3 - jest to klasa wybrana z
palety, link był podany przy kolorze tła.
Natomiast klasa .main_div_class to nasz własny wytwór.
Nasza klasa powinna znajdować się w pliku style.css
i wyglądać następująco:

Już wyjaśniam
width
odpowiada za szerokość naszego elementu, wartość podana w pikselach.height
odpowiada za wysokość naszego elementu, wartość podana w pikselach.border
jest to określenie szerokości, stylu, koloru ramki wokół naszego elementu.border-radius
odpowiada za zaookrąglenie rogów ramki wokół naszego elementu.margin
margines zewnętrzny, w przypadku auto będzie powodował, że nasz element będzie się ustawiał na środku.color
kolor czcionki w elemencie.overflow
wartość hidden bedzie powodowała, że to, co znajduje się w elemencie nie "wypłynie" na zewnątrz.background-image
ustawienie obrazka jako tło.background-size
ustalenie w jaki sposób ma być tło pokryte obrazkiem.background-blend-mode
wartość multiply spowoduje wyrównanie kolorów tła, spowoduje to również, że w połączeniu z wcześniejszą klasą tło będzie przyciemnione.
Pierwsze efekty
Po otwarciu pliku index.html
za pomocą dowolnej przeglądarki możemy zobaczyć pierwsze efekty.

Nawigacja w aplikacji
Przejdźmy do ustalenia jak będzie wyglądała nawigacja w aplikacji, użyjemy tutaj nawigacji dostępnej w dokumentacji MDB.
Jeżeli już wybraliśmy, możemy go wkleić na samej górze naszego div'a, nic więcej nie musimy robić, nawigacja sama
się dostosuje do oferowanej szerokości i będzie wyglądać jak na urządzneiu mobilnym.

Na zdjęciu możemy zobaczyć przy jednym z elemetów klasę .active - odpowiada ona
za tło elementu, aby wyglądał jakby był obecnie aktywny.
Dodajemy klasę oraz definicję koloru białego dla linków w nawigacji, tak jak na obrazku poniżej.

Grid
Będziemy teraz działać na gridzie (więcej informacji tutaj.)
Tworzymy element main bezpośrednio po nav, następnie działamy zgodnie z instrukcją i tworzymy div'a z klasą
container - to w nim będzie znajdował się cały grid
W utworzonym wcześniej elemencie tworzymy trzy rzędy, widzimy je na obrazku pod klasą .row, do dwóch ostatnich dodajemy styl z marginesem zewnętrznym górnym o
wysokości 20 pikseli, spowoduje to, że powstaną ładne odsętpy poziome.

Dodajemy kolumny z klasą .col-6, która odpowada za szerokość kolumny oraz .white-text, która odpowiada za kolor tekstu w kolumnie.

Zawartość kolumn
W odpowiednich kolumnach tworzymy elementy z klasami .text_align_center, nasza własna klasa. W utworzonych elementach będziemy działać na dwóch paragrafach, do pierwszego dodajemy klasę .font_big oczywiście to też jest nasza własna klasa.

Nasze klasy w pliku style.css

Wyjaśnię nowe wartości
padding-top
marginew wewnętrzny, odpowiada za 20% wysokości elementu.text-align
pozycjonowanie tekstu, w moim przypadku jest to wyśrodkowaniebackground-color
kolor tła elementu podany w rgba, wartość 0.3 przedstawia tylko 30% widoczności koloru tła, co powoduje, że staje się przezroczysty.font-size
rozmiar czcionki, wartość podana w pikselach.
Kolejne efekty naszej pracy
Otwórzmy nasz plik index.html
ponownie, jeżeli zrobiliśmy wszystko poprawnie to powinien nam ukazać się
taki efekt:

Brakuje tylko wykresu
Brakuje nam tylko wykresu prezentującego nam czas wstawania.
Zatem stwórzmy go teraz, w pierwszym rzędzie naszego grida.

Z tworzenia elementów to tyle, resztę zrobi za nas skrypt.
Skrypt wykresu
Nasz skrypt umieszczamy zgodnie z zasadami działania na paczce MDB, na samym dole elementu body przed jego
zamknięciem, jak i jednocześnie pod wszystkimi już umieczonymi skryptami.

Krótko opiszę całość działania, więcej dla zainteresowanych na stronie MDB tutaj lub w dokumentacji
chart.js tutaj
Funkcja formatTime() widoczna na górze odpowiada za formatowanie sekund na czas godzinowy, ponieważ będziemy operować
na wartościach sekundowych. Niestety nie da się na osi Y zaprezentować czasu tak jak a osi X, zwyczajnie twórcy nie
przewidzieli takiej opcji.
Poniżej widzimy zapis naszego wykresu, opiszę główne elementy.
labels
zapis w tablicy odpowaidający za wartości osi X czyli osi poziomej.data
są to wartości zapisane w postaci sekund, które będą wyświetlane na osi Y.borderColor
kolor lini jaka będzie prezentowana na danych.borderWidth
grubość linii.
A oto i efekt końcowy!
Po zapisaniu całej pracy, możemy przejść do podziwiania całej pracy.
Pełny kod źródłowy znajdziecie pod tym adresem.