From 92ef0626c7d021753f5ef21281ad6b45ed9e5f06 Mon Sep 17 00:00:00 2001 From: Miles Pong Date: Sat, 17 Mar 2018 12:17:52 +0800 Subject: [PATCH 1/9] Update editor-related resources together --- resources/assets/admin/js/editor.js | 93 ++++++++++++++++ resources/assets/admin/sass/editor.scss | 68 ++++++++++++ resources/views/admin/pages/_form.blade.php | 58 +--------- resources/views/admin/posts/_form.blade.php | 115 +------------------- webpack.mix.backend.js | 4 +- 5 files changed, 174 insertions(+), 164 deletions(-) create mode 100644 resources/assets/admin/js/editor.js create mode 100644 resources/assets/admin/sass/editor.scss diff --git a/resources/assets/admin/js/editor.js b/resources/assets/admin/js/editor.js new file mode 100644 index 0000000..abbd208 --- /dev/null +++ b/resources/assets/admin/js/editor.js @@ -0,0 +1,93 @@ +$(function () { + $('#description').trigger('autoresize'); + + /* + * TODO + * 1. use axios + * 2. result feedback + * */ + $('#title').blur(e => { + let text = e.target.value; + if (!text || $('#slug').val()) { + return; + } + $.post($slugTranslationURL, {text}) + .done(data => { + $('#slug').val(data.slug); + $('#slug-label').addClass('active'); + }) + .fail((jqXHR, textStatus, errorThrown) => { + // Log the error to the console + console.error( + "The following error occurred: " + + textStatus, errorThrown + ); + }) + }); + + /* + * TODO + * 1. use axios + * 2. uploading feedback + * 3. result feedback + * */ + $('#file-upload').change(e => { + let fd = new FormData(); + fd.append('image', e.target.files[0]); + + $.ajax({ + url: $imageUploadURL, + type: 'POST', + data: fd, + processData: false, + contentType: false + }).done(data => { + console.log(data); + $('#feature_img').val(data.path); + }).fail((jqXHR, textStatus, errorThrown) => { + // Log the error to the console + console.error( + "The following error occurred: " + + textStatus, errorThrown + ); + swal( + 'Oops...', + 'Something went wrong!', + 'error' + ) + }) + }); + + $('#body-label').addClass('active'); + + $('#published_at').click(() => { + dateInstance.open() + }); + + $('#published_time').change((e) => { + $('#published_at').val($('#published_date').val() + ' ' + e.target.value); + $('#published_at-label').addClass('active'); + }); +}); + +let simplemde = new SimpleMDE({ + element: document.getElementById("body"), + spellChecker: false // Multiple languages haven't been supported yet +}); + +// TODO temporarily fixed empty form body string when first submit +simplemde.codemirror.on("change", function () { + $('#body').val(simplemde.value()); +}); + +let timeInstance = M.Timepicker.init(document.querySelector('.timepicker')); + +let dateInstance = M.Datepicker.init(document.querySelector('.datepicker'), { + format: 'yyyy-mm-dd', + onClose: () => { + if ($('#published_date').val()) { + // TODO will-change memory exhausted? + timeInstance.open(); + } + } +}); \ No newline at end of file diff --git a/resources/assets/admin/sass/editor.scss b/resources/assets/admin/sass/editor.scss new file mode 100644 index 0000000..4ca0493 --- /dev/null +++ b/resources/assets/admin/sass/editor.scss @@ -0,0 +1,68 @@ +@media only screen and (min-width: 993px) { + .body-field .CodeMirror-fullscreen, .body-field .fullscreen { + margin-left: 300px; + } +} + +.file-path { + display: none; +} + +.editor-toolbar { + margin-top: 15px; +} + +.body-field { + + .CodeMirror-fullscreen { + top: 110px; + } + + .fullscreen { + margin-top: 64px; + } + + .editor-preview, .editor-preview-side { + line-height: 2.0; + font-size: 16px; + + strong { + font-weight: 600; + } + + h1, h2, h3, h4, h5, h6 { + font-weight: 600; + } + + h1 { + font-size: 2.32rem !important; + } + h2 { + font-size: 1.78rem !important; + } + h3 { + font-size: 1.60rem !important; + } + h4 { + font-size: 1.35rem !important; + } + h5 { + font-size: 1.20rem !important; + } + h6 { + font-size: 1.15rem !important; + } + + ul { + margin-left: 25px; + + li { + list-style-type: initial; + } + } + + img { + max-width: 100%; + } + } +} \ No newline at end of file diff --git a/resources/views/admin/pages/_form.blade.php b/resources/views/admin/pages/_form.blade.php index 7bb2aff..0c3f28f 100644 --- a/resources/views/admin/pages/_form.blade.php +++ b/resources/views/admin/pages/_form.blade.php @@ -9,7 +9,7 @@
- +
@@ -32,62 +32,14 @@ @push('css') - + @endpush @push('js') + @endpush \ No newline at end of file diff --git a/resources/views/admin/posts/_form.blade.php b/resources/views/admin/posts/_form.blade.php index 1009c2b..ab0d628 100644 --- a/resources/views/admin/posts/_form.blade.php +++ b/resources/views/admin/posts/_form.blade.php @@ -56,7 +56,7 @@
- +
@@ -89,119 +89,14 @@ @push('css') - + @endpush @push('js') + @endpush \ No newline at end of file diff --git a/webpack.mix.backend.js b/webpack.mix.backend.js index b2742c2..44c13b8 100644 --- a/webpack.mix.backend.js +++ b/webpack.mix.backend.js @@ -13,7 +13,9 @@ const cpx = require('cpx'); mix.setPublicPath(path.normalize('public/backend')) .js('resources/assets/admin/js/admin.js', 'js') - .sass('resources/assets/admin/sass/admin.scss', 'css'); + .sass('resources/assets/admin/sass/admin.scss', 'css') + .js('resources/assets/admin/js/editor.js', 'js') + .sass('resources/assets/admin/sass/editor.scss', 'css'); // Vendor extraction mix.extract(['lodash', 'jquery', 'materialize-css', 'vue', 'axios']); From 40c66f0b2d31e10d80b700f2bb7b0e04dd630ae5 Mon Sep 17 00:00:00 2001 From: Miles Pong Date: Sat, 17 Mar 2018 12:18:21 +0800 Subject: [PATCH 2/9] Optimize style in mobile --- resources/assets/sass/app.scss | 4 ---- resources/assets/sass/modules/article.scss | 11 ++++++++--- resources/views/admin/partials/navbar.blade.php | 1 + 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss index 245d9f6..6bd6554 100644 --- a/resources/assets/sass/app.scss +++ b/resources/assets/sass/app.scss @@ -58,8 +58,4 @@ code:not([class]) { hyphens: none; position: relative; font-size: 1.1rem; -} - -strong { - font-weight: 600; } \ No newline at end of file diff --git a/resources/assets/sass/modules/article.scss b/resources/assets/sass/modules/article.scss index 23abe5a..676c042 100644 --- a/resources/assets/sass/modules/article.scss +++ b/resources/assets/sass/modules/article.scss @@ -45,10 +45,10 @@ .post-main { padding-top: 1rem; font-size: 16px; - line-height: 1.8; + line-height: 2.0; - h1,h2,h3,h4,h5,h6 { - font-weight: 600; + h1,h2,h3,h4,h5,h6,strong { + font-weight: bold; } h2 { @@ -75,6 +75,11 @@ .card-panel { padding-bottom: 0; + @media #{$small-and-down} { + padding-left: 14px; + padding-right: 14px; + } + &.page-panel { padding-bottom: 24px !important; } diff --git a/resources/views/admin/partials/navbar.blade.php b/resources/views/admin/partials/navbar.blade.php index acef087..ee51fbc 100644 --- a/resources/views/admin/partials/navbar.blade.php +++ b/resources/views/admin/partials/navbar.blade.php @@ -4,6 +4,7 @@