Now with functional pagination!

assets/less/manage/classes/container.less

@@ -1,4 +1,8 @@
 .container {
     max-width: 1200px;
     margin: 2px auto;
+
+    &--center {
+        text-align: center;
+    }
 }

assets/less/manage/classes/footer.less

@@ -1,6 +1,6 @@
 .footer {
     text-align: center;
-    padding: 1em;
+    padding: 2px 0;
 
     &__link {
         text-decoration: none;

assets/less/manage/classes/header.less

@@ -9,8 +9,7 @@
         margin: 0 auto;
     }
 
-    &__logo,
+    &__logo {
-    &__link {
         padding: 8px 10px;
         color: #fff;
         text-decoration: none;
@@ -31,9 +30,33 @@
         flex-shrink: 0;
     }
 
-    &__link {
+    &__user {
+        flex-grow: 0;
+        flex-shrink: 1;
+    }
+
+    &__menu {
+        margin: 0 1px;
+
+        &__toggle {
+            padding: 8px 10px;
+            display: block;
             cursor: pointer;
-        transition: background-color .2s;
+            min-width: 50px;
+            transition: background-color .2s, min-width .2s;
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+
+            &--profile {
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position: right;
+                padding-right: 45px;
+            }
 
             &:hover {
                 background-color: #333;
@@ -45,41 +68,21 @@
             }
         }
 
-    &__user {
-        flex-grow: 0;
-        flex-shrink: 1;
-
-        &__toggle {
-            background-size: contain;
-            background-repeat: no-repeat;
-            background-position: right;
-            padding-right: 45px;
-            min-width: 100px;
-            transition: background-color .2s, min-width .2s;
-            -webkit-touch-callout: none;
-            -webkit-user-select: none;
-            -khtml-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-
         &__state {
             display: none;
 
-            &:checked ~ .header__user__toggle {
+            &:checked ~ .header__menu__toggle {
                 background-color: #333;
                 min-width: 150px;
             }
 
-            &:checked ~ .header__user__menu {
+            &:checked ~ .header__menu__options {
                 max-height: 250px;
             }
         }
 
-        &__menu {
+        &__options {
             overflow: hidden;
-            text-align: right;
             max-height: 0px;
             width: 100%;
             position: absolute;
@@ -87,6 +90,10 @@
             z-index: 1000;
             transition: max-height .2s;
             box-shadow: 0 5px 5px 0 fade(#444, 80%);
+
+            &--user {
+                text-align: right;
+            }
         }
 
         &__link {

assets/less/manage/classes/pagination.less

@@ -0,0 +1,45 @@
+.pagination {
+    display: inline-flex;
+    list-style: none;
+    justify-content: center;
+    box-shadow: 0 1px 5px 0 fade(#444, 80%);
+    background: #333;
+    color: #fff;
+    font-size: 1.2em;
+    margin: 2px;
+
+    &__option {
+        transition: box-shadow .2s, background-color .2s;
+
+        &:hover {
+            background-color: #444;
+            box-shadow: 0 1px 5px 0 fade(#555, 80%);
+        }
+
+        &--active,
+        &:active {
+            background-color: #444;
+        }
+    }
+
+    &__separator {
+        width: 1px;
+        background-color: #444;
+    }
+
+    &__link {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        color: inherit;
+        text-decoration: none;
+        min-width: 40px;
+        min-height: 40px;
+
+        &--prev,
+        &--next {
+            font-size: 2em;
+        }
+    }
+}

assets/less/manage/classes/user-listing.less

@@ -6,5 +6,11 @@
     &__entry {
         min-width: 296px;
         margin: 2px;
+
+        &__content {
+            display: flex;
+            align-items: flex-start;
+            padding: 2px;
+        }
     }
 }

assets/less/manage/main.less

@@ -21,5 +21,6 @@ body {
 @import "classes/footer";
 @import "classes/header";
 @import "classes/listing";
+@import "classes/pagination";
 
 @import "classes/user-listing";

misuzu.php

@@ -25,5 +25,18 @@ if (PHP_SAPI !== 'cli') {
         ob_start('ob_gzhandler');
     }
 
+    $manage_mode = starts_with($_SERVER['REQUEST_URI'], '/manage');
+
     $app->startTemplating();
+    $app->templating->addPath('mio', __DIR__ . '/views/mio');
+
+    if ($manage_mode) {
+        if (Application::getInstance()->getSession() === null) {
+            http_response_code(403);
+            echo $app->templating->render('errors.403');
+            exit;
+        }
+
+        $app->templating->addPath('manage', __DIR__ . '/views/manage');
+    }
 }

public/manage.php

@@ -1,52 +0,0 @@
-<?php
-use Misuzu\Application;
-use Misuzu\Users\User;
-
-require_once __DIR__ . '/../misuzu.php';
-
-$manage_session = Application::getInstance()->getSession();
-
-if ($manage_session === null) {
-    header('Location: /');
-    return;
-}
-
-$app->templating->addPath('manage', __DIR__ . '/../views/manage');
-
-$manage_user = $manage_session->user;
-$manage_modes = [
-    'overview' => [
-        'title' => 'Overview',
-    ],
-    'forums' => [
-        'title' => 'Forums',
-    ],
-    'users' => [
-        'title' => 'Users',
-    ],
-    'roles' => [
-        'title' => 'Roles',
-    ],
-];
-$manage_mode = $_GET['m'] ?? key($manage_modes);
-
-$app->templating->vars(compact('manage_mode', 'manage_modes', 'manage_user', 'manage_session'));
-
-if (!array_key_exists($manage_mode, $manage_modes)) {
-    http_response_code(404);
-    $app->templating->var('manage_title', 'Not Found');
-    echo $app->templating->render('@manage.notfound');
-    return;
-}
-
-$app->templating->var('title', $manage_modes[$manage_mode]['title']);
-
-switch ($manage_mode) {
-    case 'users':
-        $users_page = (int)($_GET['p'] ?? 1);
-        $manage_users = User::paginate(32, ['*'], 'p', $users_page);
-        $app->templating->vars(compact('manage_users', 'users_page'));
-        break;
-}
-
-echo $app->templating->render("@manage.{$manage_mode}");

public/manage/index.php

@@ -0,0 +1,4 @@
+<?php
+require_once __DIR__ . '/../../misuzu.php';
+
+echo $app->templating->render('@manage.general.overview');

public/manage/users-listing.php

@@ -0,0 +1,11 @@
+<?php
+use Misuzu\Application;
+use Misuzu\Users\User;
+
+require_once __DIR__ . '/../../misuzu.php';
+
+$users_page = (int)($_GET['p'] ?? 1);
+$manage_users = User::paginate(32, ['*'], 'p', $users_page);
+$app->templating->vars(compact('manage_users', 'users_page'));
+
+echo $app->templating->render('@manage.users.listing');

public/not-found.php

@@ -0,0 +1,4 @@
+<?php
+require_once __DIR__ . '/../misuzu.php';
+
+echo $app->templating->render('errors.404');

public/settings.php

@@ -8,8 +8,9 @@ require_once __DIR__ . '/../misuzu.php';
 
 $settings_session = Application::getInstance()->getSession();
 
-if ($settings_session === null) {
+if (Application::getInstance()->getSession() === null) {
-    header('Location: /');
+    http_response_code(403);
+    echo $app->templating->render('errors.403');
     return;
 }
 

src/Application.php

@@ -175,7 +175,5 @@ class Application extends ApplicationBase
         $twig->addFunction('csrf_token', 'tmp_csrf_token');
 
         $twig->var('app', $this);
-
-        $twig->addPath('mio', __DIR__ . '/../views/mio');
     }
 }

utility.php

@@ -199,20 +199,7 @@ function crop_image_centred(Imagick $image, int $target_width, int $target_heigh
 
 function create_pagination($paginator)
 {
-    $window = \Illuminate\Pagination\UrlWindow::make($paginator);
+    return \Illuminate\Pagination\UrlWindow::make($paginator);
-
-    $pagination = array_map(
-        function ($str) {
-            return substr($str, 2);
-        },
-        array_merge(
-            $window['first'] ?? [],
-            $window['slider'] ?? [],
-            $window['last'] ?? []
-        )
-    );
-
-    return $pagination;
 }
 
 function is_int_ex($value, int $boundary_low, int $boundary_high): bool

views/manage/general/overview.twig

@@ -0,0 +1 @@
+{% extends '@manage/general/master.twig' %}

views/manage/macros.twig

@@ -4,35 +4,67 @@
 {% endspaceless %}
 {% endmacro %}
 
-{% macro pagination(url, pages, current, class, name) %}
+{% macro pagination_segment(url_window, base_url, currentPage) %}
-    {% set pagess = pages|create_pagination %}
+    {% for page, url in url_window %}
-    {% set separator %}{% if '%3F' in url|default('')|url_encode %}&{% else %}?{% endif %}{% endset %}
+        <li class="pagination__option{{ currentPage == page ? ' pagination__option--active' : '' }}">
-    {% set current_page = current|default(1) %}
+            <a href="{{ base_url ~ url|slice(2) }}" class="pagination__link{{ currentPage == page ? ' pagination__link--active' : '' }}">
-    {% set url = url ~ separator ~ name|default('page') ~ "=" %}
+                {{ page }}
-
+            </a>
-    <div class="pagination {{ class }}">
+        </li>
-        {% if pages is defined and pages|length > 1 %}
-            {% if current_page > 1 %}
-                {% if pages|length > 2 %}
-                    <a class="pagination__button" href="{{ url ~ 1 }}" title="Jump to first page">&lt;&lt;</a>
-                {% endif %}
-
-                <a class="pagination__button" href="{{ url ~ (current_page - 1) }}" title="Previous page">&lt;</a>
-            {% endif %}
-
-            {% for id, page in pages %}
-                {% if (id + 1) > (current_page - 5) and (id + 1) < (current_page + 5) %}
-                    <a class="pagination__button{% if id == current_page - 1 %} pagination__button--current{% endif %}" href="{{ url ~ (id + 1) }}" title="Page {{ id + 1 }}">{{ id + 1 }}</a>
-                {% endif %}
     {% endfor %}
-
+{% endmacro %}
-            {% if current_page < pages|length %}
+
-                <a class="pagination__button" href="{{ url ~ (current_page + 1) }}" title="Next page">&gt;</a>
+{% macro paginate(paginator, base_url, className) %}
-
+    {% from _self import pagination_segment %}
-                {% if pages|length > 2 %}
+
-                    <a class="pagination__button" href="{{ url ~ pages|length }}" title="Jump to last page">&gt;&gt;</a>
+    {% set url_window = paginator|create_pagination %}
-                {% endif %}
+    {% set separator = '%3F' in base_url|default('')|url_encode ? '&' : '?' %}
-            {% endif %}
+    {% set base_url = base_url ~ separator %}
-        {% endif %}
+
-    </div>
+    <ul class="pagination{{ className is defined and className|length > 0 ? ' ' ~ className : '' }}">
+        {% if paginator.onFirstPage %}
+            <li class="pagination__option pagination__option--prev">
+                <span class="pagination__link pagination__link--prev">
+                    &laquo;
+                </span>
+            </li>
+        {% else %}
+            <li class="pagination__option pagination__option--prev">
+                <a href="{{ base_url ~ paginator.previousPageUrl|slice(2) }}" class="pagination__link pagination__link--prev" rel="prev">
+                    &laquo;
+                </a>
+            </li>
+        {% endif %}
+
+        <li class="pagination__separator"></li>
+
+        {% if url_window.first is iterable %}
+            {{ pagination_segment(url_window.first, base_url, paginator.currentPage) }}
+            <li class="pagination__separator"></li>
+        {% endif %}
+
+        {% if url_window.slider is iterable %}
+            {{ pagination_segment(url_window.slider, base_url, paginator.currentPage) }}
+            <li class="pagination__separator"></li>
+        {% endif %}
+
+        {% if url_window.last is iterable %}
+            {{ pagination_segment(url_window.last, base_url, paginator.currentPage) }}
+            <li class="pagination__separator"></li>
+        {% endif %}
+
+        {% if paginator.hasMorePages %}
+            <li class="pagination__option pagination__option--next">
+                <a href="{{ base_url ~ paginator.nextPageUrl|slice(2) }}" class="pagination__link pagination__link--next" rel="next">
+                    &raquo;
+                </a>
+            </li>
+        {% else %}
+            <li class="pagination__option pagination__option--next">
+                <span class="pagination__link pagination__link--next">
+                    &raquo;
+                </span>
+            </li>
+        {% endif %}
+    </ul>
 {% endmacro %}

views/manage/master.twig

@@ -1,5 +1,91 @@
 {% from '@manage/macros.twig' import link %}
 
+{% set menus = [
+    {
+        'name': 'general',
+        'title': 'General',
+        'sections': [
+            [
+                {
+                    'name': 'overview',
+                    'title': 'Overview',
+                    'url': '/manage/index.php',
+                },
+                {
+                    'name': 'logs',
+                    'title': 'Logs',
+                },
+            ],
+            [
+                {
+                    'name': 'emotes',
+                    'title': 'Emoticons',
+                },
+                {
+                    'name': 'settings',
+                    'title': 'Settings',
+                },
+            ],
+        ],
+    },
+    {
+        'name': 'users',
+        'title': 'Users',
+        'sections': [
+            [
+                {
+                    'name': 'listing',
+                    'title': 'Listing',
+                },
+            ],
+            [
+                {
+                    'name': 'roles',
+                    'title': 'Roles',
+                },
+                {
+                    'name': 'perms',
+                    'title': 'Permissions',
+                },
+            ],
+            [
+                {
+                    'name': 'report',
+                    'title': 'Reports',
+                },
+                {
+                    'name': 'restrictions',
+                    'title': 'Restrictions',
+                },
+                {
+                    'name': 'blacklist',
+                    'title': 'Blacklisting',
+                },
+            ],
+        ],
+    },
+    {
+        'name': 'forum',
+        'title': 'Forum',
+        'sections': [
+            [
+                {
+                    'name': 'forums',
+                    'title': 'Listing',
+                },
+                {
+                    'name': 'perms',
+                    'title': 'Permissions',
+                },
+                {
+                    'name': 'settings',
+                    'title': 'Settings',
+                },
+            ],
+        ],
+    },
+] %}
+
 <!DOCTYPE html>
 <html>
     <head>
@@ -7,32 +93,47 @@
         <title>Flashii Broom Closet</title>
         <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
         <link href="/css/manage.css" rel="stylesheet">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body class="manage">
         <div class="wrapper">
             <nav class="header">
                 <div class="header__wrapper">
-                    <a class="header__logo" href="/manage.php">
+                    <a class="header__logo" href="/manage/index.php">
                         Broom Closet
                     </a>
 
                     <div class="header__navigation">
-                        {% for mode, data in manage_modes %}
+                        {% for menu in menus %}
-                            <a class="header__link{% if mode == manage_mode %} header__link--active{% endif %}" href="?m={{ mode }}">{{ data.title }}</a>
+                            <div class="header__menu">
+                                <input type="checkbox" id="menu-{{ menu.name }}-state" class="header__menu__state">
+                                <label for="menu-{{ menu.name }}-state" class="header__menu__toggle">{{ menu.title }}</label>
+                                <div class="header__menu__options">
+                                    {% for section in menu.sections %}
+                                        <div class="header__menu__section">
+                                            {% for item in section %}
+                                                <a class="header__menu__link header__menu__link--{{ menu.name }}-{{ item.name }}" href="{{ item.url|default(menu.name ~ '-' ~ item.name ~ '.php') }}">{{ item.title }}</a>
+                                            {% endfor %}
+                                        </div>
+                                    {% endfor %}
+                                </div>
+                            </div>
                         {% endfor %}
                     </div>
 
                     <div class="header__user">
-                        <input type="checkbox" id="manage-user-menu-state" class="header__user__state">
+                        <div class="header__menu">
-                        <label for="manage-user-menu-state" class="header__link header__user__toggle" style="background-image:url('/profile.php?u={{ manage_user.user_id }}&amp;m=avatar');">{{ manage_user.username }}</label>
+                            <input type="checkbox" id="menu-user-state" class="header__menu__state">
-                        <div class="header__user__menu">
+                            <label for="menu-user-state" class="header__menu__toggle header__menu__toggle--profile" style="background-image:url('/profile.php?u={{ app.session.user.user_id }}&amp;m=avatar');">{{ app.session.user.username }}</label>
-                            <div class="header__user__section">
+                            <div class="header__menu__options header__menu__options--user">
-                                <a class="header__user__link" href="/profile.php?u={{ manage_user.user_id }}">Profile</a>
+                                <div class="header__menu__section">
-                                <a class="header__user__link" href="/settings.php">Settings</a>
+                                    <a class="header__menu__link" href="/profile.php?u={{ app.session.user.user_id }}">Profile</a>
+                                    <a class="header__menu__link" href="/settings.php">Settings</a>
+                                </div>
+                                <div class="header__menu__section">
+                                    <a class="header__menu__link" href="/">Return</a>
+                                    <a class="header__menu__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Logout</a>
                                 </div>
-                            <div class="header__user__section">
-                                <a class="header__user__link" href="/">Return</a>
-                                <a class="header__user__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Logout</a>
                             </div>
                         </div>
                     </div>

views/manage/notfound.twig

@@ -1,7 +0,0 @@
-{% extends '@manage/master.twig' %}
-
-{% block content %}
-    <div class="container">
-        <p>Could not find what you were looking for.</p>
-    </div>
-{% endblock %}

views/manage/roles.twig

@@ -1 +0,0 @@
-{% extends '@manage/master.twig' %}

views/manage/users/listing.twig

@@ -1,5 +1,5 @@
-{% extends '@manage/master.twig' %}
+{% extends '@manage/users/master.twig' %}
-{% from '@manage/macros.twig' import pagination %}
+{% from '@manage/macros.twig' import paginate %}
 
 {% block content %}
     <div class="container listing user-listing">
@@ -7,13 +7,15 @@
             <label class="listing__entry user-listing__entry">
                 <div class="listing__entry__content user-listing__entry__content">
                     <input type="checkbox">
-                    <div class="listing__entry__column user-listing__entry__column user-listing__entry__column--username">
+                    <a href="/profile.php?u={{ user.user_id }}" class="listing__entry__column user-listing__entry__column user-listing__entry__column--username">
                         {{ user.username }}
-                    </div>
+                    </a>
                 </div>
             </label>
         {% endfor %}
     </div>
 
-    {{ pagination('?m=users', manage_users, users_page, null, 'p') }}
+    <div class="container container--center">
+        {{ paginate(manage_users) }}
+    </div>
 {% endblock %}

views/mio/errors/403.twig

@@ -0,0 +1,8 @@
+{% extends '@mio/errors/master.twig' %}
+
+{% set error_code = 403 %}
+{% set error_text = 'Access Denied!' %}
+
+{% block error_message %}
+    <p>You aren't allowed to be here. Try logging in, if you haven't yet.</p>
+{% endblock %}

views/mio/errors/404.twig

@@ -0,0 +1,8 @@
+{% extends '@mio/errors/master.twig' %}
+
+{% set error_code = 404 %}
+{% set error_text = 'Not Found!' %}
+
+{% block error_message %}
+    <p>Couldn't find what you were looking for. Check the spelling in the URL or go back to the previous page.</p>
+{% endblock %}

views/mio/errors/master.twig

@@ -0,0 +1,16 @@
+{% extends '@mio/master.twig' %}
+{% from '@mio/macros.twig' import navigation %}
+
+{% block content %}
+    <div class="mio__container">
+        <div class="mio__container__title">Error {{ error_code }}{{ error_text is defined ? ' - ' ~ error_text : '' }}</div>
+        <div class="mio__container__content">
+            {% block error_message %}
+                <p>Try again later, perhaps.</p>
+            {% endblock %}
+        </div>
+    </div>
+
+    {{ navigation(mio_navigation) }}
+{% endblock %}
+

views/mio/master.twig

@@ -34,7 +34,7 @@
                                     <ul class="mio__header__user__links">
                                         <li class="mio__header__user__option"><a class="mio__header__user__link" href="/profile.php?u={{ app.session.user.user_id }}">Profile</a></li>
                                         <li class="mio__header__user__option"><a class="mio__header__user__link" href="/settings.php">Settings</a></li>
-                                        <li class="mio__header__user__option"><a class="mio__header__user__link" href="{{ manage_link|default('/manage.php') }}">Manage</a></li>
+                                        <li class="mio__header__user__option"><a class="mio__header__user__link" href="{{ manage_link|default('/manage/index.php') }}">Manage</a></li>
                                         <li class="mio__header__user__option"><a class="mio__header__user__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Logout</a></li>
                                     </ul>
                                 </div>