diff --git a/brain/controller/RouteControl.inc.php b/brain/controller/RouteControl.inc.php index b207b1f..c54fc38 100644 --- a/brain/controller/RouteControl.inc.php +++ b/brain/controller/RouteControl.inc.php @@ -33,6 +33,8 @@ class RouteControl ): ResponseInterface { switch (isset($args["first"]) ? $args["first"] : "index") { case "api": + //$result = APIControl::post($request, $response, $args); + //var_dump($result); return APIControl::post($request, $response, $args); break; default: diff --git a/brain/data/Book.inc.php b/brain/data/Book.inc.php index 9af08c6..9708743 100644 --- a/brain/data/Book.inc.php +++ b/brain/data/Book.inc.php @@ -57,7 +57,7 @@ class Book //var_dump($files); if ($task != "create") { $imageList = ""; - $imagesPath = "/assets/images/blog/" . $path . "/"; + //var_dump($files["page_files"] ); foreach ($files["page_files"] as $file) { $type = $file->getClientMediaType(); switch ($type) { @@ -65,17 +65,30 @@ class Book case "image/png": case "image/gif": case "image/svg": + $imagesPath = "/assets/images/blog/" . $path . "/"; $imageList = - $imageList . $imagesPath . $file->getClientFileName() . ", "; + $imageList . $imagesPath . urlencode($file->getClientFileName()). ", "; FileUploader::uploadFile( "../public/assets/images/blog/" . $path . "/", $file ); 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; + //var_dump($feature); + //return ["message" => "JUST DEBUGGING"]; } else { $feature = "/assets/images/blog/" . diff --git a/brain/data/Contents.inc.php b/brain/data/Contents.inc.php index f16cc9f..d2bb0d3 100644 --- a/brain/data/Contents.inc.php +++ b/brain/data/Contents.inc.php @@ -100,12 +100,13 @@ class Contents $scrubbed = $sanitizer->sanitize($result->getContent()); - $imageList = explode(",", $meta["feature"]); - $images = []; - foreach ($imageList as $item) { - $image = trim($item); + $featureList = explode(",", $meta["feature"]); + $media = []; + foreach ($featureList as $file) { + $item = trim($file); + $ext = explode(".", $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, "content" => $parsed->getContent(), "html" => $scrubbed, - "media" => $images, + "media" => $media, ]; //checks for duplicates $uuid = $meta["uuid"]; diff --git a/brain/utility/FileUploader.inc.php b/brain/utility/FileUploader.inc.php index be3df13..47e3774 100644 --- a/brain/utility/FileUploader.inc.php +++ b/brain/utility/FileUploader.inc.php @@ -21,7 +21,7 @@ class FileUploader //echo "**FILE** " . $file->getClientFileName(); - $file->moveTo($directory . "/" . $file->getClientFileName()); + $file->moveTo($directory . "/" . urlencode($file->getClientFileName())); } catch (RuntimeException $e) { echo "ERROR " . $e->getMessage(); diff --git a/brain/views/dash/page-edit.twig b/brain/views/dash/page-edit.twig index 5d02d9b..6ee6a92 100644 --- a/brain/views/dash/page-edit.twig +++ b/brain/views/dash/page-edit.twig @@ -34,7 +34,7 @@ {% endblock %} {% block stylesheets %} - + {% endblock %} {% block mainContent %} @@ -54,14 +54,19 @@ IMAGES AND VIDEO
{% if media|length > 1 %} - {% for image in media %} -
+ {% for item in media %} + {% if item.type == "mp4"%} +
+ {% else %} +
+ {% endif %} {% endfor %} {% else %}
{% endif %}
+ FILES
@@ -132,5 +137,5 @@ {% endblock %} {% block javascripts %} - + {% endblock %} \ No newline at end of file diff --git a/brain/views/dash/partials/index.twig b/brain/views/dash/partials/index.twig index 2bbcf90..379eb0e 100644 --- a/brain/views/dash/partials/index.twig +++ b/brain/views/dash/partials/index.twig @@ -25,53 +25,24 @@
{% if data["entryCount"] != 0 %} {% for page in data['pages'] %} - - -
- {% 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 %} -
- - - - - -
-
- - {{ page.updated }} - -
+ {% if page.media[0].type == 'mp4' %} -
- + + + {{ include("dash/partials/recent-options.twig") }} + + + {% else %} + + + {{ include("dash/partials/recent-options.twig") }} + + {% endif %} + {% endfor %} {% else %} There are no pages diff --git a/brain/views/dash/partials/recent-options.twig b/brain/views/dash/partials/recent-options.twig new file mode 100644 index 0000000..1c0dc22 --- /dev/null +++ b/brain/views/dash/partials/recent-options.twig @@ -0,0 +1,45 @@ + +
+ {% 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 %} +
+ + + + + +
+
+ + {{ page.updated }} + +
+ +
\ No newline at end of file diff --git a/brain/views/dash/start.twig b/brain/views/dash/start.twig index da57bd8..059dd2e 100644 --- a/brain/views/dash/start.twig +++ b/brain/views/dash/start.twig @@ -5,7 +5,7 @@ {% endblock %} {% block stylesheets %} - + {% endblock %} {% block mainContent %} @@ -23,5 +23,5 @@ {% endblock %} {% block javascripts %} - + {% endblock %} \ No newline at end of file diff --git a/public/assets/css/dash.css b/public/assets/css/dash.css index 8ba6e18..f651ff6 100644 --- a/public/assets/css/dash.css +++ b/public/assets/css/dash.css @@ -2278,7 +2278,7 @@ svg.icons { height: 20px; 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-weight: 300; display: inline-block; @@ -2286,8 +2286,13 @@ svg.icons { vertical-align: top; text-decoration: none; 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-weight: 700; color: #EFEBE3; @@ -2301,53 +2306,53 @@ svg.icons { top: 35%; 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%; position: absolute; bottom: 0; border-radius: 0 0 3px 3px; 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; vertical-align: top; width: 50%; position: relative; 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; background: #1D3040; 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; height: 20px; 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; margin: 5px; 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; } -#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; } -#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; } -#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; } -#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; width: 50%; 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; display: block; background: #EFEBE3; @@ -2911,7 +2916,7 @@ select { margin-left: 10px; 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; height: 17px; fill: #EFEBE3; @@ -2947,6 +2952,8 @@ select { height: 350px; background-color: #fc6399; 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 { font-size: 2em; @@ -2960,8 +2967,6 @@ select { text-align: center; position: relative; 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 { width: 100%; @@ -2989,7 +2994,7 @@ select { background: #1D3040; 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; height: 20px; 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] { 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; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] { 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; } #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; 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 { position: absolute; 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 { /* 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 { word-wrap: normal; diff --git a/public/assets/images/global/upload-audio.png b/public/assets/images/global/upload-audio.png new file mode 100644 index 0000000..137cd0c Binary files /dev/null and b/public/assets/images/global/upload-audio.png differ diff --git a/public/assets/images/global/upload-doc.png b/public/assets/images/global/upload-doc.png new file mode 100644 index 0000000..b6d8acb Binary files /dev/null and b/public/assets/images/global/upload-doc.png differ diff --git a/public/assets/images/global/upload-video.png b/public/assets/images/global/upload-video.png new file mode 100644 index 0000000..96b9a5d Binary files /dev/null and b/public/assets/images/global/upload-video.png differ diff --git a/public/assets/scripts/Start.js b/public/assets/scripts/Start.js index 9c8ba2b..e55e8dc 100644 --- a/public/assets/scripts/Start.js +++ b/public/assets/scripts/Start.js @@ -140,9 +140,9 @@ this[globalName] = mainExports; } } -})({"fQadY":[function(require,module,exports) { +})({"jRsG2":[function(require,module,exports) { var HMR_HOST = null; -var HMR_PORT = 59457; +var HMR_PORT = 1234; var HMR_SECURE = false; var HMR_ENV_HASH = "4a236f9275d0a351"; module.bundle.HMR_BUNDLE_ID = "770375bf412ba982"; @@ -1639,7 +1639,7 @@ class PostEditor { //-------------------------- constructor(){ this.processing = false; - let self = this; + let self = "this"; this.admin = new _fipamoAdminAPIDefault.default(null, document.getElementById('notify-progress')); this.mm = new _maintenanceManagerDefault.default(null, null, document.getElementById('notify-progress')); this.urlPieces = document.URL.split('/'); @@ -1789,34 +1789,34 @@ class PostActions { collectInfo(files) { return new Promise((resolve, reject)=>{ let pageInfo = new FormData(); - let txt = document.createElement("textarea"); - txt.innerHTML = document.getElementById("highlight-content").innerHTML; + let txt = document.createElement('textarea'); + txt.innerHTML = document.getElementById('highlight-content').innerHTML; let html = txt.value; - html = html.replace(/<\/?span[^>]*>/g, ""); //removes prism styling - 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("uuid", document.getElementById("post-edit-index").getAttribute("data-uuid")); - 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("content", html); - pageInfo.append("title", document.getElementById("post_title").value); - pageInfo.append("created", document.getElementById("post-date").getAttribute("data-raw")); - pageInfo.append("slug", new _stringUtilsDefault.default().cleanString(document.getElementById("post_title").value)); - pageInfo.append("tags", document.getElementById("post_tags").value); - pageInfo.append("menu", document.getElementById("option-menu-pin").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("layout", document.getElementById("page-templates").value); - pageInfo.append("form_token", document.getElementById("form_token").value); + html = html.replace(/<\/?span[^>]*>/g, ''); //removes prism styling + 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('uuid', document.getElementById('post-edit-index').getAttribute('data-uuid')); + 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('content', html); + pageInfo.append('title', document.getElementById('post_title').value); + pageInfo.append('created', document.getElementById('post-date').getAttribute('data-raw')); + pageInfo.append('slug', new _stringUtilsDefault.default().cleanString(document.getElementById('post_title').value)); + pageInfo.append('tags', document.getElementById('post_tags').value); + pageInfo.append('menu', document.getElementById('option-menu-pin').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('layout', document.getElementById('page-templates').value); + pageInfo.append('form_token', document.getElementById('form_token').value); if (files.length > 0 && files != null) for(var i = 0; i < files.length; i++){ var file = files[i]; - if (file.type.match("image.*")) pageInfo.append("page_files[]", file, file.name); - else reject("Not an image file"); + if (file.type.match('image.*') || file.type.match('video.mp4')) pageInfo.append('page_files[]', file, file.name); + else reject('Not an image file'); } else //check to see if image exists - if (document.getElementById("featured-image")) { - var imageURL = document.getElementById("featured-image").src; - imageURL != null || imageURL != undefined ? pageInfo.append("feature_image", imageURL) : pageInfo.append("feature_image", null); + if (document.getElementById('featured-image')) { + var imageURL = document.getElementById('featured-image').src; + imageURL != null || imageURL != undefined ? pageInfo.append('feature_image', imageURL) : pageInfo.append('feature_image', null); } //console.log("FILES", files); resolve(pageInfo); @@ -5399,6 +5399,9 @@ var _sortablejs = require("sortablejs"); var _sortablejsDefault = parcelHelpers.interopDefault(_sortablejs); var _dataUtils = require("../utils/DataUtils"); var _dataUtilsDefault = parcelHelpers.interopDefault(_dataUtils); +var _notificationsJs = require("./Notifications.js"); +var _notificationsJsDefault = parcelHelpers.interopDefault(_notificationsJs); +const notify = new _notificationsJsDefault.default(); class FileManager { //-------------------------- // constructor @@ -5412,7 +5415,9 @@ class FileManager { 'image/jpeg', 'image/gif', 'image/png', - 'image/svg' + 'image/svg', + 'audio/mpeg', + 'video/mp4' ]; this.files = []; this.sortedFiles = []; @@ -5430,13 +5435,17 @@ class FileManager { , false); _sortablejsDefault.default.create(this.imageList, { onUpdate: (e)=>{ + notify.alert('REINDEXING FILES', null); let currentFiles = []; //store current list let items = e.target.children; for(let index = 0; index < items.length; 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({ id: item.getAttribute('id'), - earl: item.style.backgroundImage.slice(4, -1).replace(/"/g, '') + earl: url }); } this.reindexFiles(currentFiles, 0); @@ -5457,8 +5466,10 @@ class FileManager { ], path[6], { type: blob.type }); + console.log('FRESH FILE', fresh); this.files.push(fresh); if (this.files.length <= count - 1) this.reindexFiles(sortOrder, ++step); + else notify.alert('FILES READY TO UPLOAD', true); }); } sortFiles(files) { @@ -5482,7 +5493,7 @@ class FileManager { image.title = escape(theFile.name); var span = document.createElement('div'); 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); self.storage.push([ { @@ -5495,6 +5506,18 @@ class FileManager { self.imageList.appendChild(span); //add to files list 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); + 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. @@ -5517,10 +5540,12 @@ class FileManager { case 'change': case 'drop': 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 - if (this.accetableFiles.includes(f.type)) sortedList.push(f); - else notOnTheList.push(f); - //send for sorting + 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); + else notOnTheList.push(f); + } //send for sorting self.sortFiles(sortedList); break; } @@ -5528,7 +5553,7 @@ class 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"); parcelHelpers.defineInteropFlag(exports); parcelHelpers.export(exports, "MultiDrag", ()=>MultiDragPlugin @@ -8475,6 +8500,6 @@ class 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 diff --git a/src/com/Base.js b/src/com/Base.js index 01d5e49..18b9f61 100644 --- a/src/com/Base.js +++ b/src/com/Base.js @@ -8,210 +8,205 @@ const data = new DataUitls(); const notify = new Notfications(); export default class Base { - //-------------------------- - // constructor - //-------------------------- - constructor() { - this.processing = false; - this.start(); - } + //-------------------------- + // constructor + //-------------------------- + constructor() { + this.processing = false; + this.start(); + } - //-------------------------- - // methods - //-------------------------- - start() { - if ( - document.getElementById('dash-form') || - document.getElementById('dash-init') - ) { - var options = document.getElementsByClassName('init-option'); - for (let index = 0; index < options.length; index++) { - options[index].addEventListener('click', e => - this.handleOptions(e) - ); - } - if (document.getElementById('dash-form')) { - document - .getElementById('login-btn') - .addEventListener('click', e => this.handleLogin(e)); - } else { - document - .getElementById('init-blog') - .addEventListener('click', e => this.handleSetup(e)); - document - .getElementById('blog-restore') - .addEventListener('click', e => this.handleRestore(e)); - } - } else if (document.getElementById('dash-reset')) { - document - .getElementById('get-secret-btn') - .addEventListener('click', e => this.handleReset(e)); + //-------------------------- + // methods + //-------------------------- + start() { + if ( + document.getElementById('dash-form') || + document.getElementById('dash-init') + ) { + var options = document.getElementsByClassName('init-option'); + for (let index = 0; index < options.length; index++) { + options[index].addEventListener('click', e => this.handleOptions(e)); + } + if (document.getElementById('dash-form')) { + document + .getElementById('login-btn') + .addEventListener('click', e => this.handleLogin(e)); + } else { + document + .getElementById('init-blog') + .addEventListener('click', e => this.handleSetup(e)); + document + .getElementById('blog-restore') + .addEventListener('click', e => this.handleRestore(e)); + } + } else if (document.getElementById('dash-reset')) { + document + .getElementById('get-secret-btn') + .addEventListener('click', e => this.handleReset(e)); - document - .getElementById('reset-btn') - .addEventListener('click', e => this.handleReset(e)); - } else { - new DashManager(); - } - } - //-------------------------- - // event handlers - //-------------------------- - handleLogin(e) { - if (this.processing) return; - let self = this; - e.stopPropagation(); - e.preventDefault(); - let authForm = data.formDataToJSON(document.getElementById('login')); - notify.alert('Looking, hold up', null); - let api = new FipamoAdminAPI(); - this.processing = true; - api.login(authForm) - .then(response => { - self.processing = false; - if (response.type === DataEvent.REQUEST_LAME) { - notify.alert(response.message, false); - } else { - notify.alert(response.message, true); - e.target.innerHTML = response.message; - setTimeout(() => { - window.location = '/dashboard'; - }, 500); - } - }) - .catch(err => { - self.processing = false; - notify.alert(err, false); - }); - } + document + .getElementById('reset-btn') + .addEventListener('click', e => this.handleReset(e)); + } else { + new DashManager(); + } + } + //-------------------------- + // event handlers + //-------------------------- + handleLogin(e) { + if (this.processing) return; + let self = this; + e.stopPropagation(); + e.preventDefault(); + let authForm = data.formDataToJSON(document.getElementById('login')); + notify.alert('Looking, hold up', null); + let api = new FipamoAdminAPI(); + this.processing = true; + api.login(authForm) + .then(response => { + self.processing = false; + if (response.type === DataEvent.REQUEST_LAME) { + notify.alert(response.message, false); + } else { + notify.alert(response.message, true); + e.target.innerHTML = response.message; + setTimeout(() => { + window.location = '/dashboard'; + }, 500); + } + }) + .catch(err => { + self.processing = false; + notify.alert(err, false); + }); + } - handleSetup(e) { - if (this.processing) return; - let self = this; - e.stopPropagation(); - e.preventDefault(); - let setUpForm = data.formDataToJSON( - document.getElementById('init-form') - ); - let mm = new Maintenance(); - this.processing = true; - mm.create(setUpForm) - .then(response => { - if (response.type === DataEvent.API_INIT_LAME) { - self.processing = false; - notify.alert(response.message, false); - } else { - self.processing = false; - notify.alert(response.message, true); - setTimeout(() => { - window.location = '/dashboard'; - }, 700); - } - }) - .catch(err => { - self.processing = false; - notify.alert(err, false); - }); - } + handleSetup(e) { + if (this.processing) return; + let self = this; + e.stopPropagation(); + e.preventDefault(); + let setUpForm = data.formDataToJSON(document.getElementById('init-form')); + let mm = new Maintenance(); + this.processing = true; + mm.create(setUpForm) + .then(response => { + if (response.type === DataEvent.API_INIT_LAME) { + self.processing = false; + notify.alert(response.message, false); + } else { + self.processing = false; + notify.alert(response.message, true); + setTimeout(() => { + window.location = '/dashboard'; + }, 700); + } + }) + .catch(err => { + self.processing = false; + notify.alert(err, false); + }); + } - handleRestore(e) { - if (this.processing) return; - let self = this; - e.stopPropagation(); - e.preventDefault(); - let mm = new Maintenance(); - var form = document.getElementById('init-restore'); - this.processing = true; - mm.restore(form) - .then(response => { - if (response.type === DataEvent.REQUEST_LAME) { - self.processing = false; - notify.alert(response.message, false); - } else { - self.processing = false; - notify.alert(response.message, true); - setTimeout(() => { - window.location = '/dashboard'; - }, 1500); - } - }) - .catch(err => { - self.processing = false; - notify.alert(err, false); - }); - } + handleRestore(e) { + if (this.processing) return; + let self = this; + e.stopPropagation(); + e.preventDefault(); + let mm = new Maintenance(); + var form = document.getElementById('init-restore'); + this.processing = true; + mm.restore(form) + .then(response => { + if (response.type === DataEvent.REQUEST_LAME) { + self.processing = false; + notify.alert(response.message, false); + } else { + self.processing = false; + notify.alert(response.message, true); + setTimeout(() => { + window.location = '/dashboard'; + }, 1500); + } + }) + .catch(err => { + self.processing = false; + notify.alert(err, false); + }); + } - handleReset(e) { - e.stopPropagation(); - e.preventDefault(); - let self = this; - let mm = new Maintenance(); - if (e.target.id == 'get-secret-btn') { - let data = { - email: document.getElementById('email').value, - task: 'retrieveSecret' - }; - this.processing = true; - mm.secret(data) - .then(response => { - self.processing = false; - if (response.secret) { - document.getElementById('secret').value = - response.secret; - notify.alert(response.message, true); - } else { - if (response.type == 'mailSent') { - notify.alert(response.message, true); - } else { - notify.alert(response.message, false); - } - } - }) - .catch(err => { - self.processing = false; - notify.alert(err, false); - }); - } else { - let data = { - newPass: document.getElementById('new_password').value, - newPassConfirm: document.getElementById('new_password2').value, - secret: document.getElementById('secret').value - }; - mm.newPass(data) - .then(response => { - self.processing = false; - if (response.type == 'passNotCreated') { - notify.alert(response.message, false); - } else { - notify.alert(response.message, true); - setTimeout(() => { - window.location = '/dashboard'; - }, 1000); - } - }) - .catch(err => { - self.processing = false; - notify.alert(err, false); - }); - } - } - handleOptions(e) { - e.stopPropagation(); - e.preventDefault(); - let init = document.getElementById('dash-init'); - let restore = document.getElementById('dash-restore'); - if (e.target.id === 'init-switch-restore') { - init.style.display = 'none'; - init.style.visibility = 'hidden'; + handleReset(e) { + e.stopPropagation(); + e.preventDefault(); + let self = this; + let mm = new Maintenance(); + if (e.target.id == 'get-secret-btn') { + let data = { + email: document.getElementById('email').value, + task: 'retrieveSecret' + }; + this.processing = true; + mm.secret(data) + .then(response => { + self.processing = false; + if (response.secret) { + document.getElementById('secret').value = response.secret; + notify.alert(response.message, true); + } else { + if (response.type == 'mailSent') { + notify.alert(response.message, true); + } else { + notify.alert(response.message, false); + } + } + }) + .catch(err => { + self.processing = false; + notify.alert(err, false); + }); + } else { + let data = { + newPass: document.getElementById('new_password').value, + newPassConfirm: document.getElementById('new_password2').value, + secret: document.getElementById('secret').value + }; + mm.newPass(data) + .then(response => { + self.processing = false; + if (response.type == 'passNotCreated') { + notify.alert(response.message, false); + } else { + notify.alert(response.message, true); + setTimeout(() => { + window.location = '/dashboard'; + }, 1000); + } + }) + .catch(err => { + self.processing = false; + notify.alert(err, false); + }); + } + } + handleOptions(e) { + e.stopPropagation(); + e.preventDefault(); + let init = document.getElementById('dash-init'); + let restore = document.getElementById('dash-restore'); + if (e.target.id === 'init-switch-restore') { + init.style.display = 'none'; + init.style.visibility = 'hidden'; - restore.style.display = 'flex'; - restore.style.visibility = 'visible'; - } else { - init.style.display = 'flex'; - init.style.visibility = 'visible'; + restore.style.display = 'flex'; + restore.style.visibility = 'visible'; + } else { + init.style.display = 'flex'; + init.style.visibility = 'visible'; - restore.style.display = 'none'; - restore.style.visibility = 'hidden'; - } - } + restore.style.display = 'none'; + restore.style.visibility = 'hidden'; + } + } } diff --git a/src/com/actions/PageActions.js b/src/com/actions/PageActions.js index 66f32b3..6f4adf8 100644 --- a/src/com/actions/PageActions.js +++ b/src/com/actions/PageActions.js @@ -1,94 +1,86 @@ -import StringUtils from "../utils/StringUtils"; +import StringUtils from '../utils/StringUtils'; export default class PostActions { - //-------------------------- - // constructor - //-------------------------- - constructor() {} - //-------------------------- - // methods - //-------------------------- - collectInfo(files) { - return new Promise((resolve, reject) => { - let pageInfo = new FormData(); - let txt = document.createElement("textarea"); - txt.innerHTML = document.getElementById("highlight-content").innerHTML; - let html = txt.value; - html = html.replace(/<\/?span[^>]*>/g, ""); //removes prism styling - 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( - "uuid", - document.getElementById("post-edit-index").getAttribute("data-uuid") - ); - 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("content", html); - pageInfo.append("title", document.getElementById("post_title").value); - pageInfo.append( - "created", - document.getElementById("post-date").getAttribute("data-raw") - ); - pageInfo.append( - "slug", - new StringUtils().cleanString( - document.getElementById("post_title").value - ) - ); - pageInfo.append("tags", document.getElementById("post_tags").value); - pageInfo.append( - "menu", - document.getElementById("option-menu-pin").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( - "layout", - document.getElementById("page-templates").value - ); - pageInfo.append( - "form_token", - document.getElementById("form_token").value - ); - if (files.length > 0 && files != null) { - for (var i = 0; i < files.length; i++) { - var file = files[i]; - if (file.type.match("image.*")) { - pageInfo.append("page_files[]", file, file.name); - } else { - reject("Not an image file"); - } - } - } else { - //check to see if image exists - if (document.getElementById("featured-image")) { - var imageURL = document.getElementById("featured-image").src; - imageURL != null || imageURL != undefined - ? pageInfo.append("feature_image", imageURL) - : pageInfo.append("feature_image", null); - } else { - //pageInfo.append("feature_image", null); - } - } - //console.log("FILES", files); - resolve(pageInfo); - }); - } - //-------------------------- - // event handlers - //-------------------------- + //-------------------------- + // constructor + //-------------------------- + constructor() {} + //-------------------------- + // methods + //-------------------------- + collectInfo(files) { + return new Promise((resolve, reject) => { + let pageInfo = new FormData(); + let txt = document.createElement('textarea'); + txt.innerHTML = document.getElementById('highlight-content').innerHTML; + let html = txt.value; + html = html.replace(/<\/?span[^>]*>/g, ''); //removes prism styling + 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( + 'uuid', + document.getElementById('post-edit-index').getAttribute('data-uuid') + ); + 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('content', html); + pageInfo.append('title', document.getElementById('post_title').value); + pageInfo.append( + 'created', + document.getElementById('post-date').getAttribute('data-raw') + ); + pageInfo.append( + 'slug', + new StringUtils().cleanString(document.getElementById('post_title').value) + ); + pageInfo.append('tags', document.getElementById('post_tags').value); + pageInfo.append( + 'menu', + document.getElementById('option-menu-pin').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('layout', document.getElementById('page-templates').value); + pageInfo.append('form_token', document.getElementById('form_token').value); + if (files.length > 0 && files != null) { + for (var i = 0; i < files.length; i++) { + var file = files[i]; + if (file.type.match('image.*') || file.type.match('video.mp4')) { + pageInfo.append('page_files[]', file, file.name); + } else { + reject('Not an image file'); + } + } + } else { + //check to see if image exists + if (document.getElementById('featured-image')) { + var imageURL = document.getElementById('featured-image').src; + imageURL != null || imageURL != undefined + ? pageInfo.append('feature_image', imageURL) + : pageInfo.append('feature_image', null); + } else { + //pageInfo.append("feature_image", null); + } + } + //console.log("FILES", files); + resolve(pageInfo); + }); + } + //-------------------------- + // event handlers + //-------------------------- } diff --git a/src/com/controllers/PageEditor.js b/src/com/controllers/PageEditor.js index f0d5014..f335227 100644 --- a/src/com/controllers/PageEditor.js +++ b/src/com/controllers/PageEditor.js @@ -19,27 +19,16 @@ export default class PostEditor { //-------------------------- constructor() { this.processing = false; - let self = this; - this.admin = new FipamoAdminAPI( - null, - document.getElementById('notify-progress') - ); - this.mm = new Maintenance( - null, - null, - document.getElementById('notify-progress') - ); + let self = "this"; + this.admin = new FipamoAdminAPI(null, document.getElementById('notify-progress')); + this.mm = new Maintenance(null, null, document.getElementById('notify-progress')); this.urlPieces = document.URL.split('/'); this.post = []; this.postID = null; this.postUUID = null; this.postLayout = null; this.fm = null; - if ( - document - .getElementById('post-edit-index') - .getAttribute('data-index') - ) { + if (document.getElementById('post-edit-index').getAttribute('data-index')) { this.postID = document .getElementById('post-edit-index') .getAttribute('data-index'); @@ -54,8 +43,8 @@ export default class PostEditor { this.editor = new TextEditor( document.getElementById('edit'), document.getElementById('header').offsetHeight + - document.getElementById('post-header').offsetHeight + - document.getElementById('post-feature').offsetHeight + document.getElementById('post-header').offsetHeight + + document.getElementById('post-feature').offsetHeight ); this.editor.addListener( EditorEvent.EDITOR_DELETE, @@ -64,10 +53,7 @@ export default class PostEditor { ); this.editor.addListener( EditorEvent.EDITOR_UPLOAD_POST_IMAGE, - () => - this.handleEditorOptions( - EditorEvent.EDITOR_UPLOAD_POST_IMAGE - ), + () => this.handleEditorOptions(EditorEvent.EDITOR_UPLOAD_POST_IMAGE), false ); this.editor.addListener( @@ -175,8 +161,7 @@ export default class PostEditor { notify.alert(r.message, true); } else { notify.alert(r.message, true); - window.location = - '/dashboard/page/edit/' + r.id; + window.location = '/dashboard/page/edit/' + r.id; } } }) @@ -191,13 +176,10 @@ export default class PostEditor { notify.alert('Index cannot be deleted', false); return; } - if ( - confirm("AYE! You know you're deleting this post, right?") - ) { + if (confirm("AYE! You know you're deleting this post, right?")) { new PageActions() .collectInfo( - document.getElementById('featured-image-upload') - .files[0] + document.getElementById('featured-image-upload').files[0] ) .then(page => { self.processing = true; @@ -212,7 +194,7 @@ export default class PostEditor { notify.alert(err, false); }); }) - .catch(() => {}); + .catch(() => { }); } else { // Do nothing! } @@ -231,10 +213,7 @@ export default class PostEditor { .imageUpload(type, files) .then(r => { if (r.type == DataEvent.POST_IMAGE_ADDED) { - self.editor.notify( - EditorEvent.EDITOR_UPLOAD_POST_IMAGE, - r.url - ); + self.editor.notify(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, r.url); notify.alert('Image Added to Entry', true); } else { notify.alert('Uh oh. Image not added', false); diff --git a/src/com/ui/FileManager.js b/src/com/ui/FileManager.js index d252783..8c9a6d0 100644 --- a/src/com/ui/FileManager.js +++ b/src/com/ui/FileManager.js @@ -1,5 +1,7 @@ import Sortable from 'sortablejs'; import DataUtils from '../utils/DataUtils'; +import Notfications from './Notifications.js'; +const notify = new Notfications(); export default class FileManager { //-------------------------- @@ -10,7 +12,14 @@ export default class FileManager { this.input = input; this.imageList = imageList; 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.sortedFiles = []; this.storage = []; @@ -26,13 +35,21 @@ export default class FileManager { Sortable.create(this.imageList, { onUpdate: e => { + notify.alert('REINDEXING FILES', null); let currentFiles = []; //store current list let items = e.target.children; for (let index = 0; index < items.length; 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({ id: item.getAttribute('id'), - earl: item.style.backgroundImage.slice(4, -1).replace(/"/g, '') + earl: url }); } this.reindexFiles(currentFiles, 0); @@ -51,11 +68,12 @@ export default class FileManager { var path = sortOrder[step].earl.split('/'); utils.imgLoad(sortOrder[step].earl).then(blob => { var fresh = new File([blob], path[6], { type: blob.type }); + console.log('FRESH FILE', fresh); this.files.push(fresh); if (this.files.length <= count - 1) { this.reindexFiles(sortOrder, ++step); } else { - //console.log('FILES', this.files); + notify.alert('FILES READY TO UPLOAD', true); } }); } @@ -87,6 +105,7 @@ export default class FileManager { f.target.result + ') no-repeat center center / cover'; span.className = 'img-item'; + //span.setAttribute('data-source', theFile.name); image.setAttribute('id', i); self.storage.push([ { @@ -100,6 +119,38 @@ export default class FileManager { //add to files list 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; } }; @@ -132,6 +183,7 @@ export default class FileManager { //this.sortFiles(freshList); 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); } else { diff --git a/src/styles/main/_index.sass b/src/styles/main/_index.sass index 8ca6fee..1bb5c0a 100644 --- a/src/styles/main/_index.sass +++ b/src/styles/main/_index.sass @@ -147,7 +147,7 @@ height: 20px fill: $white - a.post-link + a.post-link, a.post-video-link font-size: 1.5em font-weight: 300 display: inline-block @@ -155,6 +155,10 @@ vertical-align: top text-decoration: none position: relative + overflow: hidden + .post-video + width: 100% + position: absolute label font-size: 1.4em diff --git a/src/styles/main/_posts.sass b/src/styles/main/_posts.sass index 250d9f7..42e4201 100644 --- a/src/styles/main/_posts.sass +++ b/src/styles/main/_posts.sass @@ -13,22 +13,22 @@ width: 50% color: $white font-size: 3em - #post-index-header-right + #post-index-header-right text-align: right display: inline-block width: 50% a button - color: $white - border-radius: 3px - margin-left: 10px - width: 55px - svg + color: $white + border-radius: 3px + margin-left: 10px + width: 55px + svg //@include object-transitions(0.1s) width: 20px height: 17px fill: $white - + .current-filter color: $highlight text-decoration-color: $secondary @@ -61,24 +61,24 @@ background-color: $highlight position: relative label - font-size: 2em - font-weight: 700 - color: $white - padding: 5px - vertical-align: top - display: inline-block - word-wrap: break-word - width: 100% - text-align: center - position: relative - top: 35% - @include text-drop-shadow($black, 1, 2px, 2px, 0) - @include text-drop-shadow($black, 1, 2px, 2px, 0) + font-size: 2em + font-weight: 700 + color: $white + padding: 5px + vertical-align: top + display: inline-block + word-wrap: break-word + width: 100% + text-align: center + position: relative + top: 35% + @include text-drop-shadow($black, 1, 2px, 2px, 0) + @include text-drop-shadow($black, 1, 2px, 2px, 0) #meta width: 100% - 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%) border-radius: 3px - margin: auto + margin: auto bottom: 0 position: absolute padding: 0 0 20px 0 @@ -93,44 +93,44 @@ position: relative background: none button - border-radius: 3px - background: $primary - margin: 0 0 10px 10px - svg + border-radius: 3px + background: $primary + margin: 0 0 10px 10px + svg //@include object-transitions(0.1s) width: 40px height: 20px fill: $secondary .item-options - border-radius: 3px - margin: 5px - display: inline-block + border-radius: 3px + margin: 5px + display: inline-block button[data-active='false'] - background: $primary - svg + background: $primary + svg fill: $secondary - + button[data-active='true'] - background: $tertiary - svg - fill: $primary + background: $tertiary + svg + fill: $primary #option-right display: inline-block width: 50% text-align: right span - font-weight: bold - display: block - background: $white - color: $primary - border-radius: 3px - font-size: .6em - text-align: center - position: relative - padding: 5px - float: right - margin: 0 10px 0 0 - bottom: -15px + font-weight: bold + display: block + background: $white + color: $primary + border-radius: 3px + font-size: .6em + text-align: center + position: relative + padding: 5px + float: right + margin: 0 10px 0 0 + bottom: -15px p padding: 5px 10px 5px 10px @@ -142,7 +142,7 @@ margin: 0 auto a display: inline-block - vertical-align: top + vertical-align: top span.count text-align: center padding: 5px @@ -151,7 +151,6 @@ width: 190px font-size: 1.5em color: $tertiary - #post-edit-index width: 100% @@ -161,13 +160,13 @@ width: 100% #post-header // width 100% - + background: $highlight #post-header-wrapper max-width: 900px margin: 0 auto padding: 0.75rem - label + label color: $white font-size: 0.9em font-family: $baseType @@ -190,7 +189,6 @@ padding: 5px margin: 0 0 5px 0 - #calendar-icon background: color.adjust($primary, $lightness: -15%) border-radius: 3px 0 0 3px @@ -218,7 +216,7 @@ color: $primary padding: 5px margin: 0 0 5px 0 - + #post-options display: inline-block vertical-align: top @@ -231,11 +229,10 @@ button:nth-child(4) border-radius: 0 3px 3px 0 - + a button border-radius: 0 3px 3px 0 !important - button width: 25% @@ -286,13 +283,13 @@ color: $primary vertical-align: middle border-radius: 5px - margin: 0 0 10px 0 - + margin: 0 0 10px 0 + label cursor: pointer font-weight: 600px text-transform: capitalize - + img width: 100% margin: 0 @@ -306,6 +303,24 @@ margin: 0 10px 10px 0 display: inline-block 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 position: absolute @@ -335,34 +350,34 @@ textarea:focus outline: none border-color: $highlight - + #edit // overflow: hidden !important - #edit, #highlight + #edit, #highlight /* Both elements need the same text and space styling so they are directly on top of each other */ //margin: 10px //padding: 10px - 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 + 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 #highlight-content word-wrap: normal white-space: pre-wrap line-break: normal - + #edit, #highlight, #hightlight * font-size: 1.2em font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace line-height: 22pt - + #edit z-index: 1 color: transparent @@ -370,7 +385,6 @@ caret-color: $highlight #highlight z-index: 0 - //pre margin: 0