diff options
| author | ilotterytea <iltsu@alright.party> | 2025-06-23 19:37:26 +0500 |
|---|---|---|
| committer | ilotterytea <iltsu@alright.party> | 2025-06-23 19:37:26 +0500 |
| commit | 0d9aa950da3201a5fc20c568fb7697a102ec1be4 (patch) | |
| tree | 85f22d140f5f4975ca1004d2e84f7cbbb7569581 | |
| parent | a242b1ac66726e3dc29027ff5db76fc7813bc65f (diff) | |
feat: color the files and add title to them + lazy loading for files
| -rw-r--r-- | public/catalogue.php | 21 | ||||
| -rw-r--r-- | public/index.php | 2 | ||||
| -rw-r--r-- | public/static/style.css | 12 |
3 files changed, 29 insertions, 6 deletions
diff --git a/public/catalogue.php b/public/catalogue.php index fca1183..9836cbf 100644 --- a/public/catalogue.php +++ b/public/catalogue.php @@ -35,6 +35,17 @@ $stmt = $db->query("SELECT f.id, f.mime, f.extension $stmt->execute(); $files = $stmt->fetchAll(); + +foreach ($files as &$f) { + if (str_starts_with($f['mime'], 'video/')) { + $f['color'] = 'blue'; + } else if ($f['mime'] == 'application/x-shockwave-flash') { + $f['color'] = 'red'; + } + + $f['thumb_title'] = "{$f['mime']} ({$f['extension']})"; +} +unset($f); ?> <!DOCTYPE html> <html> @@ -63,16 +74,16 @@ $files = $stmt->fetchAll(); <section class="wall"> <?php foreach ($files as $file): ?> - <div class="brick"> + <div class="brick<?= isset($file['color']) ? " {$file['color']}" : '' ?>"> <a href="/<?= sprintf('%s.%s', $file['id'], $file['extension']) ?>"> - <i> + <i title="<?= $file['thumb_title'] ?>"> <?php if (str_starts_with($file['mime'], 'image/') || str_starts_with($file['mime'], 'video/')): ?> <img src="<?= sprintf('%s/%s.webp', FILE_THUMBNAIL_DIRECTORY_PREFIX, $file['id']) ?>" - alt="No thumbnail."> + alt="No thumbnail." loading="lazy"> <?php elseif (str_starts_with($file['mime'], 'audio/')): ?> - <img src="/static/img/icons/file_audio.png" alt="No thumbnail."> + <img src="/static/img/icons/file_audio.png" alt="No thumbnail." loading="lazy"> <?php elseif (str_starts_with($file['mime'], 'text/')): ?> - <img src="/static/img/icons/file_text.png" alt="No thumbnail."> + <img src="/static/img/icons/file_text.png" alt="No thumbnail." loading="lazy"> <?php else: ?> <img src="/static/img/icons/file.png" alt="No thumbnail."> <?php endif; ?> diff --git a/public/index.php b/public/index.php index 544467a..556349f 100644 --- a/public/index.php +++ b/public/index.php @@ -661,7 +661,7 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); <?php if (FILE_THUMBNAILS): ?> <div class="column align-center justify-center grow"> <div class="column justify-center align-center" style="width: 128px; height:128px;"> - <p><i><img src="${thumbnailPath}" alt="No thumbnail." style="${thumbnailSize}"></i></p> + <p><i><img src="${thumbnailPath}" alt="No thumbnail." style="${thumbnailSize}" loading="lazy"></i></p> </div> </div> <?php endif; ?> diff --git a/public/static/style.css b/public/static/style.css index 51377a4..7db9a45 100644 --- a/public/static/style.css +++ b/public/static/style.css @@ -140,6 +140,10 @@ table.left td { text-align: left; } +ul { + list-style: none; +} + /** FORM */ button[type=submit].fancy { background: linear-gradient(0deg, var(--box-tab-background), var(--background)); @@ -293,6 +297,14 @@ button[type=submit].fancy:hover { height: 128px; } +.brick.red img { + border: 2px solid maroon; +} + +.brick.blue img { + border: 2px solid blue; +} + .brick img { min-width: 100%; height: auto; |