patch-detail: left align message headers

Change both of the message containers in the "Commit Message" and
"Comments" to have their content be left-aligned which improves the
proximity of items which boosts the efficiency of gathering information
and performing actions. Before [1] and after [2] images for reference.

[1] https://i.imgur.com/ji2ZINL.png
[2] https://i.imgur.com/Dtn8lm9.png

Signed-off-by: Raxel Gutierrez <raxel@google.com>
Reviewed-by: Stephen Finucane <stephen@that.guru>
Signed-off-by: Daniel Axtens <dja@axtens.net>

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index f30988e0bcaa2ee9f5997023024df3b8ab984bad..a2a2e3c362a4bf0c5131a4eb6c1aef7f65e535d7 100644 (file)
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -296,17 +296,19 @@ table.patch-meta tr th, table.patch-meta tr td {
     color: #f7977a;
 }
 
-.comment .meta {
+.submission-message .meta {
+    display: flex;
+    align-items: center;
     background: #f0f0f0;
     padding: 0.3em 0.5em;
 }
 
-.comment .content {
-    border: 0;
+.submission-message .message-date {
+    margin-left: 8px;
 }
 
-.patch .content {
-    padding: 1em;
+.submission-message .content {
+    border: 0;
 }
 
 .patch-pull-url {

diff --git a/patchwork/templates/patchwork/submission.html b/patchwork/templates/patchwork/submission.html
index 66efa0b5fce6fdc9e31e4e2e04d1026cabdf07b7..36b15d0e8f09dcf0c083bc0dd28f7776f2a1d9b1 100644 (file)
--- a/patchwork/templates/patchwork/submission.html
+++ b/patchwork/templates/patchwork/submission.html
@@ -257,14 +257,14 @@
 {% else %}
 <h2>Message</h2>
 {% endif %}
-<div class="comment">
-<div class="meta">
- <span>{{ submission.submitter|personify:project }}</span>
- <span class="pull-right">{{ submission.date }} UTC</span>
-</div>
-<pre class="content">
-{{ submission|commentsyntax }}
-</pre>
+<div class="submission-message">
+  <div class="meta">
+    <span>{{ submission.submitter|personify:project }}</span>
+    <span class="message-date">{{ submission.date }} UTC</span>
+  </div>
+  <pre class="content">
+  {{ submission|commentsyntax }}
+  </pre>
 </div>
 
 {% for item in comments %}
@@ -273,11 +273,12 @@
 {% endif %}
 
 <a name="{{ item.id }}"></a>
-<div class="comment">
+<div class="submission-message">
 <div class="meta">
  <span>{{ item.submitter|personify:project }}</span>
- <span class="pull-right">{{ item.date }} UTC | <a href="{% url 'comment-redirect' comment_id=item.id %}"
-   >#{{ forloop.counter }}</a></span>
+ <span class="message-date">{{ item.date }} UTC |
+   <a href="{% url 'comment-redirect' comment_id=item.id %}">#{{ forloop.counter }}</a>
+  </span>
 </div>
 <pre class="content">
 {{ item|commentsyntax }}