mirror of
https://git.pleroma.social/pleroma/relay.git
synced 2024-12-23 03:31:07 +00:00
merge menu and toast resources into api.js and style.css
This commit is contained in:
parent
014c6896b1
commit
ec7e254740
|
@ -13,9 +13,6 @@
|
|||
%meta(name="viewport" content="width=device-width, initial-scale=1")
|
||||
%link(rel="stylesheet" type="text/css" href="/theme/{{config.theme}}.css" nonce="{{view.request['hash']}}" class="theme")
|
||||
%link(rel="stylesheet" type="text/css" href="/static/style.css" nonce="{{view.request['hash']}}")
|
||||
%link(rel="stylesheet" type="text/css" href="/static/toast.css" nonce="{{view.request['hash']}}")
|
||||
%script(type="application/javascript" src="/static/menu.js" nonce="{{view.request['hash']}}", defer)
|
||||
%script(type="application/javascript" src="/static/toast.js" nonce="{{view.request['hash']}}", defer)
|
||||
%script(type="application/javascript" src="/static/api.js" nonce="{{view.request['hash']}}", defer)
|
||||
-block head
|
||||
|
||||
|
|
|
@ -1,3 +1,61 @@
|
|||
// toast notifications
|
||||
|
||||
const notifications = document.querySelector("#notifications")
|
||||
|
||||
|
||||
function remove_toast(toast) {
|
||||
toast.classList.add("hide");
|
||||
|
||||
if (toast.timeoutId) {
|
||||
clearTimeout(toast.timeoutId);
|
||||
}
|
||||
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}
|
||||
|
||||
function toast(text, type="error", timeout=5) {
|
||||
const toast = document.createElement("li");
|
||||
toast.className = `section ${type}`
|
||||
toast.innerHTML = `<span class=".text">${text}</span><a href="#">✖</span>`
|
||||
|
||||
toast.querySelector("a").addEventListener("click", async (event) => {
|
||||
event.preventDefault();
|
||||
await remove_toast(toast);
|
||||
});
|
||||
|
||||
notifications.appendChild(toast);
|
||||
toast.timeoutId = setTimeout(() => remove_toast(toast), timeout * 1000);
|
||||
}
|
||||
|
||||
|
||||
// menu
|
||||
|
||||
const body = document.getElementById("container")
|
||||
const menu = document.getElementById("menu");
|
||||
const menu_open = document.getElementById("menu-open");
|
||||
const menu_close = document.getElementById("menu-close");
|
||||
|
||||
|
||||
menu_open.addEventListener("click", (event) => {
|
||||
var new_value = menu.attributes.visible.nodeValue === "true" ? "false" : "true";
|
||||
menu.attributes.visible.nodeValue = new_value;
|
||||
});
|
||||
|
||||
menu_close.addEventListener("click", (event) => {
|
||||
menu.attributes.visible.nodeValue = "false"
|
||||
});
|
||||
|
||||
body.addEventListener("click", (event) => {
|
||||
if (event.target === menu_open) {
|
||||
return;
|
||||
}
|
||||
|
||||
menu.attributes.visible.nodeValue = "false";
|
||||
});
|
||||
|
||||
|
||||
// misc
|
||||
|
||||
function get_date_string(date) {
|
||||
var year = date.getFullYear().toString();
|
||||
var month = date.getMonth().toString();
|
||||
|
|
|
@ -1,21 +0,0 @@
|
|||
const body = document.getElementById("container")
|
||||
const menu = document.getElementById("menu");
|
||||
const menu_open = document.getElementById("menu-open");
|
||||
const menu_close = document.getElementById("menu-close");
|
||||
|
||||
menu_open.addEventListener("click", (event) => {
|
||||
var new_value = menu.attributes.visible.nodeValue === "true" ? "false" : "true";
|
||||
menu.attributes.visible.nodeValue = new_value;
|
||||
});
|
||||
|
||||
menu_close.addEventListener("click", (event) => {
|
||||
menu.attributes.visible.nodeValue = "false"
|
||||
});
|
||||
|
||||
body.addEventListener("click", (event) => {
|
||||
if (event.target === menu_open) {
|
||||
return;
|
||||
}
|
||||
|
||||
menu.attributes.visible.nodeValue = "false";
|
||||
});
|
|
@ -204,6 +204,37 @@ textarea {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#notifications {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#notifications li {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px;;
|
||||
margin-bottom: var(--spacing);
|
||||
animation: show_toast 0.3s ease forwards;
|
||||
display: grid;
|
||||
grid-template-columns: auto max-content;
|
||||
grid-gap: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#notifications a {
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#notifications li.hide {
|
||||
animation: hide_toast 0.3s ease forwards;
|
||||
}
|
||||
|
||||
#footer {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
|
@ -296,6 +327,44 @@ textarea {
|
|||
}
|
||||
|
||||
|
||||
@keyframes show_toast {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(-5%);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes hide_toast {
|
||||
0% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(-5%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(calc(100% + 20px));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1026px) {
|
||||
body {
|
||||
margin: 0px;
|
||||
|
|
|
@ -1,68 +0,0 @@
|
|||
#notifications {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#notifications li {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px;;
|
||||
margin-bottom: var(--spacing);
|
||||
animation: show_toast 0.3s ease forwards;
|
||||
display: grid;
|
||||
grid-template-columns: auto max-content;
|
||||
grid-gap: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#notifications a {
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#notifications li.hide {
|
||||
animation: hide_toast 0.3s ease forwards;
|
||||
}
|
||||
|
||||
|
||||
@keyframes show_toast {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(-5%);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes hide_toast {
|
||||
0% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(-5%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(calc(100% + 20px));
|
||||
}
|
||||
}
|
|
@ -1,26 +0,0 @@
|
|||
const notifications = document.querySelector("#notifications")
|
||||
|
||||
|
||||
function remove_toast(toast) {
|
||||
toast.classList.add("hide");
|
||||
|
||||
if (toast.timeoutId) {
|
||||
clearTimeout(toast.timeoutId);
|
||||
}
|
||||
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}
|
||||
|
||||
function toast(text, type="error", timeout=5) {
|
||||
const toast = document.createElement("li");
|
||||
toast.className = `section ${type}`
|
||||
toast.innerHTML = `<span class=".text">${text}</span><a href="#">✖</span>`
|
||||
|
||||
toast.querySelector("a").addEventListener("click", async (event) => {
|
||||
event.preventDefault();
|
||||
await remove_toast(toast);
|
||||
});
|
||||
|
||||
notifications.appendChild(toast);
|
||||
toast.timeoutId = setTimeout(() => remove_toast(toast), timeout * 1000);
|
||||
}
|
Loading…
Reference in a new issue