refine article styling

1 files changed, 41 insertions, 0 deletions

diff --git a/clams-server/src/main/resources/templates/articles-search.html b/clams-server/src/main/resources/templates/articles-search.html
new file mode 100644
index 0000000..dd435e5
--- /dev/null
+++ b/clams-server/src/main/resources/templates/articles-search.html
@@ -0,0 +1,41 @@
+{% extends "templates/layout.html" %}
+
+{% block content %}
+<main class="main-container">
+    <a href="/articles" class="back-link-top">&larr; back</a>
+    <header>
+        <h1>My articles</h1>
+        <p class="intro-text">For search: "<strong>{{ search_term }}</strong>" -- Found {{ results_count }} matching articles</p>
+
+        <form action="/articles" method="GET" class="search-form">
+            <input type="text" name="search" value="{{ search_term }}" placeholder="Search articles..." aria-label="Search articles">
+            <button type="submit">Search</button>
+        </form>
+    </header>
+
+    <div class="search-results-container">
+        {% if results is empty %}
+            <div class="no-results">
+                {% if search_term is empty %}
+                    <p>Please enter a search term to search the articles. Or <a href="/articles">go back to all articles</a>.</p>
+                {% else %}
+                    <p>Found no articles matching <strong>"{{ search_term }}"</strong>. <br>
+                        <a href="/articles">Go back to all articles</a>.</p>
+                {% endif %}
+            </div>
+        {% else %}
+            <ul class="search-results-list">
+                {% for article in results %}
+                    <li class="search-result-item">
+                        <span class="search-result-date">{{ article.formattedDate }}</span>
+                        <a href="/articles/{{ article.slug }}">{{ article.title }}</a>
+                        {% if article.summary is not empty %}
+                            <span class="search-result-summary">-- {{ article.summary }}</span>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+</main>
+{% endblock %}