flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Now with functional pagination!

Browse source
This commit is contained in:
flash 2018-03-28 02:35:37 +02:00
parent f19d95b2d7
commit 5b828279a1
26 changed files with 343 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/less/manage/classes/container.less
View file

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

2
assets/less/manage/classes/footer.less
View file

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

57
assets/less/manage/classes/header.less
View file

@ -9,8 +9,7 @@
margin: 0 auto;
}
&__logo,
&__link {
&__logo {
padding: 8px 10px;
color: #fff;
text-decoration: none;
@ -31,30 +30,19 @@
flex-shrink: 0;
}
&__link {
cursor: pointer;
transition: background-color .2s;
&:hover {
background-color: #333;
}
&--active,
&:active {
background-color: #222;
}
}
&__user {
flex-grow: 0;
flex-shrink: 1;
}
&__menu {
margin: 0 1px;
&__toggle {
background-size: contain;
background-repeat: no-repeat;
background-position: right;
padding-right: 45px;
min-width: 100px;
padding: 8px 10px;
display: block;
cursor: pointer;
min-width: 50px;
transition: background-color .2s, min-width .2s;
-webkit-touch-callout: none;
-webkit-user-select: none;
@ -62,24 +50,39 @@
-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;
}
&--active,
&:active {
background-color: #222;
}
}
&__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 {

45
assets/less/manage/classes/pagination.less Normal file
View file

@ -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;
}
}
}

6
assets/less/manage/classes/user-listing.less
View file

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

1
assets/less/manage/main.less
View file

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

13
misuzu.php
View file

@ -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');
}
}

52
public/manage.php
View file

@ -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}");

4
public/manage/index.php Normal file
View file

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

11
public/manage/users-listing.php Normal file
View file

@ -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');

4
public/not-found.php Normal file
View file

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

5
public/settings.php
View file

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

2
src/Application.php
View file

@ -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');
}
}

15
utility.php
View file

@ -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);
$pagination = array_map(
function ($str) {
return substr($str, 2);
},
array_merge(
$window['first'] ?? [],
$window['slider'] ?? [],
$window['last'] ?? []
)
);
return $pagination;
return \Illuminate\Pagination\UrlWindow::make($paginator);
}
function is_int_ex($value, int $boundary_low, int $boundary_high): bool

0
views/manage/forums.twig → views/manage/general/master.twig
View file

1
views/manage/general/overview.twig Normal file
View file

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

94
views/manage/macros.twig
View file

@ -4,35 +4,67 @@
{% endspaceless %}
{% endmacro %}
{% macro pagination(url, pages, current, class, name) %}
{% set pagess = pages|create_pagination %}
{% set separator %}{% if '%3F' in url|default('')|url_encode %}&{% else %}?{% endif %}{% endset %}
{% set current_page = current|default(1) %}
{% set url = url ~ separator ~ name|default('page') ~ "=" %}
<div class="pagination {{ class }}">
{% 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 %}
{% if current_page < pages|length %}
<a class="pagination__button" href="{{ url ~ (current_page + 1) }}" title="Next page">&gt;</a>
{% if pages|length > 2 %}
<a class="pagination__button" href="{{ url ~ pages|length }}" title="Jump to last page">&gt;&gt;</a>
{% endif %}
{% endif %}
{% endif %}
</div>
{% macro pagination_segment(url_window, base_url, currentPage) %}
{% for page, url in url_window %}
<li class="pagination__option{{ currentPage == page ? ' pagination__option--active' : '' }}">
<a href="{{ base_url ~ url|slice(2) }}" class="pagination__link{{ currentPage == page ? ' pagination__link--active' : '' }}">
{{ page }}
</a>
</li>
{% endfor %}
{% endmacro %}
{% macro paginate(paginator, base_url, className) %}
{% from _self import pagination_segment %}
{% set url_window = paginator|create_pagination %}
{% set separator = '%3F' in base_url|default('')|url_encode ? '&' : '?' %}
{% set base_url = base_url ~ separator %}
<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 %}

127
views/manage/master.twig
View file

@ -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 %}
<a class="header__link{% if mode == manage_mode %} header__link--active{% endif %}" href="?m={{ mode }}">{{ data.title }}</a>
{% for menu in menus %}
<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">
<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>
<div class="header__user__menu">
<div class="header__user__section">
<a class="header__user__link" href="/profile.php?u={{ manage_user.user_id }}">Profile</a>
<a class="header__user__link" href="/settings.php">Settings</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 class="header__menu">
<input type="checkbox" id="menu-user-state" class="header__menu__state">
<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__menu__options header__menu__options--user">
<div class="header__menu__section">
<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>
</div>
</div>

7
views/manage/notfound.twig
View file

@ -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 %}

1
views/manage/roles.twig
View file

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

12
views/manage/users.twig → views/manage/users/listing.twig
View file

@ -1,5 +1,5 @@
{% extends '@manage/master.twig' %}
{% from '@manage/macros.twig' import pagination %}
{% extends '@manage/users/master.twig' %}
{% 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 %}

0
views/manage/overview.twig → views/manage/users/master.twig
View file

8
views/mio/errors/403.twig Normal file
View file

@ -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 %}

8
views/mio/errors/404.twig Normal file
View file

@ -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 %}

16
views/mio/errors/master.twig Normal file
View file

@ -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 %}

2
views/mio/master.twig
View file

@ -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>