diff --git a/public/assets/css/dash.css b/public/assets/css/dash.css index addb51c..ff1c15e 100644 --- a/public/assets/css/dash.css +++ b/public/assets/css/dash.css @@ -1912,6 +1912,7 @@ a { font: 300 1em Helvetica, Arial, sans-serif; color: #b2cce5; text-decoration: underline; + transition: all 0.2s linear; } svg.icons { @@ -2057,10 +2058,7 @@ svg.icons { border-radius: 50px; } .main-container section header #wrapper #right #dash-menu a button svg { - -moz-transition: all 0.1s linear; - -webkit-transition: all 0.1s linear; - -o-transition: all 0.1s linear; - transition: all 0.1s linear; + transition: all 0.2s linear; width: 40px; height: 20px; fill: #EFEBE3; @@ -2270,10 +2268,7 @@ svg.icons { margin-left: 10px; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-header-right a button svg { - -moz-transition: all 0.1s linear; - -webkit-transition: all 0.1s linear; - -o-transition: all 0.1s linear; - transition: all 0.1s linear; + transition: all 0.2s linear; width: 40px; height: 20px; fill: #EFEBE3; @@ -2852,9 +2847,6 @@ button, input[type=submit] { cursor: pointer; border: 0; padding: 10px 0 5px 0; - -moz-transition: all 0.3s linear; - -webkit-transition: all 0.3s linear; - -o-transition: all 0.3s linear; transition: all 0.3s linear; } @@ -2919,6 +2911,7 @@ select { width: 55px; } #post-index #post-index-wrapper #post-index-header #post-index-header-right a svg { + transition: all 0.1s linear; width: 20px; height: 17px; fill: #EFEBE3; @@ -3000,10 +2993,7 @@ select { margin: 0 0 10px 10px; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg, #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options #option-left svg { - -moz-transition: all 0.1s linear; - -webkit-transition: all 0.1s linear; - -o-transition: all 0.1s linear; - transition: all 0.1s linear; + transition: all 0.2s linear; width: 40px; height: 20px; fill: #b2cce5; @@ -3152,13 +3142,6 @@ select { #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button { width: 25%; height: 45px; - -moz-transition: all 0.3s linear; - -webkit-transition: all 0.3s linear; - -o-transition: all 0.3s linear; - transition: all 0.3s linear; - -moz-transition: all 0.3s linear; - -webkit-transition: all 0.3s linear; - -o-transition: all 0.3s linear; transition: all 0.3s linear; margin: 0; border-radius: 0; @@ -3712,9 +3695,6 @@ select { background: #b2cce5; width: 10%; height: 39px; - -moz-transition: all 0.3s linear; - -webkit-transition: all 0.3s linear; - -o-transition: all 0.3s linear; transition: all 0.3s linear; margin: 0; border-radius: 0; diff --git a/src/com/Base.js b/src/com/Base.js index 18b9f61..3988911 100644 --- a/src/com/Base.js +++ b/src/com/Base.js @@ -8,205 +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/styles/main/_editor.sass b/src/styles/main/_editor.sass index 782a3e6..88b53a7 100644 --- a/src/styles/main/_editor.sass +++ b/src/styles/main/_editor.sass @@ -2,7 +2,6 @@ // margin 10px top: 1px border-radius: 3px - // background-opacity($primary - 10%, 0.50) width: 100% max-width: 880px margin-top: 30px @@ -17,7 +16,7 @@ background: $secondary width: 10% height: 39px - @include object-transitions(0.3s) + transition: all 0.3s linear margin: 0 border-radius: 0 display: inline-block diff --git a/src/styles/main/_forms.sass b/src/styles/main/_forms.sass index f44833c..ce57400 100644 --- a/src/styles/main/_forms.sass +++ b/src/styles/main/_forms.sass @@ -36,7 +36,7 @@ button, input[type=submit] cursor: pointer border: 0 padding: 10px 0 5px 0 - @include object_transitions(.3s) + transition: all 0.3s linear select font: 14px $baseType diff --git a/src/styles/main/_index.sass b/src/styles/main/_index.sass index 333c409..236f1ad 100644 --- a/src/styles/main/_index.sass +++ b/src/styles/main/_index.sass @@ -142,7 +142,7 @@ border-radius: 3px margin-left: 10px svg - @include object-transitions(0.1s) + transition: all 0.2s linear width: 40px height: 20px fill: $white @@ -174,14 +174,13 @@ text-align: center position: relative top: 35% - @include text-drop-shadow($black, 1, 2px, 2px, 0) + text-shadow: 2px 2px 0 rgba($black, 1) div#options width: 100% position: absolute bottom: 0 border-radius: 0 0 3px 3px - //background-opacity($black, .35) background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%) #option-left diff --git a/src/styles/main/_mixins.sass b/src/styles/main/_mixins.sass index b3af067..ef3093f 100644 --- a/src/styles/main/_mixins.sass +++ b/src/styles/main/_mixins.sass @@ -1,13 +1,3 @@ -@mixin text-drop-shadow($rgb_value, $opacity, $offsetX, $offsetY, $blur) - text-shadow: $offsetX $offsetY $blur rgba($rgb_value, $opacity) - -@mixin object-transitions($rate) - -moz-transition: all $rate linear - -webkit-transition: all $rate linear - -o-transition: all $rate linear - transition: all $rate linear - - @mixin background-opacity($rgb_value, $opacity) background: rgba($rgb_value, $opacity) diff --git a/src/styles/main/_posts.sass b/src/styles/main/_posts.sass index f386d7e..5f1b028 100644 --- a/src/styles/main/_posts.sass +++ b/src/styles/main/_posts.sass @@ -24,7 +24,7 @@ margin-left: 10px width: 55px svg - //@include object-transitions(0.1s) + transition: all 0.1s linear width: 20px height: 17px fill: $white @@ -75,7 +75,7 @@ text-align: center position: relative top: 35% - @include text-drop-shadow($black, 1, 2px, 2px, 0) + text-shadow: 2px 2px 0 rgba($black, 1) #meta width: 100% background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%) @@ -99,7 +99,7 @@ background: $primary margin: 0 0 10px 10px svg - @include object-transitions(0.1s) + transition: all 0.2s linear width: 40px height: 20px fill: $secondary @@ -239,8 +239,7 @@ button width: 25% height: 45px - @include object-transitions(0.3s) - @include object-transitions(0.3s) + transition: all 0.3s linear margin: 0 border-radius: 0 display: inline-block diff --git a/src/styles/main/_structure.sass b/src/styles/main/_structure.sass index 3bfbe81..1a0233b 100644 --- a/src/styles/main/_structure.sass +++ b/src/styles/main/_structure.sass @@ -7,7 +7,7 @@ a font: 300 1em $baseType color: $secondary text-decoration: underline - //@include object-transitions(0.1s) + transition: all 0.2s linear svg.icons width: 25px @@ -138,7 +138,7 @@ svg.icons button border-radius: 50px svg - @include object-transitions(0.1s) + transition: all 0.2s linear width: 40px height: 20px fill: $white