jmb/48hr.email
1
0
Fork 0
mirror of https://github.com/Crazyco-xyz/48hr.email.git synced 2026-01-09 19:29:34 +01:00
Code Issues Projects Releases Packages Wiki Activity

[Chore]: Add Responsive Styles

Browse source
This commit is contained in:
ClaraCrazy 2025-12-30 11:04:50 +01:00
parent 633d9c9b29
commit 5226cb3c6b
No known key found for this signature in database
GPG key ID: EBBC896ACB497011
2 changed files with 111 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
infrastructure/web/public/javascripts/utils.js
View file

@ -281,11 +281,41 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
function initHamburgerMenu() {
const actionLinks = document.querySelector('.action-links');
if (!actionLinks) return;
// Create hamburger button
const hamburger = document.createElement('button');
hamburger.className = 'hamburger-menu';
hamburger.setAttribute('aria-label', 'Toggle menu');
hamburger.innerHTML = '<span></span><span></span><span></span>';
// Insert as first child
actionLinks.insertBefore(hamburger, actionLinks.firstChild);
actionLinks.classList.add('mobile-hidden');
hamburger.addEventListener('click', (e) => {
e.stopPropagation();
actionLinks.classList.toggle('mobile-hidden');
actionLinks.classList.toggle('mobile-open');
});
// Close menu when clicking outside
document.addEventListener('click', (e) => {
if (actionLinks.classList.contains('mobile-open') && !actionLinks.contains(e.target)) {
actionLinks.classList.remove('mobile-open');
actionLinks.classList.add('mobile-hidden');
}
});
}
// Expose utilities and run them
window.utils = { formatEmailDates, formatMailDate, initLockModals, initCopyAddress, initExpiryTimers, initQrModal };
window.utils = { formatEmailDates, formatMailDate, initLockModals, initCopyAddress, initExpiryTimers, initQrModal, initHamburgerMenu };
formatEmailDates();
formatMailDate();
initLockModals();
initCopyAddress();
initQrModal();
initHamburgerMenu();
});

81
infrastructure/web/public/stylesheets/custom.css
View file

@ -158,6 +158,39 @@ text-muted {
flex-wrap: nowrap;
/* ensures they stay in one line */
text-align: right;
display: flex;
gap: 10px;
}
.hamburger-menu {
display: none;
background: var(--overlay-purple-20);
border: 1px solid var(--overlay-purple-30);
border-radius: 12px;
padding: 10px;
cursor: pointer;
color: var(--color-accent-purple-light);
transition: all 0.3s ease;
flex-direction: column;
gap: 4px;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
}
.hamburger-menu span {
width: 24px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: all 0.3s ease;
}
.hamburger-menu:hover {
background: var(--overlay-purple-30);
border-color: var(--overlay-purple-40);
box-shadow: 0 4px 15px var(--overlay-purple-25);
}
.action-links a {
@ -341,9 +374,11 @@ label {
text-align: center;
margin-bottom: 30px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.inbox-title {
@ -735,7 +770,9 @@ label {
display: none;
color: var(--color-accent-purple-alt);
font-size: 0.9em;
margin-left: 10px;
position: absolute;
margin-left: 0;
margin-top: 50px;
}
.email-expiry .expiry-timer[style*="color: #b00"] {
@ -835,6 +872,7 @@ label {
}
.qr-modal-content h3 {
margin-left: 16.516px;
margin-bottom: 24px;
}
@ -854,3 +892,44 @@ label {
margin: 0;
word-break: break-all;
}
/* Responsive Styles */
@media (max-width: 768px) {
.action-links {
position: relative;
}
.hamburger-menu {
display: flex;
}
.action-links.mobile-hidden>a,
.action-links.mobile-hidden>button:not(.hamburger-menu) {
display: none;
}
.action-links.mobile-open {
flex-direction: column;
position: absolute;
right: 20px;
top: 20px;
background: var(--color-bg-dark);
border: 1px solid var(--overlay-purple-30);
border-radius: 15px;
padding: 15px;
box-shadow: 0 10px 40px var(--overlay-black-40);
z-index: 1000;
min-width: 200px;
}
.action-links.mobile-open>.hamburger-menu {
display: none;
}
.action-links.mobile-open>a,
.action-links.mobile-open>button:not(.hamburger-menu) {
display: block;
width: 100%;
text-align: center;
}
.qr-icon-btn {
display: none;
}
}