forked from projects/fipamo
started smoothing out rte notifcation handling, cleaned up styles for date picker
This commit is contained in:
parent
47f76e65fc
commit
2b26d3b525
13 changed files with 1208 additions and 1070 deletions
|
@ -2189,7 +2189,6 @@ select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#entries-edit-index #entries-edit-index-wrapper #entry-header {
|
#entries-edit-index #entries-edit-index-wrapper #entry-header {
|
||||||
width: 100%;
|
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
|
@ -2206,9 +2205,23 @@ select {
|
||||||
background: #91867a;
|
background: #91867a;
|
||||||
font-family: 'Apercu';
|
font-family: 'Apercu';
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 150px;
|
height: 115px;
|
||||||
color: #4c463f;
|
color: #4c463f;
|
||||||
}
|
}
|
||||||
|
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry-date {
|
||||||
|
background: #897e71;
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
width: 105px;
|
||||||
|
font-family: 'Apercu';
|
||||||
|
color: #cd898d;
|
||||||
|
}
|
||||||
|
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta label {
|
||||||
|
background: #81776b;
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px;
|
||||||
|
color: #a69d93;
|
||||||
|
}
|
||||||
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #featured-click,
|
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #featured-click,
|
||||||
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #post-image {
|
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #post-image {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -2257,75 +2270,6 @@ select {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
line-break: normal;
|
line-break: normal;
|
||||||
}
|
}
|
||||||
/**
|
|
||||||
-------------------------------
|
|
||||||
-- Editor
|
|
||||||
-------------------------------
|
|
||||||
**/
|
|
||||||
#edit-control {
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
top: 1px;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: rgba(137,126,113,0.75);
|
|
||||||
z-index: 2000;
|
|
||||||
}
|
|
||||||
#edit-control button {
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
#edit-control #post-sumbit-btn {
|
|
||||||
height: 30px;
|
|
||||||
background: #65b16c;
|
|
||||||
color: #418147;
|
|
||||||
}
|
|
||||||
#edit-control #option-date {
|
|
||||||
height: 30px;
|
|
||||||
padding-top: 6px;
|
|
||||||
}
|
|
||||||
#edit-control #option-date svg {
|
|
||||||
margin: -13px 5px 0 0;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
fill: #eee;
|
|
||||||
}
|
|
||||||
#edit-control .content-editor-btn-icon {
|
|
||||||
height: 30px;
|
|
||||||
width: 30px;
|
|
||||||
background: #643c32;
|
|
||||||
padding: 5px 5px 1px 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
color: #968c80;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#edit-control .content-editor-btn-icon svg {
|
|
||||||
fill: #968c80;
|
|
||||||
}
|
|
||||||
#edit-control .content-editor-btn-text {
|
|
||||||
width: 30px;
|
|
||||||
background: #643c32;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
color: #968c80;
|
|
||||||
vertical-align: top;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#edit-control #option-bold {
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
#edit-control #option-italic {
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: none;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
#edit-control #option-strikethrough {
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: line-through;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
.dp-modal {
|
.dp-modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -2635,11 +2579,113 @@ select {
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
-------------------------------
|
||||||
|
-- Editor
|
||||||
|
-------------------------------
|
||||||
|
**/
|
||||||
|
#edit-control {
|
||||||
|
margin: 10px;
|
||||||
|
top: 1px;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgba(137,126,113,0.75);
|
||||||
|
z-index: 2000;
|
||||||
|
}
|
||||||
|
#edit-control button {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
#edit-control #post-sumbit-btn {
|
||||||
|
-moz-transition: all 0.3s linear;
|
||||||
|
-webkit-transition: all 0.3s linear;
|
||||||
|
-o-transition: all 0.3s linear;
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
padding: 5px 5px 1px 5px;
|
||||||
|
border-radius: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#edit-control .icon-hide {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
#edit-control .submit-start {
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
#edit-control .submit-start svg {
|
||||||
|
fill: #cd898d;
|
||||||
|
}
|
||||||
|
#edit-control .submit-cool {
|
||||||
|
background: #65b16c;
|
||||||
|
}
|
||||||
|
#edit-control .submit-cool svg {
|
||||||
|
fill: #eee;
|
||||||
|
}
|
||||||
|
#edit-control #option-date {
|
||||||
|
height: 30px;
|
||||||
|
padding-top: 6px;
|
||||||
|
}
|
||||||
|
#edit-control #option-date svg {
|
||||||
|
margin: -13px 5px 0 0;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
fill: #eee;
|
||||||
|
}
|
||||||
|
#edit-control .content-editor-btn-icon {
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
background: #643c32;
|
||||||
|
padding: 5px 5px 1px 5px;
|
||||||
|
border-radius: 20px;
|
||||||
|
color: #968c80;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#edit-control .content-editor-btn-icon svg {
|
||||||
|
fill: #968c80;
|
||||||
|
}
|
||||||
|
#edit-control .content-editor-btn-text {
|
||||||
|
width: 30px;
|
||||||
|
background: #643c32;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 20px;
|
||||||
|
color: #968c80;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#edit-control #option-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#edit-control #option-italic {
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
#edit-control #option-strikethrough {
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: line-through;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
#edit-content-wrapper {
|
||||||
|
width: 98%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
#edit-content-wrapper code {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
.hljs {
|
.hljs {
|
||||||
display: block;
|
display: block;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
background: none;
|
background: #897e71;
|
||||||
}
|
}
|
||||||
.hljs,
|
.hljs,
|
||||||
.hljs-subst {
|
.hljs-subst {
|
||||||
|
|
File diff suppressed because one or more lines are too long
1428
themes/dash/assets/js/dash.min.js
vendored
1428
themes/dash/assets/js/dash.min.js
vendored
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
@ -26,9 +26,12 @@ block main-content
|
||||||
#entry-meta.column
|
#entry-meta.column
|
||||||
textarea(id='entry_tags' type='text', name='entry_tags' class='form-control', placeholder='tags [comma seperated]', autofocus)
|
textarea(id='entry_tags' type='text', name='entry_tags' class='form-control', placeholder='tags [comma seperated]', autofocus)
|
||||||
=post_tags
|
=post_tags
|
||||||
|
label Date Posted
|
||||||
|
input(id="entry-date" type="text" value=post_date)
|
||||||
br
|
br
|
||||||
input(id="featured-click" type="file" name="featured-click")
|
input(id="featured-click" type="file" name="featured-click")
|
||||||
input(id="post-image" type="file" name="post-image")
|
input(id="post-image" type="file" name="post-image")
|
||||||
|
|
||||||
#entry-feature
|
#entry-feature
|
||||||
//label FEATURE IMAGE
|
//label FEATURE IMAGE
|
||||||
if(post_feature == 'null')
|
if(post_feature == 'null')
|
||||||
|
@ -45,31 +48,33 @@ block main-content
|
||||||
img(src=post_feature)
|
img(src=post_feature)
|
||||||
#edit-content
|
#edit-content
|
||||||
#edit-control
|
#edit-control
|
||||||
button#option-bold.content-editor-btn-text.editor-button(href="")
|
button#option-bold.content-editor-btn-text.editor-button(title="bold")
|
||||||
| B
|
| B
|
||||||
button#option-italic.content-editor-btn-text.editor-button(href="")
|
button#option-italic.content-editor-btn-text.editor-button(title="italics")
|
||||||
| I
|
| I
|
||||||
button#option-strikethrough.content-editor-btn-text.editor-button(href="")
|
button#option-strikethrough.content-editor-btn-text.editor-button(title="strikethrough")
|
||||||
| S
|
| S
|
||||||
button#option-link.content-editor-btn-icon.editor-button(href="")
|
button#option-link.content-editor-btn-icon.editor-button(title="insert link")
|
||||||
svg#option-link(viewBox="0 0 20 20" class="icons")
|
svg#option-link(viewBox="0 0 20 20" class="icons")
|
||||||
use(xlink:href='/dash/assets/images/sprite.svg#entypo-link')
|
use(xlink:href='/dash/assets/images/sprite.svg#entypo-link')
|
||||||
button#option-header1.content-editor-btn-text.editor-button(href="")
|
button#option-header1.content-editor-btn-text.editor-button(title="header 1")
|
||||||
| H1
|
| H1
|
||||||
button#option-header2.content-editor-btn-text.editor-button(href="")
|
button#option-header2.content-editor-btn-text.editor-button(title="header 2")
|
||||||
| H2
|
| H2
|
||||||
button#option-header3.content-editor-btn-text.editor-button(href="")
|
button#option-header3.content-editor-btn-text.editor-button(title="header 3")
|
||||||
| H3
|
| H3
|
||||||
button#option-image.content-editor-btn-icon(for="post-image")
|
button#option-image.content-editor-btn-icon(for="post-image" title='insert image')
|
||||||
svg#option-link(viewBox="0 0 20 20" class="icons")
|
svg#option-link(viewBox="0 0 20 20" class="icons")
|
||||||
use(xlink:href='/dash/assets/images/sprite.svg#entypo-image')
|
use(xlink:href='/dash/assets/images/sprite.svg#entypo-image')
|
||||||
input(id="option-date" type="text" value=post_date)
|
|
||||||
//button#option-date.editor-button
|
|
||||||
svg#option-date(viewBox="0 0 20 20" class="icons")
|
|
||||||
use(xlink:href='/dash/assets/images/sprite.svg#entypo-calendar')
|
|
||||||
=post_date
|
|
||||||
if(edit)
|
if(edit)
|
||||||
button#post-sumbit-btn.post-sumbit-btn(data-action='blog-update' data-id=post.id type='submit') UPDATE
|
button#post-sumbit-btn.post-sumbit-btn.submit-start(data-action='blog-update' data-id=post.id type='submit')
|
||||||
|
svg#submit-save(viewBox="0 0 20 20" class="icons")
|
||||||
|
use(xlink:href='/dash/assets/images/sprite.svg#entypo-save' data-action='blog-update' data-id=post.id)
|
||||||
|
svg#submit-good.icon-hide(viewBox="0 0 20 20" class="icons")
|
||||||
|
use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-up')
|
||||||
|
svg#submit-error.icon-hide(viewBox="0 0 20 20" class="icons")
|
||||||
|
use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-down')
|
||||||
else
|
else
|
||||||
button#post-sumbit-btn.post-sumbit-btn(data-action='blog-add' type='submit') ADD POST
|
button#post-sumbit-btn.post-sumbit-btn(data-action='blog-add' type='submit') ADD POST
|
||||||
|
|
||||||
|
|
|
@ -13,6 +13,9 @@ import * as Ease from '../tools/effects/Animate';
|
||||||
import TextEffects from '../tools/effects/TextEffects';
|
import TextEffects from '../tools/effects/TextEffects';
|
||||||
import EntryTasks from '../tasks/EntryTasks';
|
import EntryTasks from '../tasks/EntryTasks';
|
||||||
import TextEditor from '../tools/utilities/TextEditor';
|
import TextEditor from '../tools/utilities/TextEditor';
|
||||||
|
import TinyDatePicker from 'tiny-date-picker';
|
||||||
|
|
||||||
|
|
||||||
class Entry {
|
class Entry {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// constructor
|
// constructor
|
||||||
|
@ -22,11 +25,20 @@ class Entry {
|
||||||
this.uploadFiles;
|
this.uploadFiles;
|
||||||
this.start();
|
this.start();
|
||||||
this.editor = new TextEditor();
|
this.editor = new TextEditor();
|
||||||
|
|
||||||
|
TinyDatePicker(document.getElementById('entry-date'), {
|
||||||
|
mode: 'dp-below',
|
||||||
|
format(date) {
|
||||||
|
//return date;
|
||||||
|
return self.dateUtils.getDate('origin', date);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// methods
|
// methods
|
||||||
//--------------------------
|
//--------------------------
|
||||||
start() {
|
start() {
|
||||||
|
let self = this;
|
||||||
new Animate().object({
|
new Animate().object({
|
||||||
targets: document.getElementById('loader'),
|
targets: document.getElementById('loader'),
|
||||||
duration: 300,
|
duration: 300,
|
||||||
|
@ -41,14 +53,10 @@ class Entry {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
easing: 'easeInOutQuad',
|
easing: 'easeInOutQuad',
|
||||||
complete: function () {
|
complete: function () {
|
||||||
new TextEffects().scramble(document.getElementById('the-title'), 50, function() {
|
|
||||||
|
|
||||||
if (document.getElementById('the-intro'))
|
if (document.getElementById('the-intro'))
|
||||||
document.getElementById('the-intro').style.opacity = 1;
|
document.getElementById('the-intro').style.opacity = 1;
|
||||||
if (document.getElementById('blog-entry'))
|
if (document.getElementById('blog-entry'))
|
||||||
document.getElementById('blog-entry').style.opacity = 1;
|
document.getElementById('blog-entry').style.opacity = 1;
|
||||||
//START SEcTION
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -59,8 +67,7 @@ class Entry {
|
||||||
document.getElementById('featured-image-drop').addEventListener('drop', this.handleDrop, false);
|
document.getElementById('featured-image-drop').addEventListener('drop', this.handleDrop, false);
|
||||||
document.getElementById('featured-click').addEventListener('change', this.handleClicked, false);
|
document.getElementById('featured-click').addEventListener('change', this.handleClicked, false);
|
||||||
|
|
||||||
if(document.getElementById('new-upload-link'))
|
if (document.getElementById('new-upload-link')) {
|
||||||
{
|
|
||||||
document.getElementById('new-upload-link').addEventListener('click', e => {
|
document.getElementById('new-upload-link').addEventListener('click', e => {
|
||||||
document.getElementById('featured-click').click();
|
document.getElementById('featured-click').click();
|
||||||
})
|
})
|
||||||
|
@ -70,10 +77,9 @@ class Entry {
|
||||||
let edit = false;
|
let edit = false;
|
||||||
if (f.target.getAttribute('data-action') == 'blog-update')
|
if (f.target.getAttribute('data-action') == 'blog-update')
|
||||||
edit = true;
|
edit = true;
|
||||||
console.log('clicked')
|
|
||||||
new EntryTasks().submitPost(edit, Entry.uploadFiles).then((response) => {
|
new EntryTasks().submitPost(edit, Entry.uploadFiles).then((response) => {
|
||||||
let note = JSON.parse(response['response']['request'].response);
|
let note = JSON.parse(response['response']['request'].response);
|
||||||
console.log(note.message);
|
self.editor.notify(note.message);
|
||||||
}).catch((err) => {
|
}).catch((err) => {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
});
|
});
|
||||||
|
|
|
@ -39,13 +39,12 @@ class EntryTasks {
|
||||||
postData.append("title", document.getElementById('entry_title').value);
|
postData.append("title", document.getElementById('entry_title').value);
|
||||||
postData.append('slug', new StringUtils().cleanString(document.getElementById('entry_title').value));
|
postData.append('slug', new StringUtils().cleanString(document.getElementById('entry_title').value));
|
||||||
postData.append("entry_plaintext", txt.value);
|
postData.append("entry_plaintext", txt.value);
|
||||||
postData.append("created_date", document.getElementById('option-date').value);
|
postData.append("origin_date", document.getElementById('entry-date').value);
|
||||||
postData.append("tags", document.getElementById('entry_tags').value);
|
postData.append("tags", document.getElementById('entry_tags').value);
|
||||||
let postURL;
|
let postURL;
|
||||||
let postEventType;
|
let postEventType;
|
||||||
if (edit) {
|
if (edit) {
|
||||||
let postID = document.getElementById('post-sumbit-btn').getAttribute('data-id');
|
let postID = document.getElementById('post-sumbit-btn').getAttribute('data-id');
|
||||||
console.log("POST ID: "+postID);
|
|
||||||
postURL = "/api/blog/update/" + postID;
|
postURL = "/api/blog/update/" + postID;
|
||||||
postEventType = DataEvent.POST_UPDATED;
|
postEventType = DataEvent.POST_UPDATED;
|
||||||
|
|
||||||
|
|
|
@ -11,6 +11,10 @@ export const PROJECT_UPDATED = 'projectUpdated';
|
||||||
export const PROJECT_ADDED = 'projectAdded';
|
export const PROJECT_ADDED = 'projectAdded';
|
||||||
export const PROJECTS_SORTED = 'projectsSorted';
|
export const PROJECTS_SORTED = 'projectsSorted';
|
||||||
export const POST_IMAGE_ADDED = 'postImageAdded';
|
export const POST_IMAGE_ADDED = 'postImageAdded';
|
||||||
|
export const POST_ERROR = 'postError';
|
||||||
|
export const POST_ADDED = 'postAdded';
|
||||||
|
export const POST_UPDATED = 'postUpdated';
|
||||||
|
export const POST_DELETED = 'postImageAdded';
|
||||||
|
|
||||||
class DataEvent
|
class DataEvent
|
||||||
{
|
{
|
||||||
|
|
|
@ -8,13 +8,14 @@ import DataUtils, {
|
||||||
} from './DataUtils';
|
} from './DataUtils';
|
||||||
import * as DataEvent from '../events/DataEvent';
|
import * as DataEvent from '../events/DataEvent';
|
||||||
import DateUtils from './DateUtils';
|
import DateUtils from './DateUtils';
|
||||||
import TinyDatePicker from 'tiny-date-picker';
|
|
||||||
import {
|
import {
|
||||||
|
|
||||||
position,
|
position,
|
||||||
offset
|
offset
|
||||||
} from 'caret-pos';
|
} from 'caret-pos';
|
||||||
|
|
||||||
|
import Animate from '../effects/Animate';
|
||||||
|
|
||||||
class TextEditor {
|
class TextEditor {
|
||||||
|
|
||||||
//--------------------------
|
//--------------------------
|
||||||
|
@ -28,14 +29,6 @@ class TextEditor {
|
||||||
this.url = '';
|
this.url = '';
|
||||||
let self = this;
|
let self = this;
|
||||||
|
|
||||||
this.dp = TinyDatePicker('input');
|
|
||||||
TinyDatePicker(document.getElementById('option-date'), {
|
|
||||||
mode: 'dp-below',
|
|
||||||
format(date) {
|
|
||||||
//return date;
|
|
||||||
return self.dateUtils.getDate('origin', date);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
window.addEventListener("scroll", f => {
|
window.addEventListener("scroll", f => {
|
||||||
var fixLimit = document.getElementById('header').offsetHeight + document.getElementById('entry-header').offsetHeight + document.getElementById('entry-feature').offsetHeight
|
var fixLimit = document.getElementById('header').offsetHeight + document.getElementById('entry-header').offsetHeight + document.getElementById('entry-feature').offsetHeight
|
||||||
if (window.pageYOffset >= fixLimit) {
|
if (window.pageYOffset >= fixLimit) {
|
||||||
|
@ -74,6 +67,24 @@ class TextEditor {
|
||||||
position(document.getElementById('edit-text-code'), caret)
|
position(document.getElementById('edit-text-code'), caret)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
notify(type) {
|
||||||
|
switch (type) {
|
||||||
|
case DataEvent.POST_UPDATED:
|
||||||
|
document.getElementById('submit-save').classList.add('icon-hide');
|
||||||
|
document.getElementById('submit-good').classList.remove('icon-hide');
|
||||||
|
document.getElementById('post-sumbit-btn').classList.remove('submit-start');
|
||||||
|
document.getElementById('post-sumbit-btn').classList.add('submit-cool');
|
||||||
|
setTimeout(f => {
|
||||||
|
document.getElementById('submit-save').classList.remove('icon-hide');
|
||||||
|
document.getElementById('submit-good').classList.add('icon-hide');
|
||||||
|
document.getElementById('post-sumbit-btn').classList.add('submit-start');
|
||||||
|
document.getElementById('post-sumbit-btn').classList.remove('submit-cool');
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// event handlers
|
// event handlers
|
||||||
//--------------------------
|
//--------------------------
|
||||||
|
|
|
@ -5,4 +5,8 @@ $highlight = #cd898d;
|
||||||
$white = #eee;
|
$white = #eee;
|
||||||
$black = #32302f;
|
$black = #32302f;
|
||||||
|
|
||||||
|
//editor colors
|
||||||
|
$eventCool = #65b16c
|
||||||
|
$eventLame = #ce483b
|
||||||
|
|
||||||
//Bulma overrides
|
//Bulma overrides
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
display block
|
display block
|
||||||
overflow-x auto
|
overflow-x auto
|
||||||
padding 0.5em
|
padding 0.5em
|
||||||
background none
|
background $primary - 10%
|
||||||
|
|
||||||
.hljs, .hljs-subst
|
.hljs, .hljs-subst
|
||||||
color #ebdbb2
|
color #ebdbb2
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
#edit-control
|
#edit-control
|
||||||
margin 10px 0 0 0
|
margin 10px
|
||||||
top 1px
|
top 1px
|
||||||
padding 5px
|
padding 5px
|
||||||
border-radius 5px
|
border-radius 5px
|
||||||
|
@ -10,9 +10,28 @@
|
||||||
margin 5px
|
margin 5px
|
||||||
|
|
||||||
#post-sumbit-btn
|
#post-sumbit-btn
|
||||||
|
object-transitions(0.3s)
|
||||||
height 30px
|
height 30px
|
||||||
background #65b16c
|
width 30px
|
||||||
color #65b16c - 30%
|
padding 5px 5px 1px 5px
|
||||||
|
border-radius 20px
|
||||||
|
display inline-block
|
||||||
|
vertical-align top
|
||||||
|
text-align center
|
||||||
|
|
||||||
|
.icon-hide
|
||||||
|
display none
|
||||||
|
visibility hidden
|
||||||
|
|
||||||
|
.submit-start
|
||||||
|
background $white
|
||||||
|
svg
|
||||||
|
fill $highlight
|
||||||
|
|
||||||
|
.submit-cool
|
||||||
|
background: $eventCool
|
||||||
|
svg
|
||||||
|
fill: $white
|
||||||
// float right
|
// float right
|
||||||
|
|
||||||
#option-date
|
#option-date
|
||||||
|
@ -63,245 +82,11 @@
|
||||||
text-decoration line-through
|
text-decoration line-through
|
||||||
font-style italic
|
font-style italic
|
||||||
|
|
||||||
// TINY DATE
|
#edit-content-wrapper
|
||||||
|
width 98%
|
||||||
|
max-width 900px
|
||||||
|
margin 0 auto
|
||||||
|
border-radius 5px
|
||||||
|
code
|
||||||
|
border-radius: 5px
|
||||||
|
|
||||||
.dp-modal
|
|
||||||
position fixed
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
right 0
|
|
||||||
bottom 0
|
|
||||||
//background rgba(255, 255, 255, 0.75)
|
|
||||||
background-opacity($primary - 70%, .75);
|
|
||||||
z-index 2000
|
|
||||||
|
|
||||||
.dp
|
|
||||||
position relative
|
|
||||||
background $primary //#FFF
|
|
||||||
box-shadow 2px 2px 16px rgba(0, 0, 0, 0.25)
|
|
||||||
line-height 1.4
|
|
||||||
border-radius 4px
|
|
||||||
max-height 400px
|
|
||||||
z-index 5000
|
|
||||||
padding-top 6px
|
|
||||||
overflow hidden
|
|
||||||
-webkit-tap-highlight-color transparent
|
|
||||||
|
|
||||||
.dp:before
|
|
||||||
content ' '
|
|
||||||
height 6px
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
right 0
|
|
||||||
background $highlight
|
|
||||||
//background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
|
|
||||||
|
|
||||||
.dp-permanent .dp
|
|
||||||
padding-top 0
|
|
||||||
border 1px solid #EEE
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
.dp-permanent .dp:before
|
|
||||||
display none
|
|
||||||
|
|
||||||
.dp-cal
|
|
||||||
min-height 300px
|
|
||||||
|
|
||||||
.dp-below
|
|
||||||
position absolute
|
|
||||||
font-size 0.8em
|
|
||||||
width 400px
|
|
||||||
max-width 100vw
|
|
||||||
|
|
||||||
.dp-permanent
|
|
||||||
position relative
|
|
||||||
font-size 0.8em
|
|
||||||
width 400px
|
|
||||||
max-width 100vw
|
|
||||||
|
|
||||||
.dp-permanent .dp
|
|
||||||
z-index 0
|
|
||||||
|
|
||||||
.dp-modal .dp
|
|
||||||
position absolute
|
|
||||||
top 50%
|
|
||||||
left 50%
|
|
||||||
max-width 600px
|
|
||||||
width calc(100% - 4em)
|
|
||||||
transform translate(-50%, -50%)
|
|
||||||
animation slide-up 0.3s forwards
|
|
||||||
|
|
||||||
.dp-months
|
|
||||||
padding 24px
|
|
||||||
|
|
||||||
.dp-years
|
|
||||||
box-sizing border-box
|
|
||||||
max-height 400px
|
|
||||||
padding 8px 0
|
|
||||||
overflow auto !important /* HACK for Chrome on Android */
|
|
||||||
|
|
||||||
.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
|
|
||||||
box-sizing border-box
|
|
||||||
text-align center
|
|
||||||
text-decoration none
|
|
||||||
position relative
|
|
||||||
color $white
|
|
||||||
border-radius 2px
|
|
||||||
border 0
|
|
||||||
background transparent
|
|
||||||
|
|
||||||
.dp-cal-header
|
|
||||||
position relative
|
|
||||||
text-align center
|
|
||||||
padding-bottom 16px
|
|
||||||
background $primary - 10%
|
|
||||||
|
|
||||||
.dp-next, .dp-prev
|
|
||||||
position absolute
|
|
||||||
width 30px
|
|
||||||
height 30px
|
|
||||||
overflow hidden
|
|
||||||
top 14px
|
|
||||||
color $primary - 50%
|
|
||||||
border-radius 2px
|
|
||||||
border 0
|
|
||||||
background transparent
|
|
||||||
|
|
||||||
.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
|
|
||||||
outline none
|
|
||||||
color inherit
|
|
||||||
|
|
||||||
.dp-prev
|
|
||||||
left 24px
|
|
||||||
|
|
||||||
.dp-next
|
|
||||||
right 24px
|
|
||||||
|
|
||||||
.dp-prev:before, .dp-next:before
|
|
||||||
content ''
|
|
||||||
border 2px solid
|
|
||||||
width 10px
|
|
||||||
height 10px
|
|
||||||
display inline-block
|
|
||||||
transform rotate(-45deg)
|
|
||||||
transition border-color 0.2s
|
|
||||||
margin 9px 0 40px 4px
|
|
||||||
|
|
||||||
.dp-prev:before
|
|
||||||
border-right 0
|
|
||||||
border-bottom 0
|
|
||||||
|
|
||||||
.dp-next:before
|
|
||||||
border-left 0
|
|
||||||
border-top 0
|
|
||||||
margin-left 0
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
.dp-cal-month, .dp-cal-year
|
|
||||||
display inline-block
|
|
||||||
font-size 1.4em
|
|
||||||
padding 16px 8px 8px
|
|
||||||
outline none
|
|
||||||
|
|
||||||
.dp-cal-footer
|
|
||||||
text-align center
|
|
||||||
background $primary - 10%
|
|
||||||
|
|
||||||
.dp-day-today:after
|
|
||||||
content ''
|
|
||||||
height 0
|
|
||||||
width 0
|
|
||||||
border 7px solid $highlight
|
|
||||||
border-bottom-color transparent
|
|
||||||
border-left-color transparent
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
right 0
|
|
||||||
|
|
||||||
.dp-close, .dp-clear, .dp-today
|
|
||||||
box-sizing border-box
|
|
||||||
display inline-block
|
|
||||||
width 33%
|
|
||||||
padding 8px
|
|
||||||
text-decoration none
|
|
||||||
color $primary - 50%
|
|
||||||
border 0
|
|
||||||
background transparent
|
|
||||||
|
|
||||||
.dp-permanent .dp-close, .dp-permanent .dp-clear
|
|
||||||
display none
|
|
||||||
|
|
||||||
.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
|
|
||||||
background $highlight
|
|
||||||
color $white
|
|
||||||
|
|
||||||
@media screen and (min-device-width: 1200px)
|
|
||||||
.dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
|
|
||||||
background $highlight
|
|
||||||
color $white
|
|
||||||
|
|
||||||
.dp-col-header, .dp-day
|
|
||||||
width 14.28571429%
|
|
||||||
display inline-block
|
|
||||||
padding 8px
|
|
||||||
text-align center
|
|
||||||
|
|
||||||
.dp-col-header
|
|
||||||
color #AAA
|
|
||||||
text-transform uppercase
|
|
||||||
font-weight 300
|
|
||||||
font-size 0.8em
|
|
||||||
padding 8px 0
|
|
||||||
|
|
||||||
.dp-month
|
|
||||||
width 33%
|
|
||||||
display inline-block
|
|
||||||
padding 8px
|
|
||||||
|
|
||||||
.dp-year
|
|
||||||
display block
|
|
||||||
padding 8px 40px
|
|
||||||
width 100%
|
|
||||||
|
|
||||||
.dp-edge-day
|
|
||||||
color #AAA
|
|
||||||
|
|
||||||
.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
|
|
||||||
outline none
|
|
||||||
background $secondary + 10%
|
|
||||||
color $white
|
|
||||||
|
|
||||||
.dp-selected:hover, .dp-selected:focus, .dp-selected
|
|
||||||
background $secondary
|
|
||||||
color $white
|
|
||||||
|
|
||||||
.dp-day-disabled
|
|
||||||
background transparent
|
|
||||||
color #DDD
|
|
||||||
|
|
||||||
.dp-day-disabled:focus, .dp-day-disabled:hover
|
|
||||||
background #DDD
|
|
||||||
|
|
||||||
.dp-focuser
|
|
||||||
position absolute
|
|
||||||
z-index 0
|
|
||||||
top 50%
|
|
||||||
left 50%
|
|
||||||
|
|
||||||
/* Responsive overrides */
|
|
||||||
@media (max-width: 480px), (max-height: 480px)
|
|
||||||
.dp-modal .dp
|
|
||||||
font-size 0.9em
|
|
||||||
width auto
|
|
||||||
width 100%
|
|
||||||
|
|
||||||
.dp-day-of-week, .dp-day
|
|
||||||
padding 8px
|
|
||||||
|
|
||||||
@keyframes slide-up
|
|
||||||
0%
|
|
||||||
transform translate(-50%, 100%)
|
|
||||||
|
|
||||||
100%
|
|
||||||
transform translate(-50%, -50%)
|
|
|
@ -49,7 +49,7 @@
|
||||||
width 100%
|
width 100%
|
||||||
|
|
||||||
#entry-header
|
#entry-header
|
||||||
width 100%
|
//width 100%
|
||||||
max-width 900px
|
max-width 900px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
padding 0.75rem
|
padding 0.75rem
|
||||||
|
@ -68,8 +68,20 @@
|
||||||
background $primary - 4%
|
background $primary - 4%
|
||||||
font-family 'Apercu'
|
font-family 'Apercu'
|
||||||
width 100%
|
width 100%
|
||||||
height 150px
|
height 115px
|
||||||
color $primary - 50%
|
color $primary - 50%
|
||||||
|
#entry-date
|
||||||
|
background $primary - 10%
|
||||||
|
border-radius 0 3px 3px 0
|
||||||
|
width: 105px
|
||||||
|
font-family: 'Apercu'
|
||||||
|
color: $highlight
|
||||||
|
label
|
||||||
|
background: $primary - 15%
|
||||||
|
border-radius: 3px 0 0 3px
|
||||||
|
display inline-block
|
||||||
|
padding: 5px
|
||||||
|
color $primary + 15%
|
||||||
|
|
||||||
#featured-click, #post-image
|
#featured-click, #post-image
|
||||||
display none
|
display none
|
||||||
|
@ -120,3 +132,245 @@
|
||||||
word-wrap normal
|
word-wrap normal
|
||||||
white-space pre-wrap
|
white-space pre-wrap
|
||||||
line-break normal
|
line-break normal
|
||||||
|
|
||||||
|
// TINY DATE
|
||||||
|
.dp-modal
|
||||||
|
position fixed
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
right 0
|
||||||
|
bottom 0
|
||||||
|
// background rgba(255, 255, 255, 0.75)
|
||||||
|
background-opacity($primary - 70%, 0.75)
|
||||||
|
z-index 2000
|
||||||
|
|
||||||
|
.dp
|
||||||
|
position relative
|
||||||
|
background $primary // #FFF
|
||||||
|
box-shadow 2px 2px 16px rgba(0, 0, 0, 0.25)
|
||||||
|
line-height 1.4
|
||||||
|
border-radius 4px
|
||||||
|
max-height 400px
|
||||||
|
z-index 5000
|
||||||
|
padding-top 6px
|
||||||
|
overflow hidden
|
||||||
|
-webkit-tap-highlight-color transparent
|
||||||
|
|
||||||
|
.dp:before
|
||||||
|
content ' '
|
||||||
|
height 6px
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
right 0
|
||||||
|
background $highlight
|
||||||
|
// background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
|
||||||
|
|
||||||
|
.dp-permanent .dp
|
||||||
|
padding-top 0
|
||||||
|
border 1px solid #EEE
|
||||||
|
box-shadow none
|
||||||
|
|
||||||
|
.dp-permanent .dp:before
|
||||||
|
display none
|
||||||
|
|
||||||
|
.dp-cal
|
||||||
|
min-height 300px
|
||||||
|
|
||||||
|
.dp-below
|
||||||
|
position absolute
|
||||||
|
font-size 0.8em
|
||||||
|
width 400px
|
||||||
|
max-width 100vw
|
||||||
|
|
||||||
|
.dp-permanent
|
||||||
|
position relative
|
||||||
|
font-size 0.8em
|
||||||
|
width 400px
|
||||||
|
max-width 100vw
|
||||||
|
|
||||||
|
.dp-permanent .dp
|
||||||
|
z-index 0
|
||||||
|
|
||||||
|
.dp-modal .dp
|
||||||
|
position absolute
|
||||||
|
top 50%
|
||||||
|
left 50%
|
||||||
|
max-width 600px
|
||||||
|
width calc(100% - 4em)
|
||||||
|
transform translate(-50%, -50%)
|
||||||
|
animation slide-up 0.3s forwards
|
||||||
|
|
||||||
|
.dp-months
|
||||||
|
padding 24px
|
||||||
|
|
||||||
|
.dp-years
|
||||||
|
box-sizing border-box
|
||||||
|
max-height 400px
|
||||||
|
padding 8px 0
|
||||||
|
overflow auto !important /* HACK for Chrome on Android */
|
||||||
|
|
||||||
|
.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
|
||||||
|
box-sizing border-box
|
||||||
|
text-align center
|
||||||
|
text-decoration none
|
||||||
|
position relative
|
||||||
|
color $white
|
||||||
|
border-radius 2px
|
||||||
|
border 0
|
||||||
|
background transparent
|
||||||
|
|
||||||
|
.dp-cal-header
|
||||||
|
position relative
|
||||||
|
text-align center
|
||||||
|
padding-bottom 16px
|
||||||
|
background $primary - 10%
|
||||||
|
|
||||||
|
.dp-next, .dp-prev
|
||||||
|
position absolute
|
||||||
|
width 30px
|
||||||
|
height 30px
|
||||||
|
overflow hidden
|
||||||
|
top 14px
|
||||||
|
color $primary - 50%
|
||||||
|
border-radius 2px
|
||||||
|
border 0
|
||||||
|
background transparent
|
||||||
|
|
||||||
|
.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
|
||||||
|
outline none
|
||||||
|
color inherit
|
||||||
|
|
||||||
|
.dp-prev
|
||||||
|
left 24px
|
||||||
|
|
||||||
|
.dp-next
|
||||||
|
right 24px
|
||||||
|
|
||||||
|
.dp-prev:before, .dp-next:before
|
||||||
|
content ''
|
||||||
|
border 2px solid
|
||||||
|
width 10px
|
||||||
|
height 10px
|
||||||
|
display inline-block
|
||||||
|
transform rotate(-45deg)
|
||||||
|
transition border-color 0.2s
|
||||||
|
margin 9px 0 40px 4px
|
||||||
|
|
||||||
|
.dp-prev:before
|
||||||
|
border-right 0
|
||||||
|
border-bottom 0
|
||||||
|
|
||||||
|
.dp-next:before
|
||||||
|
border-left 0
|
||||||
|
border-top 0
|
||||||
|
margin-left 0
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
.dp-cal-month, .dp-cal-year
|
||||||
|
display inline-block
|
||||||
|
font-size 1.4em
|
||||||
|
padding 16px 8px 8px
|
||||||
|
outline none
|
||||||
|
|
||||||
|
.dp-cal-footer
|
||||||
|
text-align center
|
||||||
|
background $primary - 10%
|
||||||
|
|
||||||
|
.dp-day-today:after
|
||||||
|
content ''
|
||||||
|
height 0
|
||||||
|
width 0
|
||||||
|
border 7px solid $highlight
|
||||||
|
border-bottom-color transparent
|
||||||
|
border-left-color transparent
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
right 0
|
||||||
|
|
||||||
|
.dp-close, .dp-clear, .dp-today
|
||||||
|
box-sizing border-box
|
||||||
|
display inline-block
|
||||||
|
width 33%
|
||||||
|
padding 8px
|
||||||
|
text-decoration none
|
||||||
|
color $primary - 50%
|
||||||
|
border 0
|
||||||
|
background transparent
|
||||||
|
|
||||||
|
.dp-permanent .dp-close, .dp-permanent .dp-clear
|
||||||
|
display none
|
||||||
|
|
||||||
|
.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
|
||||||
|
background $highlight
|
||||||
|
color $white
|
||||||
|
|
||||||
|
@media screen and (min-device-width: 1200px)
|
||||||
|
.dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
|
||||||
|
background $highlight
|
||||||
|
color $white
|
||||||
|
|
||||||
|
.dp-col-header, .dp-day
|
||||||
|
width 14.28571429%
|
||||||
|
display inline-block
|
||||||
|
padding 8px
|
||||||
|
text-align center
|
||||||
|
|
||||||
|
.dp-col-header
|
||||||
|
color #AAA
|
||||||
|
text-transform uppercase
|
||||||
|
font-weight 300
|
||||||
|
font-size 0.8em
|
||||||
|
padding 8px 0
|
||||||
|
|
||||||
|
.dp-month
|
||||||
|
width 33%
|
||||||
|
display inline-block
|
||||||
|
padding 8px
|
||||||
|
|
||||||
|
.dp-year
|
||||||
|
display block
|
||||||
|
padding 8px 40px
|
||||||
|
width 100%
|
||||||
|
|
||||||
|
.dp-edge-day
|
||||||
|
color #AAA
|
||||||
|
|
||||||
|
.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
|
||||||
|
outline none
|
||||||
|
background $secondary + 10%
|
||||||
|
color $white
|
||||||
|
|
||||||
|
.dp-selected:hover, .dp-selected:focus, .dp-selected
|
||||||
|
background $secondary
|
||||||
|
color $white
|
||||||
|
|
||||||
|
.dp-day-disabled
|
||||||
|
background transparent
|
||||||
|
color #DDD
|
||||||
|
|
||||||
|
.dp-day-disabled:focus, .dp-day-disabled:hover
|
||||||
|
background #DDD
|
||||||
|
|
||||||
|
.dp-focuser
|
||||||
|
position absolute
|
||||||
|
z-index 0
|
||||||
|
top 50%
|
||||||
|
left 50%
|
||||||
|
|
||||||
|
/* Responsive overrides */
|
||||||
|
@media (max-width: 480px), (max-height: 480px)
|
||||||
|
.dp-modal .dp
|
||||||
|
font-size 0.9em
|
||||||
|
width auto
|
||||||
|
width 100%
|
||||||
|
|
||||||
|
.dp-day-of-week, .dp-day
|
||||||
|
padding 8px
|
||||||
|
|
||||||
|
@keyframes slide-up
|
||||||
|
0%
|
||||||
|
transform translate(-50%, 100%)
|
||||||
|
|
||||||
|
100%
|
||||||
|
transform translate(-50%, -50%)
|
||||||
|
|
Loading…
Reference in a new issue