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.pull/84/head
Are0h
3 years ago
parent
b8b763637f
commit
2501a19685
@ -1,58 +1,58 @@
|
|||||||
<div id="dash-recent">
|
<div id="dash-recent">
|
||||||
<div id="recent-list">
|
<div id="recent-list">
|
||||||
<div class="recent-header">
|
<div class="recent-header">
|
||||||
<div class="index-header-left">
|
<div class="index-header-left">
|
||||||
Recent
|
Recent
|
||||||
</div>
|
</div>
|
||||||
<div class="index-header-right">
|
<div class="index-header-right">
|
||||||
<a href='/dashboard/pages' title="view pages">
|
<a href='/dashboard/pages' title="view pages">
|
||||||
<button>
|
<button>
|
||||||
<svg class="page-link">
|
<svg class="page-link">
|
||||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
|
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</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' %}
|
|
||||||
|
|
||||||
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-video-link">
|
<a href='/dashboard/page/add/new' title="add new page">
|
||||||
<video class="post-video" loop muted autoplay>
|
<button>
|
||||||
<source src="{{ page.media[0].file }}" type="video/mp4">
|
<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.
|
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-video-link recent-link">
|
||||||
</video>
|
<video class="post-video" loop muted autoplay>
|
||||||
<label>
|
<source src="{{ page.media[0].file }}" type="video/mp4">
|
||||||
{{ page.title }}
|
|
||||||
</label>
|
|
||||||
{{ include("dash/partials/recent-options.twig") }}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
{% else %}
|
Sorry, your browser doesn't support embedded videos.
|
||||||
<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">
|
</video>
|
||||||
<label>
|
<label>
|
||||||
{{ page.title }}
|
{{ page.title }}
|
||||||
</label>
|
</label>
|
||||||
|
{{ include("dash/partials/recent-options.twig") }}
|
||||||
|
</a>
|
||||||
|
|
||||||
{{ include("dash/partials/recent-options.twig") }}
|
{% else %}
|
||||||
</a>
|
<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">
|
||||||
{% endif %}
|
<label>
|
||||||
|
{{ page.title }}
|
||||||
{% endfor %}
|
</label>
|
||||||
{% else %}
|
|
||||||
There are no pages
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</div>
|
{{ include("dash/partials/recent-options.twig") }}
|
||||||
</div>
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% endfor %}
|
||||||
|
{% else %}
|
||||||
|
There are no pages
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
@ -1,101 +1,101 @@
|
|||||||
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 {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// constructor
|
// constructor
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor() {}
|
constructor() {}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// 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) {
|
||||||
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
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
messageText.innerHTML = text;
|
messageText.innerHTML = text;
|
||||||
|
|
||||||
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
|
||||||
});
|
});
|
||||||
//notifcation.style.display = 'none';
|
//notifcation.style.display = 'none';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// event handlers
|
// event handlers
|
||||||
//--------------------------
|
//--------------------------
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue