From d9d004468ad8b26ca4332f86c1c456c7123ec531 Mon Sep 17 00:00:00 2001 From: Ro Date: Fri, 4 Sep 2020 13:33:32 -0700 Subject: [PATCH] opn graph meta edits, log out made public, improved notifications --- brain/data/Render.js | 3 ++ brain/routes/dash/index.js | 9 +++--- brain/views/frame.pug | 12 +++++-- brain/views/partials/dash-nav.pug | 3 ++ src/com/Base.js | 2 ++ src/com/controllers/NavIndex.js | 2 ++ src/com/controllers/PageEditor.js | 1 + src/com/controllers/SettingsIndex.js | 4 +++ src/com/ui/Notifications.js | 48 ++++++++++++++++++++-------- src/styles/main/_structure.styl | 26 +++++++++++---- 10 files changed, 83 insertions(+), 27 deletions(-) diff --git a/brain/data/Render.js b/brain/data/Render.js index 201bd2a..3c3116f 100644 --- a/brain/data/Render.js +++ b/brain/data/Render.js @@ -103,9 +103,12 @@ export default class Render { } buffed = new StringUtils().decodeHTML(buffed); let html = md.render(buffed, { html: true, xhtmlOut: true }); + //add open graph meta variables let file = pug.renderFile(template, { title: page.metadata.title, default_bg: page.metadata.feature, + image: page.metadata.feature, + keywords: page.metadata.tags, content: html, tags: tags, menu: config.menu, diff --git a/brain/routes/dash/index.js b/brain/routes/dash/index.js index 1b582c8..beaa0ac 100644 --- a/brain/routes/dash/index.js +++ b/brain/routes/dash/index.js @@ -54,10 +54,9 @@ router.get('/', function (req, res) { //-------------------------- // Logout //-------------------------- -router.post('/logout', function (req, res) { - req.logout(); - return res.json({ - message: 'LOGGED OUT' - }); +router.get('/logout', (req, res) => { + //req.logout(); + req.session.destroy(); + res.redirect('/@/dashboard'); }); module.exports = router; diff --git a/brain/views/frame.pug b/brain/views/frame.pug index 65f715b..5d299ff 100644 --- a/brain/views/frame.pug +++ b/brain/views/frame.pug @@ -12,11 +12,17 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en") //meta(name="twitter:image" content="https://thetwelfth.house/base-assets/images/current.png") link(rel='stylesheet', href="/assets/css/dash.css", type='text/css') body - #notifications.notifications + #notifications.notifications.notify-close #notifyMessage.notifyMessage - .notify-icon + .notify-icon#notify-good svg(viewBox="0 0 20 20" class="icons") - use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-bell') + use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt') + .notify-icon#notify-lame + svg(viewBox="0 0 20 20" class="icons") + use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-sad') + .notify-icon#notify-working + svg(viewBox="0 0 20 20" class="icons") + use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-cog') p#message-text This is a message .main-container#main-content section#dash-index-content diff --git a/brain/views/partials/dash-nav.pug b/brain/views/partials/dash-nav.pug index e966ec9..a52be7c 100644 --- a/brain/views/partials/dash-nav.pug +++ b/brain/views/partials/dash-nav.pug @@ -2,3 +2,6 @@ a#settings(href="/@/dashboard/settings") Settings | . a#navigation(href="/@/dashboard/navigation") Navigation + | . + + a#navigation(href="/@/dashboard/logout") Log Out diff --git a/src/com/Base.js b/src/com/Base.js index 4c47011..52a8f6e 100644 --- a/src/com/Base.js +++ b/src/com/Base.js @@ -50,11 +50,13 @@ export default class Base { e.stopPropagation(); e.preventDefault(); let authForm = data.formDataToJSON(document.getElementById('login')); + notify.alert('Looking, hold up', null); api.login(authForm) .then(response => { 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'; diff --git a/src/com/controllers/NavIndex.js b/src/com/controllers/NavIndex.js index 8135dda..0e4b5d3 100644 --- a/src/com/controllers/NavIndex.js +++ b/src/com/controllers/NavIndex.js @@ -19,6 +19,7 @@ export default class NavIndex { Sortable.create(document.getElementById('nav-pages'), { onUpdate: () => { new NavActions().syncMenu().then(data => { + notify.alert('Updating Menu', null); admin.syncNav(data).then(r => { if (r.type == DataEvent.MENU_UPDATED) { notify.alert(r.message, true); @@ -45,6 +46,7 @@ export default class NavIndex { new NavActions().removeItem(id); new NavActions().syncMenu().then(data => { data.remove = e.target.getAttribute('data-uuid'); + notify.alert('Editing Menu', null); admin.syncNav(data).then(r => { if (r.type == DataEvent.MENU_UPDATED) { notify.alert(r.message, true); diff --git a/src/com/controllers/PageEditor.js b/src/com/controllers/PageEditor.js index de11ebd..be4e7fb 100644 --- a/src/com/controllers/PageEditor.js +++ b/src/com/controllers/PageEditor.js @@ -134,6 +134,7 @@ export default class PostEditor { new PageActions() .collectInfo(document.getElementById('featured-image-upload').files[0]) .then(page => { + notify.alert('Writing down changes', null); admin .pageActions(task, page) .then(r => { diff --git a/src/com/controllers/SettingsIndex.js b/src/com/controllers/SettingsIndex.js index 93016f4..9899004 100644 --- a/src/com/controllers/SettingsIndex.js +++ b/src/com/controllers/SettingsIndex.js @@ -23,6 +23,7 @@ export default class SettingsIndex { new SettingsActions() .getInfo() .then(data => { + notify.alert('Saving Settings', null); admin.syncSettings(data).then(r => { if (r.type == DataEvent.SETTINGS_UPDATED) { notify.alert(r.message, true); @@ -155,6 +156,7 @@ export default class SettingsIndex { } } handleImageUpload(type, files) { + notify.alert('Uploading Image... ', null); admin .imageUpload(type, files) .then(r => { @@ -174,6 +176,7 @@ export default class SettingsIndex { e.preventDefault(); e.stopPropagation(); let task = { task: 'publish all pages' }; + notify.alert('Publishing site...', null); admin .publishSite(task) .then(r => { @@ -186,6 +189,7 @@ export default class SettingsIndex { handleBackup(e) { e.preventDefault(); e.stopPropagation(); + notify.alert('Creating backup', null); admin .handleBackup(e.target.id, e.target.files) .then(r => { diff --git a/src/com/ui/Notifications.js b/src/com/ui/Notifications.js index 598515a..6f8fc75 100644 --- a/src/com/ui/Notifications.js +++ b/src/com/ui/Notifications.js @@ -1,7 +1,10 @@ import anime from 'animejs/lib/anime.es.js'; const notifcation = document.getElementById('notifications'); -const message = document.getElementById('notifyMessage'); const messageText = document.getElementById('message-text'); +const iconGood = document.getElementById('notify-good'); +const iconLame = document.getElementById('notify-lame'); +const iconWorking = document.getElementById('notify-working'); + export default class Notfications { //-------------------------- // constructor @@ -12,26 +15,44 @@ export default class Notfications { //-------------------------- alert(text, status) { - messageText.innerHTML = text; - notifcation.style.display = 'flex'; + //notifcation.style.display = 'flex'; + iconWorking.style.display = 'none'; + iconGood.style.display = 'none'; + iconLame.style.display = 'none'; var color = ''; - status ? (color = '#32cd32') : (color = '#F64747'); + if (status !== null) { + if (status) { + color = '#32cd32'; + iconWorking.style.display = 'none'; + iconGood.style.display = 'block'; + } else { + color = '#F64747'; + iconWorking.style.display = 'none'; + iconLame.style.display = 'block'; + } + } else { + color = '#200317'; + iconWorking.style.display = 'block'; + } + + notifcation.classList.remove('notify-close'); + notifcation.classList.add('notify-open'); + messageText.innerHTML = text; anime({ targets: messageText, backgroundColor: color, easing: 'easeInOutQuint', - duration: 500, + duration: 700, complete: () => { - setTimeout(() => { - anime({ - targets: messageText, - backgroundColor: '#374857', - easing: 'easeOutQuint', - duration: 500 - }); - }, 1000); + if (status !== null) { + setTimeout(() => { + notifcation.classList.add('notify-close'); + notifcation.classList.remove('notify-open'); + }, 1000); + } } }); + /* anime({ targets: message, marginTop: '-20px', @@ -53,6 +74,7 @@ export default class Notfications { }, 1000); } }); + */ } //-------------------------- diff --git a/src/styles/main/_structure.styl b/src/styles/main/_structure.styl index 71beb7a..bf9685d 100644 --- a/src/styles/main/_structure.styl +++ b/src/styles/main/_structure.styl @@ -2,6 +2,7 @@ html, body background-color $primary - 60% font 400 1em $baseType height 100% + perspective: 1000px a font 300 1em $baseType @@ -21,20 +22,24 @@ svg.icons z-index 2000 height 10% width 100% - display none + display block align-items center justify-content center padding 0 - margin 0 + margin 0 + transform-origin: 50% 0; + transition all 0.5s cubic-bezier(.83,.05,.28,1.0)//ks-easing( "out-back" ); #notifyMessage - margin-top: 0px; - padding-top -125px + margin 0 auto + //padding-top -125px height 50px; width 500px display: flex; align-items center justify-content center - opacity: 0 + opacity: 1 + #notify-good, #notify-lame, #notify-working + display: none .notify-icon background $black padding 8px 5px 5px 5px @@ -45,7 +50,7 @@ svg.icons border 2px solid $white p color $white - background $highlight + background $primary - 60% width 400px height 28px padding 15px 0 0 5px @@ -56,6 +61,15 @@ svg.icons .icons fill $white +.notify-close + transform-style preserve-3d + + transform: rotateX(-120deg) + +.notify-open + transform-style preserve-3d + //-origin: 50% 0; + transform: rotateX(0deg) .blog-container width 100%