make attachments nicer

3 files changed, 29 insertions, 18 deletions

diff --git a/static/note.css b/static/note.css
index bc9b2d8..fd281b0 100644
--- a/static/note.css
+++ b/static/note.css
@@ -164,17 +164,20 @@ article.note {
     box-sizing: border-box;
     gap: var(--spacing-single);
 
-    &:has(:nth-child(2)) {
+    &:has(> :nth-child(2)) {
       grid-template-columns: auto auto;
+      a.file {
+        width: 100%;
+      }
     }
-    &:has(:nth-child(3)) {
+    &:has(> :nth-child(3)) {
       grid-template-columns: auto auto auto;
     }
-    &:has(:nth-child(4)) {
+    &:has(> :nth-child(4)) {
       grid-template-columns: auto auto;
       grid-template-rows: auto auto;
     }
-    &:has(:nth-child(5)) {
+    &:has(> :nth-child(5)) {
       grid-template-columns: unset;
       grid-template-rows: auto;
       grid-auto-flow: column;
@@ -203,8 +206,9 @@ article.note {
       color: var(--clr-foreground);
       text-decoration: none;
       padding: var(--spacing-single);
+      padding-right: var(--spacing-double);
       display: grid;
-      width: 100%;
+      width: min(max-content, 100%);
       box-sizing: border-box;
       grid-auto-flow: column;
       align-items: center;
diff --git a/templates/note.php b/templates/note.php
index b5b07df..736d5f9 100644
--- a/templates/note.php
+++ b/templates/note.php
@@ -78,19 +78,9 @@ if ($user != null) {
 
             <?php if (count($note->attachments) > 0): ?>
                 <div class="attachments">
-                    <?php foreach ($note->attachments as $attachment): ?>
-                        <div>
-                            <?php if ($attachment->isImage()): ?>
-                                <img src="<?= $attachment->href ?>" alt="<?= htmlspecialchars($attachment->description ?? '') ?>"
-                                    title="<?= htmlspecialchars($attachment->description ?? '') ?>">
-                            <?php else: ?>
-                                <a class="file" href="<?= $attachment->href ?>" target="_blank" download>
-                                    <span class="material-symbols attach-file"></span>
-                                    <span><?= htmlspecialchars($attachment->description ?? basename($attachment->href)) ?></span>
-                                </a>
-                            <?php endif; ?>
-                        </div>
-                    <?php endforeach; ?>
+                    <?php foreach ($note->attachments as $attachment) {
+                        call_template('note_attachment', ['attachment' => $attachment]);
+                    } ?>
                 </div>
             <?php endif; ?>
 
diff --git a/templates/note_attachment.php b/templates/note_attachment.php
new file mode 100644
index 0000000..c139a00
--- /dev/null
+++ b/templates/note_attachment.php
@@ -0,0 +1,17 @@
+<?php
+$filename = basename($attachment->href);
+if (!$attachment->isImage() && $attachment->description) {
+    $filename = $attachment->description;
+}
+?>
+<div>
+    <?php if ($attachment->isImage()): ?>
+        <img src="<?= $attachment->href ?>" alt="<?= htmlspecialchars($attachment->description ?? '') ?>"
+            title="<?= htmlspecialchars($attachment->description ?? '') ?>">
+    <?php else: ?>
+        <a class="file" href="<?= $attachment->href ?>" target="_blank" download="<?= htmlspecialchars($filename) ?>">
+            <span class="material-symbols attach-file"></span>
+            <span><?= htmlspecialchars($filename) ?></span>
+        </a>
+    <?php endif; ?>
+</div>
\ No newline at end of file