Management beginnings.

This commit is contained in:
flash 2018-03-27 05:15:03 +02:00
parent 98de031d03
commit f19d95b2d7
20 changed files with 404 additions and 15 deletions

View file

@ -0,0 +1,4 @@
.container {
max-width: 1200px;
margin: 2px auto;
}

View file

@ -0,0 +1,13 @@
.footer {
text-align: center;
padding: 1em;
&__link {
text-decoration: none;
color: inherit;
&:hover {
text-decoration: underline;
}
}
}

View file

@ -0,0 +1,126 @@
.header {
background-color: #111;
background-image: linear-gradient(0deg, #222, #333);
font-size: 1.5em;
&__wrapper {
display: flex;
max-width: 1200px;
margin: 0 auto;
}
&__logo,
&__link {
padding: 8px 10px;
color: #fff;
text-decoration: none;
display: block;
}
&__navigation {
display: flex;
}
&__navigation {
flex-grow: 1;
flex-shrink: 1;
}
&__logo {
flex-grow: 0;
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;
&__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 {
background-color: #333;
min-width: 150px;
}
&:checked ~ .header__user__menu {
max-height: 250px;
}
}
&__menu {
overflow: hidden;
text-align: right;
max-height: 0px;
width: 100%;
position: absolute;
background-color: #333;
z-index: 1000;
transition: max-height .2s;
box-shadow: 0 5px 5px 0 fade(#444, 80%);
}
&__link {
padding: 8px 10px;
display: block;
color: inherit;
text-decoration: none;
transition: background-color .2s;
&:hover {
background-color: #444;
}
&:active {
background-color: #2a2a2a;
}
}
&__section {
margin: 1px 2px;
&:first-child {
margin-top: 2px;
}
&:last-child {
margin-bottom: 2px;
}
&:not(:last-child) {
padding-bottom: 1px;
margin-bottom: 1px;
border-bottom: 1px solid #444;
}
}
}
}

View file

@ -0,0 +1,20 @@
.listing {
display: flex;
flex-direction: column;
&__entry {
border-right: 4px solid #a00;
padding-right: 1px;
display: block;
&:not(:last-child) {
margin-bottom: 2px;
}
&__content {
width: 100%;
background-color: #333;
min-height: 50px;
}
}
}

View file

@ -0,0 +1,10 @@
.user-listing {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
&__entry {
min-width: 296px;
margin: 2px;
}
}

View file

@ -0,0 +1,25 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
html,
body {
width: 100%;
height: 100%;
}
.manage {
background-color: #222;
font: 12px/20px 'Open Sans', sans-serif;
color: #fff;
}
@import "classes/container";
@import "classes/footer";
@import "classes/header";
@import "classes/listing";
@import "classes/user-listing";

View file

@ -51,7 +51,7 @@ switch ($mode) {
return;
}
echo $app->templating->render('logout');
echo $app->templating->render('@auth.logout');
break;
case 'login':
@ -175,6 +175,6 @@ switch ($mode) {
$app->templating->var('auth_register_error', $auth_register_error);
}
echo $app->templating->render('auth');
echo $app->templating->render('@auth.auth');
break;
}

52
public/manage.php Normal file
View file

@ -0,0 +1,52 @@
<?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}");

View file

@ -71,25 +71,20 @@ $settings_profile_fields = [
$settings_user = $settings_session->user;
$settings_mode = $_GET['m'] ?? null;
$settings_modes = [
'account' => 'Account',
'avatar' => 'Avatar',
'sessions' => 'Sessions',
'login-history' => 'Login History',
];
// if no mode is explicitly set just go to the index
if ($settings_mode === null) {
$settings_mode = key($settings_modes);
}
$settings_mode = $_GET['m'] ?? key($settings_modes);
$app->templating->vars(compact('settings_mode', 'settings_modes', 'settings_user', 'settings_session'));
if (!array_key_exists($settings_mode, $settings_modes)) {
http_response_code(404);
$app->templating->var('settings_title', 'Not Found');
echo $app->templating->render("settings.notfound");
echo $app->templating->render('settings.notfound');
return;
}

View file

@ -164,6 +164,7 @@ class Application extends ApplicationBase
$twig->addFilter('byte_symbol');
$twig->addFilter('country_name', 'get_country_name');
$twig->addFilter('flip', 'array_flip');
$twig->addFilter('create_pagination');
// avoid using config() in templates whenever possible
// in all honesty this shouldn't even be a thing

View file

@ -1,6 +1,7 @@
<?php
namespace Misuzu;
use Illuminate\Database\Eloquent\Collection;
use Illuminate\Database\Eloquent\Model as BaseModel;
abstract class Model extends BaseModel

View file

@ -197,6 +197,24 @@ function crop_image_centred(Imagick $image, int $target_width, int $target_heigh
return $image->deconstructImages();
}
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;
}
function is_int_ex($value, int $boundary_low, int $boundary_high): bool
{
return is_int($value) && $value >= $boundary_low && $value <= $boundary_high;

1
views/manage/forums.twig Normal file
View file

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

38
views/manage/macros.twig Normal file
View file

@ -0,0 +1,38 @@
{% macro link(url, content, class) %}
{% spaceless %}
<a href="{{ url }}" {% if '://' in url %} target="_blank" rel="noreferrer noopener"{% endif %} {% if class is defined %}class="{{ class }}"{% endif %}>{{ content|raw }}</a>
{% 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>
{% endmacro %}

55
views/manage/master.twig Normal file
View file

@ -0,0 +1,55 @@
{% from '@manage/macros.twig' import link %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flashii Broom Closet</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="/css/manage.css" rel="stylesheet">
</head>
<body class="manage">
<div class="wrapper">
<nav class="header">
<div class="header__wrapper">
<a class="header__logo" href="/manage.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>
{% 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>
</div>
</div>
</div>
</nav>
{% block content %}
<div class="container">
<p> This page has no content.</p>
</div>
{% endblock %}
<footer class="footer">
{{ link('https://flash.moe', 'flash.moe', 'footer__link') }} 2013-{{
''|date('Y') }} /
{{ link('https://github.com/flashwave/misuzu/tree/' ~ git_branch(), git_branch(), 'footer__link') }} # {{ link('https://github.com/flashwave/misuzu/commit/' ~ git_hash(true), git_hash(), 'footer__link') }}
</footer>
</div>
</body>
</html>

View file

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

View file

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

1
views/manage/roles.twig Normal file
View file

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

19
views/manage/users.twig Normal file
View file

@ -0,0 +1,19 @@
{% extends '@manage/master.twig' %}
{% from '@manage/macros.twig' import pagination %}
{% block content %}
<div class="container listing user-listing">
{% for user in manage_users %}
<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">
{{ user.username }}
</div>
</div>
</label>
{% endfor %}
</div>
{{ pagination('?m=users', manage_users, users_page, null, 'p') }}
{% endblock %}

View file

@ -13,26 +13,28 @@
{% include '@mio/_layout/meta.twig' %}
<link href="https://static.flash.moe/fonts/visitor/visitor1.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link href="/css/mio.css" rel="stylesheet" type="text/css">
<link href="/css/mio.css" rel="stylesheet">
</head>
<body class="mio">
<div class="mio__wrapper">
<div class="mio__header">
<nav class="mio__header">
<div class="mio__header__logo">
<a href="/" class="mio__header__logo__link">
<img class="mio__header__logo__image" src="https://static.flash.moe/logos/logo-exo.png" alt="Flashii">
</a>
</div>
<div class="mio__header__menu">
{% if app.session is not null %}
<div class="mio__container mio__header__user">
<div class="mio__container__title">Hey, {{ app.session.user.username }}!</div>
<div class="mio__container__content mio__header__user__content">
<div class="mio__avatar mio__header__user__avatar" style="background-image:url('/profile.php?u={{ app.session.user.user_id }}&amp;m=avatar');"></div>
<a href="/settings.php?m=avatar" class="mio__avatar mio__header__user__avatar" style="background-image:url('/profile.php?u={{ app.session.user.user_id }}&amp;m=avatar');"></a>
<div class="mio__header__user__links__container">
<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="/auth.php?m=logout&amp;s={{ csrf_token() }}">Logout</a></li>
</ul>
</div>
@ -42,7 +44,7 @@
<a href="/auth.php" class="mio__input__button">Login/Register</a>
{% endif %}
</div>
</div>
</nav>
{% block content %}
<div class="mio__container">
@ -55,7 +57,7 @@
{{ navigation(mio_navigation) }}
{% endblock %}
<div class="mio__footer">
<footer class="mio__footer">
<div class="mio__footer__copyright">
{{ link('https://flash.moe', 'flash.moe', 'mio__footer__copyright__link') }} 2013-{{
''|date('Y') }} /
@ -68,7 +70,7 @@
{{ link('#', 'Status', 'mio__footer__links__link') }}
{{ link('https://twitter.com/flashiinet', 'Twitter', 'mio__footer__links__link') }}
</div>
</div>
</footer>
</div>
</body>
</html>