Jump to content
Sign in to follow this  
  • entries
    44
  • comments
    0
  • views
    60515

IP.Board 4 - Responsywny szablon Front-Endu

Wpis ten przedstawia na przykładach pokrótce responsywny szablon w IP.Board 4.

Co to jest responsywność?

Zanim zacznę opisywać wygląd w IP.Board 4 pozwólcie, że napiszę co to jest responsywność. Responsywny design jest metodą na to, aby wygląd Twojej strony dopasowywał się do ekranu jaki posiada użytkownik. Oznacza to, że jeden motyw obsługuje wygląd zarówno dla komputerów jak i użytkowników telefonów komórkowych.

Kiedy programiści podjęli decyzję o responsywności w IP.Board 4, ich celem było zapewnienie, że użytkownicy urządzeń mobilnych nie stracą na funkcjonalności.

Główna nawigacja

W widoku mobilnym główna nawigacja się zwija i przenosi się do menu dostępnego pod ikoną w prawym górnym rogu. Breadcrumb zamienia się w przycisk "Wstecz", który przenosi nas poziom wyżej niż aktualnie jesteśmy:

blogentry-1094-0-20284000-1399958656.png

Po otworzeniu głównej nawigacji wygląda ona tak:

blogentry-1094-0-05773200-1399958784.png

Moderowanie

Biorąc pod uwagę fakt, że responsywny szablon obsługuje wszystkie funkcjonalności, obejmuje to także moderowanie. IP.Board 4 obsługuje wszystkie możliwości moderacyjne niezależnie od urządzenia, którego używasz. Poniżej prezentuję przykład moderowania zdjęć w galerii. Zwróć uwagę na menu, które pozwala szybko wybrać typ zawartości do moderowania, a także pływający pasek na dole ekranu pozwalający wybrać akcję, która ma być wykonana.

blogentry-1094-0-42646500-1400170361.jpg

Strona ustawień

Pisząc o ustawieniach jako przykładzie, poniżej prezentuję screeny z trzech urządzeń: komputer, tablet i telefon.

blogentry-1094-0-14365000-1399959399.png

blogentry-1094-0-42293400-1399959400.png

blogentry-1094-0-83500100-1399959399.png

Widok profilu

Poniżej przedstawiam wygląd profilu (który był szerzej omawiany we wpisie IP.Board 4 — Profile) na telefonie.

blogentry-1094-0-03610200-1399959745.png

Kalendarz

Wygląd kalendarza na telefonie:

blogentry-1094-0-27176700-1399960132.png

blogentry-1094-0-87550000-1399960132.png

Galeria

Wygląd albumów i obrazków w kategorii.

blogentry-1094-0-11651400-1399960390.png

Blog

Strona główna blogów:

blogentry-1094-0-55144600-1399960646.png

I widok blogu:

blogentry-1094-0-47848800-1399960890.png

Fora

Dodawanie tematów na telefonie:

blogentry-1094-0-37977500-1399961255.png



0 Comments


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

W celu świadczenie usług przez nasz Serwis na najwyższym poziomie, w ramach Serwisu wykorzystujemy pliki Cookies (tzw. ciasteczka). Korzystając ze stron Serwisu IPSBEYOND.PL bez zmiany ustawień przeglądarki będą one zapisane w pamięci urządzenia. Jeżeli nie dokonacie Państwo zmiany ustawień przeglądarki internetowej to wyrażacie zgodę na zapisywanie plików Cookies.