diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.php | 76 | ||||
| -rw-r--r-- | public/static/style.css | 33 |
2 files changed, 69 insertions, 40 deletions
diff --git a/public/index.php b/public/index.php index cf88a1b..f5ea820 100644 --- a/public/index.php +++ b/public/index.php @@ -155,46 +155,48 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); </div> </div> - <section class="box"> - <div class="tab row"> - <div class="grow"> - <?php if (isset($file['original_name'])): ?> - <p><i><?= $file['original_name'] ?></i></p> - <?php else: ?> - <p>File <?= sprintf('%s.%s', $file['id'], $file['extension']) ?></p> - <?php endif; ?> - </div> - <div class="grow row gap-8 justify-end align-center" id="file-tab-buttons"> - <?php if (FILE_REPORT): ?> - <a href="/report.php?f=<?= $file['id'] ?>.<?= $file['extension'] ?>"> - <button>Report</button> + <section class="file-preview-wrapper"> + <section class="box"> + <div class="tab row"> + <div class="grow"> + <?php if (isset($file['original_name'])): ?> + <p><i><?= $file['original_name'] ?></i></p> + <?php else: ?> + <p>File <?= sprintf('%s.%s', $file['id'], $file['extension']) ?></p> + <?php endif; ?> + </div> + <div class="grow row gap-8 justify-end align-center" id="file-tab-buttons"> + <?php if (FILE_REPORT): ?> + <a href="/report.php?f=<?= $file['id'] ?>.<?= $file['extension'] ?>"> + <button>Report</button> + </a> + <?php endif; ?> + <a href="<?= $file['full_url'] ?>"> + <button>Full size</button> </a> + <a href="<?= $file['full_url'] ?>" download="<?= $file['name'] ?>"> + <button>Download</button> + </a> + </div> + </div> + <div class="content column file-preview"> + <?php if (str_starts_with($file['mime'], 'image/')): ?> + <img src="<?= $file['full_url'] ?>" alt="Image file."> + <?php elseif (str_starts_with($file['mime'], 'video/')): ?> + <video controls autoplay> + <source src="<?= $file['full_url'] ?>" type="<?= $file['mime'] ?>"> + </video> + <?php elseif (str_starts_with($file['mime'], 'audio/')): ?> + <audio controls autoplay> + <source src="<?= $file['full_url'] ?>" type="<?= $file['mime'] ?>"> + </audio> + <?php elseif (str_starts_with($file['mime'], 'text/')): ?> + <pre><?= file_get_contents(FILE_UPLOAD_DIRECTORY . "/{$file['id']}.{$file['extension']}") ?></pre> + <?php else: ?> + <p><i>This file cannot be displayed.</i></p> <?php endif; ?> - <a href="<?= $file['full_url'] ?>"> - <button>Full size</button> - </a> - <a href="<?= $file['full_url'] ?>" download="<?= $file['name'] ?>"> - <button>Download</button> - </a> </div> - </div> - <div class="content file-preview"> - <?php if (str_starts_with($file['mime'], 'image/')): ?> - <img src="<?= $file['full_url'] ?>" alt="Image file."> - <?php elseif (str_starts_with($file['mime'], 'video/')): ?> - <video controls autoplay> - <source src="<?= $file['full_url'] ?>" type="<?= $file['mime'] ?>"> - </video> - <?php elseif (str_starts_with($file['mime'], 'audio/')): ?> - <audio controls autoplay> - <source src="<?= $file['full_url'] ?>" type="<?= $file['mime'] ?>"> - </audio> - <?php elseif (str_starts_with($file['mime'], 'text/')): ?> - <pre><?= file_get_contents(FILE_UPLOAD_DIRECTORY . "/{$file['id']}.{$file['extension']}") ?></pre> - <?php else: ?> - <p><i>This file cannot be displayed.</i></p> - <?php endif; ?> - </div> + </section> </section> <?php else: ?> <noscript>No JavaScript Mode</noscript> diff --git a/public/static/style.css b/public/static/style.css index 3edf252..7d2f173 100644 --- a/public/static/style.css +++ b/public/static/style.css @@ -3,6 +3,7 @@ --background-2: #f7f0f0; --foreground: #800; --box-tab-background: #efc2c2; + --box-tab-foreground: #800; --box-border: #800; --box-content-background: #fff; --box-content-background-2: #e6d9d9; @@ -115,6 +116,8 @@ button[type=submit]:hover { flex-direction: row; align-items: center; gap: 8px; + + color: var(--box-tab-foreground); } .tabs>.tab {} @@ -128,6 +131,7 @@ button[type=submit]:hover { .box:has(.content)>.tab, .tabs>.tab:not(.disabled) { background: var(--box-tab-background); + color: var(--box-tab-foreground); border: 2px solid var(--box-border); border-bottom: none; padding: 8px; @@ -145,15 +149,38 @@ button[type=submit]:hover { background: var(--box-content-background-2); } +.box>.content.file-preview { + padding: 0; +} + /** FILES */ +.file-preview-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.file-preview-wrapper>.box { + max-width: 100%; +} + +.file-preview:has(img), +.file-preview:has(video) { + display: flex; + justify-content: center; + align-items: center; +} + .file-preview img, .file-preview video { - width: 100%; - max-height: 100%; + max-height: 80vh; + max-width: 100%; + border: 0.5px solid black; } .file-preview pre { - width: 100%; + max-width: 100%; overflow-x: scroll; } |