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": [
|
||||
"stylelint-config-standard-scss",
|
||||
"stylelint-config-prettier-scss"
|
||||
]
|
||||
"extends": ["stylelint-config-standard"]
|
||||
}
|
||||
|
||||
@ -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" %}
|
||||
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{{ title }}
|
||||
{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfvgy">
|
||||
{% endblock %}
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfvgy">
|
||||
{% endblock %}
|
||||
|
||||
{% block mainContent %}
|
||||
<div id="post-index">
|
||||
<div id="post-index-wrapper">
|
||||
<div id="post-index-header">
|
||||
<div id="post-index-header-left">
|
||||
{{ filter }} Pages
|
||||
</div>
|
||||
<div id="post-index-header-right">
|
||||
<a href="/dashboard/pages/all" title="view all pages">
|
||||
<button>
|
||||
<svg >
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
|
||||
</svg>
|
||||
{{ stats['all'] }}
|
||||
</button>
|
||||
</a>
|
||||
<a href="/dashboard/pages/published" title="view publised pages">
|
||||
<button>
|
||||
<svg >
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
|
||||
</svg>
|
||||
{{ stats['published'] }}
|
||||
</button>
|
||||
</a>
|
||||
<a href="/dashboard/pages/deleted" title="view deleted pages">
|
||||
<button>
|
||||
<svg >
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-circle-with-cross"/>
|
||||
</svg>
|
||||
{{ stats['deleted'] }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
{% block mainContent %}
|
||||
<div id="post-index">
|
||||
<div id="post-index-wrapper">
|
||||
<div id="post-index-header">
|
||||
<div id="post-index-header-left">
|
||||
{{ filter }}
|
||||
Pages
|
||||
</div>
|
||||
<div id="post-index-header-right">
|
||||
<a href="/dashboard/pages/all" title="view all pages">
|
||||
<button>
|
||||
<svg>
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
|
||||
</svg>
|
||||
{{ stats['all'] }}
|
||||
</button>
|
||||
</a>
|
||||
<a href="/dashboard/pages/published" title="view publised pages">
|
||||
<button>
|
||||
<svg>
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
|
||||
</svg>
|
||||
{{ stats['published'] }}
|
||||
</button>
|
||||
</a>
|
||||
<a href="/dashboard/pages/deleted" title="view deleted pages">
|
||||
<button>
|
||||
<svg>
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-circle-with-cross"/>
|
||||
</svg>
|
||||
{{ stats['deleted'] }}
|
||||
</button>
|
||||
</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">
|
||||
</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.
|
||||
</video>
|
||||
<label>
|
||||
{{ page.title }}
|
||||
</label>
|
||||
<div id="meta">
|
||||
{{ include("dash/partials/recent-options.twig") }}
|
||||
</div>
|
||||
</div>
|
||||
Sorry, your browser doesn't support embedded videos.
|
||||
</video>
|
||||
<label>
|
||||
{{ page.title }}
|
||||
</label>
|
||||
<div id="meta">
|
||||
{{ include("dash/partials/recent-options.twig") }}
|
||||
</div>
|
||||
</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 %}
|
||||
</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 %}
|
||||
{% 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 %}
|
||||
|
||||
{% block javascripts %}
|
||||
<script src="/assets/scripts/Start.js" type="text/javascript"></script>
|
||||
{% endblock %}
|
||||
</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' %}
|
||||
{% else %}
|
||||
{% set menu = 'false' %}
|
||||
{% endif %}
|
||||
|
||||
{% if page['featured'] %}
|
||||
{% if page['featured'] %}
|
||||
{% set featured = 'true' %}
|
||||
{% else %}
|
||||
{% set featured = 'false' %}
|
||||
{% endif %}
|
||||
|
||||
{% if page['published'] %}
|
||||
{% if page['published'] %}
|
||||
{% set published = 'true' %}
|
||||
{% else %}
|
||||
{% set published = 'false' %}
|
||||
{% endif %}
|
||||
|
||||
<div id="post-options">
|
||||
<br>
|
||||
<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"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="option-feature" class="option-inactive post-option-btn" data-active="{{ featured }}" title='Feature'>
|
||||
<svg id="option-feature-icon" viewbox="0 0 20 20" class="icons">
|
||||
<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" 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">
|
||||
</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>
|
||||
</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" role="icon">
|
||||
<use id="option-preview-icon" xlink:href="/assets/images/global/sprite.svg#entypo-eye"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,43 +1,35 @@
|
||||
{
|
||||
"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": "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"
|
||||
"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"
|
||||
},
|
||||
"source": "src/com/Start.js",
|
||||
"main": "public/assets/scripts/start.js",
|
||||
"targets": {
|
||||
"main": {
|
||||
"includeNodeModules": true
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"watch": "parcel watch",
|
||||
"build": "parcel build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.21.3",
|
||||
"babel-plugin-prismjs": "^2.1.0",
|
||||
"parcel": "^2.8.3",
|
||||
"prettier": "^2.8.4",
|
||||
"stylelint": "^15.3.0",
|
||||
"stylelint-config-standard": "^31.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"animejs": "^3.2.1",
|
||||
"caret-pos": "^2.0.0",
|
||||
"prismjs": "^1.29.0",
|
||||
"sortablejs": "^1.15.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 { position } from "caret-pos";
|
||||
import EventEmitter from "../events/EventEmitter";
|
||||
import * as EditorEvent from "../events/EditorEvent";
|
||||
import Prism from "prismjs";
|
||||
import * as DataEvent from '../events/DataEvent';
|
||||
import { position } from 'caret-pos';
|
||||
import EventEmitter from '../events/EventEmitter';
|
||||
import * as EditorEvent from '../events/EditorEvent';
|
||||
import Prism from 'prismjs';
|
||||
class TextEditor extends EventEmitter {
|
||||
/**
|
||||
* Text Editor UI Component
|
||||
* @constructor
|
||||
* @param {object} textEditor - Text area that will edit text
|
||||
* @param {number} scrollLimit - YPos where editor position will become fixed
|
||||
*/
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor(textEditor, scrollLimit) {
|
||||
super();
|
||||
/**
|
||||
* Text Editor UI Component
|
||||
* @constructor
|
||||
* @param {object} textEditor - Text area that will edit text
|
||||
* @param {number} scrollLimit - YPos where editor position will become fixed
|
||||
*/
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor(textEditor, scrollLimit) {
|
||||
super();
|
||||
|
||||
document.getElementById("edit").addEventListener("input", (e) => {
|
||||
let result_element = document.querySelector("#highlight-content");
|
||||
this.textEditor = textEditor;
|
||||
document.getElementById('edit').addEventListener('input', e => {
|
||||
let result_element = document.querySelector('#highlight-content');
|
||||
this.textEditor = textEditor;
|
||||
|
||||
// Update code
|
||||
let text = e.target.value;
|
||||
result_element.innerHTML = text
|
||||
.replace(new RegExp("&", "g"), "&")
|
||||
.replace(new RegExp("<", "g"), "<");
|
||||
let editorHeight = document.getElementById("highlight").offsetHeight;
|
||||
document.getElementById("edit-post-wrapper").style.height =
|
||||
editorHeight + "px";
|
||||
e.target.style.height = editorHeight + 30 + "px"; //TODO: yeah, it's ugly but it works for now, fix soon
|
||||
// Syntax Highlight
|
||||
Prism.highlightElement(result_element);
|
||||
});
|
||||
document.getElementById("edit").addEventListener("scroll", (e) => {
|
||||
/* Scroll result to scroll coords of event - sync with textarea */
|
||||
let result_element = document.querySelector("#highlight");
|
||||
// Get and set x and y
|
||||
result_element.scrollTop = e.scrollTop;
|
||||
result_element.scrollLeft = e.scrollLeft;
|
||||
});
|
||||
document.getElementById("edit").dispatchEvent(new Event("input"));
|
||||
this.setInputs();
|
||||
// Update code
|
||||
let text = e.target.value;
|
||||
result_element.innerHTML = text
|
||||
.replace(new RegExp('&', 'g'), '&')
|
||||
.replace(new RegExp('<', 'g'), '<');
|
||||
let editorHeight = document.getElementById('highlight').offsetHeight;
|
||||
document.querySelector('[role="edit-post-wrapper"]').style.height =
|
||||
editorHeight + 'px';
|
||||
e.target.style.height = editorHeight + 30 + 'px'; //TODO: yeah, it's ugly but it works for now, fix soon
|
||||
// Syntax Highlight
|
||||
Prism.highlightElement(result_element);
|
||||
});
|
||||
document.getElementById('edit').addEventListener('scroll', e => {
|
||||
/* Scroll result to scroll coords of event - sync with textarea */
|
||||
let result_element = document.querySelector('#highlight');
|
||||
// Get and set x and y
|
||||
result_element.scrollTop = e.scrollTop;
|
||||
result_element.scrollLeft = e.scrollLeft;
|
||||
});
|
||||
document.getElementById('edit').dispatchEvent(new Event('input'));
|
||||
this.setInputs();
|
||||
|
||||
//freeze editor formatting so it doesn't scroll off screen
|
||||
window.addEventListener("scroll", () => {
|
||||
var fixLimit = scrollLimit;
|
||||
//freeze editor formatting so it doesn't scroll off screen
|
||||
window.addEventListener('scroll', () => {
|
||||
var fixLimit = scrollLimit;
|
||||
|
||||
if (window.pageYOffset + 5 >= fixLimit) {
|
||||
document.getElementById("edit-control").style.position = "fixed";
|
||||
} else {
|
||||
document.getElementById("edit-control").style.position = "relative";
|
||||
}
|
||||
});
|
||||
}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
setInputs() {
|
||||
var editorButtons = document.querySelectorAll(".editor-button");
|
||||
for (var i = 0, length = editorButtons.length; i < length; i++) {
|
||||
editorButtons[i].addEventListener(
|
||||
"click",
|
||||
(e) => this.handleEditorOption(e),
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
notify(type, data) {
|
||||
switch (type) {
|
||||
case DataEvent.PAGE_UPDATED:
|
||||
document.getElementById("submit-update").classList.add("icon-hide");
|
||||
document.getElementById("submit-good").classList.remove("icon-hide");
|
||||
document.getElementById("edit-update").classList.remove("submit-start");
|
||||
document.getElementById("edit-update").classList.add("submit-cool");
|
||||
setTimeout(() => {
|
||||
document
|
||||
.getElementById("submit-update")
|
||||
.classList.remove("icon-hide");
|
||||
document.getElementById("submit-good").classList.add("icon-hide");
|
||||
document.getElementById("edit-update").classList.add("submit-start");
|
||||
document
|
||||
.getElementById("edit-update")
|
||||
.classList.remove("submit-cool");
|
||||
}, 2000);
|
||||
break;
|
||||
case DataEvent.PAGE_ADDED:
|
||||
// do nothing
|
||||
break;
|
||||
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE: {
|
||||
let len = this.textEditor.value.length;
|
||||
let start = this.textEditor.selectionStart;
|
||||
let end = this.textEditor.selectionEnd;
|
||||
let insert = "![image alt text](" + data + ")";
|
||||
if (window.pageYOffset + 5 >= fixLimit) {
|
||||
document.getElementById('edit-control').style.position = 'fixed';
|
||||
} else {
|
||||
document.getElementById('edit-control').style.position = 'relative';
|
||||
}
|
||||
});
|
||||
}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
setInputs() {
|
||||
var editorButtons = document.querySelectorAll('.editor-button');
|
||||
for (var i = 0, length = editorButtons.length; i < length; i++) {
|
||||
editorButtons[i].addEventListener(
|
||||
'click',
|
||||
e => this.handleEditorOption(e),
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
notify(type, data) {
|
||||
switch (type) {
|
||||
case DataEvent.PAGE_UPDATED:
|
||||
document.getElementById('submit-update').classList.add('icon-hide');
|
||||
document.getElementById('submit-good').classList.remove('icon-hide');
|
||||
document.getElementById('edit-update').classList.remove('submit-start');
|
||||
document.getElementById('edit-update').classList.add('submit-cool');
|
||||
setTimeout(() => {
|
||||
document
|
||||
.getElementById('submit-update')
|
||||
.classList.remove('icon-hide');
|
||||
document.getElementById('submit-good').classList.add('icon-hide');
|
||||
document.getElementById('edit-update').classList.add('submit-start');
|
||||
document
|
||||
.getElementById('edit-update')
|
||||
.classList.remove('submit-cool');
|
||||
}, 2000);
|
||||
break;
|
||||
case DataEvent.PAGE_ADDED:
|
||||
// do nothing
|
||||
break;
|
||||
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE: {
|
||||
let len = this.textEditor.value.length;
|
||||
let start = this.textEditor.selectionStart;
|
||||
let end = this.textEditor.selectionEnd;
|
||||
let insert = '';
|
||||
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
document.getElementById("edit").dispatchEvent(new Event("input"));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
handleEditorOption(e) {
|
||||
e.preventDefault();
|
||||
let len = this.textEditor.value.length;
|
||||
let start = this.textEditor.selectionStart;
|
||||
let end = this.textEditor.selectionEnd;
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
document.getElementById('edit').dispatchEvent(new Event('input'));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
handleEditorOption(e) {
|
||||
e.preventDefault();
|
||||
let len = this.textEditor.value.length;
|
||||
let start = this.textEditor.selectionStart;
|
||||
let end = this.textEditor.selectionEnd;
|
||||
|
||||
let selectedText = this.textEditor.value.substring(start, end);
|
||||
let insert = "";
|
||||
switch (e.target.id) {
|
||||
case "edit-bold":
|
||||
insert = "**" + selectedText + "**";
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
let selectedText = this.textEditor.value.substring(start, end);
|
||||
let insert = '';
|
||||
switch (e.target.id) {
|
||||
case 'edit-bold':
|
||||
insert = '**' + selectedText + '**';
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
|
||||
break;
|
||||
case "edit-italic":
|
||||
insert = "*" + selectedText + "*";
|
||||
//console.log(this.textEditor);
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case "edit-strikethrough":
|
||||
insert = "~~" + selectedText + "~~";
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case "edit-header1":
|
||||
insert = "# " + selectedText + "\n";
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case "edit-header2":
|
||||
insert = "## " + selectedText + "\n";
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case "edit-header3":
|
||||
insert = "### " + selectedText + "\n";
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case "edit-link":
|
||||
{
|
||||
let url = prompt("Let's get that url, boss");
|
||||
let link = url.toLowerCase();
|
||||
insert = "[" + selectedText + "](" + link + ")";
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
}
|
||||
break;
|
||||
case "edit-image":
|
||||
this.caretPos = position(this.textEditor).pos;
|
||||
this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
|
||||
break;
|
||||
case "submit-save":
|
||||
case "edit-save":
|
||||
this.emitEvent(EditorEvent.EDITOR_SAVE);
|
||||
break;
|
||||
case "submit-update":
|
||||
case "edit-update":
|
||||
this.emitEvent(EditorEvent.EDITOR_UPDATE);
|
||||
break;
|
||||
case "edit-delete":
|
||||
this.emitEvent(EditorEvent.EDITOR_DELETE);
|
||||
break;
|
||||
default:
|
||||
//do stuff
|
||||
break;
|
||||
}
|
||||
document.getElementById("edit").dispatchEvent(new Event("input"));
|
||||
}
|
||||
break;
|
||||
case 'edit-italic':
|
||||
insert = '*' + selectedText + '*';
|
||||
//console.log(this.textEditor);
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case 'edit-strikethrough':
|
||||
insert = '~~' + selectedText + '~~';
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case 'edit-header1':
|
||||
insert = '# ' + selectedText + '\n';
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case 'edit-header2':
|
||||
insert = '## ' + selectedText + '\n';
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case 'edit-header3':
|
||||
insert = '### ' + selectedText + '\n';
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case 'edit-link':
|
||||
{
|
||||
let url = prompt("Let's get that url, boss");
|
||||
let link = url.toLowerCase();
|
||||
insert = '[' + selectedText + '](' + link + ')';
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
}
|
||||
break;
|
||||
case 'edit-image':
|
||||
this.caretPos = position(this.textEditor).pos;
|
||||
this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
|
||||
break;
|
||||
case 'submit-save':
|
||||
case 'edit-save':
|
||||
this.emitEvent(EditorEvent.EDITOR_SAVE);
|
||||
break;
|
||||
case 'submit-update':
|
||||
case 'edit-update':
|
||||
this.emitEvent(EditorEvent.EDITOR_UPDATE);
|
||||
break;
|
||||
case 'edit-delete':
|
||||
this.emitEvent(EditorEvent.EDITOR_DELETE);
|
||||
break;
|
||||
default:
|
||||
//do stuff
|
||||
break;
|
||||
}
|
||||
document.getElementById('edit').dispatchEvent(new Event('input'));
|
||||
}
|
||||
}
|
||||
export default TextEditor;
|
||||
|
||||
Loading…
Reference in New Issue