Loading screen on editor / source init state
This commit is contained in:
NGPixel
parent
1ced194cd2
commit
1ba115a997
59
assets/js/bundle.min.js
vendored
59
assets/js/bundle.min.js
vendored
File diff suppressed because one or more lines are too long
@ -5,6 +5,7 @@ import Vue from 'vue'
|
||||
import _ from 'lodash'
|
||||
import filesize from 'filesize.js'
|
||||
import SimpleMDE from 'simplemde'
|
||||
import pageLoader from '../components/page-loader'
|
||||
|
||||
// ====================================
|
||||
// Markdown Editor
|
||||
@ -189,6 +190,8 @@ module.exports = (alerts, pageEntryPath, socket) => {
|
||||
vueVideo = require('./editor-video.js')(mde, mdeModalOpenState)
|
||||
vueCodeBlock = require('./editor-codeblock.js')(mde, mdeModalOpenState)
|
||||
|
||||
pageLoader.complete()
|
||||
|
||||
// -> Save
|
||||
|
||||
let saveCurrentDocument = (ev) => {
|
||||
|
||||
14
client/js/components/page-loader.js
Normal file
14
client/js/components/page-loader.js
Normal file
@ -0,0 +1,14 @@
|
||||
'use strict'
|
||||
|
||||
import $ from 'jquery'
|
||||
import _ from 'lodash'
|
||||
|
||||
module.exports = {
|
||||
|
||||
complete () {
|
||||
$('#page-loader').addClass('is-loaded')
|
||||
_.delay(() => {
|
||||
$('#page-loader').addClass('is-hidden')
|
||||
}, 1100)
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
'use strict'
|
||||
|
||||
import jQuery from 'jquery'
|
||||
import $ from 'jquery'
|
||||
|
||||
jQuery(document).ready(function ($) {
|
||||
$(() => {
|
||||
$('#login-user').focus()
|
||||
})
|
||||
|
||||
@ -4,6 +4,7 @@ import $ from 'jquery'
|
||||
import * as ace from 'brace'
|
||||
import 'brace/theme/tomorrow_night'
|
||||
import 'brace/mode/markdown'
|
||||
import pageLoader from '../components/page-loader'
|
||||
|
||||
module.exports = (alerts) => {
|
||||
if ($('#page-type-source').length) {
|
||||
@ -20,5 +21,9 @@ module.exports = (alerts) => {
|
||||
|
||||
require('../modals/create.js')(currentBasePath)
|
||||
require('../modals/move.js')(currentBasePath, alerts)
|
||||
|
||||
scEditor.renderer.on('afterRender', () => {
|
||||
pageLoader.complete()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,5 +34,6 @@ $primary: 'indigo';
|
||||
@import 'components/_editor';
|
||||
|
||||
@import 'layout/_header';
|
||||
@import 'layout/_loader';
|
||||
|
||||
@import 'pages/_welcome';
|
||||
|
||||
@ -1,145 +0,0 @@
|
||||
|
||||
|
||||
#page-type-view > section {
|
||||
transition: background-color .5s ease;
|
||||
|
||||
&.blurred {
|
||||
background-color: mc('grey', '50');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sd-menus {
|
||||
|
||||
width: 300px;
|
||||
|
||||
}
|
||||
|
||||
.menu {
|
||||
.menu-list a, .menu-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-list .icon {
|
||||
margin-right: 8px
|
||||
}
|
||||
}
|
||||
|
||||
.section.is-small {
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.mkcontent {
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px dotted mc('blue', '500');
|
||||
padding-bottom: 4px;
|
||||
font-weight: 400;
|
||||
color: desaturate(mc('blue', '500'), 20%);
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 1px dotted mc('grey', '100');
|
||||
padding-bottom: 4px;
|
||||
font-weight: 400;
|
||||
color: desaturate(mc('purple', '500'), 20%);
|
||||
}
|
||||
|
||||
a.toc-anchor {
|
||||
font-size: 80%;
|
||||
color: mc('blue', '500');
|
||||
border-bottom: none;
|
||||
|
||||
&:visited {
|
||||
color: mc('purple', '500') !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a.external-link {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
|
||||
&:before {
|
||||
content: "\f08e";
|
||||
font-family: FontAwesome;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-decoration: inherit;
|
||||
color: mc('grey', '500');
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0;
|
||||
font-family: $core-font-monospace;
|
||||
|
||||
> code {
|
||||
box-shadow: inset 0 0 5px 0 mc('grey', '100');
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pre + p {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
img.right {
|
||||
float:right;
|
||||
}
|
||||
|
||||
img.pagelogo {
|
||||
float: right;
|
||||
margin-top: -75px;
|
||||
max-width: 200px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: mc('grey', '700');
|
||||
}
|
||||
|
||||
.twa {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
table thead th {
|
||||
background-color: mc('blue', '500');
|
||||
color: #FFF;
|
||||
border-color: #FFF;
|
||||
border-bottom-color: mc('blue', '500');
|
||||
border-top-color: mc('blue', '500');
|
||||
|
||||
&:first-child {
|
||||
border-left-color: mc('blue', '500');
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right-color: mc('blue', '500');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content a:not(.button):visited {
|
||||
color: mc('teal', '500');
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
code {
|
||||
font-weight: 500;
|
||||
color: mc('purple', '500');
|
||||
}
|
||||
|
||||
p code {
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
54
client/scss/layout/_loader.scss
Normal file
54
client/scss/layout/_loader.scss
Normal file
@ -0,0 +1,54 @@
|
||||
#page-loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: mc('blue-grey', '800');
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: mc('blue-grey', '100');
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
flex-direction: column;
|
||||
|
||||
> i {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
@include spinner(mc('blue-grey', '200'), 0.4s, 48px);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(pageLoaderExit) {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
99% {
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-loaded {
|
||||
animation: pageLoaderExit 1s ease forwards;
|
||||
}
|
||||
|
||||
&.is-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,85 +0,0 @@
|
||||
/**
|
||||
* Clearfix
|
||||
*
|
||||
* @return {string} Clearfix attribute
|
||||
*/
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Placeholder attribute for inputs
|
||||
*
|
||||
* @return {string} Placeholder attributes
|
||||
*/
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {@content};
|
||||
&::-moz-placeholder {@content}
|
||||
&:-ms-input-placeholder {@content}
|
||||
&:placeholder-shown {@content};
|
||||
}
|
||||
|
||||
/**
|
||||
* Spinner element
|
||||
*
|
||||
* @param {string} $color - Color
|
||||
* @param {string} $dur - Animation Duration
|
||||
* @param {int} $width - Width
|
||||
* @param {int} $height [$width] - height
|
||||
*
|
||||
* @return {string} Spinner element
|
||||
*/
|
||||
@mixin spinner($color,$dur,$width,$height:$width) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
border-radius: 50%;
|
||||
box-shadow:0 0 0 1px rgba(0,0,0,0.1), 2px 1px 0 $color;
|
||||
@include prefix(animation, spin $dur linear infinite);
|
||||
@include keyframes(spin) {
|
||||
100%{
|
||||
@include prefix(transform, rotate(360deg));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Prefixes for keyframes
|
||||
*
|
||||
* @param {string} $animation-name - The animation name
|
||||
*
|
||||
* @return {string} Prefixed keyframes attributes
|
||||
*/
|
||||
@mixin keyframes($animation-name) {
|
||||
@-webkit-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@-moz-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@-o-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prefix function for browser compatibility
|
||||
*
|
||||
* @param {string} $property - Property name
|
||||
* @param {any} $value - Property value
|
||||
*
|
||||
* @return {string} Prefixed attributes
|
||||
*/
|
||||
@mixin prefix($property, $value) {
|
||||
-webkit-#{$property}: #{$value};
|
||||
-moz-#{$property}: #{$value};
|
||||
-ms-#{$property}: #{$value};
|
||||
-o-#{$property}: #{$value};
|
||||
#{$property}: #{$value};
|
||||
}
|
||||
@ -12,8 +12,6 @@ html(data-logic='configure')
|
||||
// JS / CSS
|
||||
script(type='text/javascript', src='/js/configure.min.js')
|
||||
|
||||
block head
|
||||
|
||||
body
|
||||
#root
|
||||
#header-container
|
||||
|
||||
@ -25,3 +25,8 @@ block content
|
||||
include ../modals/editor-file.pug
|
||||
include ../modals/editor-video.pug
|
||||
include ../modals/editor-codeblock.pug
|
||||
|
||||
block outside
|
||||
#page-loader
|
||||
i
|
||||
span Loading editor...
|
||||
|
||||
@ -25,3 +25,8 @@ block content
|
||||
include ../modals/editor-file.pug
|
||||
include ../modals/editor-video.pug
|
||||
include ../modals/editor-codeblock.pug
|
||||
|
||||
block outside
|
||||
#page-loader
|
||||
i
|
||||
span Loading editor...
|
||||
|
||||
@ -29,3 +29,8 @@ block content
|
||||
|
||||
include ../modals/create.pug
|
||||
include ../modals/move.pug
|
||||
|
||||
block outside
|
||||
#page-loader
|
||||
i
|
||||
span Loading source...
|
||||
|
||||
Loading…
Reference in New Issue
Block a user