CSS Overhaul Part 1
This one is a doozy, so let's breakt it down into what areas where touched. - updated package json to remove unneeded dependencies. - rebuilt file uploading to simply a very convuluted process - began proces to replace icons with https://tabler-icons.io - began process of removing the need for css preprocessor and using pure css - login completed - dashboard index completed - page edit ui completed - page edit ui text editor tweaked so syntax highlighting is cleaner and more accurate The settings and navigation UIs still remain and then polishing the responsive for the new css structuretoggle-buttons-#109
parent
ec1dc49ba1
commit
07b422a9c3
GPG Key ID:
29B551CDBD4D3B50
@ -1,6 +1,3 @@
|
|||||||
{
|
{
|
||||||
"extends": [
|
"extends": ["stylelint-config-standard"]
|
||||||
"stylelint-config-standard-scss",
|
|
||||||
"stylelint-config-prettier-scss"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,53 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace brain\api\v1;
|
||||||
|
|
||||||
|
use brain\utility\FileUploader;
|
||||||
|
|
||||||
|
class FilesAPI
|
||||||
|
{
|
||||||
|
public function __construct()
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
public static function uploadFiles($request, $type = null)
|
||||||
|
{
|
||||||
|
$upload = $request->getUploadedFiles(); //grab uploaded files
|
||||||
|
$file = $upload['upload_files'][0]; //front end sends one by one for progress tracking, so grab first
|
||||||
|
$type = $file->getClientMediaType();
|
||||||
|
$filesPath = '';
|
||||||
|
$path = date('Y') . '/' . date('m');
|
||||||
|
$response = [];
|
||||||
|
switch ($type) {
|
||||||
|
case 'image/jpeg':
|
||||||
|
case 'image/png':
|
||||||
|
case 'image/gif':
|
||||||
|
case 'image/svg':
|
||||||
|
$filesPath = '/assets/images/blog/' . $path . '/';
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 'video/mp4':
|
||||||
|
$filesPath = '/assets/video/blog/' . $path . '/';
|
||||||
|
break;
|
||||||
|
case 'audio/mpeg':
|
||||||
|
$filesPath = '/assets/sound/blog/' . $path . '/';
|
||||||
|
break;
|
||||||
|
case 'application/pdf':
|
||||||
|
case 'text/plain':
|
||||||
|
case 'text/rtf':
|
||||||
|
$filesPath = '/assets/docs/blog/' . $path . '/';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
FileUploader::uploadFile('../public' . $filesPath, $file);
|
||||||
|
|
||||||
|
$response = [
|
||||||
|
'message' => "File Uploaded. Great!",
|
||||||
|
"filePath" => $filesPath . urlencode($file->getClientFileName()),
|
||||||
|
"fileName" => urlencode($file->getClientFileName()),
|
||||||
|
'type' => $type,
|
||||||
|
];
|
||||||
|
|
||||||
|
return $response;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,102 +1,99 @@
|
|||||||
{% extends "dash/_frame.twig" %}
|
{% extends "dash/_frame.twig" %}
|
||||||
|
|
||||||
{% block title %}
|
{% block title %}
|
||||||
{{ title }}
|
{{ title }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block stylesheets %}
|
{% block stylesheets %}
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfvgy">
|
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfvgy">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block mainContent %}
|
{% block mainContent %}
|
||||||
<div id="post-index">
|
<div id="post-index">
|
||||||
<div id="post-index-wrapper">
|
<div id="post-index-wrapper">
|
||||||
<div id="post-index-header">
|
<div id="post-index-header">
|
||||||
<div id="post-index-header-left">
|
<div id="post-index-header-left">
|
||||||
{{ filter }} Pages
|
{{ filter }}
|
||||||
</div>
|
Pages
|
||||||
<div id="post-index-header-right">
|
</div>
|
||||||
<a href="/dashboard/pages/all" title="view all pages">
|
<div id="post-index-header-right">
|
||||||
<button>
|
<a href="/dashboard/pages/all" title="view all pages">
|
||||||
<svg >
|
<button>
|
||||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
|
<svg>
|
||||||
</svg>
|
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
|
||||||
{{ stats['all'] }}
|
</svg>
|
||||||
</button>
|
{{ stats['all'] }}
|
||||||
</a>
|
</button>
|
||||||
<a href="/dashboard/pages/published" title="view publised pages">
|
</a>
|
||||||
<button>
|
<a href="/dashboard/pages/published" title="view publised pages">
|
||||||
<svg >
|
<button>
|
||||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
|
<svg>
|
||||||
</svg>
|
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
|
||||||
{{ stats['published'] }}
|
</svg>
|
||||||
</button>
|
{{ stats['published'] }}
|
||||||
</a>
|
</button>
|
||||||
<a href="/dashboard/pages/deleted" title="view deleted pages">
|
</a>
|
||||||
<button>
|
<a href="/dashboard/pages/deleted" title="view deleted pages">
|
||||||
<svg >
|
<button>
|
||||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-circle-with-cross"/>
|
<svg>
|
||||||
</svg>
|
<use xlink:href="/assets/images/global/sprite.svg#entypo-circle-with-cross"/>
|
||||||
{{ stats['deleted'] }}
|
</svg>
|
||||||
</button>
|
{{ stats['deleted'] }}
|
||||||
</a>
|
</button>
|
||||||
</div>
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
|
||||||
<div id="posts-list">
|
|
||||||
{% for page in pages %}
|
|
||||||
{% if page.media[0].type == 'mp4' %}
|
|
||||||
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="page-link">
|
|
||||||
<div class="page-video">
|
|
||||||
<video class="post-video" loop muted autoplay>
|
|
||||||
<source src="{{ page.media[0].file }}" type="video/mp4">
|
|
||||||
|
|
||||||
Sorry, your browser doesn't support embedded videos.
|
</div>
|
||||||
</video>
|
<div id="posts-list">
|
||||||
<label>
|
{% for page in pages %}
|
||||||
{{ page.title }}
|
{% if page.media[0].type == 'mp4' %}
|
||||||
</label>
|
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="page-link">
|
||||||
<div id="meta">
|
<div class="page-video">
|
||||||
{{ include("dash/partials/recent-options.twig") }}
|
<video class="post-video" loop muted autoplay>
|
||||||
</div>
|
<source src="{{ page.media[0].file }}" type="video/mp4">
|
||||||
</div>
|
|
||||||
|
|
||||||
</a>
|
|
||||||
{% else %}
|
|
||||||
<a class="page-link" href="/dashboard/page/edit/{{ page.uuid }}">
|
|
||||||
<div class="page-bg" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
|
|
||||||
<label>
|
|
||||||
{{ page.title }}
|
|
||||||
</label>
|
|
||||||
<div id="meta">
|
|
||||||
{{ include("dash/partials/recent-options.twig") }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% endfor %}
|
|
||||||
{% if numOfPages > 1 %}
|
|
||||||
<div class="paginate">
|
|
||||||
<a class="page-btns" href="/dashboard/pages/{{ paginate['sort'] }}/{{ paginate['prevPage'] }}">
|
|
||||||
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-chevron-left"/></svg>
|
|
||||||
</a>
|
|
||||||
<span class="count">
|
|
||||||
{{ currentPage }}
|
|
||||||
of
|
|
||||||
{{ numOfPages }}
|
|
||||||
</span>
|
|
||||||
<a class="page-btns" href="/dashboard/pages/{{ paginate['sort'] }}/{{ paginate['nextPage'] }}">
|
|
||||||
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-chevron-right"/></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</div>
|
Sorry, your browser doesn't support embedded videos.
|
||||||
</div>
|
</video>
|
||||||
</div>
|
<label>
|
||||||
{% endblock %}
|
{{ page.title }}
|
||||||
|
</label>
|
||||||
|
<div id="meta">
|
||||||
|
{{ include("dash/partials/recent-options.twig") }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% block javascripts %}
|
</a>
|
||||||
<script src="/assets/scripts/Start.js" type="text/javascript"></script>
|
{% else %}
|
||||||
{% endblock %}
|
<a class="page-link" href="/dashboard/page/edit/{{ page.uuid }}">
|
||||||
|
<div class="page-bg" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
|
||||||
|
<label>
|
||||||
|
{{ page.title }}
|
||||||
|
</label>
|
||||||
|
<div id="meta">
|
||||||
|
{{ include("dash/partials/recent-options.twig") }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% endfor %}
|
||||||
|
{% if numOfPages > 1 %}
|
||||||
|
<div class="paginate">
|
||||||
|
<a class="page-btns" href="/dashboard/pages/{{ paginate['sort'] }}/{{ paginate['prevPage'] }}">
|
||||||
|
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-chevron-left"/></svg>
|
||||||
|
</a>
|
||||||
|
<span class="count">
|
||||||
|
{{ currentPage }}
|
||||||
|
of
|
||||||
|
{{ numOfPages }}
|
||||||
|
</span>
|
||||||
|
<a class="page-btns" href="/dashboard/pages/{{ paginate['sort'] }}/{{ paginate['nextPage'] }}">
|
||||||
|
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-chevron-right"/></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|||||||
@ -0,0 +1,10 @@
|
|||||||
|
<div role="notify-message">
|
||||||
|
<div role="notify-icons">
|
||||||
|
<i class="ti ti-mood-smile" role="notify-good"></i>
|
||||||
|
<i class="ti ti-mood-sad" role="notify-notgood"></i>
|
||||||
|
<i class="ti ti-settings" role="notify-working"></i>
|
||||||
|
</div>
|
||||||
|
<div role="notify-text">
|
||||||
|
<span role="response-text">Hey Hey</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -1,42 +1,40 @@
|
|||||||
{% if page['menu'] %}
|
{% if page['menu'] %}
|
||||||
{% set menu = 'true' %}
|
{% set menu = 'true' %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% set menu = 'false' %}
|
{% set menu = 'false' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if page['featured'] %}
|
{% if page['featured'] %}
|
||||||
{% set featured = 'true' %}
|
{% set featured = 'true' %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% set featured = 'false' %}
|
{% set featured = 'false' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if page['published'] %}
|
{% if page['published'] %}
|
||||||
{% set published = 'true' %}
|
{% set published = 'true' %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% set published = 'false' %}
|
{% set published = 'false' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
<br>
|
||||||
<div id="post-options">
|
|
||||||
<button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ menu }}" title='Pin to Menu'>
|
<button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ menu }}" title='Pin to Menu'>
|
||||||
<svg id="option-page-icon" viewbox="0 0 20 20" class="icons">
|
<svg id="option-page-icon" role="icon">
|
||||||
<use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
|
<use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button id="option-feature" class="option-inactive post-option-btn" data-active="{{ featured }}" title='Feature'>
|
||||||
|
<svg id="option-feature-icon" role="icon">
|
||||||
|
<use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button id="option-published" class="option-inactive post-option-btn" data-active="{{ published }}" title='Published'>
|
||||||
|
<svg id="option-published-icon" role="icon">
|
||||||
|
<use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button id="option-feature" class="option-inactive post-option-btn" data-active="{{ featured }}" title='Feature'>
|
<a href="/dashboard/page/preview/{{ uuid }}" target="_blank">
|
||||||
<svg id="option-feature-icon" viewbox="0 0 20 20" class="icons">
|
<button id="option-preview" class="option-inactive post-option-btn" data-active="false" title='preview page'>
|
||||||
<use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
|
<svg id="option-preview-icon" role="icon">
|
||||||
</svg>
|
<use id="option-preview-icon" xlink:href="/assets/images/global/sprite.svg#entypo-eye"/>
|
||||||
</button>
|
|
||||||
<button id="option-published" class="option-inactive post-option-btn" data-active="{{ published }}" title='Published'>
|
|
||||||
<svg id="option-published-icon" viewbox="0 0 20 20" class="icons">
|
|
||||||
<use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<a href="/dashboard/page/preview/{{ uuid }}" target="_blank">
|
|
||||||
<button id="option-preview" class="option-inactive post-option-btn" data-active="false" title='preview page'>
|
|
||||||
<svg id="option-preview-icon" viewbox="0 0 20 20" class="icons">
|
|
||||||
<use id="option-preview-icon" xlink:href="/assets/images/global/sprite.svg#entypo-eye"/>
|
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,43 +1,35 @@
|
|||||||
{
|
{
|
||||||
"name": "fipamo-dash",
|
"name": "fipamo-dash",
|
||||||
"version": "2.5.1-beta",
|
"version": "2.5.1-beta",
|
||||||
"private": true,
|
"private": true,
|
||||||
"apidoc": {
|
"apidoc": {
|
||||||
"name": "Fipamo API",
|
"name": "Fipamo API",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "The most chill API for the most chill blog framework"
|
"description": "The most chill API for the most chill blog framework"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"source": "src/com/Start.js",
|
||||||
"@babel/preset-env": "^7.16.5",
|
"main": "public/assets/scripts/start.js",
|
||||||
"babel-cli": "^6.26.0",
|
"targets": {
|
||||||
"eslint": "^8.11.0",
|
"main": {
|
||||||
"eslint-plugin-babel": "^5.3.1",
|
"includeNodeModules": true
|
||||||
"parcel": "^2.0.1",
|
}
|
||||||
"prettier": "^2.6.0",
|
},
|
||||||
"stylelint": "^14.8.2",
|
"scripts": {
|
||||||
"stylelint-config-prettier-scss": "^0.0.1",
|
"watch": "parcel watch",
|
||||||
"stylelint-config-standard-scss": "^3.0.0"
|
"build": "parcel build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.16.5",
|
"@babel/core": "^7.21.3",
|
||||||
"@babel/eslint-parser": "^7.16.5",
|
"babel-plugin-prismjs": "^2.1.0",
|
||||||
"animejs": "^3.2.1",
|
"parcel": "^2.8.3",
|
||||||
"babel-plugin-prismjs": "^2.1.0",
|
"prettier": "^2.8.4",
|
||||||
"babel-preset-env": "^1.7.0",
|
"stylelint": "^15.3.0",
|
||||||
"bulma": "^0.9.3",
|
"stylelint-config-standard": "^31.0.0"
|
||||||
"caret-pos": "^2.0.0",
|
},
|
||||||
"jsdoc": "^3.6.7",
|
"dependencies": {
|
||||||
"minami": "^1.2.3",
|
"animejs": "^3.2.1",
|
||||||
"prismjs": "^1.25.0",
|
"caret-pos": "^2.0.0",
|
||||||
"sass": "^1.45.1",
|
"prismjs": "^1.29.0",
|
||||||
"sortablejs": "^1.14.0"
|
"sortablejs": "^1.15.0"
|
||||||
},
|
}
|
||||||
"license": "UNLICENSED",
|
|
||||||
"author": "Are0h",
|
|
||||||
"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"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,43 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,22 @@
|
|||||||
|
:root {
|
||||||
|
/* BASE COLORS */
|
||||||
|
--primary: #1d3040;
|
||||||
|
--secondary: #b2cce5;
|
||||||
|
--tertiary: #f5ab35;
|
||||||
|
--highlight: #fc6399;
|
||||||
|
--white: #efebe3;
|
||||||
|
--grey: #abb7b7;
|
||||||
|
--black: #32302f;
|
||||||
|
|
||||||
|
/* EDITOR COLORS */
|
||||||
|
--event-cool: #32cd32;
|
||||||
|
--event-lame: #f64747;
|
||||||
|
--editor-primary: #fde3a7;
|
||||||
|
--editor-secondary: #e7903c;
|
||||||
|
--editor-tertiary: #6bb9f0;
|
||||||
|
--editor-string: #dcc6e0;
|
||||||
|
--editor-tag: #e73c4e;
|
||||||
|
|
||||||
|
/* RGB Versions */
|
||||||
|
--primary-rgb: 29 28 24;
|
||||||
|
}
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
a {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
background: var(--tertiary);
|
||||||
|
color: var(--primary);
|
||||||
|
padding: 5px;
|
||||||
|
display: block;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="email"],
|
||||||
|
input[type="password"],
|
||||||
|
input[type="text"] {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 5px;
|
||||||
|
font: 18px var(--base-type);
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: var(--white);
|
||||||
|
background: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type="submit"] {
|
||||||
|
background: var(--highlight);
|
||||||
|
color: var(--primary);
|
||||||
|
font: 20px var(--base-type);
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
font: 14px var(--base-type);
|
||||||
|
border: 1px solid var(--secondary);
|
||||||
|
appearance: none;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
::placeholder {
|
||||||
|
font: 25px var(--base-type);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
@ -0,0 +1,131 @@
|
|||||||
|
html {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
font: 400 1.2em/1.4em var(--base-type);
|
||||||
|
}
|
||||||
|
|
||||||
|
html body {
|
||||||
|
background: var(--primary);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GLOBALS */
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--primary);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid var(--secondary);
|
||||||
|
transition: all 0.2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
border-bottom: 1px solid var(--highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
background: var(--black);
|
||||||
|
color: var(--white);
|
||||||
|
padding: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notifications {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
background: var(--black);
|
||||||
|
color: var(--highlight);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg[role="icon"] {
|
||||||
|
fill: var(--white);
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HEADER
|
||||||
|
Navigation
|
||||||
|
Notificiations
|
||||||
|
*/
|
||||||
|
|
||||||
|
header {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 10px auto;
|
||||||
|
background: var(--white);
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 5px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
position: fixed;
|
||||||
|
z-index: 500;
|
||||||
|
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 50px 1fr auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav > div[role="nav-left"] img {
|
||||||
|
width: 40px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav > div[role="nav-right"] {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav > div[role="nav-right"] button {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="login"] {
|
||||||
|
margin: 15% auto;
|
||||||
|
padding: 10px;
|
||||||
|
width: 500px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: var(--white);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 28.5% 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="login"] form input {
|
||||||
|
width: 95%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="login"] form button {
|
||||||
|
padding: 10px 5px;
|
||||||
|
width: 82%;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="login"] form a {
|
||||||
|
padding: 10px 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 10%;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--tertiary);
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,85 @@
|
|||||||
|
section[role="index-header"] {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 60px auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-recent-pages"] a {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-recent-pages"] a:nth-child(1) {
|
||||||
|
grid-column: 1/4;
|
||||||
|
grid-row: 1/3;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-recent-pages"] a:nth-child(2) {
|
||||||
|
grid-row: 3/6;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-recent-pages"] a:nth-child(3) {
|
||||||
|
grid-column: 2/4;
|
||||||
|
grid-row: 3/5;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-header"] div[role="index-header-right"] {
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-header"] div[role="index-header-right"] a {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-recent-pages"] {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
grid-auto-rows: minmax(200px, auto);
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-recent-pages"] a button {
|
||||||
|
padding: 1px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-recent-pages"] button[data-active="true"] {
|
||||||
|
background: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-recent-pages"] button[data-active="true"] svg {
|
||||||
|
fill: var(--tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-recent-pages"] button[data-active="false"] {
|
||||||
|
background: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-recent-pages"] button[data-active="false"] svg {
|
||||||
|
fill: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-recent-pages"] aside {
|
||||||
|
font-size: 1.1em;
|
||||||
|
color: var(--white);
|
||||||
|
text-shadow: 2px 2px 2px var(--black);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="index-recent-pages"] hr {
|
||||||
|
color: var(--white);
|
||||||
|
border: 0.1px solid;
|
||||||
|
margin: 7px 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
header > nav > div[role="notifications"] {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav > div[role="notifications"] > div[role="notify-message"] {
|
||||||
|
display: flex;
|
||||||
|
height: 86%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav > div[role="notifications"] > div[role="notify-message"] div {
|
||||||
|
display: inline-block;
|
||||||
|
transition: all 0.2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
header
|
||||||
|
> nav
|
||||||
|
> div[role="notifications"]
|
||||||
|
> div[role="notify-message"]
|
||||||
|
> div[role="notify-text"] {
|
||||||
|
color: var(--white);
|
||||||
|
border-radius: 5px;
|
||||||
|
height: 79%;
|
||||||
|
margin-top: 5px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header
|
||||||
|
> nav
|
||||||
|
> div[role="notifications"]
|
||||||
|
> div[role="notify-message"]
|
||||||
|
> div[role="notify-icons"] {
|
||||||
|
margin: 5px;
|
||||||
|
width: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header
|
||||||
|
> nav
|
||||||
|
> div[role="notifications"]
|
||||||
|
> div[role="notify-message"]
|
||||||
|
> div[role="notify-text"]
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav > div[role="notifications"] > div[role="notify-message"] i {
|
||||||
|
display: none;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
i[role="notify-working"] {
|
||||||
|
animation: 2s infinite linear spin;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
color: var(--editor-primary);
|
||||||
|
background: none;
|
||||||
|
font-family: var(--mono-type);
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
tab-size: 4;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"] {
|
||||||
|
margin: 0.1em 0;
|
||||||
|
overflow: auto;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre) > code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
background: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre) {
|
||||||
|
& > code[class*="language-"] {
|
||||||
|
padding: 0.1em;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: #8292a2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: var(--editor-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.namespace {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.keyword {
|
||||||
|
color: #66d9ef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.content {
|
||||||
|
color: var(--editor-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.deleted {
|
||||||
|
color: var(--editor-tag);
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.boolean,
|
||||||
|
.token.number {
|
||||||
|
color: #ae81ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin,
|
||||||
|
.token.inserted {
|
||||||
|
color: #a6e22e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string,
|
||||||
|
.token.variable {
|
||||||
|
color: var(--editor-string);
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.function,
|
||||||
|
.token.class-name {
|
||||||
|
color: #e6db74;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important {
|
||||||
|
color: var(--editor-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
@ -0,0 +1,345 @@
|
|||||||
|
/* FILE MANAGER */
|
||||||
|
main > section[role="file-manager"] {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--tertiary);
|
||||||
|
padding: 20px 0;
|
||||||
|
margin-top: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > section[role="file-manager"] label[role="list-title"] {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
main > section[role="file-manager"] > div[role="file-drop"] {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100px;
|
||||||
|
background: var(--white);
|
||||||
|
color: var(--primary);
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: 5px;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > section[role="file-manager"] > div[role="page-images-list"],
|
||||||
|
main > section[role="file-manager"] > div[role="page-files-list"] {
|
||||||
|
max-width: 900px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > section[role="file-manager"] > div[role="page-images-list"] > div,
|
||||||
|
main > section[role="file-manager"] > div[role="page-files-list"] > div {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
> section[role="file-manager"]
|
||||||
|
> div[role="page-images-list"]
|
||||||
|
> div
|
||||||
|
> div.item-progress {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
> section[role="file-manager"]
|
||||||
|
> div[role="page-images-list"]
|
||||||
|
> div
|
||||||
|
> button.media-remove,
|
||||||
|
main
|
||||||
|
> section[role="file-manager"]
|
||||||
|
> div[role="page-files-list"]
|
||||||
|
> div
|
||||||
|
> button.media-remove {
|
||||||
|
color: var(--white);
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
> section[role="file-manager"]
|
||||||
|
> div[role="page-images-list"]
|
||||||
|
> div.video-item
|
||||||
|
> video {
|
||||||
|
object-fit: cover;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
> section[role="file-manager"]
|
||||||
|
> div[role="page-images-list"]
|
||||||
|
> div.video-item
|
||||||
|
> button,
|
||||||
|
main
|
||||||
|
> section[role="file-manager"]
|
||||||
|
> div[role="page-files-list"]
|
||||||
|
> div.audio-item
|
||||||
|
> button,
|
||||||
|
main
|
||||||
|
> section[role="file-manager"]
|
||||||
|
> div[role="page-files-list"]
|
||||||
|
> div.file-item
|
||||||
|
> button {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
> section[role="file-manager"]
|
||||||
|
> div[role="page-files-list"]
|
||||||
|
> div.audio-item {
|
||||||
|
background: url("/assets/images/global/upload-audio.png") no-repeat center
|
||||||
|
center / cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
> section[role="file-manager"]
|
||||||
|
> div[role="page-files-list"]
|
||||||
|
> div.file-item {
|
||||||
|
background: url("/assets/images/global/upload-doc.png") no-repeat center
|
||||||
|
center / cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
> section[role="file-manager"]
|
||||||
|
> div[role="page-files-list"]
|
||||||
|
> div.file-item
|
||||||
|
> a {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
background: var(--secondary);
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
> section[role="file-manager"]
|
||||||
|
> div[role="page-files-list"]
|
||||||
|
> div.audio-item
|
||||||
|
> audio {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PAGE META */
|
||||||
|
|
||||||
|
main > section[role="page-meta"] {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 10px auto;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
main section[role="page-meta"] textarea#post-title-text {
|
||||||
|
background: var(--white);
|
||||||
|
font-family: var(--base-type);
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
font-size: 2em;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
main section[role="page-meta"] textarea#post-tags {
|
||||||
|
background: var(--white);
|
||||||
|
font-family: var(--base-type);
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
main section[role="page-meta"] select {
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--secondary);
|
||||||
|
border-radius: 3px;
|
||||||
|
border-color: var(--primary);
|
||||||
|
width: 100%;
|
||||||
|
height: 45px;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section[role="page-meta"] div[role="page-options"] {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
section[role="page-meta"]
|
||||||
|
div[role="page-meta-wrapper"]
|
||||||
|
div[role="page-options"]
|
||||||
|
button {
|
||||||
|
width: 25%;
|
||||||
|
height: 45px;
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
> section[role="page-meta"]
|
||||||
|
> div[role="page-meta-wrapper"]
|
||||||
|
> div[role="page-options"]
|
||||||
|
> button.post-option-btn:nth-child(3) {
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
> section[role="page-meta"]
|
||||||
|
> div[role="page-meta-wrapper"]
|
||||||
|
> div[role="page-options"]
|
||||||
|
> a
|
||||||
|
> button {
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
section[role="page-meta"]
|
||||||
|
div[role="page-meta-wrapper"]
|
||||||
|
button[data-active="false"] {
|
||||||
|
background: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
section[role="page-meta"]
|
||||||
|
div[role="page-meta-wrapper"]
|
||||||
|
button[data-active="false"]
|
||||||
|
svg {
|
||||||
|
fill: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
section[role="page-meta"]
|
||||||
|
div[role="page-meta-wrapper"]
|
||||||
|
div[role="page-options"]
|
||||||
|
button[data-active="true"] {
|
||||||
|
background: var(--tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
section[role="page-meta"]
|
||||||
|
div[role="page-meta-wrapper"]
|
||||||
|
div[role="page-options"]
|
||||||
|
button[data-active="true"]
|
||||||
|
svg {
|
||||||
|
fill: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
section[role="page-meta"]
|
||||||
|
div[role="page-meta-wrapper"]
|
||||||
|
div[role="page-created"]
|
||||||
|
input {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TEXT EDITOR */
|
||||||
|
|
||||||
|
main > section[role="text-editor"] {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section[role="text-editor"] .icon-hide {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > section[role="text-editor"] > div[role="text-editor-control"] {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(10, 1fr);
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
> section[role="text-editor"]
|
||||||
|
> div[role="edit-post-wrapper"]
|
||||||
|
textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
|
||||||
|
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
|
||||||
|
font-family: var(--mono-type);
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 300px;
|
||||||
|
height: auto;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: auto;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
line-break: normal;
|
||||||
|
font-size: 1.1em;
|
||||||
|
line-height: 1.2;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
section[role="text-editor"]
|
||||||
|
div[role="edit-post-wrapper"]
|
||||||
|
#highlight-content {
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
line-break: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #edit {
|
||||||
|
z-index: 1;
|
||||||
|
background: transparent;
|
||||||
|
color: transparent;
|
||||||
|
caret-color: var(--highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
main
|
||||||
|
> section[role="text-editor"]
|
||||||
|
> div[role="edit-post-wrapper"]
|
||||||
|
> #highlight {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section[role="text-editor"] div[role="edit-post-wrapper"] pre,
|
||||||
|
main section[role="text-editor"] div[role="edit-post-wrapper"] pre code {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
@import url("colors.css");
|
||||||
|
@import url("forms.css");
|
||||||
|
@import url("typography.css");
|
||||||
|
@import url("frame.css");
|
||||||
|
@import url("icons.css");
|
||||||
|
@import url("notifications.css");
|
||||||
|
@import url("index.css");
|
||||||
|
@import url("page-editor.css");
|
||||||
|
@import url("page-editor-highlights.css");
|
||||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,29 @@
|
|||||||
|
:root {
|
||||||
|
--base-type: helvetica, arial, sans-serif;
|
||||||
|
--mono-type: "Lucida Console", monaco, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > article > h1 {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,194 +1,194 @@
|
|||||||
import * as DataEvent from "../events/DataEvent";
|
import * as DataEvent from '../events/DataEvent';
|
||||||
import { position } from "caret-pos";
|
import { position } from 'caret-pos';
|
||||||
import EventEmitter from "../events/EventEmitter";
|
import EventEmitter from '../events/EventEmitter';
|
||||||
import * as EditorEvent from "../events/EditorEvent";
|
import * as EditorEvent from '../events/EditorEvent';
|
||||||
import Prism from "prismjs";
|
import Prism from 'prismjs';
|
||||||
class TextEditor extends EventEmitter {
|
class TextEditor extends EventEmitter {
|
||||||
/**
|
/**
|
||||||
* Text Editor UI Component
|
* Text Editor UI Component
|
||||||
* @constructor
|
* @constructor
|
||||||
* @param {object} textEditor - Text area that will edit text
|
* @param {object} textEditor - Text area that will edit text
|
||||||
* @param {number} scrollLimit - YPos where editor position will become fixed
|
* @param {number} scrollLimit - YPos where editor position will become fixed
|
||||||
*/
|
*/
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// constructor
|
// constructor
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor(textEditor, scrollLimit) {
|
constructor(textEditor, scrollLimit) {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
document.getElementById("edit").addEventListener("input", (e) => {
|
document.getElementById('edit').addEventListener('input', e => {
|
||||||
let result_element = document.querySelector("#highlight-content");
|
let result_element = document.querySelector('#highlight-content');
|
||||||
this.textEditor = textEditor;
|
this.textEditor = textEditor;
|
||||||
|
|
||||||
// Update code
|
// Update code
|
||||||
let text = e.target.value;
|
let text = e.target.value;
|
||||||
result_element.innerHTML = text
|
result_element.innerHTML = text
|
||||||
.replace(new RegExp("&", "g"), "&")
|
.replace(new RegExp('&', 'g'), '&')
|
||||||
.replace(new RegExp("<", "g"), "<");
|
.replace(new RegExp('<', 'g'), '<');
|
||||||
let editorHeight = document.getElementById("highlight").offsetHeight;
|
let editorHeight = document.getElementById('highlight').offsetHeight;
|
||||||
document.getElementById("edit-post-wrapper").style.height =
|
document.querySelector('[role="edit-post-wrapper"]').style.height =
|
||||||
editorHeight + "px";
|
editorHeight + 'px';
|
||||||
e.target.style.height = editorHeight + 30 + "px"; //TODO: yeah, it's ugly but it works for now, fix soon
|
e.target.style.height = editorHeight + 30 + 'px'; //TODO: yeah, it's ugly but it works for now, fix soon
|
||||||
// Syntax Highlight
|
// Syntax Highlight
|
||||||
Prism.highlightElement(result_element);
|
Prism.highlightElement(result_element);
|
||||||
});
|
});
|
||||||
document.getElementById("edit").addEventListener("scroll", (e) => {
|
document.getElementById('edit').addEventListener('scroll', e => {
|
||||||
/* Scroll result to scroll coords of event - sync with textarea */
|
/* Scroll result to scroll coords of event - sync with textarea */
|
||||||
let result_element = document.querySelector("#highlight");
|
let result_element = document.querySelector('#highlight');
|
||||||
// Get and set x and y
|
// Get and set x and y
|
||||||
result_element.scrollTop = e.scrollTop;
|
result_element.scrollTop = e.scrollTop;
|
||||||
result_element.scrollLeft = e.scrollLeft;
|
result_element.scrollLeft = e.scrollLeft;
|
||||||
});
|
});
|
||||||
document.getElementById("edit").dispatchEvent(new Event("input"));
|
document.getElementById('edit').dispatchEvent(new Event('input'));
|
||||||
this.setInputs();
|
this.setInputs();
|
||||||
|
|
||||||
//freeze editor formatting so it doesn't scroll off screen
|
//freeze editor formatting so it doesn't scroll off screen
|
||||||
window.addEventListener("scroll", () => {
|
window.addEventListener('scroll', () => {
|
||||||
var fixLimit = scrollLimit;
|
var fixLimit = scrollLimit;
|
||||||
|
|
||||||
if (window.pageYOffset + 5 >= fixLimit) {
|
if (window.pageYOffset + 5 >= fixLimit) {
|
||||||
document.getElementById("edit-control").style.position = "fixed";
|
document.getElementById('edit-control').style.position = 'fixed';
|
||||||
} else {
|
} else {
|
||||||
document.getElementById("edit-control").style.position = "relative";
|
document.getElementById('edit-control').style.position = 'relative';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// methods
|
// methods
|
||||||
//--------------------------
|
//--------------------------
|
||||||
setInputs() {
|
setInputs() {
|
||||||
var editorButtons = document.querySelectorAll(".editor-button");
|
var editorButtons = document.querySelectorAll('.editor-button');
|
||||||
for (var i = 0, length = editorButtons.length; i < length; i++) {
|
for (var i = 0, length = editorButtons.length; i < length; i++) {
|
||||||
editorButtons[i].addEventListener(
|
editorButtons[i].addEventListener(
|
||||||
"click",
|
'click',
|
||||||
(e) => this.handleEditorOption(e),
|
e => this.handleEditorOption(e),
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
notify(type, data) {
|
notify(type, data) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case DataEvent.PAGE_UPDATED:
|
case DataEvent.PAGE_UPDATED:
|
||||||
document.getElementById("submit-update").classList.add("icon-hide");
|
document.getElementById('submit-update').classList.add('icon-hide');
|
||||||
document.getElementById("submit-good").classList.remove("icon-hide");
|
document.getElementById('submit-good').classList.remove('icon-hide');
|
||||||
document.getElementById("edit-update").classList.remove("submit-start");
|
document.getElementById('edit-update').classList.remove('submit-start');
|
||||||
document.getElementById("edit-update").classList.add("submit-cool");
|
document.getElementById('edit-update').classList.add('submit-cool');
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document
|
document
|
||||||
.getElementById("submit-update")
|
.getElementById('submit-update')
|
||||||
.classList.remove("icon-hide");
|
.classList.remove('icon-hide');
|
||||||
document.getElementById("submit-good").classList.add("icon-hide");
|
document.getElementById('submit-good').classList.add('icon-hide');
|
||||||
document.getElementById("edit-update").classList.add("submit-start");
|
document.getElementById('edit-update').classList.add('submit-start');
|
||||||
document
|
document
|
||||||
.getElementById("edit-update")
|
.getElementById('edit-update')
|
||||||
.classList.remove("submit-cool");
|
.classList.remove('submit-cool');
|
||||||
}, 2000);
|
}, 2000);
|
||||||
break;
|
break;
|
||||||
case DataEvent.PAGE_ADDED:
|
case DataEvent.PAGE_ADDED:
|
||||||
// do nothing
|
// do nothing
|
||||||
break;
|
break;
|
||||||
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE: {
|
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE: {
|
||||||
let len = this.textEditor.value.length;
|
let len = this.textEditor.value.length;
|
||||||
let start = this.textEditor.selectionStart;
|
let start = this.textEditor.selectionStart;
|
||||||
let end = this.textEditor.selectionEnd;
|
let end = this.textEditor.selectionEnd;
|
||||||
let insert = "![image alt text](" + data + ")";
|
let insert = '';
|
||||||
|
|
||||||
this.textEditor.value =
|
this.textEditor.value =
|
||||||
this.textEditor.value.substring(0, start) +
|
this.textEditor.value.substring(0, start) +
|
||||||
insert +
|
insert +
|
||||||
this.textEditor.value.substring(end, len);
|
this.textEditor.value.substring(end, len);
|
||||||
document.getElementById("edit").dispatchEvent(new Event("input"));
|
document.getElementById('edit').dispatchEvent(new Event('input'));
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// event handlers
|
// event handlers
|
||||||
//--------------------------
|
//--------------------------
|
||||||
handleEditorOption(e) {
|
handleEditorOption(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
let len = this.textEditor.value.length;
|
let len = this.textEditor.value.length;
|
||||||
let start = this.textEditor.selectionStart;
|
let start = this.textEditor.selectionStart;
|
||||||
let end = this.textEditor.selectionEnd;
|
let end = this.textEditor.selectionEnd;
|
||||||
|
|
||||||
let selectedText = this.textEditor.value.substring(start, end);
|
let selectedText = this.textEditor.value.substring(start, end);
|
||||||
let insert = "";
|
let insert = '';
|
||||||
switch (e.target.id) {
|
switch (e.target.id) {
|
||||||
case "edit-bold":
|
case 'edit-bold':
|
||||||
insert = "**" + selectedText + "**";
|
insert = '**' + selectedText + '**';
|
||||||
this.textEditor.value =
|
this.textEditor.value =
|
||||||
this.textEditor.value.substring(0, start) +
|
this.textEditor.value.substring(0, start) +
|
||||||
insert +
|
insert +
|
||||||
this.textEditor.value.substring(end, len);
|
this.textEditor.value.substring(end, len);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case "edit-italic":
|
case 'edit-italic':
|
||||||
insert = "*" + selectedText + "*";
|
insert = '*' + selectedText + '*';
|
||||||
//console.log(this.textEditor);
|
//console.log(this.textEditor);
|
||||||
this.textEditor.value =
|
this.textEditor.value =
|
||||||
this.textEditor.value.substring(0, start) +
|
this.textEditor.value.substring(0, start) +
|
||||||
insert +
|
insert +
|
||||||
this.textEditor.value.substring(end, len);
|
this.textEditor.value.substring(end, len);
|
||||||
break;
|
break;
|
||||||
case "edit-strikethrough":
|
case 'edit-strikethrough':
|
||||||
insert = "~~" + selectedText + "~~";
|
insert = '~~' + selectedText + '~~';
|
||||||
this.textEditor.value =
|
this.textEditor.value =
|
||||||
this.textEditor.value.substring(0, start) +
|
this.textEditor.value.substring(0, start) +
|
||||||
insert +
|
insert +
|
||||||
this.textEditor.value.substring(end, len);
|
this.textEditor.value.substring(end, len);
|
||||||
break;
|
break;
|
||||||
case "edit-header1":
|
case 'edit-header1':
|
||||||
insert = "# " + selectedText + "\n";
|
insert = '# ' + selectedText + '\n';
|
||||||
this.textEditor.value =
|
this.textEditor.value =
|
||||||
this.textEditor.value.substring(0, start) +
|
this.textEditor.value.substring(0, start) +
|
||||||
insert +
|
insert +
|
||||||
this.textEditor.value.substring(end, len);
|
this.textEditor.value.substring(end, len);
|
||||||
break;
|
break;
|
||||||
case "edit-header2":
|
case 'edit-header2':
|
||||||
insert = "## " + selectedText + "\n";
|
insert = '## ' + selectedText + '\n';
|
||||||
this.textEditor.value =
|
this.textEditor.value =
|
||||||
this.textEditor.value.substring(0, start) +
|
this.textEditor.value.substring(0, start) +
|
||||||
insert +
|
insert +
|
||||||
this.textEditor.value.substring(end, len);
|
this.textEditor.value.substring(end, len);
|
||||||
break;
|
break;
|
||||||
case "edit-header3":
|
case 'edit-header3':
|
||||||
insert = "### " + selectedText + "\n";
|
insert = '### ' + selectedText + '\n';
|
||||||
this.textEditor.value =
|
this.textEditor.value =
|
||||||
this.textEditor.value.substring(0, start) +
|
this.textEditor.value.substring(0, start) +
|
||||||
insert +
|
insert +
|
||||||
this.textEditor.value.substring(end, len);
|
this.textEditor.value.substring(end, len);
|
||||||
break;
|
break;
|
||||||
case "edit-link":
|
case 'edit-link':
|
||||||
{
|
{
|
||||||
let url = prompt("Let's get that url, boss");
|
let url = prompt("Let's get that url, boss");
|
||||||
let link = url.toLowerCase();
|
let link = url.toLowerCase();
|
||||||
insert = "[" + selectedText + "](" + link + ")";
|
insert = '[' + selectedText + '](' + link + ')';
|
||||||
this.textEditor.value =
|
this.textEditor.value =
|
||||||
this.textEditor.value.substring(0, start) +
|
this.textEditor.value.substring(0, start) +
|
||||||
insert +
|
insert +
|
||||||
this.textEditor.value.substring(end, len);
|
this.textEditor.value.substring(end, len);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "edit-image":
|
case 'edit-image':
|
||||||
this.caretPos = position(this.textEditor).pos;
|
this.caretPos = position(this.textEditor).pos;
|
||||||
this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
|
this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
|
||||||
break;
|
break;
|
||||||
case "submit-save":
|
case 'submit-save':
|
||||||
case "edit-save":
|
case 'edit-save':
|
||||||
this.emitEvent(EditorEvent.EDITOR_SAVE);
|
this.emitEvent(EditorEvent.EDITOR_SAVE);
|
||||||
break;
|
break;
|
||||||
case "submit-update":
|
case 'submit-update':
|
||||||
case "edit-update":
|
case 'edit-update':
|
||||||
this.emitEvent(EditorEvent.EDITOR_UPDATE);
|
this.emitEvent(EditorEvent.EDITOR_UPDATE);
|
||||||
break;
|
break;
|
||||||
case "edit-delete":
|
case 'edit-delete':
|
||||||
this.emitEvent(EditorEvent.EDITOR_DELETE);
|
this.emitEvent(EditorEvent.EDITOR_DELETE);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
//do stuff
|
//do stuff
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
document.getElementById("edit").dispatchEvent(new Event("input"));
|
document.getElementById('edit').dispatchEvent(new Event('input'));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export default TextEditor;
|
export default TextEditor;
|
||||||
|
|||||||
Loading…
Reference in New Issue