ORGANISATION-KA-INTERNATIONALE/kaubuntu.re
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: change short alignment

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-10-03 08:06:24 +04:00
parent 006194fcdb
commit f68a6e152c
2 changed files with 65 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+40
View File
@@ -1115,6 +1115,46 @@ img {
transform: scale(1.2);
}
/* Shorts specific styling */
.short-card {
width: 180px;
}
.short-thumbnail {
aspect-ratio: 9/16;
height: 320px;
border-radius: 12px;
overflow: hidden;
}
.short-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Ajustements pour mobile */
@media (max-width: 768px) {
.short-card {
width: 150px;
}
.short-thumbnail {
height: 267px; /* Maintient le ratio 9:16 */
}
}
@media (max-width: 480px) {
.short-card {
width: 130px;
}
.short-thumbnail {
height: 231px; /* Maintient le ratio 9:16 */
}
}
/* View More Button */
.view-more {
display: block;
index.php
+24 -4
View File
@@ -271,14 +271,34 @@ setSecurityHeaders();
foreach ($shorts as $video):
?>
<div class="carousel-item">
<article class="video-card" data-video-id="<?php echo $video['id']; ?>">
<div class="video-thumbnail">
<img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>">
<div class="video-play-icon">
<article class="video-card short-card" data-video-id="<?php echo $video['id']; ?>">
<div class="video-thumbnail short-thumbnail">
<img src="<?php echo $video['thumbnail']; ?>" alt="Miniature de la vidéo: <?php echo htmlspecialchars($video['title']); ?>">
<div class="video-play-icon" aria-hidden="true">
<i class="fas fa-play-circle"></i>
</div>
<div class="video-duration" aria-label="Durée: <?php echo formatDuration($video['duration']); ?>">
<?php echo formatDuration($video['duration']); ?>
</div>
</div>
<div class="video-info">
<h3 class="video-title"><?php echo htmlspecialchars($video['title']); ?></h3>
<div class="video-channel">
<?php if (strpos($video['channelAvatar'], 'default-avatar.png') !== false || empty($video['channelAvatar'])): ?>
<div class="channel-avatar-placeholder">
<i class="fas fa-user-circle"></i>
</div>
<?php else: ?>
<img src="<?php echo $video['channelAvatar']; ?>" alt="<?php echo $video['channel']; ?>" class="channel-avatar">
<?php endif; ?>
<span class="channel-name"><?php echo $video['channel']; ?></span>
</div>
<div class="video-metadata">
<span class="video-views"><i class="fas fa-eye"></i> <?php echo formatViewCount($video['views']); ?> vues</span>
<span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
</div>
</div>
</article>
</div>
<?php
endforeach;