Improve post list formatting etc.

Issue #148
samwilson · Feb 12, 2023 · 703c875 · 703c875
1 parent de5c4a2
commit 703c875
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 45 deletions.
diff --git a/assets/css/post.less b/assets/css/post.less
@@ -13,23 +13,17 @@ h1 { text-align: center; }
     header {
       display: flex;
       background-color: #f4f6fb;
-      padding: 0 0 0.2em 0;
+      padding: 0.2em 0;
       align-items: center;
 
       & > * { padding: 0 0.8em; }
 
-      .titles {
-        flex: 2;
+      a { color: inherit; }
 
-        p,
-        h2 {
-          margin: 0;
-          padding: 0;
-        }
+      .author {
+        font-weight: bolder;
       }
 
-      .in-reply-to { font-size: smaller; }
-
       a.date {
         flex: 1;
         font-size: smaller;
@@ -48,8 +42,26 @@ h1 { text-align: center; }
       }
     }
 
+    .titles {
+      text-align: center;
+
+      .in-reply-to { font-size: smaller; }
+      h2 { font-size: 1.3em; }
+
+      p,
+      h2 {
+        margin: 0;
+        padding: 0;
+      }
+
+      a {
+        color: inherit;
+      }
+    }
+
     article {
       padding: 10px;
+      p:first-child { margin-top: 0; }
       p.file { text-align: center; }
       img { max-width: 100%; }
     }

diff --git a/assets/js/timezone-converter.js b/assets/js/timezone-converter.js
@@ -9,10 +9,9 @@
             year: 'numeric',
             month: 'long',
             day: 'numeric',
-            weekday: 'long',
             hour: 'numeric',
             minute: 'numeric'
         };
-        timeEl.innerText = date.toLocaleString([], options) + '.';
+        timeEl.innerText = date.toLocaleString([], options);
     });
 }());
diff --git a/public/build/app.72b68240.css b/public/build/app.72b68240.css
diff --git a/public/build/app.89a670f8.js b/public/build/app.89a670f8.js
diff --git a/public/build/app.93668dc0.js b/public/build/app.93668dc0.js
diff --git a/public/build/app.89a670f8.js.LICENSE.txt → public/build/app.93668dc0.js.LICENSE.txt b/public/build/app.89a670f8.js.LICENSE.txt → public/build/app.93668dc0.js.LICENSE.txt
diff --git a/public/build/app.a87a9db9.css b/public/build/app.a87a9db9.css
diff --git a/public/build/entrypoints.json b/public/build/entrypoints.json
@@ -4,10 +4,10 @@
       "js": [
         "/build/runtime.188fa053.js",
         "/build/98.7dea510e.js",
-        "/build/app.89a670f8.js"
+        "/build/app.93668dc0.js"
       ],
       "css": [
-        "/build/app.72b68240.css"
+        "/build/app.a87a9db9.css"
       ]
     },
     "map": {

diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -1,6 +1,6 @@
 {
-  "build/app.css": "/build/app.72b68240.css",
-  "build/app.js": "/build/app.89a670f8.js",
+  "build/app.css": "/build/app.a87a9db9.css",
+  "build/app.js": "/build/app.93668dc0.js",
   "build/map.css": "/build/map.fa728e1a.css",
   "build/map.js": "/build/map.3c3bd4fc.js",
   "build/frontend.css": "/build/frontend.709f92e8.css",

diff --git a/templates/post/_post_list.html.twig b/templates/post/_post_list.html.twig
@@ -2,36 +2,11 @@
     {% for post in posts %}
         <li class="post h-entry">
             <header>
-                <div class="titles">
-                    {% if post.inReplyTo %}
-                        <p class="in-reply-to">
-                            In reply to:
-                            <a href="{% if post.inReplyTo.url %}
-                                {{ post.inReplyTo.url }}
-                            {% else %}
-                                {{ path('post_view', {id:post.inReplyTo.id}) }}
-                            {% endif %}" class="u-in-reply-to">
-                                {%- if post.inReplyTo.title -%}
-                                    {{ post.inReplyTo.title }}
-                                {%- else -%}
-                                    P{{ post.inReplyTo.id }}
-                                {%- endif -%}
-                            </a>
-                        </p>
-                    {% endif %}
-                    <h2 class="p-name">
-                        <a href="{% if post.url %}{{ post.url }}{% else %}{{ path('post_view', {id: post.id}) }}{% endif %}"
-                            class="u-url">
-                            {% if post.title %}{{ post.title }}{% else %}P{{ post.id }}{% endif %}
-                        </a>
-                    </h2>
-                </div>
                 <span class="author u-author h-card">
-                    By
                     {% if post.author.homepage %}<a href="{{ post.author.homepage }}" rel="author" class="p-url">{% endif %}{#
                         #}<span class="p-name">{{ post.author.name }}</span>{#
                     #}{% if post.author.homepage %}</a>{% endif %}{#
-                    #}.
+                    #}
                 </span>
                 <a href="{{ path('month', {year: post.date.format('Y'), month:post.date.format('m')}) }}" class="date">
                     <time datetime="{{ post.date.format('Y-m-d\\TH:i:s\\Z') }}" class="dt-published">
@@ -40,6 +15,36 @@
                 </a>
             </header>
             <article class="e-content">
+                {% if post.title or post.inReplyTo %}
+                    <div class="titles">
+                        {% if post.inReplyTo %}
+                            {% set replyToLink %}
+                                <a href="{% if post.inReplyTo.url %}
+                                    {{ post.inReplyTo.url }}
+                                {% else %}
+                                    {{ path('post_view', {id:post.inReplyTo.id}) }}
+                                {% endif %}" class="u-in-reply-to"><strong>
+                                    {%- if post.inReplyTo.title -%}
+                                        {{ post.inReplyTo.title }}
+                                    {%- else -%}
+                                        this post
+                                    {%- endif -%}
+                                </strong></a>
+                            {% endset %}
+                            <p class="in-reply-to">
+                                {{ 'posts.in_reply_to'|trans( { '%link%': replyToLink, '%author%': post.inReplyTo.author.name } )|raw }}
+                            </p>
+                        {% endif %}
+                        {% if post.title %}
+                            <h2 class="p-name">
+                                <a href="{% if post.url %}{{ post.url }}{% else %}{{ path('post_view', {id: post.id}) }}{% endif %}"
+                                    class="u-url">
+                                    {{ post.title }}
+                                </a>
+                            </h2>
+                        {% endif %}
+                    </div>
+                {% endif %}
                 {% if post.file %}
                     <p class="file">
                         <img src="{{ path('file', {id: post.id, size: 'D', ext: 'jpg'}) }}"

diff --git a/translations/messages.en.yaml b/translations/messages.en.yaml
@@ -13,6 +13,7 @@ security:
 posts:
     tags_label: 'Tags:'
     replies: 'Replies'
+    in_reply_to: 'In reply to %link% by %author%.'
     download_link: 'Download'
     save_tooltip: 'Save the full version of this file'
     delete: