UI design tweaks
There were some inconsistencies in the UI due to all the changes that were made to the styleshets, so I fixed the obvious ones that were show stoppers. There's more in there to be smoothed out, so this is just the start.
This commit is contained in:
parent
b8b763637f
commit
2501a19685
7 changed files with 195 additions and 195 deletions
|
@ -9,7 +9,7 @@
|
|||
{% set slug = page['slug'] %}
|
||||
{% set layout = page['layout'] %}
|
||||
{% set feature = page['feature'] %}
|
||||
{% set _title = page['title'] %}
|
||||
{% set title = page['title'] %}
|
||||
{% set tags = page['tags'] %}
|
||||
{% set content = page['content'] %}
|
||||
{% set date = page['created'] %}
|
||||
|
@ -119,7 +119,7 @@
|
|||
<div id="post-title" class="column">
|
||||
<label>TITLE</label>
|
||||
<textarea id="post-title-text " type="text" name="post-title-text " class="post-edit" placeholder="TITLE">
|
||||
{{ - _title - }}
|
||||
{{ title }}
|
||||
</textarea>
|
||||
|
||||
<div id="layouts">
|
||||
|
@ -143,7 +143,7 @@
|
|||
<div id="post-meta" class="column">
|
||||
<label>TAGS</label>
|
||||
<textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">
|
||||
{{ - tags - }}
|
||||
{{ tags }}
|
||||
</textarea>
|
||||
<label>OPTIONS</label>
|
||||
{% apply spaceless %}
|
||||
|
@ -163,7 +163,7 @@
|
|||
{{ include("dash/partials/editor.twig") }}
|
||||
{% endapply %}
|
||||
<div id="edit-post-wrapper">
|
||||
<textarea id="edit" spellcheck="false">{{ - content - }}</textarea>
|
||||
<textarea id="edit" spellcheck="false">{{ content }}</textarea>
|
||||
<pre id="highlight">
|
||||
<code id="highlight-content" class="language-md">
|
||||
|
||||
|
|
|
@ -1,58 +1,58 @@
|
|||
<div id="dash-recent">
|
||||
<div id="recent-list">
|
||||
<div class="recent-header">
|
||||
<div class="index-header-left">
|
||||
Recent
|
||||
</div>
|
||||
<div class="index-header-right">
|
||||
<a href='/dashboard/pages' title="view pages">
|
||||
<button>
|
||||
<svg class="page-link">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<a href='/dashboard/page/add/new' title="add new page">
|
||||
<button>
|
||||
<svg class="page-link">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-plus"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
{% if data["entryCount"] != 0 %}
|
||||
{% for page in data['pages'] %}
|
||||
{% if page.media[0].type == 'mp4' %}
|
||||
<div id="recent-list">
|
||||
<div class="recent-header">
|
||||
<div class="index-header-left">
|
||||
Recent
|
||||
</div>
|
||||
<div class="index-header-right">
|
||||
<a href='/dashboard/pages' title="view pages">
|
||||
<button>
|
||||
<svg class="page-link">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-video-link">
|
||||
<video class="post-video" loop muted autoplay>
|
||||
<source src="{{ page.media[0].file }}" type="video/mp4">
|
||||
<a href='/dashboard/page/add/new' title="add new page">
|
||||
<button>
|
||||
<svg class="page-link">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-plus"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
{% if data["entryCount"] != 0 %}
|
||||
{% for page in data['pages'] %}
|
||||
{% if page.media[0].type == 'mp4' %}
|
||||
|
||||
Sorry, your browser doesn't support embedded videos.
|
||||
</video>
|
||||
<label>
|
||||
{{ page.title }}
|
||||
</label>
|
||||
{{ include("dash/partials/recent-options.twig") }}
|
||||
</a>
|
||||
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-video-link recent-link">
|
||||
<video class="post-video" loop muted autoplay>
|
||||
<source src="{{ page.media[0].file }}" type="video/mp4">
|
||||
|
||||
{% else %}
|
||||
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
|
||||
<label>
|
||||
{{ page.title }}
|
||||
</label>
|
||||
Sorry, your browser doesn't support embedded videos.
|
||||
</video>
|
||||
<label>
|
||||
{{ page.title }}
|
||||
</label>
|
||||
{{ include("dash/partials/recent-options.twig") }}
|
||||
</a>
|
||||
|
||||
{{ include("dash/partials/recent-options.twig") }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
There are no pages
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link recent-link" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
|
||||
<label>
|
||||
{{ page.title }}
|
||||
</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{ include("dash/partials/recent-options.twig") }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
There are no pages
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfdff">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=acvcnh">
|
||||
{% endblock %}
|
||||
|
||||
{% block mainContent %}
|
||||
|
@ -23,5 +23,5 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
<script src="/assets/scripts/Start.js?=dfdfsdf" type="text/javascript"></script>
|
||||
<script src="/assets/scripts/Start.js?=dfadsf" type="text/javascript"></script>
|
||||
{% endblock %}
|
||||
|
|
|
@ -2458,19 +2458,19 @@ svg.icons {
|
|||
margin: 0 10px 0 0;
|
||||
bottom: -15px;
|
||||
}
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(3) {
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(3) {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
height: 500px;
|
||||
}
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(4),
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(6) {
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(4),
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(6) {
|
||||
width: 48.6%;
|
||||
height: 350px;
|
||||
margin: 0 10px 20px 0;
|
||||
}
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(5),
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(7) {
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(5),
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(7) {
|
||||
width: 48.6%;
|
||||
height: 350px;
|
||||
margin: 0 0 20px 10px;
|
||||
|
|
|
@ -1638,7 +1638,7 @@ class PostEditor {
|
|||
//--------------------------
|
||||
constructor(){
|
||||
this.processing = false;
|
||||
let self = 'this';
|
||||
let self = "this";
|
||||
this.admin = new _fipamoAdminAPIDefault.default(null, document.getElementById('notify-progress'));
|
||||
this.mm = new _maintenanceManagerDefault.default(null, null, document.getElementById('notify-progress'));
|
||||
this.urlPieces = document.URL.split('/');
|
||||
|
@ -1663,7 +1663,7 @@ class PostEditor {
|
|||
this.editor.addListener(_editorEvent.EDITOR_SAVE, ()=>this.handleEditorOptions(_editorEvent.EDITOR_SAVE)
|
||||
, false);
|
||||
document.getElementById('post-image-upload').addEventListener('change', (e)=>{
|
||||
this.handleImageUpload(e.target.id, e.target.files);
|
||||
self.handleImageUpload(e.target.id, e.target.files);
|
||||
}, false);
|
||||
/*
|
||||
TinyDatePicker(document.getElementById('post-date'), {
|
||||
|
@ -4012,14 +4012,14 @@ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
|||
parcelHelpers.defineInteropFlag(exports);
|
||||
var _animeEsJs = require("animejs/lib/anime.es.js");
|
||||
var _animeEsJsDefault = parcelHelpers.interopDefault(_animeEsJs);
|
||||
const notifcation = document.getElementById("notifications");
|
||||
const notify = document.getElementById("notifyMessage");
|
||||
const messageText = document.getElementById("message-text");
|
||||
const notifyText = document.getElementById("notify-text");
|
||||
const notifyProgress = document.getElementById("notify-progress");
|
||||
const iconGood = document.getElementById("notify-good");
|
||||
const iconLame = document.getElementById("notify-lame");
|
||||
const iconWorking = document.getElementById("notify-working");
|
||||
const notifcation = document.getElementById('notifications');
|
||||
const notify = document.getElementById('notify-message');
|
||||
const messageText = document.getElementById('message-text');
|
||||
const notifyText = document.getElementById('notify-text');
|
||||
const notifyProgress = document.getElementById('notify-progress');
|
||||
const iconGood = document.getElementById('notify-good');
|
||||
const iconLame = document.getElementById('notify-lame');
|
||||
const iconWorking = document.getElementById('notify-working');
|
||||
class Notfications {
|
||||
//--------------------------
|
||||
// constructor
|
||||
|
@ -4029,66 +4029,66 @@ class Notfications {
|
|||
// methods
|
||||
//--------------------------
|
||||
alert(text, status) {
|
||||
iconWorking.style.display = "none";
|
||||
iconGood.style.display = "none";
|
||||
iconLame.style.display = "none";
|
||||
var color = "";
|
||||
iconWorking.style.display = 'none';
|
||||
iconGood.style.display = 'none';
|
||||
iconLame.style.display = 'none';
|
||||
var color = '';
|
||||
if (status !== null) {
|
||||
_animeEsJsDefault.default({
|
||||
targets: notifyProgress,
|
||||
opacity: 0,
|
||||
easing: "easeInOutQuint",
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 500
|
||||
});
|
||||
if (status) {
|
||||
color = "#32cd32";
|
||||
iconWorking.style.display = "none";
|
||||
iconGood.style.display = "block";
|
||||
color = '#32cd32';
|
||||
iconWorking.style.display = 'none';
|
||||
iconGood.style.display = 'block';
|
||||
} else {
|
||||
color = "#F64747";
|
||||
iconWorking.style.display = "none";
|
||||
iconLame.style.display = "block";
|
||||
color = '#F64747';
|
||||
iconWorking.style.display = 'none';
|
||||
iconLame.style.display = 'block';
|
||||
}
|
||||
} else {
|
||||
color = "#200317";
|
||||
iconWorking.style.display = "block";
|
||||
color = '#200317';
|
||||
iconWorking.style.display = 'block';
|
||||
_animeEsJsDefault.default({
|
||||
targets: notifyProgress,
|
||||
opacity: 1,
|
||||
easing: "easeInOutQuint",
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 500
|
||||
});
|
||||
}
|
||||
messageText.innerHTML = text;
|
||||
_animeEsJsDefault.default({
|
||||
targets: notifcation,
|
||||
marginTop: "-10",
|
||||
easing: "easeInOutQuint",
|
||||
marginTop: '-10',
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 10,
|
||||
complete: ()=>{
|
||||
_animeEsJsDefault.default({
|
||||
targets: notify,
|
||||
rotateX: "0",
|
||||
easing: "easeInOutQuint",
|
||||
rotateX: '0',
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 700
|
||||
});
|
||||
_animeEsJsDefault.default({
|
||||
targets: notifyText,
|
||||
backgroundColor: color,
|
||||
easing: "easeInOutQuint",
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 700,
|
||||
complete: ()=>{
|
||||
setTimeout(()=>{
|
||||
if (status !== null) _animeEsJsDefault.default({
|
||||
targets: notify,
|
||||
rotateX: "-120",
|
||||
easing: "easeInOutQuint",
|
||||
rotateX: '-120',
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 700,
|
||||
complete: ()=>{
|
||||
_animeEsJsDefault.default({
|
||||
targets: notifcation,
|
||||
marginTop: "-55",
|
||||
easing: "easeInOutQuint",
|
||||
marginTop: '-55',
|
||||
easing: 'easeInOutQuint',
|
||||
delay: 700,
|
||||
duration: 50
|
||||
}); //notifcation.style.display = 'none';
|
||||
|
|
|
@ -1,101 +1,101 @@
|
|||
import anime from "animejs/lib/anime.es.js";
|
||||
const notifcation = document.getElementById("notifications");
|
||||
const notify = document.getElementById("notifyMessage");
|
||||
const messageText = document.getElementById("message-text");
|
||||
const notifyText = document.getElementById("notify-text");
|
||||
const notifyProgress = document.getElementById("notify-progress");
|
||||
const iconGood = document.getElementById("notify-good");
|
||||
const iconLame = document.getElementById("notify-lame");
|
||||
const iconWorking = document.getElementById("notify-working");
|
||||
import anime from 'animejs/lib/anime.es.js';
|
||||
const notifcation = document.getElementById('notifications');
|
||||
const notify = document.getElementById('notify-message');
|
||||
const messageText = document.getElementById('message-text');
|
||||
const notifyText = document.getElementById('notify-text');
|
||||
const notifyProgress = document.getElementById('notify-progress');
|
||||
const iconGood = document.getElementById('notify-good');
|
||||
const iconLame = document.getElementById('notify-lame');
|
||||
const iconWorking = document.getElementById('notify-working');
|
||||
|
||||
export default class Notfications {
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
|
||||
alert(text, status) {
|
||||
iconWorking.style.display = "none";
|
||||
iconGood.style.display = "none";
|
||||
iconLame.style.display = "none";
|
||||
alert(text, status) {
|
||||
iconWorking.style.display = 'none';
|
||||
iconGood.style.display = 'none';
|
||||
iconLame.style.display = 'none';
|
||||
|
||||
var color = "";
|
||||
if (status !== null) {
|
||||
anime({
|
||||
targets: notifyProgress,
|
||||
opacity: 0,
|
||||
easing: "easeInOutQuint",
|
||||
duration: 500
|
||||
});
|
||||
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";
|
||||
anime({
|
||||
targets: notifyProgress,
|
||||
opacity: 1,
|
||||
easing: "easeInOutQuint",
|
||||
duration: 500
|
||||
});
|
||||
}
|
||||
messageText.innerHTML = text;
|
||||
var color = '';
|
||||
if (status !== null) {
|
||||
anime({
|
||||
targets: notifyProgress,
|
||||
opacity: 0,
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 500
|
||||
});
|
||||
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';
|
||||
anime({
|
||||
targets: notifyProgress,
|
||||
opacity: 1,
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 500
|
||||
});
|
||||
}
|
||||
messageText.innerHTML = text;
|
||||
|
||||
anime({
|
||||
targets: notifcation,
|
||||
marginTop: "-10",
|
||||
easing: "easeInOutQuint",
|
||||
duration: 10,
|
||||
complete: () => {
|
||||
anime({
|
||||
targets: notify,
|
||||
rotateX: "0",
|
||||
easing: "easeInOutQuint",
|
||||
duration: 700
|
||||
});
|
||||
anime({
|
||||
targets: notifyText,
|
||||
backgroundColor: color,
|
||||
easing: "easeInOutQuint",
|
||||
duration: 700,
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
if (status !== null) {
|
||||
anime({
|
||||
targets: notify,
|
||||
rotateX: "-120",
|
||||
easing: "easeInOutQuint",
|
||||
duration: 700,
|
||||
complete: () => {
|
||||
anime({
|
||||
targets: notifcation,
|
||||
marginTop: "-55",
|
||||
easing: "easeInOutQuint",
|
||||
delay: 700,
|
||||
duration: 50
|
||||
});
|
||||
//notifcation.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
anime({
|
||||
targets: notifcation,
|
||||
marginTop: '-10',
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 10,
|
||||
complete: () => {
|
||||
anime({
|
||||
targets: notify,
|
||||
rotateX: '0',
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 700
|
||||
});
|
||||
anime({
|
||||
targets: notifyText,
|
||||
backgroundColor: color,
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 700,
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
if (status !== null) {
|
||||
anime({
|
||||
targets: notify,
|
||||
rotateX: '-120',
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 700,
|
||||
complete: () => {
|
||||
anime({
|
||||
targets: notifcation,
|
||||
marginTop: '-55',
|
||||
easing: 'easeInOutQuint',
|
||||
delay: 700,
|
||||
duration: 50
|
||||
});
|
||||
//notifcation.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
}
|
||||
|
|
|
@ -292,21 +292,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
a.dash-link:nth-child(3) {
|
||||
a.recent-link:nth-child(3) {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
a.dash-link:nth-child(4),
|
||||
a.dash-link:nth-child(6) {
|
||||
a.recent-link:nth-child(4),
|
||||
a.recent-link:nth-child(6) {
|
||||
width: 48.6%;
|
||||
height: 350px;
|
||||
margin: 0 10px 20px 0;
|
||||
}
|
||||
|
||||
a.dash-link:nth-child(5),
|
||||
a.dash-link:nth-child(7) {
|
||||
a.recent-link:nth-child(5),
|
||||
a.recent-link:nth-child(7) {
|
||||
width: 48.6%;
|
||||
height: 350px;
|
||||
margin: 0 0 20px 10px;
|
||||
|
|
Loading…
Reference in a new issue