xarvh/fipamo
1
0
Fork 0
forked from projects/fipamo
Code Pull requests Activity

changed role attritubet to class in page editor ui

Browse source 
the role attribute is being used incorrectly through out the site, which
is bad for screen reader, so they need to be removed and replaced with
the class attribute

the page editor was the biggest culprit, so that one has been converted
first
This commit is contained in:
ro 2024-03-25 12:53:31 -06:00
parent 3b5c753c9a
commit a53723f7c8
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
6 changed files with 105 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,12 @@
/* FILE MANAGER */ /* FILE MANAGER */
main > section[role="file-manager"] { main > section.file-manager {
width: 100%; width: 100%;
background: var(--primary-highlight); background: var(--primary-highlight);
padding: 20px 0; padding: 20px 0;
margin-top: 75px; margin-top: 75px;
} }
main > section[role="file-manager"] label[role="list-title"] { main > section.file-manager label.list-title {
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
@ -14,7 +14,7 @@ main > section[role="file-manager"] label[role="list-title"] {
color: var(--primary); color: var(--primary);
} }
main > section[role="file-manager"] > div[role="file-drop"] { main > section.file-manager > div.file-drop {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -28,8 +28,8 @@ main > section[role="file-manager"] > div[role="file-drop"] {
margin: 10px auto; margin: 10px auto;
} }
main > section[role="file-manager"] > div[role="page-images-list"], main > section.file-manager > div.page-images-list,
main > section[role="file-manager"] > div[role="page-files-list"] { main > section.file-manager > div.page-files-list {
max-width: 900px; max-width: 900px;
width: 100%; width: 100%;
margin: 10px auto; margin: 10px auto;
@ -38,8 +38,8 @@ main > section[role="file-manager"] > div[role="page-files-list"] {
gap: 10px; gap: 10px;
} }
main > section[role="file-manager"] > div[role="page-images-list"] > div, main > section.file-manager > div.page-images-list > div,
main > section[role="file-manager"] > div[role="page-files-list"] > div { main > section.file-manager > div.page-files-list > div {
width: 100%; width: 100%;
height: 150px; height: 150px;
border-radius: 3px; border-radius: 3px;
@ -48,117 +48,79 @@ main > section[role="file-manager"] > div[role="page-files-list"] > div {
cursor: pointer; cursor: pointer;
} }
main main > section.file-manager > div.page-images-list > div > div.item-progress {
> section[role="file-manager"]
> div[role="page-images-list"]
> div
> div.item-progress {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--primary); 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; 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; font-size: 1.6em;
} }
main main > section.text-editor > div.text-editor-control > button:nth-child(1) {
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(1) {
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
} }
main main > section.text-editor > div.text-editor-control > button:nth-child(10) {
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(10) {
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
} }
main main > section.file-manager > div.page-images-list > div > button.media-remove,
> section[role="file-manager"] main > section.file-manager > div.page-files-list > div > button.media-remove {
> 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); color: var(--white);
margin: 5px; margin: 5px;
padding: 10px 15px 7px; padding: 10px 15px 7px;
font-size: 1.5em; font-size: 1.5em;
} }
main main > section.file-manager > div.page-images-list > div.video-item > video {
> section[role="file-manager"]
> div[role="page-images-list"]
> div.video-item
> video {
object-fit: cover; object-fit: cover;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
main main > section.file-manager > div.page-images-list > div.video-item > button,
> section[role="file-manager"] main > section.file-manager > div.page-files-list > div.audio-item > button,
> div[role="page-images-list"] main > section.file-manager > div.page-files-list > div.file-item > button {
> 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; position: absolute;
top: 0; top: 0;
left: 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 / background: url("/assets/images/global/upload-audio.png") no-repeat center center /
cover; 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; 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; position: absolute;
bottom: 0; bottom: 0;
background: var(--secondary); background: var(--secondary);
padding: 2px; padding: 2px;
} }
main main > section.file-manager > div.page-files-list > div.audio-item > audio {
> section[role="file-manager"]
> div[role="page-files-list"]
> div.audio-item
> audio {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
/* PAGE META */ /* PAGE META */
main > section[role="page-meta"] { main > section.page-meta {
width: 100%; width: 100%;
background: var(--secondary-highlight); background: var(--secondary-highlight);
} }
main > section[role="page-meta"] > div[role="page-meta-wrapper"] { main > section.page-meta > div.page-meta-wrapper {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 20px; gap: 20px;
@ -168,7 +130,7 @@ main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
color: var(--secondary); 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); font-family: var(--base-type);
width: 100%; width: 100%;
height: 80px; height: 80px;
@ -176,14 +138,14 @@ main section[role="page-meta"] textarea#post-title-text {
color: var(--primary); color: var(--primary);
} }
main section[role="page-meta"] textarea#post-tags { main section.page-meta textarea#post-tags {
font-family: var(--base-type); font-family: var(--base-type);
width: 100%; width: 100%;
height: 80px; height: 80px;
color: var(--primary); color: var(--primary);
} }
main section[role="page-meta"] select { main section.page-meta select {
background: var(--primary); background: var(--primary);
color: var(--secondary); color: var(--secondary);
border-radius: 3px; border-radius: 3px;
@ -194,15 +156,11 @@ main section[role="page-meta"] select {
font-size: 1.5em; font-size: 1.5em;
} }
main section[role="page-meta"] div[role="page-options"] { main section.page-meta div.page-options {
width: 100%; width: 100%;
} }
main main section.page-meta div.page-meta-wrapper div.page-options button {
section[role="page-meta"]
div[role="page-meta-wrapper"]
div[role="page-options"]
button {
width: 25%; width: 25%;
height: 45px; height: 45px;
transition: all 0.3s linear; transition: all 0.3s linear;
@ -214,45 +172,36 @@ main
} }
main main
> section[role="page-meta"] > section.page-meta
> div[role="page-meta-wrapper"] > div.page-meta-wrapper
> div[role="page-options"] > div.page-options
> button.post-option-btn:nth-child(3) { > button.post-option-btn:nth-child(3) {
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
} }
main main > section.page-meta > div.page-meta-wrapper > div.page-options > a > button {
> section[role="page-meta"]
> div[role="page-meta-wrapper"]
> div[role="page-options"]
> a
> button {
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
} }
main main section.page-meta div.page-meta-wrapper div.page-created input {
section[role="page-meta"]
div[role="page-meta-wrapper"]
div[role="page-created"]
input {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
/* TEXT EDITOR */ /* TEXT EDITOR */
main > section[role="text-editor"] { main > section.text-editor {
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
margin: 10px auto; margin: 10px auto;
} }
main section[role="text-editor"] .icon-hide { main section.text-editor .icon-hide {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
main > section[role="text-editor"] > div[role="text-editor-control"] { main > section.text-editor > div.text-editor-control {
display: grid; display: grid;
grid-template-columns: repeat(10, 1fr); grid-template-columns: repeat(10, 1fr);
} }
@ -264,7 +213,7 @@ main > section[role="text-editor"] > div[role="text-editor-control"] {
top: 65px; top: 65px;
} }
main > section[role="text-editor"] > div[role="edit-post-wrapper"] { main > section.text-editor > div.edit-post-wrapper {
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
border-radius: 5px; border-radius: 5px;
@ -272,13 +221,13 @@ main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
margin: 10px 0; 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; outline: none;
border-color: var(--secondary-highlight); border-color: var(--secondary-highlight);
} }
main section[role="text-editor"] div[role="edit-post-wrapper"] #edit, main section.text-editor div.edit-post-wrapper #edit,
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight { main section.text-editor div.edit-post-wrapper #highlight {
font-family: var(--mono-type); font-family: var(--mono-type);
border: 0; border: 0;
width: 100%; width: 100%;
@ -297,25 +246,25 @@ main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
margin: 0; 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; word-wrap: normal;
white-space: pre-wrap; white-space: pre-wrap;
line-break: normal; 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; z-index: 1;
background: transparent; background: transparent;
color: transparent; color: transparent;
caret-color: var(--secondary-highlight); 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; z-index: 0;
} }
main section[role="text-editor"] div[role="edit-post-wrapper"] pre, main section.text-editor div.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 code {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -323,68 +272,56 @@ main section[role="text-editor"] div[role="edit-post-wrapper"] pre code {
/* RESPONSIVE */ /* RESPONSIVE */
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
main > section[role="file-manager"] > div[role="file-drop"], main > section.file-manager > div.file-drop,
main > section[role="file-manager"] > div[role="page-images-list"], main > section.file-manager > div.page-images-list,
main > section[role="file-manager"] > div[role="page-files-list"], main > section.file-manager > div.page-files-list,
main > section[role="page-meta"] > div[role="page-meta-wrapper"], main > section.page-meta > div.page-meta-wrapper,
main > section[role="text-editor"] { main > section.text-editor {
width: 97%; width: 97%;
} }
} }
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
main > section[role="file-manager"] > div[role="page-images-list"], main > section.file-manager > div.page-images-list,
main > section[role="file-manager"] > div[role="page-files-list"] { main > section.file-manager > div.page-files-list {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
main > section[role="file-manager"] > div[role="file-drop"], main > section.file-manager > div.file-drop,
main > section[role="file-manager"] > div[role="page-images-list"], main > section.file-manager > div.page-images-list,
main > section[role="file-manager"] > div[role="page-files-list"], main > section.file-manager > div.page-files-list,
main > section[role="page-meta"] > div[role="page-meta-wrapper"], main > section.page-meta > div.page-meta-wrapper,
main > section[role="text-editor"] { main > section.text-editor {
width: 95%; width: 95%;
} }
main > section[role="page-meta"] > div[role="page-meta-wrapper"] { main > section.page-meta > div.page-meta-wrapper {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
main > section[role="text-editor"] > div[role="text-editor-control"] { main > section.text-editor > div.text-editor-control {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
} }
main main > section.text-editor > div.text-editor-control > button:nth-child(1) {
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(1) {
border-radius: 3px 0; border-radius: 3px 0;
} }
main main > section.text-editor > div.text-editor-control > button:nth-child(5) {
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(5) {
border-radius: 0 3px; border-radius: 0 3px;
} }
main main > section.text-editor > div.text-editor-control > button:nth-child(6) {
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(6) {
border-radius: 0 0 0 3px; border-radius: 0 0 0 3px;
} }
main main > section.text-editor > div.text-editor-control > button:nth-child(10) {
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(10) {
border-radius: 0 0 3px; border-radius: 0 0 3px;
} }
main section[role="text-editor"] div[role="edit-post-wrapper"] #edit, main section.text-editor div.edit-post-wrapper #edit,
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight { main section.text-editor div.edit-post-wrapper #highlight {
font-size: 0.8em; 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) { collectInfo(files) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let pageInfo = []; let pageInfo = [];
let pageRef = document.querySelector('[role="file-manager"]'); let pageRef = document.querySelector('.file-manager');
//process html content for storage //process html content for storage
let txt = document.createElement('textarea'); let txt = document.createElement('textarea');
txt.innerHTML = document.getElementById('highlight-content').innerHTML; 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.postUUID = null;
this.postLayout = null; this.postLayout = null;
this.fm = null; this.fm = null;
if (document.querySelector('[role="file-manager"]').getAttribute('data-index')) { if (document.querySelector('.file-manager').getAttribute('data-index')) {
this.postID = document this.postID = document
.querySelector('[role="file-manager"]') .querySelector('.file-manager')
.getAttribute('data-index'); .getAttribute('data-index');
this.postUUID = document this.postUUID = document
.querySelector('[role="file-manager"]') .querySelector('.file-manager')
.getAttribute('data-uuid'); .getAttribute('data-uuid');
this.postLayout = document this.postLayout = document
.querySelector('[role="file-manager"]') .querySelector('.file-manager')
.getAttribute('data-layout'); .getAttribute('data-layout');
} }
if (document.getElementById('edit')) { if (document.getElementById('edit')) {
this.editor = new TextEditor( this.editor = new TextEditor(
document.getElementById('edit'), document.getElementById('edit'),
document.querySelector('[role="file-manager"]').offsetHeight + document.querySelector('.page-meta').offsetHeight +
document.querySelector('[role="page-meta"]').offsetHeight + document.querySelector('.file-manager').offsetHeight +
document.querySelector('[role="text-editor"]').offsetHeight document.querySelector('.text-editor').offsetHeight
); );
this.editor.addListener( this.editor.addListener(
EditorEvent.EDITOR_DELETE, EditorEvent.EDITOR_DELETE,
@ -89,13 +89,13 @@ export default class PostEditor {
// methods // methods
//-------------------------- //--------------------------
start() { start() {
if (document.querySelector('[role="file-drop"]')) { if (document.querySelector('.file-drop')) {
//insert fileManager here //insert fileManager here
this.fm = new FileManager( this.fm = new FileManager(
document.querySelector('[role="file-drop"]'), document.querySelector('.file-drop'),
document.getElementById('page-files-upload'), document.getElementById('page-files-upload'),
document.getElementById('page-images-list'), document.getElementById('page-images-list'),
document.querySelector('[role="page-files-list"]') document.querySelector('.page-files-list')
); );
var optionButtons = document.querySelectorAll('.post-option-btn'); var optionButtons = document.querySelectorAll('.post-option-btn');
for (var i = 0, length = optionButtons.length; i < length; i++) { 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) { constructor(textEditor, scrollLimit) {
super(); super();
document document.querySelector('.text-editor-control').addEventListener('scroll', e => {
.querySelector('[role="text-editor-control"]') console.log('HERE');
.addEventListener('scroll', e => { });
console.log('HERE');
});
document.body.addEventListener('scroll', e => { document.body.addEventListener('scroll', e => {
var fixLimit = scrollLimit; var fixLimit = scrollLimit;
//console.log('POSITION', document.body.scrollTop + ' : ' + fixLimit); //console.log('POSITION', document.body.scrollTop + ' : ' + fixLimit);
if (document.body.scrollTop + 5 >= fixLimit) { if (document.body.scrollTop + 5 >= fixLimit) {
document document
.querySelector('[role="text-editor-control"]') .querySelector('.text-editor-control')
.classList.add('control-freeze'); .classList.add('control-freeze');
} else { } else {
document document
.querySelector('[role="text-editor-control"]') .querySelector('.text-editor-control')
.classList.remove('control-freeze'); .classList.remove('control-freeze');
} }
}); });
@ -47,7 +45,7 @@ class TextEditor extends EventEmitter {
.replace(new RegExp('&', 'g'), '&amp;') .replace(new RegExp('&', 'g'), '&amp;')
.replace(new RegExp('<', 'g'), '&lt;'); .replace(new RegExp('<', 'g'), '&lt;');
let editorHeight = document.getElementById('highlight').offsetHeight; let editorHeight = document.getElementById('highlight').offsetHeight;
document.querySelector('[role="edit-post-wrapper"]').style.height = document.querySelector('.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

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

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