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

implemented video uploading, updated styles and templates

Browse source
This commit is contained in:
Ro 2022-02-23 15:48:11 -08:00
parent 3c52bca8ba
commit f24a6b5099
19 changed files with 640 additions and 528 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
brain/controller/RouteControl.inc.php
View file

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

17
brain/data/Book.inc.php
View file

@ -57,7 +57,7 @@ class Book
//var_dump($files); //var_dump($files);
if ($task != "create") { if ($task != "create") {
$imageList = ""; $imageList = "";
$imagesPath = "/assets/images/blog/" . $path . "/"; //var_dump($files["page_files"] );
foreach ($files["page_files"] as $file) { foreach ($files["page_files"] as $file) {
$type = $file->getClientMediaType(); $type = $file->getClientMediaType();
switch ($type) { switch ($type) {
@ -65,17 +65,30 @@ class Book
case "image/png": case "image/png":
case "image/gif": case "image/gif":
case "image/svg": case "image/svg":
$imagesPath = "/assets/images/blog/" . $path . "/";
$imageList = $imageList =
$imageList . $imagesPath . $file->getClientFileName() . ", "; $imageList . $imagesPath . urlencode($file->getClientFileName()). ", ";
FileUploader::uploadFile( FileUploader::uploadFile(
"../public/assets/images/blog/" . $path . "/", "../public/assets/images/blog/" . $path . "/",
$file $file
); );
break; break;
case "video/mp4":
$videosPath = "/assets/video/blog/" . $path . "/";
$imageList =
$imageList . $videosPath . urlencode($file->getClientFileName()) . ", ";
FileUploader::uploadFile(
"../public/assets/video/blog/" . $path . "/",
$file
);
break;
} }
} }
$feature = $imageList; $feature = $imageList;
//var_dump($feature);
//return ["message" => "JUST DEBUGGING"];
} else { } else {
$feature = $feature =
"/assets/images/blog/" . "/assets/images/blog/" .

13
brain/data/Contents.inc.php
View file

@ -100,12 +100,13 @@ class Contents
$scrubbed = $sanitizer->sanitize($result->getContent()); $scrubbed = $sanitizer->sanitize($result->getContent());
$imageList = explode(",", $meta["feature"]); $featureList = explode(",", $meta["feature"]);
$images = []; $media = [];
foreach ($imageList as $item) { foreach ($featureList as $file) {
$image = trim($item); $item = trim($file);
$ext = explode(".", $item);
if ($item != null || $item != "") { if ($item != null || $item != "") {
array_push($images, $item); array_push($media, ["file"=>$item, "type"=>trim($ext[1])]);
} }
} }
@ -133,7 +134,7 @@ class Contents
"filePath" => $file, "filePath" => $file,
"content" => $parsed->getContent(), "content" => $parsed->getContent(),
"html" => $scrubbed, "html" => $scrubbed,
"media" => $images, "media" => $media,
]; ];
//checks for duplicates //checks for duplicates
$uuid = $meta["uuid"]; $uuid = $meta["uuid"];

2
brain/utility/FileUploader.inc.php
View file

@ -21,7 +21,7 @@ class FileUploader
//echo "**FILE** " . $file->getClientFileName(); //echo "**FILE** " . $file->getClientFileName();
$file->moveTo($directory . "/" . $file->getClientFileName()); $file->moveTo($directory . "/" . urlencode($file->getClientFileName()));
} catch (RuntimeException $e) { } catch (RuntimeException $e) {
echo "ERROR " . $e->getMessage(); echo "ERROR " . $e->getMessage();

13
brain/views/dash/page-edit.twig
View file

@ -34,7 +34,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=weret"> <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfdfd">
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}
@ -54,14 +54,19 @@
IMAGES AND VIDEO IMAGES AND VIDEO
<div id="page-images-list"> <div id="page-images-list">
{% if media|length > 1 %} {% if media|length > 1 %}
{% for image in media %} {% for item in media %}
<div id="{{loop.index0}}" class="img-item" style="background: url({{ image }}) no-repeat center center / cover"></div> {% if item.type == "mp4"%}
<div id="{{loop.index0}}" class="video-item" data-source="{{ item.file }}"></div>
{% else %}
<div id="{{loop.index0}}" class="img-item" style="background: url({{ item.file }}) no-repeat center center / cover"></div>
{% endif %}
{% endfor %} {% endfor %}
{% else %} {% else %}
<div id="0" class="img-item" style="background: url({{ media[0] }}) no-repeat center center / cover"> <div id="0" class="img-item" style="background: url({{ media[0] }}) no-repeat center center / cover">
{% endif %} {% endif %}
</div> </div>
FILES
<div id="page-files-list"></div> <div id="page-files-list"></div>
</div> </div>
@ -132,5 +137,5 @@
{% endblock %} {% endblock %}
{% block javascripts %} {% block javascripts %}
<script src="/assets/scripts/Start.js?=dfgbg" type="text/javascript"></script> <script src="/assets/scripts/Start.js?=dfnmf" type="text/javascript"></script>
{% endblock %} {% endblock %}

59
brain/views/dash/partials/index.twig
View file

@ -25,53 +25,24 @@
<br/> <br/>
{% if data["entryCount"] != 0 %} {% if data["entryCount"] != 0 %}
{% for page in data['pages'] %} {% for page in data['pages'] %}
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link" style="background: url({{ page.media[0] }}) no-repeat center center / cover"> {% if page.media[0].type == 'mp4' %}
<label>
{{ page.title }}
</label>
<div id="options">
{% if page.menu == 'true' %}
{% set menu = "true" %}
{% else %}
{% set menu = "false" %}
{% endif %}
{% if page.published == 'true' %}
{% set published = "true" %}
{% else %}
{% set published = "false" %}
{% endif %}
{% if page.featured == 'true' %}
{% set featured = "true" %}
{% else %}
{% set featured = "false" %}
{% endif %}
<div id="option-left">
<button data-active="{{ menu }}"> <a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-video-link">
<svg> <video class="post-video" loop muted autoplay>
<use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/> <source src="{{ page.media[0].file }}" type="video/mp4">
</svg>
</button>
<button data-active="{{ published }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
</svg>
</button>
<button data-active="{{ featured }}"> Sorry, your browser doesn't support embedded videos.
<svg> </video>
<use xlink:href="/assets/images/global/sprite.svg#entypo-star"/> {{ include("dash/partials/recent-options.twig") }}
</svg>
</button>
</div>
<div id="option-right">
<span>
{{ page.updated }}
</span>
</div>
</div>
</a> </a>
{% else %}
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
{{ include("dash/partials/recent-options.twig") }}
</a>
{% endif %}
{% endfor %} {% endfor %}
{% else %} {% else %}
There are no pages There are no pages

45
brain/views/dash/partials/recent-options.twig Normal file
View file

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

4
brain/views/dash/start.twig
View file

@ -5,7 +5,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfd"> <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=rerre">
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}
@ -23,5 +23,5 @@
{% endblock %} {% endblock %}
{% block javascripts %} {% block javascripts %}
<script src="/assets/scripts/Start.js" type="text/javascript"></script> <script src="/assets/scripts/Start.js?=ghji" type="text/javascript"></script>
{% endblock %} {% endblock %}

74
public/assets/css/dash.css
View file

@ -2278,7 +2278,7 @@ svg.icons {
height: 20px; height: 20px;
fill: #EFEBE3; fill: #EFEBE3;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link {
font-size: 1.5em; font-size: 1.5em;
font-weight: 300; font-weight: 300;
display: inline-block; display: inline-block;
@ -2286,8 +2286,13 @@ svg.icons {
vertical-align: top; vertical-align: top;
text-decoration: none; text-decoration: none;
position: relative; position: relative;
overflow: hidden;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link label { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link .post-video, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link .post-video {
width: 100%;
position: absolute;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link label, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link label {
font-size: 1.4em; font-size: 1.4em;
font-weight: 700; font-weight: 700;
color: #EFEBE3; color: #EFEBE3;
@ -2301,53 +2306,53 @@ svg.icons {
top: 35%; top: 35%;
text-shadow: 2px 2px 0 #32302f; text-shadow: 2px 2px 0 #32302f;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width: 50%; width: 50%;
position: relative; position: relative;
background: none; background: none;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button {
border-radius: 3px; border-radius: 3px;
background: #1D3040; background: #1D3040;
margin: 0 0 10px 10px; margin: 0 0 10px 10px;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button svg { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button svg, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button svg {
width: 40px; width: 40px;
height: 20px; height: 20px;
fill: #b2cce5; fill: #b2cce5;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left .item-options { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left .item-options, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left .item-options {
border-radius: 3px; border-radius: 3px;
margin: 5px; margin: 5px;
display: inline-block; display: inline-block;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false], #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button[data-active=false] {
background: #1D3040; background: #1D3040;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] svg { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] svg, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button[data-active=false] svg {
fill: #b2cce5; fill: #b2cce5;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true], #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button[data-active=true] {
background: #f5ab35; background: #f5ab35;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] svg { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] svg, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button[data-active=true] svg {
fill: #1D3040; fill: #1D3040;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-right {
display: inline-block; display: inline-block;
width: 50%; width: 50%;
text-align: right; text-align: right;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right span { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right span, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-right span {
font-weight: bold; font-weight: bold;
display: block; display: block;
background: #EFEBE3; background: #EFEBE3;
@ -2911,7 +2916,7 @@ select {
margin-left: 10px; margin-left: 10px;
width: 55px; width: 55px;
} }
#post-index #post-index-wrapper #post-index-header #post-index-header-right a button svg { #post-index #post-index-wrapper #post-index-header #post-index-header-right a svg {
width: 20px; width: 20px;
height: 17px; height: 17px;
fill: #EFEBE3; fill: #EFEBE3;
@ -2947,6 +2952,8 @@ select {
height: 350px; height: 350px;
background-color: #fc6399; background-color: #fc6399;
position: relative; position: relative;
text-shadow: 2px 2px 0 #32302f;
text-shadow: 2px 2px 0 #32302f;
} }
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg label { #post-index #post-index-wrapper #posts-list a.page-link div.page-bg label {
font-size: 2em; font-size: 2em;
@ -2960,8 +2967,6 @@ select {
text-align: center; text-align: center;
position: relative; position: relative;
top: 35%; top: 35%;
text-shadow: 2px 2px 0 #32302f;
text-shadow: 2px 2px 0 #32302f;
} }
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta { #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta {
width: 100%; width: 100%;
@ -2989,7 +2994,7 @@ select {
background: #1D3040; background: #1D3040;
margin: 0 0 10px 10px; margin: 0 0 10px 10px;
} }
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button svg { #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg {
width: 40px; width: 40px;
height: 20px; height: 20px;
fill: #b2cce5; fill: #b2cce5;
@ -3002,13 +3007,13 @@ select {
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] { #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] {
background: #1D3040; background: #1D3040;
} }
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] svg { #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg {
fill: #b2cce5; fill: #b2cce5;
} }
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] { #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] {
background: #f5ab35; background: #f5ab35;
} }
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] svg { #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg {
fill: #1D3040; fill: #1D3040;
} }
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-right { #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-right {
@ -3217,6 +3222,26 @@ select {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
} }
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list .audio-item {
height: 150px;
width: 23.8%;
border-radius: 3px;
margin: 0 10px 10px 0;
display: inline-block;
cursor: pointer;
background: #1D3040;
background: url("/assets/images/global/upload-audio.png") no-repeat center center/cover;
}
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list .video-item {
height: 150px;
width: 23.8%;
border-radius: 3px;
margin: 0 10px 10px 0;
display: inline-block;
cursor: pointer;
background: #1D3040;
background: url("/assets/images/global/upload-video.png") no-repeat center center/cover;
}
#post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn { #post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn {
position: absolute; position: absolute;
margin: 20px; margin: 20px;
@ -3245,17 +3270,6 @@ select {
} }
#post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #edit, #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight { #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #edit, #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight {
/* Both elements need the same text and space styling so they are directly on top of each other */ /* Both elements need the same text and space styling so they are directly on top of each other */
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;
} }
#post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight-content { #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight-content {
word-wrap: normal; word-wrap: normal;

BIN
public/assets/images/global/upload-audio.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8 KiB

BIN
public/assets/images/global/upload-doc.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
public/assets/images/global/upload-video.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

91
public/assets/scripts/Start.js
View file

@ -140,9 +140,9 @@
this[globalName] = mainExports; this[globalName] = mainExports;
} }
} }
})({"fQadY":[function(require,module,exports) { })({"jRsG2":[function(require,module,exports) {
var HMR_HOST = null; var HMR_HOST = null;
var HMR_PORT = 59457; var HMR_PORT = 1234;
var HMR_SECURE = false; var HMR_SECURE = false;
var HMR_ENV_HASH = "4a236f9275d0a351"; var HMR_ENV_HASH = "4a236f9275d0a351";
module.bundle.HMR_BUNDLE_ID = "770375bf412ba982"; module.bundle.HMR_BUNDLE_ID = "770375bf412ba982";
@ -1639,7 +1639,7 @@ class PostEditor {
//-------------------------- //--------------------------
constructor(){ constructor(){
this.processing = false; this.processing = false;
let self = this; let self = "this";
this.admin = new _fipamoAdminAPIDefault.default(null, document.getElementById('notify-progress')); this.admin = new _fipamoAdminAPIDefault.default(null, document.getElementById('notify-progress'));
this.mm = new _maintenanceManagerDefault.default(null, null, document.getElementById('notify-progress')); this.mm = new _maintenanceManagerDefault.default(null, null, document.getElementById('notify-progress'));
this.urlPieces = document.URL.split('/'); this.urlPieces = document.URL.split('/');
@ -1789,34 +1789,34 @@ class PostActions {
collectInfo(files) { collectInfo(files) {
return new Promise((resolve, reject)=>{ return new Promise((resolve, reject)=>{
let pageInfo = new FormData(); let pageInfo = new FormData();
let txt = document.createElement("textarea"); let txt = document.createElement('textarea');
txt.innerHTML = document.getElementById("highlight-content").innerHTML; txt.innerHTML = document.getElementById('highlight-content').innerHTML;
let html = txt.value; let html = txt.value;
html = html.replace(/<\/?span[^>]*>/g, ""); //removes prism styling html = html.replace(/<\/?span[^>]*>/g, ''); //removes prism styling
html = html.replace(/<\/?br[^>]*>/g, "\n"); //convert back to encoded line break for storage html = html.replace(/<\/?br[^>]*>/g, '\n'); //convert back to encoded line break for storage
pageInfo.append("id", document.getElementById("post-edit-index").getAttribute("data-index")); pageInfo.append('id', document.getElementById('post-edit-index').getAttribute('data-index'));
pageInfo.append("uuid", document.getElementById("post-edit-index").getAttribute("data-uuid")); pageInfo.append('uuid', document.getElementById('post-edit-index').getAttribute('data-uuid'));
pageInfo.append("layout", document.getElementById("post-edit-index").getAttribute("data-layout")); pageInfo.append('layout', document.getElementById('post-edit-index').getAttribute('data-layout'));
pageInfo.append("current_title", document.getElementById("post-edit-index").getAttribute("data-slug")); pageInfo.append('current_title', document.getElementById('post-edit-index').getAttribute('data-slug'));
pageInfo.append("content", html); pageInfo.append('content', html);
pageInfo.append("title", document.getElementById("post_title").value); pageInfo.append('title', document.getElementById('post_title').value);
pageInfo.append("created", document.getElementById("post-date").getAttribute("data-raw")); pageInfo.append('created', document.getElementById('post-date').getAttribute('data-raw'));
pageInfo.append("slug", new _stringUtilsDefault.default().cleanString(document.getElementById("post_title").value)); pageInfo.append('slug', new _stringUtilsDefault.default().cleanString(document.getElementById('post_title').value));
pageInfo.append("tags", document.getElementById("post_tags").value); pageInfo.append('tags', document.getElementById('post_tags').value);
pageInfo.append("menu", document.getElementById("option-menu-pin").getAttribute("data-active")); pageInfo.append('menu', document.getElementById('option-menu-pin').getAttribute('data-active'));
pageInfo.append("featured", document.getElementById("option-feature").getAttribute("data-active")); pageInfo.append('featured', document.getElementById('option-feature').getAttribute('data-active'));
pageInfo.append("published", document.getElementById("option-published").getAttribute("data-active")); pageInfo.append('published', document.getElementById('option-published').getAttribute('data-active'));
pageInfo.append("layout", document.getElementById("page-templates").value); pageInfo.append('layout', document.getElementById('page-templates').value);
pageInfo.append("form_token", document.getElementById("form_token").value); pageInfo.append('form_token', document.getElementById('form_token').value);
if (files.length > 0 && files != null) for(var i = 0; i < files.length; i++){ if (files.length > 0 && files != null) for(var i = 0; i < files.length; i++){
var file = files[i]; var file = files[i];
if (file.type.match("image.*")) pageInfo.append("page_files[]", file, file.name); if (file.type.match('image.*') || file.type.match('video.mp4')) pageInfo.append('page_files[]', file, file.name);
else reject("Not an image file"); else reject('Not an image file');
} }
else //check to see if image exists else //check to see if image exists
if (document.getElementById("featured-image")) { if (document.getElementById('featured-image')) {
var imageURL = document.getElementById("featured-image").src; var imageURL = document.getElementById('featured-image').src;
imageURL != null || imageURL != undefined ? pageInfo.append("feature_image", imageURL) : pageInfo.append("feature_image", null); imageURL != null || imageURL != undefined ? pageInfo.append('feature_image', imageURL) : pageInfo.append('feature_image', null);
} }
//console.log("FILES", files); //console.log("FILES", files);
resolve(pageInfo); resolve(pageInfo);
@ -5399,6 +5399,9 @@ var _sortablejs = require("sortablejs");
var _sortablejsDefault = parcelHelpers.interopDefault(_sortablejs); var _sortablejsDefault = parcelHelpers.interopDefault(_sortablejs);
var _dataUtils = require("../utils/DataUtils"); var _dataUtils = require("../utils/DataUtils");
var _dataUtilsDefault = parcelHelpers.interopDefault(_dataUtils); var _dataUtilsDefault = parcelHelpers.interopDefault(_dataUtils);
var _notificationsJs = require("./Notifications.js");
var _notificationsJsDefault = parcelHelpers.interopDefault(_notificationsJs);
const notify = new _notificationsJsDefault.default();
class FileManager { class FileManager {
//-------------------------- //--------------------------
// constructor // constructor
@ -5412,7 +5415,9 @@ class FileManager {
'image/jpeg', 'image/jpeg',
'image/gif', 'image/gif',
'image/png', 'image/png',
'image/svg' 'image/svg',
'audio/mpeg',
'video/mp4'
]; ];
this.files = []; this.files = [];
this.sortedFiles = []; this.sortedFiles = [];
@ -5430,13 +5435,17 @@ class FileManager {
, false); , false);
_sortablejsDefault.default.create(this.imageList, { _sortablejsDefault.default.create(this.imageList, {
onUpdate: (e)=>{ onUpdate: (e)=>{
notify.alert('REINDEXING FILES', null);
let currentFiles = []; //store current list let currentFiles = []; //store current list
let items = e.target.children; let items = e.target.children;
for(let index = 0; index < items.length; index++){ for(let index = 0; index < items.length; index++){
var item = items[index]; var item = items[index];
let url = '';
if (item.className == 'img-item') url = item.style.backgroundImage.slice(4, -1).replace(/"/g, '');
else url = item.getAttribute('data-source');
currentFiles.push({ currentFiles.push({
id: item.getAttribute('id'), id: item.getAttribute('id'),
earl: item.style.backgroundImage.slice(4, -1).replace(/"/g, '') earl: url
}); });
} }
this.reindexFiles(currentFiles, 0); this.reindexFiles(currentFiles, 0);
@ -5457,8 +5466,10 @@ class FileManager {
], path[6], { ], path[6], {
type: blob.type type: blob.type
}); });
console.log('FRESH FILE', fresh);
this.files.push(fresh); this.files.push(fresh);
if (this.files.length <= count - 1) this.reindexFiles(sortOrder, ++step); if (this.files.length <= count - 1) this.reindexFiles(sortOrder, ++step);
else notify.alert('FILES READY TO UPLOAD', true);
}); });
} }
sortFiles(files) { sortFiles(files) {
@ -5482,7 +5493,7 @@ class FileManager {
image.title = escape(theFile.name); image.title = escape(theFile.name);
var span = document.createElement('div'); var span = document.createElement('div');
span.style.background = 'url(' + f.target.result + ') no-repeat center center / cover'; span.style.background = 'url(' + f.target.result + ') no-repeat center center / cover';
span.className = 'img-item'; span.className = 'img-item'; //span.setAttribute('data-source', theFile.name);
image.setAttribute('id', i); image.setAttribute('id', i);
self.storage.push([ self.storage.push([
{ {
@ -5495,6 +5506,18 @@ class FileManager {
self.imageList.appendChild(span); //add to files list self.imageList.appendChild(span); //add to files list
self.files.push(theFile); self.files.push(theFile);
break; break;
case 'video/mp4':
var video = document.createElement('div');
video.className = 'video-item';
video.setAttribute('data-source', f.target.result);
self.imageList.appendChild(video);
self.files.push(theFile);
break;
case 'audio/mpeg':
var sound = document.createElement('div');
sound.className = 'audio-item';
self.fileList.appendChild(sound);
break;
} }
}; };
})(file); // Read in the image file as a data URL. })(file); // Read in the image file as a data URL.
@ -5517,10 +5540,12 @@ class FileManager {
case 'change': case 'change':
case 'drop': case 'drop':
e.type == 'drop' ? rawList = e.dataTransfer.files : rawList = e.target.files; //this.sortFiles(freshList); e.type == 'drop' ? rawList = e.dataTransfer.files : rawList = e.target.files; //this.sortFiles(freshList);
for(var i = 0, f; f = rawList[i]; i++)// check witch files are cool to upload for(var i = 0, f; f = rawList[i]; i++){
// check witch files are cool to upload
console.log('TYPE', f.type);
if (this.accetableFiles.includes(f.type)) sortedList.push(f); if (this.accetableFiles.includes(f.type)) sortedList.push(f);
else notOnTheList.push(f); else notOnTheList.push(f);
//send for sorting } //send for sorting
self.sortFiles(sortedList); self.sortFiles(sortedList);
break; break;
} }
@ -5528,7 +5553,7 @@ class FileManager {
} }
exports.default = FileManager; exports.default = FileManager;
},{"sortablejs":"fLJM6","../utils/DataUtils":"lpIyf","@parcel/transformer-js/src/esmodule-helpers.js":"ciiiV"}],"fLJM6":[function(require,module,exports) { },{"sortablejs":"fLJM6","../utils/DataUtils":"lpIyf","@parcel/transformer-js/src/esmodule-helpers.js":"ciiiV","./Notifications.js":"fmUxI"}],"fLJM6":[function(require,module,exports) {
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js"); var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
parcelHelpers.defineInteropFlag(exports); parcelHelpers.defineInteropFlag(exports);
parcelHelpers.export(exports, "MultiDrag", ()=>MultiDragPlugin parcelHelpers.export(exports, "MultiDrag", ()=>MultiDragPlugin
@ -8475,6 +8500,6 @@ class NavActions {
} }
exports.default = NavActions; exports.default = NavActions;
},{"@parcel/transformer-js/src/esmodule-helpers.js":"ciiiV"}]},["fQadY","bEyX8"], "bEyX8", "parcelRequiredac0") },{"@parcel/transformer-js/src/esmodule-helpers.js":"ciiiV"}]},["jRsG2","bEyX8"], "bEyX8", "parcelRequiredac0")
//# sourceMappingURL=Start.js.map //# sourceMappingURL=Start.js.map

11
src/com/Base.js
View file

@ -26,9 +26,7 @@ export default class Base {
) { ) {
var options = document.getElementsByClassName('init-option'); var options = document.getElementsByClassName('init-option');
for (let index = 0; index < options.length; index++) { for (let index = 0; index < options.length; index++) {
options[index].addEventListener('click', e => options[index].addEventListener('click', e => this.handleOptions(e));
this.handleOptions(e)
);
} }
if (document.getElementById('dash-form')) { if (document.getElementById('dash-form')) {
document document
@ -90,9 +88,7 @@ export default class Base {
let self = this; let self = this;
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
let setUpForm = data.formDataToJSON( let setUpForm = data.formDataToJSON(document.getElementById('init-form'));
document.getElementById('init-form')
);
let mm = new Maintenance(); let mm = new Maintenance();
this.processing = true; this.processing = true;
mm.create(setUpForm) mm.create(setUpForm)
@ -156,8 +152,7 @@ export default class Base {
.then(response => { .then(response => {
self.processing = false; self.processing = false;
if (response.secret) { if (response.secret) {
document.getElementById('secret').value = document.getElementById('secret').value = response.secret;
response.secret;
notify.alert(response.message, true); notify.alert(response.message, true);
} else { } else {
if (response.type == 'mailSent') { if (response.type == 'mailSent') {

78
src/com/actions/PageActions.js
View file

@ -1,4 +1,4 @@
import StringUtils from "../utils/StringUtils"; import StringUtils from '../utils/StringUtils';
export default class PostActions { export default class PostActions {
//-------------------------- //--------------------------
// constructor // constructor
@ -10,76 +10,68 @@ export default class PostActions {
collectInfo(files) { collectInfo(files) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let pageInfo = new FormData(); let pageInfo = new FormData();
let txt = document.createElement("textarea"); let txt = document.createElement('textarea');
txt.innerHTML = document.getElementById("highlight-content").innerHTML; txt.innerHTML = document.getElementById('highlight-content').innerHTML;
let html = txt.value; let html = txt.value;
html = html.replace(/<\/?span[^>]*>/g, ""); //removes prism styling html = html.replace(/<\/?span[^>]*>/g, ''); //removes prism styling
html = html.replace(/<\/?br[^>]*>/g, "\n"); //convert back to encoded line break for storage html = html.replace(/<\/?br[^>]*>/g, '\n'); //convert back to encoded line break for storage
pageInfo.append( pageInfo.append(
"id", 'id',
document.getElementById("post-edit-index").getAttribute("data-index") document.getElementById('post-edit-index').getAttribute('data-index')
); );
pageInfo.append( pageInfo.append(
"uuid", 'uuid',
document.getElementById("post-edit-index").getAttribute("data-uuid") document.getElementById('post-edit-index').getAttribute('data-uuid')
); );
pageInfo.append( pageInfo.append(
"layout", 'layout',
document.getElementById("post-edit-index").getAttribute("data-layout") document.getElementById('post-edit-index').getAttribute('data-layout')
); );
pageInfo.append( pageInfo.append(
"current_title", 'current_title',
document.getElementById("post-edit-index").getAttribute("data-slug") document.getElementById('post-edit-index').getAttribute('data-slug')
); );
pageInfo.append("content", html); pageInfo.append('content', html);
pageInfo.append("title", document.getElementById("post_title").value); pageInfo.append('title', document.getElementById('post_title').value);
pageInfo.append( pageInfo.append(
"created", 'created',
document.getElementById("post-date").getAttribute("data-raw") document.getElementById('post-date').getAttribute('data-raw')
); );
pageInfo.append( pageInfo.append(
"slug", 'slug',
new StringUtils().cleanString( new StringUtils().cleanString(document.getElementById('post_title').value)
document.getElementById("post_title").value
)
); );
pageInfo.append("tags", document.getElementById("post_tags").value); pageInfo.append('tags', document.getElementById('post_tags').value);
pageInfo.append( pageInfo.append(
"menu", 'menu',
document.getElementById("option-menu-pin").getAttribute("data-active") document.getElementById('option-menu-pin').getAttribute('data-active')
); );
pageInfo.append( pageInfo.append(
"featured", 'featured',
document.getElementById("option-feature").getAttribute("data-active") document.getElementById('option-feature').getAttribute('data-active')
); );
pageInfo.append( pageInfo.append(
"published", 'published',
document.getElementById("option-published").getAttribute("data-active") document.getElementById('option-published').getAttribute('data-active')
);
pageInfo.append(
"layout",
document.getElementById("page-templates").value
);
pageInfo.append(
"form_token",
document.getElementById("form_token").value
); );
pageInfo.append('layout', document.getElementById('page-templates').value);
pageInfo.append('form_token', document.getElementById('form_token').value);
if (files.length > 0 && files != null) { if (files.length > 0 && files != null) {
for (var i = 0; i < files.length; i++) { for (var i = 0; i < files.length; i++) {
var file = files[i]; var file = files[i];
if (file.type.match("image.*")) { if (file.type.match('image.*') || file.type.match('video.mp4')) {
pageInfo.append("page_files[]", file, file.name); pageInfo.append('page_files[]', file, file.name);
} else { } else {
reject("Not an image file"); reject('Not an image file');
} }
} }
} else { } else {
//check to see if image exists //check to see if image exists
if (document.getElementById("featured-image")) { if (document.getElementById('featured-image')) {
var imageURL = document.getElementById("featured-image").src; var imageURL = document.getElementById('featured-image').src;
imageURL != null || imageURL != undefined imageURL != null || imageURL != undefined
? pageInfo.append("feature_image", imageURL) ? pageInfo.append('feature_image', imageURL)
: pageInfo.append("feature_image", null); : pageInfo.append('feature_image', null);
} else { } else {
//pageInfo.append("feature_image", null); //pageInfo.append("feature_image", null);
} }

39
src/com/controllers/PageEditor.js
View file

@ -19,27 +19,16 @@ export default class PostEditor {
//-------------------------- //--------------------------
constructor() { constructor() {
this.processing = false; this.processing = false;
let self = this; let self = "this";
this.admin = new FipamoAdminAPI( this.admin = new FipamoAdminAPI(null, document.getElementById('notify-progress'));
null, this.mm = new Maintenance(null, null, document.getElementById('notify-progress'));
document.getElementById('notify-progress')
);
this.mm = new Maintenance(
null,
null,
document.getElementById('notify-progress')
);
this.urlPieces = document.URL.split('/'); this.urlPieces = document.URL.split('/');
this.post = []; this.post = [];
this.postID = null; this.postID = null;
this.postUUID = null; this.postUUID = null;
this.postLayout = null; this.postLayout = null;
this.fm = null; this.fm = null;
if ( if (document.getElementById('post-edit-index').getAttribute('data-index')) {
document
.getElementById('post-edit-index')
.getAttribute('data-index')
) {
this.postID = document this.postID = document
.getElementById('post-edit-index') .getElementById('post-edit-index')
.getAttribute('data-index'); .getAttribute('data-index');
@ -64,10 +53,7 @@ export default class PostEditor {
); );
this.editor.addListener( this.editor.addListener(
EditorEvent.EDITOR_UPLOAD_POST_IMAGE, EditorEvent.EDITOR_UPLOAD_POST_IMAGE,
() => () => this.handleEditorOptions(EditorEvent.EDITOR_UPLOAD_POST_IMAGE),
this.handleEditorOptions(
EditorEvent.EDITOR_UPLOAD_POST_IMAGE
),
false false
); );
this.editor.addListener( this.editor.addListener(
@ -175,8 +161,7 @@ export default class PostEditor {
notify.alert(r.message, true); notify.alert(r.message, true);
} else { } else {
notify.alert(r.message, true); notify.alert(r.message, true);
window.location = window.location = '/dashboard/page/edit/' + r.id;
'/dashboard/page/edit/' + r.id;
} }
} }
}) })
@ -191,13 +176,10 @@ export default class PostEditor {
notify.alert('Index cannot be deleted', false); notify.alert('Index cannot be deleted', false);
return; return;
} }
if ( if (confirm("AYE! You know you're deleting this post, right?")) {
confirm("AYE! You know you're deleting this post, right?")
) {
new PageActions() new PageActions()
.collectInfo( .collectInfo(
document.getElementById('featured-image-upload') document.getElementById('featured-image-upload').files[0]
.files[0]
) )
.then(page => { .then(page => {
self.processing = true; self.processing = true;
@ -231,10 +213,7 @@ export default class PostEditor {
.imageUpload(type, files) .imageUpload(type, files)
.then(r => { .then(r => {
if (r.type == DataEvent.POST_IMAGE_ADDED) { if (r.type == DataEvent.POST_IMAGE_ADDED) {
self.editor.notify( self.editor.notify(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, r.url);
EditorEvent.EDITOR_UPLOAD_POST_IMAGE,
r.url
);
notify.alert('Image Added to Entry', true); notify.alert('Image Added to Entry', true);
} else { } else {
notify.alert('Uh oh. Image not added', false); notify.alert('Uh oh. Image not added', false);

58
src/com/ui/FileManager.js
View file

@ -1,5 +1,7 @@
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
import DataUtils from '../utils/DataUtils'; import DataUtils from '../utils/DataUtils';
import Notfications from './Notifications.js';
const notify = new Notfications();
export default class FileManager { export default class FileManager {
//-------------------------- //--------------------------
@ -10,7 +12,14 @@ export default class FileManager {
this.input = input; this.input = input;
this.imageList = imageList; this.imageList = imageList;
this.fileList = fileList; this.fileList = fileList;
this.accetableFiles = ['image/jpeg', 'image/gif', 'image/png', 'image/svg']; this.accetableFiles = [
'image/jpeg',
'image/gif',
'image/png',
'image/svg',
'audio/mpeg',
'video/mp4'
];
this.files = []; this.files = [];
this.sortedFiles = []; this.sortedFiles = [];
this.storage = []; this.storage = [];
@ -26,13 +35,21 @@ export default class FileManager {
Sortable.create(this.imageList, { Sortable.create(this.imageList, {
onUpdate: e => { onUpdate: e => {
notify.alert('REINDEXING FILES', null);
let currentFiles = []; //store current list let currentFiles = []; //store current list
let items = e.target.children; let items = e.target.children;
for (let index = 0; index < items.length; index++) { for (let index = 0; index < items.length; index++) {
var item = items[index]; var item = items[index];
let url = '';
if (item.className == 'img-item') {
url = item.style.backgroundImage.slice(4, -1).replace(/"/g, '');
} else {
url = item.getAttribute('data-source');
}
currentFiles.push({ currentFiles.push({
id: item.getAttribute('id'), id: item.getAttribute('id'),
earl: item.style.backgroundImage.slice(4, -1).replace(/"/g, '') earl: url
}); });
} }
this.reindexFiles(currentFiles, 0); this.reindexFiles(currentFiles, 0);
@ -51,11 +68,12 @@ export default class FileManager {
var path = sortOrder[step].earl.split('/'); var path = sortOrder[step].earl.split('/');
utils.imgLoad(sortOrder[step].earl).then(blob => { utils.imgLoad(sortOrder[step].earl).then(blob => {
var fresh = new File([blob], path[6], { type: blob.type }); var fresh = new File([blob], path[6], { type: blob.type });
console.log('FRESH FILE', fresh);
this.files.push(fresh); this.files.push(fresh);
if (this.files.length <= count - 1) { if (this.files.length <= count - 1) {
this.reindexFiles(sortOrder, ++step); this.reindexFiles(sortOrder, ++step);
} else { } else {
//console.log('FILES', this.files); notify.alert('FILES READY TO UPLOAD', true);
} }
}); });
} }
@ -87,6 +105,7 @@ export default class FileManager {
f.target.result + f.target.result +
') no-repeat center center / cover'; ') no-repeat center center / cover';
span.className = 'img-item'; span.className = 'img-item';
//span.setAttribute('data-source', theFile.name);
image.setAttribute('id', i); image.setAttribute('id', i);
self.storage.push([ self.storage.push([
{ {
@ -100,6 +119,38 @@ export default class FileManager {
//add to files list //add to files list
self.files.push(theFile); self.files.push(theFile);
break;
case 'video/mp4':
var video = document.createElement('div');
video.className = 'video-item';
video.setAttribute('data-source', f.target.result);
self.imageList.appendChild(video);
self.files.push(theFile);
/*
var video = document.createElement('video');
video.setAttribute('id', escape(theFile.name));
video.className = 'video-item';
video.src = f.target.result;
video.controls = 'controls';
video.type = f.type;
self.imageList.appendChild(video);
*/
break;
case 'audio/mpeg':
var sound = document.createElement('div');
sound.className = 'audio-item';
self.fileList.appendChild(sound);
/*
var sound = document.createElement('audio');
sound.setAttribute('id', escape(theFile.name));
sound.className = 'audio-item';
sound.src = f.target.result;
sound.controls = 'controls';
sound.type = f.type;
self.imageList.appendChild(sound);
*/
break; break;
} }
}; };
@ -132,6 +183,7 @@ export default class FileManager {
//this.sortFiles(freshList); //this.sortFiles(freshList);
for (var i = 0, f; (f = rawList[i]); i++) { for (var i = 0, f; (f = rawList[i]); i++) {
// check witch files are cool to upload // check witch files are cool to upload
console.log('TYPE', f.type);
if (this.accetableFiles.includes(f.type)) { if (this.accetableFiles.includes(f.type)) {
sortedList.push(f); sortedList.push(f);
} else { } else {

6
src/styles/main/_index.sass
View file

@ -147,7 +147,7 @@
height: 20px height: 20px
fill: $white fill: $white
a.post-link a.post-link, a.post-video-link
font-size: 1.5em font-size: 1.5em
font-weight: 300 font-weight: 300
display: inline-block display: inline-block
@ -155,6 +155,10 @@
vertical-align: top vertical-align: top
text-decoration: none text-decoration: none
position: relative position: relative
overflow: hidden
.post-video
width: 100%
position: absolute
label label
font-size: 1.4em font-size: 1.4em

22
src/styles/main/_posts.sass
View file

@ -152,7 +152,6 @@
font-size: 1.5em font-size: 1.5em
color: $tertiary color: $tertiary
#post-edit-index #post-edit-index
width: 100% width: 100%
overflow: hidden overflow: hidden
@ -190,7 +189,6 @@
padding: 5px padding: 5px
margin: 0 0 5px 0 margin: 0 0 5px 0
#calendar-icon #calendar-icon
background: color.adjust($primary, $lightness: -15%) background: color.adjust($primary, $lightness: -15%)
border-radius: 3px 0 0 3px border-radius: 3px 0 0 3px
@ -236,7 +234,6 @@
button button
border-radius: 0 3px 3px 0 !important border-radius: 0 3px 3px 0 !important
button button
width: 25% width: 25%
height: 45px height: 45px
@ -306,6 +303,24 @@
margin: 0 10px 10px 0 margin: 0 10px 10px 0
display: inline-block display: inline-block
cursor: pointer cursor: pointer
.audio-item
height: 150px
width: 23.8%
border-radius: 3px
margin: 0 10px 10px 0
display: inline-block
cursor: pointer
background: $primary
background: url('/assets/images/global/upload-audio.png') no-repeat center center / cover
.video-item
height: 150px
width: 23.8%
border-radius: 3px
margin: 0 10px 10px 0
display: inline-block
cursor: pointer
background: $primary
background: url('/assets/images/global/upload-video.png') no-repeat center center / cover
#featured-new-image-btn #featured-new-image-btn
position: absolute position: absolute
@ -371,7 +386,6 @@
#highlight #highlight
z-index: 0 z-index: 0
//pre //pre
margin: 0 margin: 0
code code