Fovway/NoteJS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Обновлена анимация уведомлений для мобильных и десктопных устройств

Browse Source 
- Изменена логика анимации появления и исчезновения уведомлений в зависимости от размера экрана.
- Добавлен обработчик изменения размера окна для обновления позиций уведомлений.
- Оптимизированы стили трансформации для улучшения пользовательского опыта на разных устройствах.
This commit is contained in:
Fovway 2025-10-26 14:47:18 +07:00
parent d89a617264
commit e249638e7f
3 changed files with 84 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/app.js
View File

@ -32,7 +32,13 @@ function showNotification(message, type = "info") {
// Анимация появления
setTimeout(() => {
notification.style.transform = "translateX(-50%) translateY(0)";
if (window.innerWidth <= 768) {
// На мобильных устройствах используем только translateY
notification.style.transform = "translateY(0)";
} else {
// На десктопе используем translateX(-50%) translateY(0)
notification.style.transform = "translateX(-50%) translateY(0)";
}
}, 100);
// Автоматическое удаление через 4 секунды
@ -44,7 +50,13 @@ function showNotification(message, type = "info") {
// Функция для удаления уведомления
function removeNotification(notification) {
// Анимация исчезновения
notification.style.transform = "translateX(-50%) translateY(-100%)";
if (window.innerWidth <= 768) {
// На мобильных устройствах используем только translateY
notification.style.transform = "translateY(-100%)";
} else {
// На десктопе используем translateX(-50%) translateY(-100%)
notification.style.transform = "translateX(-50%) translateY(-100%)";
}
setTimeout(() => {
// Удаляем из DOM
@ -68,9 +80,23 @@ function updateNotificationPositions() {
notificationStack.forEach((notification, index) => {
const offset = index * 70; // 70px между уведомлениями
notification.style.top = `${20 + offset}px`;
// Обновляем transform в зависимости от размера экрана
if (window.innerWidth <= 768) {
// На мобильных устройствах используем только translateY
notification.style.transform = "translateY(0)";
} else {
// На десктопе используем translateX(-50%) translateY(0)
notification.style.transform = "translateX(-50%) translateY(0)";
}
});
}
// Обработчик изменения размера окна
window.addEventListener("resize", () => {
updateNotificationPositions();
});
// Тестовая функция для демонстрации стека уведомлений (можно удалить в продакшене)
function testNotificationStack() {
showNotification("Первое уведомление", "success");

30
public/profile.js
View File

@ -28,7 +28,13 @@ function showNotification(message, type = "info") {
// Анимация появления
setTimeout(() => {
notification.style.transform = "translateX(-50%) translateY(0)";
if (window.innerWidth <= 768) {
// На мобильных устройствах используем только translateY
notification.style.transform = "translateY(0)";
} else {
// На десктопе используем translateX(-50%) translateY(0)
notification.style.transform = "translateX(-50%) translateY(0)";
}
}, 100);
// Автоматическое удаление через 4 секунды
@ -40,7 +46,13 @@ function showNotification(message, type = "info") {
// Функция для удаления уведомления
function removeNotification(notification) {
// Анимация исчезновения
notification.style.transform = "translateX(-50%) translateY(-100%)";
if (window.innerWidth <= 768) {
// На мобильных устройствах используем только translateY
notification.style.transform = "translateY(-100%)";
} else {
// На десктопе используем translateX(-50%) translateY(-100%)
notification.style.transform = "translateX(-50%) translateY(-100%)";
}
setTimeout(() => {
// Удаляем из DOM
@ -64,9 +76,23 @@ function updateNotificationPositions() {
notificationStack.forEach((notification, index) => {
const offset = index * 70; // 70px между уведомлениями
notification.style.top = `${20 + offset}px`;
// Обновляем transform в зависимости от размера экрана
if (window.innerWidth <= 768) {
// На мобильных устройствах используем только translateY
notification.style.transform = "translateY(0)";
} else {
// На десктопе используем translateX(-50%) translateY(0)
notification.style.transform = "translateX(-50%) translateY(0)";
}
});
}
// Обработчик изменения размера окна
window.addEventListener("resize", () => {
updateNotificationPositions();
});
// Универсальная функция для модальных окон подтверждения
function showConfirmModal(title, message, options = {}) {
return new Promise((resolve) => {

30
public/settings.js
View File

@ -169,7 +169,13 @@ function showNotification(message, type = "info") {
// Анимация появления
setTimeout(() => {
notification.style.transform = "translateX(-50%) translateY(0)";
if (window.innerWidth <= 768) {
// На мобильных устройствах используем только translateY
notification.style.transform = "translateY(0)";
} else {
// На десктопе используем translateX(-50%) translateY(0)
notification.style.transform = "translateX(-50%) translateY(0)";
}
}, 100);
// Автоматическое удаление через 4 секунды
@ -181,7 +187,13 @@ function showNotification(message, type = "info") {
// Функция для удаления уведомления
function removeNotification(notification) {
// Анимация исчезновения
notification.style.transform = "translateX(-50%) translateY(-100%)";
if (window.innerWidth <= 768) {
// На мобильных устройствах используем только translateY
notification.style.transform = "translateY(-100%)";
} else {
// На десктопе используем translateX(-50%) translateY(-100%)
notification.style.transform = "translateX(-50%) translateY(-100%)";
}
setTimeout(() => {
// Удаляем из DOM
@ -205,9 +217,23 @@ function updateNotificationPositions() {
notificationStack.forEach((notification, index) => {
const offset = index * 70; // 70px между уведомлениями
notification.style.top = `${20 + offset}px`;
// Обновляем transform в зависимости от размера экрана
if (window.innerWidth <= 768) {
// На мобильных устройствах используем только translateY
notification.style.transform = "translateY(0)";
} else {
// На десктопе используем translateX(-50%) translateY(0)
notification.style.transform = "translateX(-50%) translateY(0)";
}
});
}
// Обработчик изменения размера окна
window.addEventListener("resize", () => {
updateNotificationPositions();
});
// Универсальная функция для модальных окон подтверждения
function showConfirmModal(title, message, options = {}) {
return new Promise((resolve) => {