Skip to content

Commit a16bc1e

Browse files
Razaib-TariqRazaib-Tariq
committed
news page fixes
1 parent 9fc84b0 commit a16bc1e

4 files changed

Lines changed: 98 additions & 64 deletions

File tree

‎_site/css/style.css‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -366,6 +366,38 @@ img, video {
366366
.pagination-controls button:hover:not(:disabled) { background-color: #e3f2fd; }
367367
.pagination-controls button:disabled { opacity: 0.6; cursor: not-allowed; background-color: #f8f9fa; }
368368

369+
/* FIX: New Scrollable Container Style */
370+
.news-scroll-wrapper {
371+
height: 600px; /* Fixed height creates a stable frame */
372+
overflow-y: auto; /* Enables internal scrolling */
373+
padding-right: 10px; /* Space for scrollbar */
374+
border: 1px solid #e2e8f0;
375+
border-radius: 8px;
376+
background-color: #fff;
377+
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
378+
margin-bottom: 20px;
379+
380+
/* Modern Scrollbar Styling */
381+
scrollbar-width: thin;
382+
scrollbar-color: #cbd5e1 #f1f5f9;
383+
}
384+
385+
.news-scroll-wrapper::-webkit-scrollbar {
386+
width: 8px;
387+
}
388+
.news-scroll-wrapper::-webkit-scrollbar-track {
389+
background: #f1f5f9;
390+
border-radius: 4px;
391+
}
392+
.news-scroll-wrapper::-webkit-scrollbar-thumb {
393+
background-color: #cbd5e1;
394+
border-radius: 4px;
395+
border: 2px solid #f1f5f9;
396+
}
397+
.news-scroll-wrapper::-webkit-scrollbar-thumb:hover {
398+
background-color: #94a3b8;
399+
}
400+
369401
/* ==========================================================================
370402
10. PUBLICATIONS PAGE
371403
========================================================================== */
@@ -382,7 +414,7 @@ img, video {
382414
.publication-img-wrapper::after { content: '\f00e'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 2rem; opacity: 0; transition: opacity 0.2s ease; text-shadow: 0 2px 4px rgba(0,0,0,0.5); pointer-events: none; }
383415
.publication-img-wrapper:hover::after { opacity: 1; }
384416
.publication-img-wrapper::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.2s ease; }
385-
.publication-img-wrapper:hover::before { opacity: 1; }
417+
.publication-img-wrapper::before { opacity: 1; }
386418
.publication-img { max-height: 250px; width: auto; max-width: 100%; object-fit: contain; display: block; }
387419
#lightbox-modal { transition: opacity 0.3s ease; backdrop-filter: blur(5px); }
388420
#lightbox-modal.hidden { display: none; opacity: 0; pointer-events: none; }

‎_site/js/news.js‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -118,11 +118,9 @@ function renderCarousel(limit, selector) {
118118
}
119119
}
120120

121-
// --- NEWS PAGE LOGIC (Full Archive) ---
121+
// --- NEWS PAGE LOGIC (Scrollable Archive) ---
122122

123123
let filteredNews = [];
124-
let currentPage = 1;
125-
const ITEMS_PER_PAGE = 7;
126124
let currentFilter = 'All';
127125

128126
function filterNews(filter) {
@@ -137,7 +135,8 @@ function filterNews(filter) {
137135
const year = parseInt(filter);
138136
filteredNews = newsData.filter(item => item.year === year);
139137
}
140-
currentPage = 1;
138+
139+
// Render full list (scrolling handles the view)
141140
renderNewsArchive();
142141
updateFilterTabs();
143142
}
@@ -155,20 +154,22 @@ function updateFilterTabs() {
155154

156155
function renderNewsArchive() {
157156
const container = document.getElementById('news-archive-container');
158-
const pageInfo = document.getElementById('page-info');
159-
const prevBtn = document.getElementById('prev-page-btn');
160-
const nextBtn = document.getElementById('next-page-btn');
161157

162-
if (!container) return; // Exit if not on the News Page
158+
// Hide pagination controls since we are using a scrollable list
159+
const paginationControls = document.querySelector('.pagination-controls');
160+
if (paginationControls) paginationControls.style.display = 'none';
161+
162+
// Also hide page info text if it exists
163+
const pageInfo = document.getElementById('page-info');
164+
if (pageInfo && pageInfo.parentElement) pageInfo.parentElement.style.display = 'none';
163165

164-
const totalItems = filteredNews.length;
165-
const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
166+
if (!container) return; // Exit if not on the News Page
166167

167-
const start = (currentPage - 1) * ITEMS_PER_PAGE;
168-
const end = start + ITEMS_PER_PAGE;
169-
const itemsToShow = filteredNews.slice(start, end);
168+
// Apply the scrollable class to the container
169+
container.classList.add('news-scroll-wrapper');
170170

171-
container.innerHTML = itemsToShow.map(item => `
171+
// Use ALL filtered items (no pagination slicing)
172+
container.innerHTML = filteredNews.map(item => `
172173
<div class="archive-item">
173174
<span class="archive-icon">${item.icon}</span>
174175
<div class="archive-item-content text-gray-700 text-base">
@@ -177,22 +178,6 @@ function renderNewsArchive() {
177178
</div>
178179
</div>
179180
`).join('');
180-
181-
if (pageInfo) pageInfo.innerText = totalItems > 0 ? `Page ${currentPage} of ${totalPages}` : `Page 0 of 0`;
182-
if (prevBtn) prevBtn.disabled = currentPage === 1 || totalItems === 0;
183-
if (nextBtn) nextBtn.disabled = currentPage >= totalPages || totalItems === 0;
184-
}
185-
186-
function changePage(direction) {
187-
const totalItems = filteredNews.length;
188-
const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
189-
190-
currentPage += direction;
191-
192-
if (currentPage < 1) currentPage = 1;
193-
else if (currentPage > totalPages) currentPage = totalPages;
194-
195-
renderNewsArchive();
196181
}
197182

198183
// --- MODAL LOGIC (News Details) ---
@@ -280,7 +265,7 @@ function closeImageModal() {
280265
// --- INITIALIZATION ---
281266

282267
window.filterNews = filterNews;
283-
window.changePage = changePage;
268+
// window.changePage = changePage; // Removed pagination logic
284269
window.changeNewsPage = changeNewsPage;
285270
window.openNewsModal = openNewsModal;
286271
window.closeNewsModal = closeNewsModal;

‎css/style.css‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -366,6 +366,38 @@ img, video {
366366
.pagination-controls button:hover:not(:disabled) { background-color: #e3f2fd; }
367367
.pagination-controls button:disabled { opacity: 0.6; cursor: not-allowed; background-color: #f8f9fa; }
368368

369+
/* FIX: New Scrollable Container Style */
370+
.news-scroll-wrapper {
371+
height: 600px; /* Fixed height creates a stable frame */
372+
overflow-y: auto; /* Enables internal scrolling */
373+
padding-right: 10px; /* Space for scrollbar */
374+
border: 1px solid #e2e8f0;
375+
border-radius: 8px;
376+
background-color: #fff;
377+
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
378+
margin-bottom: 20px;
379+
380+
/* Modern Scrollbar Styling */
381+
scrollbar-width: thin;
382+
scrollbar-color: #cbd5e1 #f1f5f9;
383+
}
384+
385+
.news-scroll-wrapper::-webkit-scrollbar {
386+
width: 8px;
387+
}
388+
.news-scroll-wrapper::-webkit-scrollbar-track {
389+
background: #f1f5f9;
390+
border-radius: 4px;
391+
}
392+
.news-scroll-wrapper::-webkit-scrollbar-thumb {
393+
background-color: #cbd5e1;
394+
border-radius: 4px;
395+
border: 2px solid #f1f5f9;
396+
}
397+
.news-scroll-wrapper::-webkit-scrollbar-thumb:hover {
398+
background-color: #94a3b8;
399+
}
400+
369401
/* ==========================================================================
370402
10. PUBLICATIONS PAGE
371403
========================================================================== */
@@ -382,7 +414,7 @@ img, video {
382414
.publication-img-wrapper::after { content: '\f00e'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 2rem; opacity: 0; transition: opacity 0.2s ease; text-shadow: 0 2px 4px rgba(0,0,0,0.5); pointer-events: none; }
383415
.publication-img-wrapper:hover::after { opacity: 1; }
384416
.publication-img-wrapper::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.2s ease; }
385-
.publication-img-wrapper:hover::before { opacity: 1; }
417+
.publication-img-wrapper::before { opacity: 1; }
386418
.publication-img { max-height: 250px; width: auto; max-width: 100%; object-fit: contain; display: block; }
387419
#lightbox-modal { transition: opacity 0.3s ease; backdrop-filter: blur(5px); }
388420
#lightbox-modal.hidden { display: none; opacity: 0; pointer-events: none; }

‎js/news.js‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -118,11 +118,9 @@ function renderCarousel(limit, selector) {
118118
}
119119
}
120120

121-
// --- NEWS PAGE LOGIC (Full Archive) ---
121+
// --- NEWS PAGE LOGIC (Scrollable Archive) ---
122122

123123
let filteredNews = [];
124-
let currentPage = 1;
125-
const ITEMS_PER_PAGE = 7;
126124
let currentFilter = 'All';
127125

128126
function filterNews(filter) {
@@ -137,7 +135,8 @@ function filterNews(filter) {
137135
const year = parseInt(filter);
138136
filteredNews = newsData.filter(item => item.year === year);
139137
}
140-
currentPage = 1;
138+
139+
// Render full list (scrolling handles the view)
141140
renderNewsArchive();
142141
updateFilterTabs();
143142
}
@@ -155,20 +154,22 @@ function updateFilterTabs() {
155154

156155
function renderNewsArchive() {
157156
const container = document.getElementById('news-archive-container');
158-
const pageInfo = document.getElementById('page-info');
159-
const prevBtn = document.getElementById('prev-page-btn');
160-
const nextBtn = document.getElementById('next-page-btn');
161157

162-
if (!container) return; // Exit if not on the News Page
158+
// Hide pagination controls since we are using a scrollable list
159+
const paginationControls = document.querySelector('.pagination-controls');
160+
if (paginationControls) paginationControls.style.display = 'none';
161+
162+
// Also hide page info text if it exists
163+
const pageInfo = document.getElementById('page-info');
164+
if (pageInfo && pageInfo.parentElement) pageInfo.parentElement.style.display = 'none';
163165

164-
const totalItems = filteredNews.length;
165-
const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
166+
if (!container) return; // Exit if not on the News Page
166167

167-
const start = (currentPage - 1) * ITEMS_PER_PAGE;
168-
const end = start + ITEMS_PER_PAGE;
169-
const itemsToShow = filteredNews.slice(start, end);
168+
// Apply the scrollable class to the container
169+
container.classList.add('news-scroll-wrapper');
170170

171-
container.innerHTML = itemsToShow.map(item => `
171+
// Use ALL filtered items (no pagination slicing)
172+
container.innerHTML = filteredNews.map(item => `
172173
<div class="archive-item">
173174
<span class="archive-icon">${item.icon}</span>
174175
<div class="archive-item-content text-gray-700 text-base">
@@ -177,22 +178,6 @@ function renderNewsArchive() {
177178
</div>
178179
</div>
179180
`).join('');
180-
181-
if (pageInfo) pageInfo.innerText = totalItems > 0 ? `Page ${currentPage} of ${totalPages}` : `Page 0 of 0`;
182-
if (prevBtn) prevBtn.disabled = currentPage === 1 || totalItems === 0;
183-
if (nextBtn) nextBtn.disabled = currentPage >= totalPages || totalItems === 0;
184-
}
185-
186-
function changePage(direction) {
187-
const totalItems = filteredNews.length;
188-
const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
189-
190-
currentPage += direction;
191-
192-
if (currentPage < 1) currentPage = 1;
193-
else if (currentPage > totalPages) currentPage = totalPages;
194-
195-
renderNewsArchive();
196181
}
197182

198183
// --- MODAL LOGIC (News Details) ---
@@ -280,7 +265,7 @@ function closeImageModal() {
280265
// --- INITIALIZATION ---
281266

282267
window.filterNews = filterNews;
283-
window.changePage = changePage;
268+
// window.changePage = changePage; // Removed pagination logic
284269
window.changeNewsPage = changeNewsPage;
285270
window.openNewsModal = openNewsModal;
286271
window.closeNewsModal = closeNewsModal;

0 commit comments

Comments
 (0)