anil.recoil.org / atomic-eeg
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

threads

Anil Madhavapeddy 01bbd8d6 d2b0cd78

+52 -94
+52 -94
index.html
··· 141 141 width: 100%; 142 142 max-width: 1200px; 143 143 margin: 0 auto; 144 - padding-right: var(--sidebar-width); 144 + padding-left: var(--sidebar-width); 145 145 } 146 146 147 147 .timeline-sidebar { 148 148 position: fixed; 149 149 top: var(--header-height); 150 - right: 0; 150 + left: 0; 151 151 width: var(--sidebar-width); 152 152 height: calc(100vh - var(--header-height)); 153 153 background-color: var(--bg-alt-color); 154 - border-left: 1px solid var(--border-color); 154 + border-right: 1px solid var(--border-color); 155 155 display: flex; 156 156 flex-direction: column; 157 157 overflow-y: auto; ··· 194 194 .timeline-month::before { 195 195 content: ''; 196 196 position: absolute; 197 - left: 20px; 197 + right: 20px; 198 198 top: 50%; 199 199 width: 7px; 200 200 height: 1px; ··· 204 204 .timeline-year::after { 205 205 content: ''; 206 206 position: absolute; 207 - left: 15px; 207 + right: 15px; 208 208 top: 50%; 209 209 transform: translateY(-50%); 210 210 width: 4px; ··· 216 216 .timeline-month::after { 217 217 content: ''; 218 218 position: absolute; 219 - left: 16px; 219 + right: 16px; 220 220 top: 50%; 221 221 transform: translateY(-50%); 222 222 width: 2px; ··· 242 242 .timeline-year.active::after { 243 243 width: 8px; 244 244 height: 8px; 245 - left: 13px; 245 + right: 13px; 246 246 box-shadow: 0 0 8px var(--accent-shadow); 247 247 } 248 248 249 249 .timeline-month.active::after { 250 250 width: 4px; 251 251 height: 4px; 252 - left: 15px; 252 + right: 15px; 253 253 } 254 254 255 255 .feed-item { ··· 285 285 font-family: 'JetBrains Mono', monospace; 286 286 font-size: 0.75rem; 287 287 color: var(--text-muted); 288 - min-width: 32px; 289 288 margin-right: 10px; 290 - text-align: right; 289 + min-width: 120px; 290 + white-space: nowrap; 291 291 } 292 292 293 - .date-column { 294 - position: absolute; 295 - left: 0; 296 - width: 110px; 297 - font-family: 'JetBrains Mono', monospace; 298 - color: var(--text-muted); 299 - font-size: 0.8rem; 300 - text-align: left; 301 - padding-left: 15px; 302 - } 293 + /* .date-column removed as part of sidebar simplification */ 303 294 304 295 .month-year-header { 305 - position: sticky; 306 - top: var(--header-height); 307 - background-color: var(--bg-color); 308 - z-index: 10; 309 296 padding: 8px 0; 310 - margin-left: -110px; 311 - padding-left: 110px; 312 297 width: 100%; 298 + margin-bottom: 5px; 299 + margin-top: 10px; 313 300 } 314 301 315 302 .month-year-label { ··· 319 306 320 307 .feed-container { 321 308 position: relative; 322 - padding-left: 110px; /* Make room for date column */ 309 + padding-left: 15px; /* Reduced from 110px since we don't need space for date column anymore */ 323 310 } 324 311 325 312 .feed-item-author { ··· 646 633 font-family: 'JetBrains Mono', monospace; 647 634 font-size: 0.75rem; 648 635 color: var(--text-muted); 649 - min-width: 32px; 636 + min-width: 120px; 650 637 margin-right: 15px; 651 - text-align: right; 638 + white-space: nowrap; 652 639 } 653 640 654 641 .link-item-source { ··· 739 726 align-items: flex-start; 740 727 } 741 728 742 - .link-item-date, .link-item-source { 729 + .link-item-date { 730 + margin-bottom: 6px; 731 + min-width: auto; 732 + width: 100%; 733 + } 734 + 735 + .link-item-source { 743 736 margin-bottom: 6px; 744 737 } 745 738 ··· 781 774 .timeline-sidebar { 782 775 top: 140px; 783 776 height: calc(100vh - 140px); 777 + width: 60px; /* Make the sidebar a bit narrower on mobile */ 784 778 } 785 779 786 780 .tabs { ··· 914 908 } 915 909 916 910 .feed-item-date { 917 - min-width: 60px; 918 - margin-right: 10px; 911 + min-width: auto; 912 + width: 100%; 913 + margin-bottom: 5px; 914 + } 915 + 916 + .feed-item-row { 917 + flex-direction: column; 918 + align-items: flex-start; 919 919 } 920 920 921 921 .tabs { ··· 943 943 .timeline-sidebar { 944 944 top: 150px; 945 945 height: calc(100vh - 150px); 946 + width: 50px; /* Even narrower on very small screens */ 947 + } 948 + 949 + .content { 950 + padding-left: 50px; /* Match the sidebar width on small screens */ 946 951 } 947 952 } 948 953 </style> ··· 1050 1055 lastActiveMonth = month; 1051 1056 } 1052 1057 1053 - // Fixed month header overlap issue 1054 - // First hide all month headers 1055 - document.querySelectorAll('.month-year-header').forEach(header => { 1056 - header.style.visibility = 'hidden'; 1057 - }); 1058 - 1059 - // Only show the current month header 1060 - const currentHeader = document.querySelector(`.month-year-header[data-year="${year}"][data-month="${month}"]`); 1061 - if (currentHeader) { 1062 - currentHeader.style.visibility = 'visible'; 1063 - } 1058 + // Month headers are now simple inline elements, no need to toggle visibility 1064 1059 } 1065 1060 } 1066 1061 }); ··· 1085 1080 const tabContent = document.querySelector(`.tab-content[data-tab="${tabName}"]`); 1086 1081 tabContent.classList.add('active'); 1087 1082 1088 - // Reset month header visibility when switching tabs 1089 - if (tabName === 'posts' || tabName === 'links') { 1090 - const monthHeaders = tabContent.querySelectorAll('.month-year-header'); 1091 - monthHeaders.forEach((header, index) => { 1092 - header.style.visibility = index === 0 ? 'visible' : 'hidden'; 1093 - }); 1094 - } 1083 + // Month headers are now simple inline elements, no need to toggle visibility 1095 1084 1096 1085 // Show or hide timeline sidebar based on active tab 1097 1086 if (tabName === 'people') { 1098 1087 timeline.style.display = 'none'; 1099 - document.querySelector('.content').style.paddingRight = '0'; 1088 + document.querySelector('.content').style.paddingLeft = '0'; 1100 1089 } else { 1101 1090 timeline.style.display = 'flex'; 1102 - document.querySelector('.content').style.paddingRight = 'var(--sidebar-width)'; 1091 + document.querySelector('.content').style.paddingLeft = 'var(--sidebar-width)'; 1103 1092 1104 1093 // Reset timeline highlighting 1105 1094 document.querySelectorAll('.timeline-year.active, .timeline-month.active').forEach(el => { ··· 1291 1280 // Create a timeline structure by year/month 1292 1281 const timeline = new Map(); 1293 1282 const monthNames = [ 1294 - 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 1295 - 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 1283 + 'January', 'February', 'March', 'April', 'May', 'June', 1284 + 'July', 'August', 'September', 'October', 'November', 'December' 1296 1285 ]; 1297 1286 const shortMonthNames = [ 1298 1287 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', ··· 1345 1334 1346 1335 entriesHTML += ` 1347 1336 <div class="month-year-header" ${dateAttr}> 1348 - <div class="date-column"> 1349 - <div class="month-year-label">${monthNames[month]} ${year}</div> 1350 - </div> 1337 + <div class="month-year-label">${monthNames[month]} ${year}</div> 1351 1338 </div>`; 1352 1339 } 1353 1340 ··· 1369 1356 entriesHTML += ` 1370 1357 <article id="${entry.articleId}" class="feed-item" ${dateAttr}> 1371 1358 <div class="feed-item-row"> 1372 - <div class="feed-item-date">${getDayWithOrdinal(date)}</div> 1359 + <div class="feed-item-date">${monthNames[month]} ${getDayWithOrdinal(date)}, ${year}</div> 1373 1360 <div class="feed-item-author">${entry.author}</div> 1374 1361 <div class="feed-item-content-wrapper"> 1375 1362 <div class="feed-item-title"><a href="${entry.link}" target="_blank">${entry.title}</a></div><div class="feed-item-preview">${entry.contentHtml}</div> ··· 1595 1582 loadingContainer.style.display = 'none'; 1596 1583 feedItemsContainer.innerHTML = entriesHTML; 1597 1584 1598 - // Initialize month headers - hide all except first one 1599 - const monthHeaders = document.querySelectorAll('.month-year-header'); 1600 - monthHeaders.forEach((header, index) => { 1601 - header.style.visibility = index === 0 ? 'visible' : 'hidden'; 1602 - }); 1585 + // Month headers are now all visible 1603 1586 1604 1587 // If we have entries, set the most recent (first) entry's date as active in the timeline 1605 1588 if (entriesArray.length > 0) { ··· 1627 1610 lastActiveMonth = month; 1628 1611 } 1629 1612 1630 - // Show the month header for the most recent month 1631 - document.querySelectorAll('.month-year-header').forEach(header => { 1632 - header.style.visibility = 'hidden'; 1633 - }); 1634 - const recentHeader = document.querySelector(`.month-year-header[data-year="${year}"][data-month="${month}"]`); 1635 - if (recentHeader) { 1636 - recentHeader.style.visibility = 'visible'; 1637 - } 1613 + // Month headers are now simple inline elements, no need to toggle visibility 1638 1614 } 1639 1615 1640 1616 // Helper function to observe all items with date attributes ··· 1657 1633 const initialActiveTab = document.querySelector('.tab-button.active').getAttribute('data-tab'); 1658 1634 if (initialActiveTab === 'people') { 1659 1635 document.getElementById('timeline-sidebar').style.display = 'none'; 1660 - document.querySelector('.content').style.paddingRight = '0'; 1636 + document.querySelector('.content').style.paddingLeft = '0'; 1661 1637 } else { 1662 1638 // Initialize the last active date from the first visible item 1663 1639 const selector = initialActiveTab === 'posts' ? '.feed-item' : '.link-item'; ··· 1746 1722 1747 1723 linksHTML += ` 1748 1724 <div class="month-year-header" data-year="${year}" data-month="${month}"> 1749 - <div class="date-column"> 1750 - <div class="month-year-label">${monthNames[month]} ${year}</div> 1751 - </div> 1725 + <div class="month-year-label">${monthNames[month]} ${year}</div> 1752 1726 </div>`; 1753 1727 } 1754 1728 ··· 1862 1836 // Create link item HTML 1863 1837 linksHTML += ` 1864 1838 <div class="link-item" data-year="${date.getFullYear()}" data-month="${date.getMonth()}"> 1865 - <div class="link-item-date">${getLinkDayWithOrdinal(date)}</div> 1839 + <div class="link-item-date">${monthNames[date.getMonth()]} ${getLinkDayWithOrdinal(date)}, ${date.getFullYear()}</div> 1866 1840 <div class="link-item-source" title="From: ${link.sourceTitle}"> 1867 1841 <a href="${link.sourceLink}" target="_blank" style="color: inherit; text-decoration: none;"> 1868 1842 ${link.source} ··· 1887 1861 // Update the links container 1888 1862 linksContainer.innerHTML = linksHTML; 1889 1863 1890 - // Initialize month headers in links view - hide all except first one 1891 - const linkMonthHeaders = document.querySelectorAll('#link-items .month-year-header'); 1892 - linkMonthHeaders.forEach((header, index) => { 1893 - header.style.visibility = index === 0 ? 'visible' : 'hidden'; 1894 - }); 1864 + // Month headers in links view are now all visible 1895 1865 1896 1866 // If we have links, set the most recent link's date as active in the timeline for the links tab 1897 1867 if (dedupedLinks.length > 0) { ··· 2045 2015 if (yearEl) yearEl.classList.add('active'); 2046 2016 if (monthEl) monthEl.classList.add('active'); 2047 2017 2048 - // Update month header visibility when clicking timeline 2049 - // Hide all headers 2050 - activeTab.querySelectorAll('.month-year-header').forEach(header => { 2051 - header.style.visibility = 'hidden'; 2052 - }); 2053 - 2054 - // Show only the clicked month header 2055 - if (month !== null && month !== undefined) { 2056 - const clickedHeader = activeTab.querySelector(`.month-year-header[data-year="${year}"][data-month="${month}"]`); 2057 - if (clickedHeader) { 2058 - clickedHeader.style.visibility = 'visible'; 2059 - } 2060 - } 2018 + // Month headers are now simple inline elements, no need to toggle visibility 2061 2019 } 2062 2020 }); 2063 2021 });