Skip to content

Commit 14a7adb

Browse files
SomeshdiwanSomeshdiwan
committed
Updated UI 2.9
Signed-off-by: Someshdiwan <[email protected]>
1 parent 6a5bcbc commit 14a7adb

File tree

2 files changed

+83
-36
lines changed

2 files changed

+83
-36
lines changed

‎site/_layouts/default.html‎

Lines changed: 67 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -315,20 +315,29 @@
315315
const sidebar = document.getElementById('sidebar');
316316
const toggleBtn = document.querySelector('.toggle-btn');
317317
const content = document.querySelector('.content');
318+
if (!sidebar) {
319+
console.error('Sidebar element not found');
320+
return;
321+
}
318322
sidebar.classList.toggle('hidden', isHidden);
319323
content.style.marginLeft = isHidden ? '0' : '210px'; // Force margin update
320324
localStorage.setItem('sidebar-hidden', isHidden);
321325
if (window.innerWidth > 768) {
322326
toggleBtn.style.display = isHidden ? 'block' : 'none';
327+
} else {
328+
toggleBtn.style.display = 'block';
323329
}
324-
// Update active link after toggle
325330
updateActiveLink();
326331
}
327332

328333
// Handle tap/click events
329334
function handleTap(event) {
330335
const sidebar = document.getElementById('sidebar');
331336
const target = event.target;
337+
if (!sidebar) {
338+
console.error('Sidebar not found during tap');
339+
return;
340+
}
332341

333342
// Allow taps outside interactive elements to trigger hide/show
334343
if (
@@ -364,19 +373,42 @@
364373
const isDark = body.classList.contains('dark-mode');
365374
localStorage.setItem('dark-mode', isDark);
366375
const icon = document.querySelector('.dark-toggle i');
367-
icon.classList.remove('fa-moon', 'fa-sun');
368-
icon.classList.add(isDark ? 'fa-sun' : 'fa-moon');
376+
if (icon) {
377+
icon.classList.remove('fa-moon', 'fa-sun');
378+
icon.classList.add(isDark ? 'fa-sun' : 'fa-moon');
379+
} else {
380+
console.error('Dark mode icon not found');
381+
}
382+
// Force re-render of styled elements
383+
const sidebar = document.getElementById('sidebar');
384+
const themeContainer = document.getElementById('theme-time-container');
385+
if (sidebar) sidebar.style.display = 'none'; // Trigger reflow
386+
if (themeContainer) themeContainer.style.display = 'none';
387+
setTimeout(() => {
388+
if (sidebar) sidebar.style.display = '';
389+
if (themeContainer) themeContainer.style.display = '';
390+
}, 0);
369391
}
370392

371393
// Timezone toggle
372394
function toggleTimezone() {
373395
currentZone = currentZone === 'IST' ? 'GMT' : 'IST';
374-
document.getElementById('tz-toggle-btn').textContent = currentZone;
375-
updateLiveTime();
396+
const tzButton = document.getElementById('tz-toggle-btn');
397+
if (tzButton) {
398+
tzButton.textContent = currentZone;
399+
updateLiveTime();
400+
} else {
401+
console.error('Timezone button not found');
402+
}
376403
}
377404

378405
// Update live time
379406
function updateLiveTime() {
407+
const liveTime = document.getElementById('live-time');
408+
if (!liveTime) {
409+
console.error('Live time element not found');
410+
return;
411+
}
380412
const now = new Date();
381413
let date;
382414
if (currentZone === 'GMT') {
@@ -390,17 +422,20 @@
390422
const s = date.getSeconds().toString().padStart(2, '0');
391423
const ampm = h >= 12 ? 'PM' : 'AM';
392424
h = h % 12 || 12;
393-
document.getElementById('live-time').textContent =
394-
`Time (${currentZone}): ${h}:${m}:${s} ${ampm}`;
425+
liveTime.textContent = `Time (${currentZone}): ${h}:${m}:${s} ${ampm}`;
395426
}
396427

397428
// Handle scroll for theme/time container
398429
function handleScroll() {
399430
const themeTimeContainer = document.getElementById('theme-time-container');
400-
if (window.scrollY > SCROLL_THRESHOLD) {
401-
themeTimeContainer.classList.add('hidden');
431+
if (themeTimeContainer) {
432+
if (window.scrollY > SCROLL_THRESHOLD) {
433+
themeTimeContainer.classList.add('hidden');
434+
} else {
435+
themeTimeContainer.classList.remove('hidden');
436+
}
402437
} else {
403-
themeTimeContainer.classList.remove('hidden');
438+
console.error('Theme/time container not found');
404439
}
405440
}
406441

@@ -409,22 +444,31 @@
409444
// Initialize dark mode
410445
const isDark = localStorage.getItem('dark-mode') === 'true';
411446
const body = document.body;
412-
if (isDark) {
413-
body.classList.add('dark-mode');
414-
document.querySelector('.dark-toggle i').classList.replace('fa-moon', 'fa-sun');
447+
if (body) {
448+
if (isDark) {
449+
body.classList.add('dark-mode');
450+
const icon = document.querySelector('.dark-toggle i');
451+
if (icon) icon.classList.replace('fa-moon', 'fa-sun');
452+
}
453+
} else {
454+
console.error('Body element not found');
415455
}
416456

417457
// Initialize sidebar state
418458
const sidebar = document.getElementById('sidebar');
419459
const toggleBtn = document.querySelector('.toggle-btn');
420460
const content = document.querySelector('.content');
421-
const isSidebarHidden = localStorage.getItem('sidebar-hidden') === 'true';
422-
sidebar.classList.toggle('hidden', isSidebarHidden);
423-
content.style.marginLeft = isSidebarHidden ? '0' : '210px'; // Initial margin
424-
if (window.innerWidth > 768) {
425-
toggleBtn.style.display = isSidebarHidden ? 'block' : 'none';
461+
if (sidebar && toggleBtn && content) {
462+
const isSidebarHidden = localStorage.getItem('sidebar-hidden') === 'true';
463+
sidebar.classList.toggle('hidden', isSidebarHidden);
464+
content.style.marginLeft = isSidebarHidden ? '0' : '210px';
465+
if (window.innerWidth > 768) {
466+
toggleBtn.style.display = isSidebarHidden ? 'block' : 'none';
467+
} else {
468+
toggleBtn.style.display = 'block';
469+
}
426470
} else {
427-
toggleBtn.style.display = 'block';
471+
console.error('Sidebar, toggle button, or content not found');
428472
}
429473

430474
// Add tap/click and scroll listeners
@@ -433,15 +477,17 @@
433477
window.addEventListener('scroll', handleScroll, { passive: true });
434478

435479
// Show tooltip on first visit
436-
if (!localStorage.getItem('tooltip-shown')) {
480+
const tooltip = document.getElementById('tooltip');
481+
if (tooltip && !localStorage.getItem('tooltip-shown')) {
437482
setTimeout(() => {
438-
const tooltip = document.getElementById('tooltip');
439483
tooltip.classList.add('visible');
440484
setTimeout(() => {
441485
tooltip.classList.remove('visible');
442486
localStorage.setItem('tooltip-shown', 'true');
443487
}, 5000);
444488
}, 1000);
489+
} else if (!tooltip) {
490+
console.error('Tooltip element not found');
445491
}
446492

447493
// Initialize active link

‎site/assets/style.css‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ body {
300300
--card-shadow: rgba(0, 0, 0, 0.1);
301301
--bg-color: #f9f9f9;
302302
--text-color: #000000;
303-
--sidebar-bg: #1f1f1f; /* Darker for better contrast */
303+
--sidebar-bg: #f4f4f4;
304304
--button-text: #ffffff;
305305
}
306306

@@ -312,8 +312,9 @@ body {
312312
--button-text: #ffffff;
313313
--card-bg: #2b2b2b;
314314
--card-shadow: rgba(0, 0, 0, 0.5);
315-
--primary-color: #4da8ff; /* Lighter blue for better contrast */
316-
--active-color: #a1d6ff; /* Lighter active color */
315+
--primary-color: #4da8ff;
316+
--active-color: #a1d6ff;
317+
--hover-bg: #333333; /* Adjusted for dark mode */
317318
}
318319

319320
/* 2. Global Styles */
@@ -336,9 +337,9 @@ body {
336337
background-color: var(--sidebar-bg);
337338
padding: 0.5rem 1rem;
338339
border-radius: 8px;
339-
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
340+
box-shadow: 0 2px 8px var(--card-shadow);
340341
z-index: 1002;
341-
transition: opacity 0.3s ease, transform 0.3s ease;
342+
transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s;
342343
}
343344

344345
#theme-time-container.hidden {
@@ -403,7 +404,7 @@ body {
403404
padding: 1.25rem;
404405
box-sizing: border-box;
405406
overflow-y: auto;
406-
transition: transform 0.3s ease;
407+
transition: transform 0.3s ease, background-color 0.3s;
407408
z-index: 999;
408409
}
409410

@@ -420,13 +421,13 @@ body {
420421
text-decoration: none;
421422
border-radius: 6px;
422423
margin-bottom: 0.75rem;
423-
position: relative; /* For pseudo-element positioning */
424+
position: relative;
424425
transition: transform 0.2s, background-color 0.2s;
425426
}
426427

427428
.sidebar-link i {
428429
margin-right: 0.75rem;
429-
text-decoration: none; /* Ensure icon has no underline */
430+
text-decoration: none;
430431
}
431432

432433
.sidebar-link:hover {
@@ -442,17 +443,17 @@ body {
442443
.sidebar-link.active::after {
443444
content: "";
444445
position: absolute;
445-
left: 2.5rem; /* Start after icon + margin */
446+
left: 2.5rem;
446447
right: 1rem;
447-
bottom: 0.25rem; /* Adjust for better alignment */
448+
bottom: 0.25rem;
448449
height: 2px;
449450
background: var(--active-color);
450-
transform: scaleX(1); /* Always visible by default */
451+
transform: scaleX(1);
451452
transition: transform 0.2s ease;
452453
}
453454

454455
.sidebar-link.active:hover::after {
455-
transform: scaleX(1.1); /* Slight scale on hover for feedback */
456+
transform: scaleX(1.1);
456457
}
457458

458459
/* 9. Toggle Button (Fallback) */
@@ -481,14 +482,14 @@ body {
481482
/* 10. Content Area */
482483
.wrapper {
483484
display: flex;
484-
width: 100%; /* Ensure full width */
485+
width: 100%;
485486
}
486487

487488
.content {
488489
margin-left: 210px;
489490
padding: 2rem;
490491
flex: 1;
491-
min-height: 100vh; /* Ensure content takes full height */
492+
min-height: 100vh;
492493
transition: margin-left 0.3s ease;
493494
}
494495

@@ -560,4 +561,4 @@ body {
560561
.content a:hover,
561562
.content a:focus {
562563
text-decoration: underline;
563-
}
564+
}

0 commit comments

Comments
 (0)