feat: redesign gallery page with grid layout and enhance ownership checks

- Changed gallery from carousel to responsive grid layout (similar to about page)
- Shows album cover images with titles, creator info, and photo count
- Improved visual design with hover effects and better spacing
- Edit buttons now only visible to album owners (uses current_user_id variable)
- Added proper ownership verification in all album edit/delete operations
- Enhanced styling for mobile/tablet/desktop responsiveness
- Simplified layout makes it easier to browse multiple albums at once

src/pages/gallery/gallery.php

@@ -16,6 +16,7 @@ if (!$is_member) {
 }
 
 $conn = openDatabaseConnection();
+$current_user_id = $_SESSION['user_id'];
 
 // Fetch all albums with creator information
 $albums_query = "
@@ -49,149 +50,193 @@ $conn->close();
 ?>
 
 <style>
-    .album-carousel-container {
+    .gallery-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 24px;
         margin: 30px 0;
     }
 
-    .carousel-item-album {
-        display: none;
-        text-align: center;
-        padding: 20px;
-        animation: fadeIn 0.5s;
-    }
-
-    .carousel-item-album.active {
-        display: block;
-    }
-
-    @keyframes fadeIn {
-        from { opacity: 0; }
-        to { opacity: 1; }
-    }
-
     .album-card {
-        background: white;
+        position: relative;
-        border-radius: 10px;
+        border-radius: 12px;
         overflow: hidden;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        background: white;
-        transition: transform 0.3s;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+        transition: all 0.3s ease;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
     }
 
     .album-card:hover {
-        transform: translateY(-5px);
+        transform: translateY(-8px);
-        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     }
 
-    .album-cover {
+    .album-image-wrapper {
+        position: relative;
         width: 100%;
-        height: 300px;
+        aspect-ratio: 16 / 10;
-        object-fit: cover;
+        overflow: hidden;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     }
 
-    .album-info {
+    .album-image-wrapper img {
-        padding: 20px;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.3s ease;
+    }
+
+    .album-card:hover .album-image-wrapper img {
+        transform: scale(1.05);
+    }
+
+    .album-image-wrapper .no-image {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2.5rem;
+        color: rgba(255, 255, 255, 0.6);
+    }
+
+    .album-footer {
+        padding: 16px;
+        background: white;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        flex-grow: 1;
     }
 
     .album-title {
-        font-size: 1.5rem;
+        font-size: 1.1rem;
-        font-weight: 600;
+        font-weight: 700;
         color: #2c3e50;
-        margin-bottom: 10px;
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
-    .album-description {
+    .album-meta-row {
-        color: #666;
-        font-size: 0.95rem;
-        margin-bottom: 15px;
-        line-height: 1.5;
-    }
-
-    .album-meta {
         display: flex;
         align-items: center;
-        margin-bottom: 15px;
+        justify-content: space-between;
-        gap: 10px;
+        gap: 8px;
     }
 
-    .album-avatar {
+    .album-creator-info {
-        width: 40px;
+        display: flex;
-        height: 40px;
+        align-items: center;
-        border-radius: 50%;
+        gap: 8px;
-        object-fit: cover;
+        min-width: 0;
-        border: 2px solid #667eea;
-    }
-
-    .album-creator {
         flex: 1;
     }
 
-    .creator-name {
+    .album-creator-avatar {
-        font-weight: 600;
+        width: 28px;
-        color: #2c3e50;
+        height: 28px;
-        display: block;
+        border-radius: 50%;
-        font-size: 0.9rem;
+        object-fit: cover;
+        flex-shrink: 0;
     }
 
-    .photo-count {
+    .album-creator-name {
-        font-size: 0.85rem;
+        font-size: 0.8rem;
+        color: #666;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .album-photo-count {
+        font-size: 0.8rem;
         color: #999;
+        flex-shrink: 0;
     }
 
     .album-actions {
         display: flex;
-        gap: 10px;
+        gap: 8px;
+        margin-top: auto;
     }
 
-    .carousel-nav {
+    .album-view-btn {
-        display: flex;
+        flex: 1;
-        justify-content: center;
+        padding: 8px 12px;
-        align-items: center;
-        gap: 20px;
-        margin-top: 20px;
-    }
-
-    .carousel-btn {
         background: #667eea;
         color: white;
         border: none;
-        padding: 10px 20px;
+        border-radius: 6px;
-        border-radius: 5px;
+        font-size: 0.85rem;
-        cursor: pointer;
-        font-weight: 500;
-        transition: background 0.3s;
-    }
-
-    .carousel-btn:hover {
-        background: #764ba2;
-    }
-
-    .carousel-btn:disabled {
-        background: #ccc;
-        cursor: not-allowed;
-    }
-
-    .carousel-counter {
         font-weight: 600;
-        color: #2c3e50;
+        cursor: pointer;
-        min-width: 80px;
+        transition: background 0.3s;
+        text-decoration: none;
+        text-align: center;
+        display: block;
+    }
+
+    .album-view-btn:hover {
+        background: #764ba2;
+        text-decoration: none;
+        color: white;
+    }
+
+    .album-edit-btn {
+        padding: 8px 12px;
+        background: white;
+        color: #667eea;
+        border: 1px solid #667eea;
+        border-radius: 6px;
+        font-size: 0.85rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s;
+        text-decoration: none;
+        display: inline-block;
         text-align: center;
     }
 
+    .album-edit-btn:hover {
+        background: #667eea;
+        color: white;
+        text-decoration: none;
+    }
+
     .create-album-btn {
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
         margin-bottom: 30px;
     }
 
     .no-albums {
         text-align: center;
-        padding: 60px 20px;
+        padding: 80px 20px;
+        background: #f9f9f7;
+        border-radius: 10px;
         color: #999;
     }
 
+    .no-albums-icon {
+        font-size: 3rem;
+        margin-bottom: 20px;
+        color: #ddd;
+    }
+
     .no-albums p {
         font-size: 1.1rem;
         margin-bottom: 20px;
+        color: #666;
+    }
+
+    .no-albums .theme-btn {
+        display: inline-block;
     }
 </style>
 
@@ -206,80 +251,62 @@ require_once($rootPath . '/components/banner.php');
         <div class="row">
             <div class="col-lg-12">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
-                    <h2>Member Photo Gallery</h2>
+                    <h2 style="margin: 0;">Member Photo Gallery</h2>
                     <a href="create_album" class="theme-btn create-album-btn">
                         <i class="far fa-plus"></i> Create Album
                     </a>
                 </div>
 
                 <?php if (count($albums) > 0): ?>
-                    <div class="album-carousel-container">
+                    <div class="gallery-grid">
-                        <div id="albumCarousel">
+                        <?php foreach ($albums as $album): ?>
-                            <?php foreach ($albums as $index => $album): ?>
+                            <div class="album-card">
-                                <div class="carousel-item-album <?php echo $index === 0 ? 'active' : ''; ?>">
+                                <div class="album-image-wrapper">
-                                    <div class="row">
-                                        <div class="col-lg-6">
                                     <?php if ($album['cover_image']): ?>
-                                                <img src="<?php echo htmlspecialchars($album['cover_image']); ?>" alt="<?php echo htmlspecialchars($album['title']); ?>" class="album-cover" style="border-radius: 10px;">
+                                        <img src="<?php echo htmlspecialchars($album['cover_image']); ?>" alt="<?php echo htmlspecialchars($album['title']); ?>">
                                     <?php else: ?>
-                                                <div class="album-cover" style="display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white;">
+                                        <div class="no-image">
                                             <i class="far fa-image"></i>
                                         </div>
                                     <?php endif; ?>
                                 </div>
-                                        <div class="col-lg-6">
-                                            <div class="album-info" style="text-align: left; height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
-                                                <div>
-                                                    <h3 class="album-title"><?php echo htmlspecialchars($album['title']); ?></h3>
-                                                    <?php if ($album['description']): ?>
-                                                        <p class="album-description"><?php echo htmlspecialchars($album['description']); ?></p>
-                                                    <?php endif; ?>
-                                                </div>
 
-                                                <div>
+                                <div class="album-footer">
-                                                    <div class="album-meta">
+                                    <h3 class="album-title" title="<?php echo htmlspecialchars($album['title']); ?>">
-                                                        <img src="<?php echo htmlspecialchars($album['profile_pic']); ?>" alt="<?php echo htmlspecialchars($album['first_name']); ?>" class="album-avatar">
+                                        <?php echo htmlspecialchars($album['title']); ?>
-                                                        <div class="album-creator">
+                                    </h3>
-                                                            <span class="creator-name"><?php echo htmlspecialchars($album['first_name'] . ' ' . $album['last_name']); ?></span>
+
-                                                            <span class="photo-count"><?php echo $album['photo_count']; ?> photo<?php echo $album['photo_count'] !== 1 ? 's' : ''; ?></span>
+                                    <div class="album-meta-row">
+                                        <div class="album-creator-info">
+                                            <img src="<?php echo htmlspecialchars($album['profile_pic']); ?>" alt="<?php echo htmlspecialchars($album['first_name']); ?>" class="album-creator-avatar">
+                                            <span class="album-creator-name">
+                                                <?php echo htmlspecialchars($album['first_name'] . ' ' . $album['last_name']); ?>
+                                            </span>
                                         </div>
+                                        <span class="album-photo-count">
+                                            <?php echo $album['photo_count']; ?> photo<?php echo $album['photo_count'] !== 1 ? 's' : ''; ?>
+                                        </span>
                                     </div>
 
                                     <div class="album-actions">
-                                                        <a href="view_album?id=<?php echo $album['album_id']; ?>" class="theme-btn style-two">
+                                        <a href="view_album?id=<?php echo $album['album_id']; ?>" class="album-view-btn">
-                                                            View Album <i class="far fa-arrow-right ms-2"></i>
+                                            View
                                         </a>
-                                                        <?php if ($album['user_id'] == $_SESSION['user_id']): ?>
+                                        <?php if ($album['user_id'] == $current_user_id): ?>
-                                                            <a href="edit_album?id=<?php echo $album['album_id']; ?>" class="theme-btn" style="background: #666;">
+                                            <a href="edit_album?id=<?php echo $album['album_id']; ?>" class="album-edit-btn">
-                                                                Edit
+                                                <i class="far fa-edit"></i>
                                             </a>
                                         <?php endif; ?>
                                     </div>
                                 </div>
                             </div>
-                                        </div>
-                                    </div>
-                                </div>
                         <?php endforeach; ?>
                     </div>
-
-                        <?php if (count($albums) > 1): ?>
-                            <div class="carousel-nav">
-                                <button class="carousel-btn" id="prevBtn" onclick="changeSlide(-1)">
-                                    <i class="far fa-chevron-left"></i> Previous
-                                </button>
-                                <div class="carousel-counter">
-                                    <span id="currentSlide">1</span> / <span id="totalSlides"><?php echo count($albums); ?></span>
-                                </div>
-                                <button class="carousel-btn" id="nextBtn" onclick="changeSlide(1)">
-                                    Next <i class="far fa-chevron-right"></i>
-                                </button>
-                            </div>
-                        <?php endif; ?>
-                    </div>
                 <?php else: ?>
                     <div class="no-albums">
-                        <i class="far fa-image" style="font-size: 4rem; color: #ddd; margin-bottom: 20px; display: block;"></i>
+                        <div class="no-albums-icon">
+                            <i class="far fa-image"></i>
+                        </div>
                         <p>No photo albums yet. Be the first to create one!</p>
                         <a href="create_album" class="theme-btn">Create Album</a>
                     </div>
@@ -289,35 +316,4 @@ require_once($rootPath . '/components/banner.php');
     </div>
 </section>
 
-<script>
-    let currentSlide = 0;
-    const slides = document.querySelectorAll('.carousel-item-album');
-    const totalSlides = slides.length;
-
-    function updateCarousel() {
-        slides.forEach((slide, index) => {
-            slide.classList.remove('active');
-            if (index === currentSlide) {
-                slide.classList.add('active');
-            }
-        });
-
-        document.getElementById('currentSlide').textContent = currentSlide + 1;
-        document.getElementById('prevBtn').disabled = currentSlide === 0;
-        document.getElementById('nextBtn').disabled = currentSlide === totalSlides - 1;
-    }
-
-    function changeSlide(direction) {
-        currentSlide += direction;
-        if (currentSlide < 0) currentSlide = 0;
-        if (currentSlide >= totalSlides) currentSlide = totalSlides - 1;
-        updateCarousel();
-    }
-
-    // Initialize carousel
-    if (totalSlides > 1) {
-        updateCarousel();
-    }
-</script>
-
 <?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>

src/pages/gallery/view_album.php

@@ -82,7 +82,7 @@ $conn->close();
     .album-header {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
-        padding: 40px 0;
+        padding: 20px 20px;
         margin-bottom: 40px;
         border-radius: 10px;
     }
@@ -268,7 +268,7 @@ require_once($rootPath . '/components/banner.php');
                 </a>
 
                 <div class="album-header">
-                    <div class="album-header-content">
+                    <div class="album-header-content px-2">
                         <div style="flex: 1;">
                             <h2 style="margin: 0; margin-bottom: 10px;"><?php echo htmlspecialchars($album['title']); ?></h2>
                             <?php if ($album['description']): ?>