eins/f0bm
1
0
Fork 0
forked from w0bm/f0bm
Code Pull Requests Activity

adding a better navbar

Browse Source
This commit is contained in:
x
2026-01-23 21:31:06 +01:00
parent ee6fda8f06
commit 9c25f89adc
3 changed files with 228 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
public/s/css/f0ck.css
View File

@@ -3122,125 +3122,243 @@ input#s_avatar {
color: #888; color: #888;
font-size: 0.9em; font-size: 0.9em;
} }
/* Search Overlay */ /* Search Overlay */
#search-overlay { #search-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
z-index: 10000; z-index: 10000;
display: none; display: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 20px; padding: 20px;
opacity: 0; opacity: 0;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
#search-overlay.visible { #search-overlay.visible {
opacity: 1; opacity: 1;
} }
#search-input { #search-input {
background: transparent; background: transparent;
border: none; border: none;
border-bottom: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
color: var(--white); color: var(--white);
font-size: 3rem; font-size: 3rem;
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
text-align: center; text-align: center;
outline: none; outline: none;
font-family: var(--font); font-family: var(--font);
padding: 10px; padding: 10px;
} }
#search-input::placeholder { #search-input::placeholder {
color: #555; color: #555;
text-transform: uppercase; text-transform: uppercase;
} }
#search-close { #search-close {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 30px; right: 30px;
color: var(--white); color: var(--white);
font-size: 2rem; font-size: 2rem;
cursor: pointer; cursor: pointer;
font-family: sans-serif; font-family: sans-serif;
opacity: 0.7; opacity: 0.7;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
#search-close:hover { #search-close:hover {
opacity: 1; opacity: 1;
} }
/* Delete Tag Modal */ /* Delete Tag Modal */
.modal-overlay { .modal-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.85); background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
z-index: 10001; z-index: 10001;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.modal-content { .modal-content {
background: var(--dropdown-bg); background: var(--dropdown-bg);
border: 1px solid var(--nav-border-color); border: 1px solid var(--nav-border-color);
padding: 30px; padding: 30px;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
min-width: 300px; min-width: 300px;
} }
.modal-content h3 { .modal-content h3 {
margin-top: 0; margin-top: 0;
color: var(--white); color: var(--white);
} }
.modal-content p { .modal-content p {
color: #ccc; color: #ccc;
margin: 20px 0; margin: 20px 0;
} }
.modal-actions { .modal-actions {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 15px; gap: 15px;
} }
.modal-actions button { .modal-actions button {
padding: 10px 20px; padding: 10px 20px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
font-family: var(--font); font-family: var(--font);
} }
.btn-danger { .btn-danger {
background: #e74c3c; background: #e74c3c;
color: white; color: white;
} }
.btn-danger:hover { .btn-danger:hover {
background: #c0392b; background: #c0392b;
} }
.btn-secondary { .btn-secondary {
background: #555; background: #555;
color: white; color: white;
} }
.btn-secondary:hover { .btn-secondary:hover {
background: #666; background: #666;
}
/* Nav User Dropdown */
.nav-user-dropdown {
position: relative;
margin-left: 15px;
}
.nav-user-btn {
background: transparent;
border: 1px solid var(--nav-border-color);
color: var(--white);
padding: 6px 12px;
border-radius: 0;
cursor: pointer;
font-family: var(--font);
font-size: 14px;
transition: all 0.2s ease;
}
.nav-user-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--nav-border-color-hover);
}
.nav-user-menu {
display: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
min-width: 150px;
background: var(--dropdown-bg);
border: 1px solid var(--nav-border-color);
border-radius: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
z-index: 10000;
overflow: hidden;
}
.nav-user-menu.show {
display: block;
}
.nav-user-menu a {
display: block;
padding: 10px 15px;
color: var(--white);
text-decoration: none;
transition: background 0.2s;
}
.nav-user-menu a:hover {
background: rgba(255, 255, 255, 0.1);
}
.nav-user-divider {
height: 1px;
background: var(--nav-border-color);
margin: 5px 0;
}
/* Nav Left Group - Flexbox for dropdown + links */
.nav-left-group {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.nav-links {
display: flex;
align-items: center;
gap: 12px;
}
.nav-links a {
color: var(--white);
text-decoration: none;
font-size: 14px;
opacity: 0.8;
transition: opacity 0.2s;
}
.nav-links a:hover {
opacity: 1;
}
.nav-links svg {
vertical-align: middle;
}
/* Mobile responsive navbar */
@media (max-width: 600px) {
.navbar {
flex-wrap: wrap;
gap: 10px;
}
.nav-left-group {
order: 2;
width: 100%;
justify-content: space-between;
}
.nav-links {
gap: 8px;
}
.nav-user-btn {
padding: 4px 8px;
font-size: 12px;
}
.nav-links a {
font-size: 12px;
}
} }

20
public/s/js/f0ck.js
View File

@@ -9,6 +9,21 @@ window.requestAnimFrame = (function () {
(() => { (() => {
let video; let video;
// User dropdown toggle
const userToggle = document.getElementById('nav-user-toggle');
const userMenu = document.getElementById('nav-user-menu');
if (userToggle && userMenu) {
userToggle.addEventListener('click', (e) => {
e.stopPropagation();
userMenu.classList.toggle('show');
});
document.addEventListener('click', (e) => {
if (!userMenu.contains(e.target) && !userToggle.contains(e.target)) {
userMenu.classList.remove('show');
}
});
}
// Initialize background preference // Initialize background preference
if (localStorage.getItem('background') == undefined) { if (localStorage.getItem('background') == undefined) {
localStorage.setItem('background', 'true'); localStorage.setItem('background', 'true');
@@ -272,6 +287,11 @@ window.requestAnimFrame = (function () {
const main = document.getElementById('main'); const main = document.getElementById('main');
main.innerHTML = '<div class="container"></div>'; main.innerHTML = '<div class="container"></div>';
container = main.querySelector('.container'); container = main.querySelector('.container');
} else if (!container && document.getElementById('main')) {
// Transition from User Profile or other pages without .container
const main = document.getElementById('main');
main.innerHTML = '<div class="container"></div>';
container = main.querySelector('.container');
} else if (container) { } else if (container) {
// Check if we are on Tags Overview logic (which reuses .container) // Check if we are on Tags Overview logic (which reuses .container)
const tagsOverview = container.querySelector('.tags'); const tagsOverview = container.querySelector('.tags');

18
views/snippets/navbar.html
View File

@@ -2,8 +2,20 @@
<!-- logged in --> <!-- logged in -->
<nav class="navbar navbar-expand-lg"> <nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a> <a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a>
<div class="navigation-links-guest"> <div class="nav-left-group">
<ol> <div class="nav-user-dropdown">
<button class="nav-user-btn" id="nav-user-toggle">
{{ session.user }} ▾
</button>
<div class="nav-user-menu" id="nav-user-menu">
<a href="/user/{{ session.user.toLowerCase() }}">profile</a>
<a href="/user/{{ session.user.toLowerCase() }}/favs">favs</a>
<a href="/settings">settings</a>
<div class="nav-user-divider"></div>
<a href="/logout">logout</a>
</div>
</div>
<div class="nav-links">
<a href="/tags">tags</a> <a href="/tags">tags</a>
<a href="/about">about</a> <a href="/about">about</a>
@if(!/^\/\d$/.test(url.pathname)) @if(!/^\/\d$/.test(url.pathname))
@@ -14,7 +26,7 @@
<path <path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /> d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg></a> </svg></a>
</ol> </div>
</div> </div>
<!-- show pagination only for tags and main page --> <!-- show pagination only for tags and main page -->
@if(!/^\/\d+$/.test(url.pathname)) @if(!/^\/\d+$/.test(url.pathname))