put attachments inside content warnings

2 files changed, 36 insertions, 34 deletions

diff --git a/static/note.css b/static/note.css
index 0400b21..c9b02d0 100644
--- a/static/note.css
+++ b/static/note.css
@@ -55,6 +55,17 @@ article.note {
     background: var(--clr-note-selected-background);
   }
 
+  summary {
+    border: var(--border);
+    border-radius: var(--border-radius);
+    padding: var(--spacing-single) var(--spacing-double);
+    background: var(--clr-warning-background);
+    margin: var(--spacing-single) 0;
+  }
+  details[open] > summary {
+    margin-bottom: var(--spacing-half);
+  }
+
   .content {
     font-size: var(--font-normal-size);
     padding: var(--spacing-half) 0;
@@ -64,16 +75,6 @@ article.note {
     .selected & {
       font-size: var(--font-big-size);
     }
-
-    summary {
-      border: var(--border);
-      border-radius: var(--border-radius);
-      padding: var(--spacing-single) var(--spacing-double);
-      background: var(--clr-warning-background);
-    }
-    details[open] > summary {
-      margin-bottom: var(--spacing-single);
-    }
   }
 
   .infoLine {
diff --git a/templates/note.php b/templates/note.php
index f0f289c..f9eef45 100644
--- a/templates/note.php
+++ b/templates/note.php
@@ -66,33 +66,34 @@ if ($user != null) {
             </div>
         <?php endif; ?>
 
-        <div class="content">
-            <?php if (isset($note->summary)): ?>
-                <details>
-                    <summary><?= htmlspecialchars($note->summary) ?></summary>
-                <?php endif; ?>
+        <?php if (isset($note->summary)): ?>
+            <details>
+                <summary><?= htmlspecialchars($note->summary) ?></summary>
+            <?php endif; ?>
+            <div class="content">
                 <?= $note->getFormattedContent('text/html') ?? htmlspecialchars($note->plainContent) ?>
-                <?php if (isset($note->summary)): ?>
-                </details>
+            </div>
+
+            <?php if (count($note->attachments) > 0): ?>
+                <div class="attachments">
+                    <?php foreach ($note->attachments as $attachment): ?>
+                        <div>
+                            <?php if (str_starts_with($attachment->type, 'image/')): ?>
+                                <img src="<?= $attachment->href ?>" alt="<?= $attachment->description ?? '' ?>"
+                                    title="<?= $attachment->description ?? '' ?>">
+                            <?php else: ?>
+                                <a class="file" href="<?= $attachment->href ?>" target="_blank">
+                                    <span class="material-symbols attach-file"></span>
+                                    <span><?= $attachment->description ?? basename($attachment->href) ?></span>
+                                </a>
+                            <?php endif; ?>
+                        </div>
+                    <?php endforeach; ?>
+                </div>
             <?php endif; ?>
-        </div>
 
-        <?php if (count($note->attachments) > 0): ?>
-            <div class="attachments">
-                <?php foreach ($note->attachments as $attachment): ?>
-                    <div>
-                        <?php if (str_starts_with($attachment->type, 'image/')): ?>
-                            <img src="<?= $attachment->href ?>" alt="<?= $attachment->description ?? '' ?>"
-                                title="<?= $attachment->description ?? '' ?>">
-                        <?php else: ?>
-                            <a class="file" href="<?= $attachment->href ?>" target="_blank">
-                                <span class="material-symbols attach-file"></span>
-                                <span><?= $attachment->description ?? basename($attachment->href) ?></span>
-                            </a>
-                        <?php endif; ?>
-                    </div>
-                <?php endforeach; ?>
-            </div>
+            <?php if (isset($note->summary)): ?>
+            </details>
         <?php endif; ?>
 
         <div class="buttons">