forked from projects/fipamo
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 slug = page['slug'] %}
|
||||||
{% set layout = page['layout'] %}
|
{% set layout = page['layout'] %}
|
||||||
{% set feature = page['feature'] %}
|
{% set feature = page['feature'] %}
|
||||||
{% set _title = page['title'] %}
|
{% set title = page['title'] %}
|
||||||
{% set tags = page['tags'] %}
|
{% set tags = page['tags'] %}
|
||||||
{% set content = page['content'] %}
|
{% set content = page['content'] %}
|
||||||
{% set date = page['created'] %}
|
{% set date = page['created'] %}
|
||||||
|
@ -119,7 +119,7 @@
|
||||||
<div id="post-title" class="column">
|
<div id="post-title" class="column">
|
||||||
<label>TITLE</label>
|
<label>TITLE</label>
|
||||||
<textarea id="post-title-text " type="text" name="post-title-text " class="post-edit" placeholder="TITLE">
|
<textarea id="post-title-text " type="text" name="post-title-text " class="post-edit" placeholder="TITLE">
|
||||||
{{ - _title - }}
|
{{ title }}
|
||||||
</textarea>
|
</textarea>
|
||||||
|
|
||||||
<div id="layouts">
|
<div id="layouts">
|
||||||
|
@ -143,7 +143,7 @@
|
||||||
<div id="post-meta" class="column">
|
<div id="post-meta" class="column">
|
||||||
<label>TAGS</label>
|
<label>TAGS</label>
|
||||||
<textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">
|
<textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">
|
||||||
{{ - tags - }}
|
{{ tags }}
|
||||||
</textarea>
|
</textarea>
|
||||||
<label>OPTIONS</label>
|
<label>OPTIONS</label>
|
||||||
{% apply spaceless %}
|
{% apply spaceless %}
|
||||||
|
@ -163,7 +163,7 @@
|
||||||
{{ include("dash/partials/editor.twig") }}
|
{{ include("dash/partials/editor.twig") }}
|
||||||
{% endapply %}
|
{% endapply %}
|
||||||
<div id="edit-post-wrapper">
|
<div id="edit-post-wrapper">
|
||||||
<textarea id="edit" spellcheck="false">{{ - content - }}</textarea>
|
<textarea id="edit" spellcheck="false">{{ content }}</textarea>
|
||||||
<pre id="highlight">
|
<pre id="highlight">
|
||||||
<code id="highlight-content" class="language-md">
|
<code id="highlight-content" class="language-md">
|
||||||
|
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
{% for page in data['pages'] %}
|
{% for page in data['pages'] %}
|
||||||
{% if page.media[0].type == 'mp4' %}
|
{% if page.media[0].type == 'mp4' %}
|
||||||
|
|
||||||
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-video-link">
|
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-video-link recent-link">
|
||||||
<video class="post-video" loop muted autoplay>
|
<video class="post-video" loop muted autoplay>
|
||||||
<source src="{{ page.media[0].file }}" type="video/mp4">
|
<source src="{{ page.media[0].file }}" type="video/mp4">
|
||||||
|
|
||||||
|
@ -40,7 +40,7 @@
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
{% else %}
|
{% 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">
|
<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>
|
<label>
|
||||||
{{ page.title }}
|
{{ page.title }}
|
||||||
</label>
|
</label>
|
||||||
|
@ -55,4 +55,4 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block stylesheets %}
|
{% 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 %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block mainContent %}
|
{% block mainContent %}
|
||||||
|
@ -23,5 +23,5 @@
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block javascripts %}
|
{% 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 %}
|
{% endblock %}
|
||||||
|
|
|
@ -2458,19 +2458,19 @@ svg.icons {
|
||||||
margin: 0 10px 0 0;
|
margin: 0 10px 0 0;
|
||||||
bottom: -15px;
|
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%;
|
width: 100%;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
height: 500px;
|
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.recent-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(6) {
|
||||||
width: 48.6%;
|
width: 48.6%;
|
||||||
height: 350px;
|
height: 350px;
|
||||||
margin: 0 10px 20px 0;
|
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.recent-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(7) {
|
||||||
width: 48.6%;
|
width: 48.6%;
|
||||||
height: 350px;
|
height: 350px;
|
||||||
margin: 0 0 20px 10px;
|
margin: 0 0 20px 10px;
|
||||||
|
|
|
@ -1638,7 +1638,7 @@ class PostEditor {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor(){
|
constructor(){
|
||||||
this.processing = false;
|
this.processing = false;
|
||||||
let self = 'this';
|
let self = "this";
|
||||||
this.admin = new _fipamoAdminAPIDefault.default(null, document.getElementById('notify-progress'));
|
this.admin = new _fipamoAdminAPIDefault.default(null, document.getElementById('notify-progress'));
|
||||||
this.mm = new _maintenanceManagerDefault.default(null, null, document.getElementById('notify-progress'));
|
this.mm = new _maintenanceManagerDefault.default(null, null, document.getElementById('notify-progress'));
|
||||||
this.urlPieces = document.URL.split('/');
|
this.urlPieces = document.URL.split('/');
|
||||||
|
@ -1663,7 +1663,7 @@ class PostEditor {
|
||||||
this.editor.addListener(_editorEvent.EDITOR_SAVE, ()=>this.handleEditorOptions(_editorEvent.EDITOR_SAVE)
|
this.editor.addListener(_editorEvent.EDITOR_SAVE, ()=>this.handleEditorOptions(_editorEvent.EDITOR_SAVE)
|
||||||
, false);
|
, false);
|
||||||
document.getElementById('post-image-upload').addEventListener('change', (e)=>{
|
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);
|
}, false);
|
||||||
/*
|
/*
|
||||||
TinyDatePicker(document.getElementById('post-date'), {
|
TinyDatePicker(document.getElementById('post-date'), {
|
||||||
|
@ -4012,14 +4012,14 @@ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||||
parcelHelpers.defineInteropFlag(exports);
|
parcelHelpers.defineInteropFlag(exports);
|
||||||
var _animeEsJs = require("animejs/lib/anime.es.js");
|
var _animeEsJs = require("animejs/lib/anime.es.js");
|
||||||
var _animeEsJsDefault = parcelHelpers.interopDefault(_animeEsJs);
|
var _animeEsJsDefault = parcelHelpers.interopDefault(_animeEsJs);
|
||||||
const notifcation = document.getElementById("notifications");
|
const notifcation = document.getElementById('notifications');
|
||||||
const notify = document.getElementById("notifyMessage");
|
const notify = document.getElementById('notify-message');
|
||||||
const messageText = document.getElementById("message-text");
|
const messageText = document.getElementById('message-text');
|
||||||
const notifyText = document.getElementById("notify-text");
|
const notifyText = document.getElementById('notify-text');
|
||||||
const notifyProgress = document.getElementById("notify-progress");
|
const notifyProgress = document.getElementById('notify-progress');
|
||||||
const iconGood = document.getElementById("notify-good");
|
const iconGood = document.getElementById('notify-good');
|
||||||
const iconLame = document.getElementById("notify-lame");
|
const iconLame = document.getElementById('notify-lame');
|
||||||
const iconWorking = document.getElementById("notify-working");
|
const iconWorking = document.getElementById('notify-working');
|
||||||
class Notfications {
|
class Notfications {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// constructor
|
// constructor
|
||||||
|
@ -4029,66 +4029,66 @@ class Notfications {
|
||||||
// methods
|
// methods
|
||||||
//--------------------------
|
//--------------------------
|
||||||
alert(text, status) {
|
alert(text, status) {
|
||||||
iconWorking.style.display = "none";
|
iconWorking.style.display = 'none';
|
||||||
iconGood.style.display = "none";
|
iconGood.style.display = 'none';
|
||||||
iconLame.style.display = "none";
|
iconLame.style.display = 'none';
|
||||||
var color = "";
|
var color = '';
|
||||||
if (status !== null) {
|
if (status !== null) {
|
||||||
_animeEsJsDefault.default({
|
_animeEsJsDefault.default({
|
||||||
targets: notifyProgress,
|
targets: notifyProgress,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
duration: 500
|
duration: 500
|
||||||
});
|
});
|
||||||
if (status) {
|
if (status) {
|
||||||
color = "#32cd32";
|
color = '#32cd32';
|
||||||
iconWorking.style.display = "none";
|
iconWorking.style.display = 'none';
|
||||||
iconGood.style.display = "block";
|
iconGood.style.display = 'block';
|
||||||
} else {
|
} else {
|
||||||
color = "#F64747";
|
color = '#F64747';
|
||||||
iconWorking.style.display = "none";
|
iconWorking.style.display = 'none';
|
||||||
iconLame.style.display = "block";
|
iconLame.style.display = 'block';
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
color = "#200317";
|
color = '#200317';
|
||||||
iconWorking.style.display = "block";
|
iconWorking.style.display = 'block';
|
||||||
_animeEsJsDefault.default({
|
_animeEsJsDefault.default({
|
||||||
targets: notifyProgress,
|
targets: notifyProgress,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
duration: 500
|
duration: 500
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
messageText.innerHTML = text;
|
messageText.innerHTML = text;
|
||||||
_animeEsJsDefault.default({
|
_animeEsJsDefault.default({
|
||||||
targets: notifcation,
|
targets: notifcation,
|
||||||
marginTop: "-10",
|
marginTop: '-10',
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
duration: 10,
|
duration: 10,
|
||||||
complete: ()=>{
|
complete: ()=>{
|
||||||
_animeEsJsDefault.default({
|
_animeEsJsDefault.default({
|
||||||
targets: notify,
|
targets: notify,
|
||||||
rotateX: "0",
|
rotateX: '0',
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
duration: 700
|
duration: 700
|
||||||
});
|
});
|
||||||
_animeEsJsDefault.default({
|
_animeEsJsDefault.default({
|
||||||
targets: notifyText,
|
targets: notifyText,
|
||||||
backgroundColor: color,
|
backgroundColor: color,
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
duration: 700,
|
duration: 700,
|
||||||
complete: ()=>{
|
complete: ()=>{
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
if (status !== null) _animeEsJsDefault.default({
|
if (status !== null) _animeEsJsDefault.default({
|
||||||
targets: notify,
|
targets: notify,
|
||||||
rotateX: "-120",
|
rotateX: '-120',
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
duration: 700,
|
duration: 700,
|
||||||
complete: ()=>{
|
complete: ()=>{
|
||||||
_animeEsJsDefault.default({
|
_animeEsJsDefault.default({
|
||||||
targets: notifcation,
|
targets: notifcation,
|
||||||
marginTop: "-55",
|
marginTop: '-55',
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
delay: 700,
|
delay: 700,
|
||||||
duration: 50
|
duration: 50
|
||||||
}); //notifcation.style.display = 'none';
|
}); //notifcation.style.display = 'none';
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
import anime from "animejs/lib/anime.es.js";
|
import anime from 'animejs/lib/anime.es.js';
|
||||||
const notifcation = document.getElementById("notifications");
|
const notifcation = document.getElementById('notifications');
|
||||||
const notify = document.getElementById("notifyMessage");
|
const notify = document.getElementById('notify-message');
|
||||||
const messageText = document.getElementById("message-text");
|
const messageText = document.getElementById('message-text');
|
||||||
const notifyText = document.getElementById("notify-text");
|
const notifyText = document.getElementById('notify-text');
|
||||||
const notifyProgress = document.getElementById("notify-progress");
|
const notifyProgress = document.getElementById('notify-progress');
|
||||||
const iconGood = document.getElementById("notify-good");
|
const iconGood = document.getElementById('notify-good');
|
||||||
const iconLame = document.getElementById("notify-lame");
|
const iconLame = document.getElementById('notify-lame');
|
||||||
const iconWorking = document.getElementById("notify-working");
|
const iconWorking = document.getElementById('notify-working');
|
||||||
|
|
||||||
export default class Notfications {
|
export default class Notfications {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
|
@ -18,34 +18,34 @@ export default class Notfications {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
|
|
||||||
alert(text, status) {
|
alert(text, status) {
|
||||||
iconWorking.style.display = "none";
|
iconWorking.style.display = 'none';
|
||||||
iconGood.style.display = "none";
|
iconGood.style.display = 'none';
|
||||||
iconLame.style.display = "none";
|
iconLame.style.display = 'none';
|
||||||
|
|
||||||
var color = "";
|
var color = '';
|
||||||
if (status !== null) {
|
if (status !== null) {
|
||||||
anime({
|
anime({
|
||||||
targets: notifyProgress,
|
targets: notifyProgress,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
duration: 500
|
duration: 500
|
||||||
});
|
});
|
||||||
if (status) {
|
if (status) {
|
||||||
color = "#32cd32";
|
color = '#32cd32';
|
||||||
iconWorking.style.display = "none";
|
iconWorking.style.display = 'none';
|
||||||
iconGood.style.display = "block";
|
iconGood.style.display = 'block';
|
||||||
} else {
|
} else {
|
||||||
color = "#F64747";
|
color = '#F64747';
|
||||||
iconWorking.style.display = "none";
|
iconWorking.style.display = 'none';
|
||||||
iconLame.style.display = "block";
|
iconLame.style.display = 'block';
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
color = "#200317";
|
color = '#200317';
|
||||||
iconWorking.style.display = "block";
|
iconWorking.style.display = 'block';
|
||||||
anime({
|
anime({
|
||||||
targets: notifyProgress,
|
targets: notifyProgress,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
duration: 500
|
duration: 500
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -53,34 +53,34 @@ export default class Notfications {
|
||||||
|
|
||||||
anime({
|
anime({
|
||||||
targets: notifcation,
|
targets: notifcation,
|
||||||
marginTop: "-10",
|
marginTop: '-10',
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
duration: 10,
|
duration: 10,
|
||||||
complete: () => {
|
complete: () => {
|
||||||
anime({
|
anime({
|
||||||
targets: notify,
|
targets: notify,
|
||||||
rotateX: "0",
|
rotateX: '0',
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
duration: 700
|
duration: 700
|
||||||
});
|
});
|
||||||
anime({
|
anime({
|
||||||
targets: notifyText,
|
targets: notifyText,
|
||||||
backgroundColor: color,
|
backgroundColor: color,
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
duration: 700,
|
duration: 700,
|
||||||
complete: () => {
|
complete: () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (status !== null) {
|
if (status !== null) {
|
||||||
anime({
|
anime({
|
||||||
targets: notify,
|
targets: notify,
|
||||||
rotateX: "-120",
|
rotateX: '-120',
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
duration: 700,
|
duration: 700,
|
||||||
complete: () => {
|
complete: () => {
|
||||||
anime({
|
anime({
|
||||||
targets: notifcation,
|
targets: notifcation,
|
||||||
marginTop: "-55",
|
marginTop: '-55',
|
||||||
easing: "easeInOutQuint",
|
easing: 'easeInOutQuint',
|
||||||
delay: 700,
|
delay: 700,
|
||||||
duration: 50
|
duration: 50
|
||||||
});
|
});
|
||||||
|
|
|
@ -292,21 +292,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.dash-link:nth-child(3) {
|
a.recent-link:nth-child(3) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.dash-link:nth-child(4),
|
a.recent-link:nth-child(4),
|
||||||
a.dash-link:nth-child(6) {
|
a.recent-link:nth-child(6) {
|
||||||
width: 48.6%;
|
width: 48.6%;
|
||||||
height: 350px;
|
height: 350px;
|
||||||
margin: 0 10px 20px 0;
|
margin: 0 10px 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.dash-link:nth-child(5),
|
a.recent-link:nth-child(5),
|
||||||
a.dash-link:nth-child(7) {
|
a.recent-link:nth-child(7) {
|
||||||
width: 48.6%;
|
width: 48.6%;
|
||||||
height: 350px;
|
height: 350px;
|
||||||
margin: 0 0 20px 10px;
|
margin: 0 0 20px 10px;
|
||||||
|
|
Loading…
Reference in a new issue