diff mbox series

[v4,1/9] patch-detail: left align message headers

Message ID 20210820045030.3364156-2-raxel@google.com
State Accepted
Headers show
Series patch-detail: add unaddressed/addressed status to patch comments | expand

Commit Message

Raxel Gutierrez Aug. 20, 2021, 4:50 a.m. UTC
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>
---
 htdocs/css/style.css                          | 12 ++++++----
 patchwork/templates/patchwork/submission.html | 23 ++++++++++---------
 2 files changed, 19 insertions(+), 16 deletions(-)

Comments

Stephen Finucane Aug. 20, 2021, 10:10 p.m. UTC | #1
On Fri, 2021-08-20 at 04:50 +0000, Raxel Gutierrez wrote:
> 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>

fwict, this simply moves the date and shortlink URL to be left aligned
immediately after the author name. I'm not entirely sure about this as submitter
names are not all of the same length. This will mean that these attributes will
shift vertically about the screen as you scroll, which would personally annoy me
just a little :) With that said, what you've said _sounds_ reasonable and a
little more evidence-based than my gut feel, so...

Reviewed-by: Stephen Finucane <stephen@that.guru>

...but I'd like Daniel to take a look before I apply :D

Stephen
Daniel Axtens Aug. 23, 2021, 8:49 a.m. UTC | #2
Applied.

Raxel Gutierrez <raxel@google.com> writes:

> 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>
> ---
>  htdocs/css/style.css                          | 12 ++++++----
>  patchwork/templates/patchwork/submission.html | 23 ++++++++++---------
>  2 files changed, 19 insertions(+), 16 deletions(-)
>
> diff --git a/htdocs/css/style.css b/htdocs/css/style.css
> index f30988e0..a2a2e3c3 100644
> --- 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 66efa0b5..36b15d0e 100644
> --- 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 }}
> -- 
> 2.33.0.rc2.250.ged5fa647cd-goog
>
> _______________________________________________
> Patchwork mailing list
> Patchwork@lists.ozlabs.org
> https://lists.ozlabs.org/listinfo/patchwork
diff mbox series

Patch

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index f30988e0..a2a2e3c3 100644
--- 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 66efa0b5..36b15d0e 100644
--- 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 }}