Prosty design aplikacji mobilnej.

W tym artykule przedstawię jak prosto jest stworzyć sztywny design aplikacji mobilnej, w której jest monitorowanyczas 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.
Jak 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 jest 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śnie 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środkowanie
• background-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 gridu.

Z tworzenia elementów to tyle, reszte 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 operwać 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.