projects/fipamo
projects/fipamo
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases 24 Packages Wiki Activity Actions

Replaced Moment with Carbon #84

Merged
Ghost merged 148 commits from develop into beta 2022-09-22 05:53:36 +02:00
Conversation 1 Commits 148 Files changed 306 +105 -170
6 changed files with 105 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit a53723f7c8 - Show all commits

195
public/assets/css/dash/page-editor.css
View file

@ -1,12 +1,12 @@
/* FILE MANAGER */
main > section[role="file-manager"] {
main > section.file-manager {
width: 100%;
background: var(--primary-highlight);
padding: 20px 0;
margin-top: 75px;
}
main > section[role="file-manager"] label[role="list-title"] {
main > section.file-manager label.list-title {
width: 100%;
max-width: 900px;
margin: 0 auto;
@ -14,7 +14,7 @@ main > section[role="file-manager"] label[role="list-title"] {
color: var(--primary);
}
main > section[role="file-manager"] > div[role="file-drop"] {
main > section.file-manager > div.file-drop {
display: flex;
align-items: center;
justify-content: center;
@ -28,8 +28,8 @@ main > section[role="file-manager"] > div[role="file-drop"] {
margin: 10px auto;
}
main > section[role="file-manager"] > div[role="page-images-list"],
main > section[role="file-manager"] > div[role="page-files-list"] {
main > section.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list {
max-width: 900px;
width: 100%;
margin: 10px auto;
@ -38,8 +38,8 @@ main > section[role="file-manager"] > div[role="page-files-list"] {
gap: 10px;
}
main > section[role="file-manager"] > div[role="page-images-list"] > div,
main > section[role="file-manager"] > div[role="page-files-list"] > div {
main > section.file-manager > div.page-images-list > div,
main > section.file-manager > div.page-files-list > div {
width: 100%;
height: 150px;
border-radius: 3px;
@ -48,117 +48,79 @@ main > section[role="file-manager"] > div[role="page-files-list"] > div {
cursor: pointer;
}
main
> section[role="file-manager"]
> div[role="page-images-list"]
> div
> div.item-progress {
main > section.file-manager > div.page-images-list > div > div.item-progress {
width: 100%;
height: 100%;
background: var(--primary);
}
main > section[role="text-editor"] > div[role="text-editor-control"] button {
main > section.text-editor > div.text-editor-control button {
border-radius: 0;
}
main > section[role="text-editor"] > div[role="text-editor-control"] button > i {
main > section.text-editor > div.text-editor-control button > i {
font-size: 1.6em;
}
main
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(1) {
main > section.text-editor > div.text-editor-control > button:nth-child(1) {
border-radius: 3px 0 0 3px;
}
main
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(10) {
main > section.text-editor > div.text-editor-control > button:nth-child(10) {
border-radius: 0 3px 3px 0;
}
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 {
main > section.file-manager > div.page-images-list > div > button.media-remove,
main > section.file-manager > div.page-files-list > div > button.media-remove {
color: var(--white);
margin: 5px;
padding: 10px 15px 7px;
font-size: 1.5em;
}
main
> section[role="file-manager"]
> div[role="page-images-list"]
> div.video-item
> video {
main > section.file-manager > div.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 {
main > section.file-manager > div.page-images-list > div.video-item > button,
main > section.file-manager > div.page-files-list > div.audio-item > button,
main > section.file-manager > div.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 {
main > section.file-manager > div.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 {
main > section.file-manager > div.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 {
main > section.file-manager > div.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 {
main > section.file-manager > div.page-files-list > div.audio-item > audio {
height: 100%;
width: 100%;
}
/* PAGE META */
main > section[role="page-meta"] {
main > section.page-meta {
width: 100%;
background: var(--secondary-highlight);
}
main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
main > section.page-meta > div.page-meta-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
@ -168,7 +130,7 @@ main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
color: var(--secondary);
}
main section[role="page-meta"] textarea#post-title-text {
main section.page-meta textarea#post-title-text {
font-family: var(--base-type);
width: 100%;
height: 80px;
@ -176,14 +138,14 @@ main section[role="page-meta"] textarea#post-title-text {
color: var(--primary);
}
main section[role="page-meta"] textarea#post-tags {
main section.page-meta textarea#post-tags {
font-family: var(--base-type);
width: 100%;
height: 80px;
color: var(--primary);
}
main section[role="page-meta"] select {
main section.page-meta select {
background: var(--primary);
color: var(--secondary);
border-radius: 3px;
@ -194,15 +156,11 @@ main section[role="page-meta"] select {
font-size: 1.5em;
}
main section[role="page-meta"] div[role="page-options"] {
main section.page-meta div.page-options {
width: 100%;
}
main
section[role="page-meta"]
div[role="page-meta-wrapper"]
div[role="page-options"]
button {
main section.page-meta div.page-meta-wrapper div.page-options button {
width: 25%;
height: 45px;
transition: all 0.3s linear;
@ -214,45 +172,36 @@ main
}
main
> section[role="page-meta"]
> div[role="page-meta-wrapper"]
> div[role="page-options"]
> section.page-meta
> div.page-meta-wrapper
> div.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 {
main > section.page-meta > div.page-meta-wrapper > div.page-options > a > button {
border-radius: 0 3px 3px 0;
}
main
section[role="page-meta"]
div[role="page-meta-wrapper"]
div[role="page-created"]
input {
main section.page-meta div.page-meta-wrapper div.page-created input {
display: none;
visibility: hidden;
}
/* TEXT EDITOR */
main > section[role="text-editor"] {
main > section.text-editor {
width: 100%;
max-width: 900px;
margin: 10px auto;
}
main section[role="text-editor"] .icon-hide {
main section.text-editor .icon-hide {
display: none;
visibility: hidden;
}
main > section[role="text-editor"] > div[role="text-editor-control"] {
main > section.text-editor > div.text-editor-control {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
@ -264,7 +213,7 @@ main > section[role="text-editor"] > div[role="text-editor-control"] {
top: 65px;
}
main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
main > section.text-editor > div.edit-post-wrapper {
width: 100%;
max-width: 900px;
border-radius: 5px;
@ -272,13 +221,13 @@ main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
margin: 10px 0;
}
main > section[role="text-editor"] > div[role="edit-post-wrapper"] textarea:focus {
main > section.text-editor > div.edit-post-wrapper textarea:focus {
outline: none;
border-color: var(--secondary-highlight);
}
main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
main section.text-editor div.edit-post-wrapper #edit,
main section.text-editor div.edit-post-wrapper #highlight {
font-family: var(--mono-type);
border: 0;
width: 100%;
@ -297,25 +246,25 @@ main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
margin: 0;
}
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight-content {
main section.text-editor div.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 {
main > section.text-editor > div.edit-post-wrapper > #edit {
z-index: 1;
background: transparent;
color: transparent;
caret-color: var(--secondary-highlight);
}
main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #highlight {
main > section.text-editor > div.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 {
main section.text-editor div.edit-post-wrapper pre,
main section.text-editor div.edit-post-wrapper pre code {
padding: 0;
margin: 0;
}
@ -323,68 +272,56 @@ main section[role="text-editor"] div[role="edit-post-wrapper"] pre code {
/* RESPONSIVE */
@media only screen and (max-width: 900px) {
main > section[role="file-manager"] > div[role="file-drop"],
main > section[role="file-manager"] > div[role="page-images-list"],
main > section[role="file-manager"] > div[role="page-files-list"],
main > section[role="page-meta"] > div[role="page-meta-wrapper"],
main > section[role="text-editor"] {
main > section.file-manager > div.file-drop,
main > section.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list,
main > section.page-meta > div.page-meta-wrapper,
main > section.text-editor {
width: 97%;
}
}
@media only screen and (max-width: 480px) {
main > section[role="file-manager"] > div[role="page-images-list"],
main > section[role="file-manager"] > div[role="page-files-list"] {
main > section.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list {
grid-template-columns: 1fr 1fr 1fr;
}
main > section[role="file-manager"] > div[role="file-drop"],
main > section[role="file-manager"] > div[role="page-images-list"],
main > section[role="file-manager"] > div[role="page-files-list"],
main > section[role="page-meta"] > div[role="page-meta-wrapper"],
main > section[role="text-editor"] {
main > section.file-manager > div.file-drop,
main > section.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list,
main > section.page-meta > div.page-meta-wrapper,
main > section.text-editor {
width: 95%;
}
main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
main > section.page-meta > div.page-meta-wrapper {
grid-template-columns: 1fr;
}
main > section[role="text-editor"] > div[role="text-editor-control"] {
main > section.text-editor > div.text-editor-control {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
main
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(1) {
main > section.text-editor > div.text-editor-control > button:nth-child(1) {
border-radius: 3px 0;
}
main
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(5) {
main > section.text-editor > div.text-editor-control > button:nth-child(5) {
border-radius: 0 3px;
}
main
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(6) {
main > section.text-editor > div.text-editor-control > button:nth-child(6) {
border-radius: 0 0 0 3px;
}
main
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(10) {
main > section.text-editor > div.text-editor-control > button:nth-child(10) {
border-radius: 0 0 3px;
}
main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
main section.text-editor div.edit-post-wrapper #edit,
main section.text-editor div.edit-post-wrapper #highlight {
font-size: 0.8em;
}
}

2
public/assets/scripts/dash/app/actions/PageActions.js
View file

@ -10,7 +10,7 @@ export default class PostActions {
collectInfo(files) {
return new Promise((resolve, reject) => {
let pageInfo = [];
let pageRef = document.querySelector('[role="file-manager"]');
let pageRef = document.querySelector('.file-manager');
//process html content for storage
let txt = document.createElement('textarea');
txt.innerHTML = document.getElementById('highlight-content').innerHTML;

20
public/assets/scripts/dash/app/controllers/PageEditor.js
View file

@ -28,23 +28,23 @@ export default class PostEditor {
this.postUUID = null;
this.postLayout = null;
this.fm = null;
if (document.querySelector('[role="file-manager"]').getAttribute('data-index')) {
if (document.querySelector('.file-manager').getAttribute('data-index')) {
this.postID = document
.querySelector('[role="file-manager"]')
.querySelector('.file-manager')
.getAttribute('data-index');
this.postUUID = document
.querySelector('[role="file-manager"]')
.querySelector('.file-manager')
.getAttribute('data-uuid');
this.postLayout = document
.querySelector('[role="file-manager"]')
.querySelector('.file-manager')
.getAttribute('data-layout');
}
if (document.getElementById('edit')) {
this.editor = new TextEditor(
document.getElementById('edit'),
document.querySelector('[role="file-manager"]').offsetHeight +
document.querySelector('[role="page-meta"]').offsetHeight +
document.querySelector('[role="text-editor"]').offsetHeight
document.querySelector('.page-meta').offsetHeight +
document.querySelector('.file-manager').offsetHeight +
document.querySelector('.text-editor').offsetHeight
);
this.editor.addListener(
EditorEvent.EDITOR_DELETE,
@ -89,13 +89,13 @@ export default class PostEditor {
// methods
//--------------------------
start() {
if (document.querySelector('[role="file-drop"]')) {
if (document.querySelector('.file-drop')) {
//insert fileManager here
this.fm = new FileManager(
document.querySelector('[role="file-drop"]'),
document.querySelector('.file-drop'),
document.getElementById('page-files-upload'),
document.getElementById('page-images-list'),
document.querySelector('[role="page-files-list"]')
document.querySelector('.page-files-list')
);
var optionButtons = document.querySelectorAll('.post-option-btn');
for (var i = 0, length = optionButtons.length; i < length; i++) {

14
public/assets/scripts/dash/app/ui/TextEditor.js
View file

@ -18,22 +18,20 @@ class TextEditor extends EventEmitter {
constructor(textEditor, scrollLimit) {
super();
document
.querySelector('[role="text-editor-control"]')
.addEventListener('scroll', e => {
console.log('HERE');
});
document.querySelector('.text-editor-control').addEventListener('scroll', e => {
console.log('HERE');
});
document.body.addEventListener('scroll', e => {
var fixLimit = scrollLimit;
//console.log('POSITION', document.body.scrollTop + ' : ' + fixLimit);
if (document.body.scrollTop + 5 >= fixLimit) {
document
.querySelector('[role="text-editor-control"]')
.querySelector('.text-editor-control')
.classList.add('control-freeze');
} else {
document
.querySelector('[role="text-editor-control"]')
.querySelector('.text-editor-control')
.classList.remove('control-freeze');
}
});
@ -47,7 +45,7 @@ class TextEditor extends EventEmitter {
.replace(new RegExp('&', 'g'), '&amp;')
.replace(new RegExp('<', 'g'), '&lt;');
let editorHeight = document.getElementById('highlight').offsetHeight;
document.querySelector('[role="edit-post-wrapper"]').style.height =
document.querySelector('.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

42
resources/views/back/page.blade.php
View file

@ -32,21 +32,21 @@
@endphp
@section('main-content')
<section data-index="{{ $id }}" data-uuid="{{ $uuid }}" data-slug="{{ $slug }}" data-layout="{{ $layout }}" role="file-manager">
<section data-index="{{ $id }}" data-uuid="{{ $uuid }}" data-slug="{{ $slug }}" data-layout="{{ $layout }}" class="file-manager">
@if($feature == '')
<div role="file-drop">
<div class="file-drop">
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
</div>
<label role="list-title">IMAGES AND VIDEO</label>
<div id="page-images-list" role="page-images-list"></div>
<label role="list-title">FILES</label>
<div role="page-files-list"></div>
<label class="list-title">IMAGES AND VIDEO</label>
<div id="page-images-list" class="page-images-list"></div>
<label class="list-title">FILES</label>
<div class="page-files-list"></div>
@else
<div role="file-drop">
<div class="file-drop">
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
</div>
<label role="list-title">IMAGES AND VIDEO</label>
<div id="page-images-list" role="page-images-list">
<label class="list-title">IMAGES AND VIDEO</label>
<div id="page-images-list" class="page-images-list">
@if(count($media)>1)
@foreach($media as $item)
@if($item['type'] == "mp4")
@ -80,8 +80,8 @@
@endif
@endif
</div>
<label role="list-title">FILES</label>
<div role="page-files-list">
<label class="list-title">FILES</label>
<div class="page-files-list">
@if(count($files) > 1)
@foreach($files as $item)
@php
@ -135,17 +135,17 @@
</div>
@endif
</section><section role="page-meta">
<div role="page-meta-wrapper">
<div role="page-title">
</section><section class="page-meta">
<div class="page-meta-wrapper">
<div class="page-title">
<strong>TITLE</strong>
<textarea id="post-title-text" type="text" name="post-title-text" class="post-edit" placeholder="TITLE">{{ $title }}</textarea>
</div>
<div role="page-tags">
<div class="page-tags">
<strong>TAGS</strong>
<textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">{{ $tags }}</textarea>
</div>
<div role="page-layouts">
<div class="page-layouts">
<strong>LAYOUTS</strong>
<select id="page-templates">
@foreach($views as $view)
@ -157,19 +157,19 @@
@endforeach
</select>
</div>
<div role="page-options">
<div class="page-options">
<strong>OPTIONS</strong>
@spaceless
@include('includes.options')
@endspaceless
</div>
<div role="page-updated">
<div class="page-updated">
<strong>UPDATED</strong>
<span id="post-date" type="text">
{{ $updated }}
</span>
</div>
<div role="page-created">
<div class="page-created">
<strong>CREATED</strong>
<span id="post-date" type="text">
{{ $date }}
@ -180,11 +180,11 @@
</div>
</div>
</section>
<section role="text-editor">
<section class="text-editor">
@spaceless
@include('includes.editor')
@endspaceless
<div role="edit-post-wrapper">
<div class="edit-post-wrapper">
<textarea id="edit" spellcheck="false" class="language-md">{{ $content }}</textarea>
<pre id="highlight"><code id="highlight-content" class="language-md"></code></pre>
</div>

2
resources/views/includes/editor.blade.php
View file

@ -1,4 +1,4 @@
<div role="text-editor-control">
<div class="text-editor-control">
<button id="edit-bold" class="content-editor-btn-text editor-button" title="bold">
<svg id="edit-bold" role="icon">
<use id="edit-bold" xlink:href="/assets/images/global/sprite.svg#tabler-bold"/>