Issue #83 Round 1

First pass for CSS refactor for the dashboard, including the login and
index templates. Still rough but the basic structure is in place for
both as well as the re-worked css that will be added to the repo later
once all the pages have been updated.

Lots to do still but a good start.
pull/84/head
Ro 2 years ago
parent 859b75e9f3
commit 61ae73a9e5
No known key found for this signature in database
GPG Key ID: 10C182AC6984D373

@ -226,6 +226,8 @@ class APIControl
break;
}
var_dump($result);
$response->getBody()->write(json_encode($result));
return $response->withHeader('Content-Type', 'application/json');
}

@ -34,7 +34,6 @@ class RouteControl
switch (isset($args['first']) ? $args['first'] : 'index') {
case 'api':
//$result = APIControl::post($request, $response, $args);
//var_dump($result);
return APIControl::post($request, $response, $args);
break;
default:

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="theme-color" content="#FFFFFF"/>
<title>
{% block title %}
{{ title }}
{% endblock %}
</title>
{% block stylesheets %}{% endblock %}
</head>
<body>
<div id="notifications" class="notifications">
<div id="notify-message" class="notify-message">
<div id="notify-good" class="notify-icon">
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-emoji-flirt"/></svg>
</div>
<div id="notify-lame" class="notify-icon">
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-emoji-sad"/></svg>
</div>
<div id="notify-working" class="notify-icon">
<svg id="notify-working-icon" viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-cog"/></svg>
</div>
<div id="notify-text">
<div id="notify-progress"></div>
<p id="message-text">MESSAGE TEXT</p>
</div>
</div>
</div>
<div id="main-content" class="main-container">
<section id="dash-index-content">
{% if status %}
<header id="header">
<div id="wrapper">
{% apply spaceless %}
<div id="left">
<a href="/dashboard"><img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/></a>
</div>
<div id="right">
{% if status %}
{% apply spaceless %}
{{ include("dash/partials/navigation.twig") }}
{% endapply %}
{% endif %}
</div>
{% endapply %}
</div>
</header>
{% endif %}
{% apply spaceless %}
{% block mainContent %}{% endblock %}
{% endapply %}
</section>
</div>
<footer></footer>
{% block javascripts %}{% endblock %}
</body>
</html>

@ -30,36 +30,32 @@
</div>
</div>
<div id="main-content" class="main-container">
<section id="dash-index-content">
{% if status %}
<header id="header">
<div id="wrapper">
<header>
{% apply spaceless %}
<div id="left">
<nav>
<div role="nav-left">
<a href="/dashboard"><img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/></a>
</div>
<div id="right">
<div>
NOTIFICATIONS
</div>
<div role="nav-right">
{% if status %}
{% apply spaceless %}
{{ include("dash/partials/navigation.twig") }}
{% endapply %}
{% endif %}
</div>
</nav>
{% endapply %}
</div>
</header>
{% endif %}
</header>
<main>
{% apply spaceless %}
{% block mainContent %}{% endblock %}
{% endapply %}
</section>
</div>
</main>
<footer></footer>
{% block javascripts %}{% endblock %}
</body>

@ -1,13 +1,13 @@
<div id="dash-login">
<div id="dash-form" class="dash-form">
<section role="login">
<div>
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
</div>
<form id="login" class='login' name="login" method="POST">
<input type="text" name="handle" class="form-control" placeholder="Handle" required ">
<input type="password" name="password" class="form-control" placeholder="Password" required">
<input type="text" name="handle" class="form-control" placeholder="Handle" required/>
<input type="password" name="password" class="form-control" placeholder="Password" required/>
<button id="login-btn" class='login-btn' type='submit'>
ID, PLEASE
</button><br /><br />
<a href="/dashboard/reset-password"> Forgot Password?</a>
</button>
<a href="/dashboard/reset-password">?</a>
</form>
</div>
</div>
</section>

@ -1,13 +1,11 @@
<div id="dash-recent">
<div id="recent-list">
<div class="recent-header">
<div class="index-header-left">
Recent
<section role="index-header">
<div>
<h1>Recent</h1>
</div>
<div class="index-header-right">
<div>
<a href='/dashboard/pages' title="view pages">
<button>
<svg class="page-link">
<svg role="icon">
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
</svg>
</button>
@ -15,14 +13,14 @@
<a href='/dashboard/page/add/new' title="add new page">
<button>
<svg class="page-link">
<svg role="icon">
<use xlink:href="/assets/images/global/sprite.svg#entypo-plus"/>
</svg>
</button>
</a>
</div>
</div>
<br/>
</section>
<section role="index-recent-pages">
{% if data["entryCount"] != 0 %}
{% for page in data['pages'] %}
{% if page.media[0].type == 'mp4' %}
@ -33,19 +31,15 @@
Sorry, your browser doesn't support embedded videos.
</video>
<label>
{{ page.title }}
</label>
{{ include("dash/partials/recent-options.twig") }}
{{ include("dash/partials/recent-meta.twig") }}
</a>
{% else %}
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link recent-link" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
<label>
{{ page.title }}
</label>
{{ include("dash/partials/recent-options.twig") }}
{{ include("dash/partials/recent-meta.twig") }}
</a>
{% endif %}
@ -54,5 +48,4 @@
There are no pages
{% endif %}
</div>
</div>
</section>

@ -1,21 +1,23 @@
<div id="dash-menu">
<div role="menu">
<a id="settings" href="/dashboard/settings" title="settings">
<button>
<svg class="menu">
<svg role="icon">
<use xlink:href="/assets/images/global/sprite.svg#entypo-sound-mix"/>
</svg>
</button>
</a> .
</a>
.
<a id="navigation" href="/dashboard/navigation" title="edit navigation">
<button>
<svg class="menu">
<svg role="icon">
<use xlink:href="/assets/images/global/sprite.svg#entypo-list"/>
</svg>
</button>
</a> .
</a>
.
<a id="navigation" href="/dashboard/logout" title="log out">
<button>
<svg class="menu">
<svg role="icon">
<use xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>
</svg>
</button>

@ -0,0 +1,43 @@
{% if page.menu == 'true' %}
{% set menu = "true" %}
{% else %}
{% set menu = "false" %}
{% endif %}
{% if page.published == 'true' %}
{% set published = "true" %}
{% else %}
{% set published = "false" %}
{% endif %}
{% if page.featured == 'true' %}
{% set featured = "true" %}
{% else %}
{% set featured = "false" %}
{% endif %}
<aside>
<strong>
{{ page.updated }}
</strong>
<hr/>
<strong>
{{ page.title }}
</strong>
<hr/>
<button data-active="{{ menu }}">
<svg role="icon">
<use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
</svg>
</button>
<button data-active="{{ published }}">
<svg role="icon">
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
</svg>
</button>
<button data-active="{{ featured }}">
<svg role="icon">
<use xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
</svg>
</button>
</aside>

@ -1,42 +0,0 @@
<div id="options">
{% if page.menu == 'true' %}
{% set menu = "true" %}
{% else %}
{% set menu = "false" %}
{% endif %}
{% if page.published == 'true' %}
{% set published = "true" %}
{% else %}
{% set published = "false" %}
{% endif %}
{% if page.featured == 'true' %}
{% set featured = "true" %}
{% else %}
{% set featured = "false" %}
{% endif %}
<div id="option-left">
<button data-active="{{ menu }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
</svg>
</button>
<button data-active="{{ published }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
</svg>
</button>
<button data-active="{{ featured }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
</svg>
</button>
</div>
<div id="option-right">
<span>
{{ page.updated }}
</span>
</div>
</div>

@ -5,12 +5,10 @@
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=acvcnh">
<link rel="stylesheet" type="text/css" href="/assets/css/dash/start.css?=dfdfrtr">
{% endblock %}
{% block mainContent %}
<div id="dash-index">
<div id="dash-index-wrapper">
{% if status %}
{% apply spaceless %}
{{ include("dash/partials/index.twig") }}
@ -18,8 +16,6 @@
{% else %}
{{ include("dash/forms/login.twig") }}
{% endif %}
</div>
</div>
{% endblock %}
{% block javascripts %}

@ -35,8 +35,8 @@
"license": "UNLICENSED",
"author": "Are0h",
"scripts": {
"watch": "sass --watch src/styles:public/assets/css & npx parcel watch src/com/Start.js --dist-dir public/assets/scripts --public-url /assets/scripts",
"build": "sass src/styles:public/assets/css & npx parcel build src/com/Start.js --dist-dir public/assets/scripts --public-url /assets/scripts"
"watch": "npx parcel watch src/com/Start.js --dist-dir public/assets/scripts --public-url /assets/scripts",
"build": "npx parcel build src/com/Start.js --dist-dir public/assets/scripts --public-url /assets/scripts"
},
"description": "Front end script for the most chill blog framework ever.",
"repository": "https://code.playvicio.us/Are0h/Fipamo"

@ -0,0 +1,43 @@
{
"name": "fipamo-dash",
"version": "2.5.1-beta",
"private": true,
"apidoc": {
"name": "Fipamo API",
"version": "1.0.0",
"description": "The most chill API for the most chill blog framework"
},
"devDependencies": {
"@babel/preset-env": "^7.16.5",
"babel-cli": "^6.26.0",
"eslint": "^8.11.0",
"eslint-plugin-babel": "^5.3.1",
"parcel": "^2.0.1",
"prettier": "^2.6.0",
"stylelint": "^14.8.2",
"stylelint-config-prettier-scss": "^0.0.1",
"stylelint-config-standard-scss": "^3.0.0"
},
"dependencies": {
"@babel/core": "^7.16.5",
"@babel/eslint-parser": "^7.16.5",
"animejs": "^3.2.1",
"babel-plugin-prismjs": "^2.1.0",
"babel-preset-env": "^1.7.0",
"bulma": "^0.9.3",
"caret-pos": "^2.0.0",
"jsdoc": "^3.6.7",
"minami": "^1.2.3",
"prismjs": "^1.25.0",
"sass": "^1.45.1",
"sortablejs": "^1.14.0"
},
"license": "UNLICENSED",
"author": "Are0h",
"scripts": {
"watch": "sass --watch src/styles:public/assets/css & npx parcel watch src/com/Start.js --dist-dir public/assets/scripts --public-url /assets/scripts",
"build": "sass src/styles:public/assets/css & npx parcel build src/com/Start.js --dist-dir public/assets/scripts --public-url /assets/scripts"
},
"description": "Front end script for the most chill blog framework ever.",
"repository": "https://code.playvicio.us/Are0h/Fipamo"
}

@ -1,33 +1,33 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 486 678" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="Logo" transform="matrix(1.36867,0,0,1.36867,-351.696,-71.9183)">
<g transform="matrix(2.31599,0,0,2.31599,218.53,-99.4797)">
<path d="M93.67,140.92L93.67,140.921C105.569,140.921 115.216,150.567 115.216,162.467L115.216,172.724L115.216,172.724L115.216,182.262C115.216,194.161 105.569,203.808 93.669,203.808C81.976,203.217 74.12,195.969 72.237,184.474L72.282,182.737L72.282,162.467L72.205,160.847C72.775,149.587 82.728,141.121 93.67,140.92Z" style="fill:rgb(252,99,153);fill-rule:nonzero;"/>
<svg width="100%" height="100%" viewBox="0 0 462 462" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.58717,0,0,1.58717,-403.964,-376.506)">
<g transform="matrix(1,0,0,1,200.753,94.1743)">
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
</g>
<g transform="matrix(2.31599,0,0,2.31599,218.53,-437.697)">
<path d="M93.67,211.678L93.67,211.678C105.569,211.678 115.216,221.324 115.216,233.224L115.216,243.481L115.216,243.481L115.216,253.019C115.216,264.919 105.569,274.565 93.669,274.565C81.976,273.975 74.12,266.726 72.237,255.232L72.282,253.495L72.282,233.224L72.205,231.604C72.775,220.344 82.728,211.878 93.67,211.678Z" style="fill:rgb(252,99,153);fill-rule:nonzero;"/>
<g transform="matrix(1,0,0,1,200.753,201.192)">
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
</g>
<g transform="matrix(2.31599,0,0,2.31599,218.53,241.338)">
<path d="M93.67,69.288L93.67,69.288C105.569,69.288 115.216,78.934 115.216,90.834L115.216,101.091L115.216,101.091L115.216,110.629C115.216,122.528 105.569,132.175 93.669,132.175C81.976,131.584 74.12,124.336 72.237,112.842L72.282,111.105L72.282,90.834L72.205,89.214C72.775,77.954 82.728,69.488 93.67,69.288Z" style="fill:rgb(171,183,183);fill-rule:nonzero;"/>
<g transform="matrix(1,0,0,1,307.732,201.192)">
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
</g>
<g transform="matrix(2.31599,0,0,2.31599,218.53,-104.112)">
<path d="M38.059,142.92L38.059,142.921C49.958,142.921 59.605,152.567 59.605,164.467L59.605,174.724L59.605,174.724L59.605,184.262C59.605,196.161 49.958,205.808 38.058,205.808C26.365,205.217 18.509,197.969 16.626,186.474L16.671,184.737L16.671,164.467L16.594,162.847C17.164,151.587 27.117,143.121 38.059,142.92Z" style="fill:rgb(252,99,153);fill-rule:nonzero;"/>
<g transform="matrix(1,0,0,1,414.761,201.192)">
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(171,183,183);"/>
</g>
<g transform="matrix(2.31599,0,0,2.31599,218.53,-104.112)">
<path d="M148.331,142.92L148.331,142.921C160.23,142.921 169.877,152.567 169.877,164.467L169.877,174.724L169.877,174.724L169.877,184.262C169.877,196.161 160.23,205.808 148.331,205.808C136.637,205.217 128.782,197.969 126.898,186.474L126.943,184.737L126.943,164.467L126.867,162.847C127.436,151.587 137.389,143.121 148.331,142.92Z" style="fill:rgb(171,183,183);fill-rule:nonzero;"/>
<g transform="matrix(1,0,0,1,200.753,308.228)">
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
</g>
<g transform="matrix(2.31599,0,0,2.31599,218.53,-437.697)">
<path d="M38.059,211.678L38.059,211.678C49.958,211.678 59.605,221.324 59.605,233.224L59.605,243.481L59.605,243.481L59.605,253.019C59.605,264.919 49.958,274.565 38.058,274.565C26.365,273.975 18.509,266.726 16.626,255.232L16.671,253.495L16.671,233.224L16.594,231.604C17.164,220.344 27.117,211.878 38.059,211.678Z" style="fill:rgb(252,99,153);fill-rule:nonzero;"/>
<g transform="matrix(1,0,0,1,307.732,308.228)">
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(171,183,183);"/>
</g>
<g transform="matrix(2.31599,0,0,2.31599,218.53,-437.697)">
<path d="M148.331,211.678L148.331,211.678C160.23,211.678 169.877,221.324 169.877,233.224L169.877,243.481L169.877,243.481L169.877,253.019C169.877,264.919 160.23,274.565 148.331,274.565C136.637,273.975 128.782,266.726 126.898,255.232L126.943,253.495L126.943,233.224L126.867,231.604C127.436,220.344 137.389,211.878 148.331,211.678Z" style="fill:rgb(252,99,153);fill-rule:nonzero;"/>
<g transform="matrix(1,0,0,1,414.761,308.228)">
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(171,183,183);"/>
</g>
<g transform="matrix(2.31599,0,0,2.31599,218.53,241.338)">
<path d="M38.059,69.288L38.059,69.288C49.958,69.288 59.605,78.934 59.605,90.834L59.605,101.091L59.605,101.091L59.605,110.629C59.605,122.528 49.958,132.175 38.058,132.175C26.365,131.584 18.509,124.336 16.626,112.842L16.671,111.105L16.671,90.834L16.594,89.214C17.164,77.954 27.117,69.488 38.059,69.288Z" style="fill:rgb(252,99,153);fill-rule:nonzero;"/>
<g transform="matrix(1,0,0,1,414.761,94.1743)">
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
</g>
<g transform="matrix(2.31599,0,0,2.31599,218.53,241.338)">
<path d="M148.331,69.288L148.331,69.288C160.23,69.288 169.877,78.934 169.877,90.834L169.877,101.091L169.877,101.091L169.877,110.629C169.877,122.528 160.23,132.175 148.331,132.175C136.637,131.584 128.782,124.336 126.898,112.842L126.943,111.105L126.943,90.834L126.867,89.214C127.436,77.954 137.389,69.488 148.331,69.288Z" style="fill:rgb(171,183,183);fill-rule:nonzero;"/>
<g transform="matrix(6.12323e-17,1,-1,6.12323e-17,581.547,183.453)">
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -537,10 +537,10 @@ class Base {
// methods
//--------------------------
start() {
if (document.getElementById("dash-form") || document.getElementById("dash-init")) {
if (document.getElementById("login") || document.getElementById("dash-init")) {
var options = document.getElementsByClassName("init-option");
for(let index = 0; index < options.length; index++)options[index].addEventListener("click", (e)=>this.handleOptions(e));
if (document.getElementById("dash-form")) document.getElementById("login-btn").addEventListener("click", (e)=>this.handleLogin(e));
if (document.getElementById("login")) document.getElementById("login-btn").addEventListener("click", (e)=>this.handleLogin(e));
else {
document.getElementById("init-blog").addEventListener("click", (e)=>this.handleSetup(e));
document.getElementById("blog-restore").addEventListener("click", (e)=>this.handleRestore(e));
@ -557,6 +557,7 @@ class Base {
let self = this;
e.preventDefault();
let authForm = data.formDataToJSON(document.getElementById("login"));
console.log("authform");
notify.alert("Looking, hold up", null);
let api = new (0, _fipamoAdminAPIDefault.default)();
this.processing = true;

@ -20,15 +20,12 @@ export default class Base {
// methods
//--------------------------
start() {
if (
document.getElementById('dash-form') ||
document.getElementById('dash-init')
) {
if (document.getElementById('login') || document.getElementById('dash-init')) {
var options = document.getElementsByClassName('init-option');
for (let index = 0; index < options.length; index++) {
options[index].addEventListener('click', e => this.handleOptions(e));
}
if (document.getElementById('dash-form')) {
if (document.getElementById('login')) {
document
.getElementById('login-btn')
.addEventListener('click', e => this.handleLogin(e));
@ -60,6 +57,7 @@ export default class Base {
let self = this;
e.preventDefault();
let authForm = data.formDataToJSON(document.getElementById('login'));
console.log('authform');
notify.alert('Looking, hold up', null);
let api = new FipamoAdminAPI();
this.processing = true;

Loading…
Cancel
Save