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="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>
|
||||
|
||||
@ -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
|
||||
//--------------------------
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue