From 931e26107f8eea804e77275c97fcfda97c6210cb Mon Sep 17 00:00:00 2001 From: smith Date: Wed, 1 May 2024 14:43:03 -0400 Subject: [PATCH] Resolve CSS Regression (#5976) * Resolve CSS Regression * New _messages.scss for inbox, outbox * New inbox.html, outbox.html * Drop Delete Selected from inbox, outbox * Drop checkboxes from Outbox * Repair scss * Actually make the 'read' css class work * Display blank instead of "None" if there is no group or user * Message delete correction --- kitsune/messages/jinja2/messages/inbox.html | 69 ++++++----- kitsune/messages/jinja2/messages/outbox.html | 108 +++++++----------- .../static/sumo/scss/components/_inbox.scss | 73 ++---------- .../static/sumo/scss/components/_index.scss | 1 + .../sumo/scss/components/_messages.scss | 70 ++++++++++++ 5 files changed, 160 insertions(+), 161 deletions(-) create mode 100644 kitsune/sumo/static/sumo/scss/components/_messages.scss diff --git a/kitsune/messages/jinja2/messages/inbox.html b/kitsune/messages/jinja2/messages/inbox.html index 8d279d891b1..7c1b9fa1577 100644 --- a/kitsune/messages/jinja2/messages/inbox.html +++ b/kitsune/messages/jinja2/messages/inbox.html @@ -1,53 +1,60 @@ {% extends "messages/base.html" %} {% from "messages/includes/macros.html" import avatar_link, name_link %} {% set title = _('Inbox') %} -{% set crumbs = [(None, title)] %} +{% set crumbs = [(url('messages.inbox'), _('Messages')), + (None, title)] %} {% set active_tab = 'inbox' %} {% block content %} -
+

{{ title }}

{{ _('New Message') }}
- - {% if msgs %} -
-
- - -
- -
    - {% for message in msgs.object_list %} -
  1. -
    - - + {% if msgs %} + +
    + +
    +
      + + + {% for message in msgs.object_list %} + - {% endfor %} -
    + +
    2. + {% endfor %} + +
{% csrf_token %}
{{ msgs|paginator }} diff --git a/kitsune/messages/jinja2/messages/outbox.html b/kitsune/messages/jinja2/messages/outbox.html index 9bd82846839..be48ed931ff 100644 --- a/kitsune/messages/jinja2/messages/outbox.html +++ b/kitsune/messages/jinja2/messages/outbox.html @@ -1,5 +1,5 @@ {% extends "messages/base.html" %} -{% from "messages/includes/macros.html" import name_link %} +{% from "messages/includes/macros.html" import avatar_link, name_link %} {% set title = _('Sent Messages') %} {% set crumbs = [(url('messages.inbox'), _('Messages')), (None, title)] %} @@ -14,81 +14,51 @@

{{ title }}

{% if msgs %}
-
- -
-
    -
  1. -
    -
    -
    - - {{ _('Sent') }} - - - {{ _('To') }} - - {% if in_staff_group(request.user) %} - - {{ _('To Groups') }} - - {% endif %} - - {{ _('Message') }} - - - -
    -
    2. +
      + + {% for message in msgs.object_list %} -
    1. -
      - - -
      -
      - -

      {{ datetimeformat(message.created) }}

      -       - - - {% for user in message.to.all()[:1] -%} +
      2. + + {% endfor %} -
    + +
{% csrf_token %}
{{ msgs|paginator }} diff --git a/kitsune/sumo/static/sumo/scss/components/_inbox.scss b/kitsune/sumo/static/sumo/scss/components/_inbox.scss index 31687309560..01299f556ef 100644 --- a/kitsune/sumo/static/sumo/scss/components/_inbox.scss +++ b/kitsune/sumo/static/sumo/scss/components/_inbox.scss @@ -1,10 +1,12 @@ @use '../config' as c; @use 'protocol/css/includes/lib' as p; + .message-list { border-top: 1px solid var(--color-border); &--item { + display: grid; grid-gap: p.$spacing-xs 10px; grid-template-columns: 36px 1fr 30px; @@ -22,18 +24,6 @@ .avatar-details { grid-area: avatar; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - - span { - flex: 1; - text-align: left; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } } .read { @@ -76,6 +66,7 @@ } .avatar-details { + width: 190px; flex: 0 0 auto; } } @@ -90,34 +81,24 @@ .avatar-details { display: flex; align-items: center; - justify-content: space-between; - gap: 12px; - - span { - flex: 2; - text-align: left; - } - - .message-view { - flex: 2; - } .avatar { display: block; @include p.bidi(((margin, 0 12px 0 0, 0 0 0 12px),)); flex: 0 0 auto; width: 44px; - max-width: 44px; img { width: 100%; - max-width: 40px; height: auto; } } - .user, .group { + .user { + flex: 1 1 auto; + a { + font-weight: bold; color: var(--color-heading); text-decoration: none; @@ -127,11 +108,11 @@ } } - p { - font-weight: bold; - color: var(--color-heading); - text-decoration: none; - padding-right: 5px; + time { + display: block; + @include c.text-body-xs; + font-weight: normal; + color: var(--color-text); } } } @@ -141,33 +122,3 @@ @include c.ulol; } } - -@media (max-width: 767px) { - .group, .user { - display: none; - } -} - -time { - display: block; - @include c.text-body-xs; - font-weight: normal; - color: var(--color-text); -} - -.to, -.to-group, -.to-user, -.from-user { - p { - margin: 0; - padding: 0; - font-weight: bold; - color: var(--color-heading); - text-decoration: none; - } -} - -.read-message { - margin-top: 20px; -} diff --git a/kitsune/sumo/static/sumo/scss/components/_index.scss b/kitsune/sumo/static/sumo/scss/components/_index.scss index eca9ef858fd..d3a1f14bf45 100644 --- a/kitsune/sumo/static/sumo/scss/components/_index.scss +++ b/kitsune/sumo/static/sumo/scss/components/_index.scss @@ -8,6 +8,7 @@ @forward 'card'; @forward 'card-grid'; @forward 'inbox'; +@forward 'messages'; @forward 'kbox--todo-remove'; @forward 'modal'; @forward 'notifications'; diff --git a/kitsune/sumo/static/sumo/scss/components/_messages.scss b/kitsune/sumo/static/sumo/scss/components/_messages.scss new file mode 100644 index 00000000000..27be8f09194 --- /dev/null +++ b/kitsune/sumo/static/sumo/scss/components/_messages.scss @@ -0,0 +1,70 @@ +@use '../config' as c; +@use 'protocol/css/includes/lib' as p; + +.inbox-table, .outbox-table { + display: flex; + flex-direction: column; + width: 100%; +} + +.email-row { + display: flex; + flex-wrap: nowrap; // Prevent wrapping to maintain alignment + justify-content: space-between; // Distributes space between cells + width: 100%; // Ensure the row spans full width + + .email-cell { + padding: 8px; + background-color: #fff; + border: 1px solid #ddd; + min-width: 100px; // Minimum width for cell content + // Specify flex-basis for each cell type + &:first-child { flex: 0 1 40px; } // Checkbox cell + &:nth-child(2) { flex: 0 0 45px; } // Avatar cell + &:nth-child(3) { flex: 1 0 20%; } // From cell + &:nth-child(4) { flex: 1 0 20%; } // Received On cell + &:nth-child(5) { flex: 1 0 40%; } // Excerpt cell + &:nth-child(6) { flex: 0 0 10%; } // Delete cell + } + + &.header { + .email-cell { + font-weight: bold; + background-color: #eef; + } + } + + &.read { + background-color: #f9f9f9; // Set white background for the whole row if read + + .email-cell { + background-color: #f9f9f9; // Ensure each cell in a read message also has a white background + } + } +} + +.outbox-table .email-row { + .email-cell { + // Specify flex-basis for each cell type + &:nth-child(1) { flex: 1 0 20%; } // First cell + &:nth-child(2) { flex: 1 0 20%; } // Second cell + &:nth-child(3) { flex: 1 0 20%; } // Third cell + &:nth-child(4) { flex: 3 0 30%; } // Larger central content area + &:last-child { flex: 0 0 10%; } // Actions or delete cell + } +} + +// Responsive adjustments +@media (max-width: 600px) { + .outbox-table, .inbox-table { + .email-cell { + flex: 1 0 100%; // Make each cell expand to full width on small screens + display: block; // Ensures that cells do not try to align in a row when space is constrained + + &:nth-child(1), // First cell, commonly date or checkbox + &:nth-child(3) { // Third cell + display: none; // Hide less important columns on small screens + } + } + } +}