Skip to content

Commit

Permalink
Resolve CSS Regression (#5976)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@smithellis
smithellis authored May 1, 2024
1 parent 882d772 commit 931e261
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 161 deletions.
69 changes: 38 additions & 31 deletions kitsune/messages/jinja2/messages/inbox.html
View file
Original file line number Diff line number Diff line change
@@ -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 %}
<div class="sumo-page-section">
<div class="sumo-page-section">
<article id="inbox" class="main">
<h1 class="sumo-page-heading">{{ title }}</h1>
<div class="actions sumo-button-wrap">
<a class="sumo-button primary-button" href="{{ url('messages.new') }}">{{ _('New Message') }}</a>
</div>

{% if msgs %}
<form action="{{ url('messages.bulk_action') }}" method="POST">
<div class="sumo-button-wrap">
<input class="sumo-button" type="submit" name="mark_read" value="{{ _('Mark Selected as Read') }}">
<input class="sumo-button" type="submit" name="delete" value="{{ _('Delete Selected') }}">
</div>

<ol class="message-list">
{% for message in msgs.object_list %}
<li
class="message-list--item
{% if message.unread %}unread{% endif %}
{% if message.replied %}replied{% endif %}"
>
<div class="field checkbox no-label">
<input type="checkbox" name="id" value="{{ message.id }}" id="id_checkbox_{{ message.id }}">
<label for="id_checkbox_{{ message.id }}"></label>
{% if msgs %}
<form action="{{ url('messages.bulk_action') }}" method="POST">
<div class="sumo-button-wrap">
<input class="sumo-button" type="submit" name="mark_read" value="{{ _('Mark Selected as Read') }}">
</div>
<ol class="inbox-table">
<li class="email-row header">
<div class="email-cell checkbox">
<input type="checkbox" aria-label="Select all">
</div>
<div class="email-cell avatar"></div>
<div class="email-cell from">{{ _('From') }}</div>
<div class="email-cell date">{{ _('Received On') }}</div>
<div class="email-cell excerpt">{{ _('Excerpt') }}</div>
<div class="email-cell delete">{{ _('Delete?') }}</div>
</li>
<!-- Repeat the following div for each email message -->
{% for message in msgs.object_list %}
<li class="email-row{% if message.read %} read{% endif %}">
<div class="email-cell check">
<input class="field checkbox no-label" type="checkbox" aria-label="Select this message" name="id" value="{{ message.id }}" id="id_checkbox_{{ message.id }}">
</div>
<div class="avatar-details">
<span class="avatar">
<div class="email-cell avatar">
{{ avatar_link(message.sender, default_avatar) }}
</span>
<span class="from user">
</div>
<div class="email-cell from">
{{ name_link(message.sender) }}
</div>
<div class="email-cell date">
{{ datetimeformat(message.created) }}
</span>
<span class="message-view">
</div>
<div class="email-cell excerpt">
<a class="read" href="{{ url('messages.read', message.id) }}" title="{{ _('Read message') }}">
{{ message.content_parsed|striptags|truncate(length=160) }}
</a>
</span>
<a class="delete" href="{{ url('messages.delete', message.id) }}" title="{{ _('Delete message') }}">&#x2716;</a>
</div>
</li>
{% endfor %}
</ol>
<div class="email-cell delete">
<a class="delete" href="{{ url('messages.delete', message.id) }}" title="{{ _('Delete message') }}">&#x2716;</a>
</div>
</li>
{% endfor %}
<!-- Additional rows go here -->
</ol>
{% csrf_token %}
</form>
{{ msgs|paginator }}
Expand Down
108 changes: 39 additions & 69 deletions kitsune/messages/jinja2/messages/outbox.html
View file
Original file line number Diff line number Diff line change
@@ -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)] %}
Expand All @@ -14,81 +14,51 @@ <h1 class="sumo-page-heading">{{ title }}</h1>
</div>
{% if msgs %}
<form action="{{ url('messages.outbox_bulk_action') }}" method="POST">
<div class="sumo-button-wrap">
<button type="submit" name="delete" class="sumo-button">{{ _('Delete Selected') }}</button>
</div>
<ol class="message-list">
<li class="message-list--item">
<div class="field checkbox no-label">
</div>
<div class="avatar-details">
<span class="to user">
<b>{{ _('Sent') }}</b>
</span>
<span class="to user">
<b>{{ _('To') }}</b>
</span>
{% if in_staff_group(request.user) %}
<span class="to group">
<b>{{ _('To Groups') }}</b>
</span>
{% endif %}
<span class="message-view">
<b>{{ _('Message') }}</b>
</span>
<span class="delete-button">
</span>
</div>
</li>
<ol class="outbox-table">
<li class="email-row header">
<div class="email-cell sent">{{ _('Sent On') }}</div>
<div class="email-cell to">{{ _('To Users') }}</div>
{% if in_staff_group(request.user) %}
<div class="email-cell to-groups">{{ _('To Groups') }}</div>
{% endif %}
<div class="email-cell excerpt">{{ _('Excerpt') }}</div>
<div class="email-cell delete">{{ _('Delete?') }}</div>
</li>
<!-- Repeat the following div for each email message -->
{% for message in msgs.object_list %}
<li class="message-list--item">
<div class="field checkbox no-label">
<input type="checkbox" name="id" value="{{ message.id }}" id="id_checkbox_{{ message.id }}">
<label for="id_checkbox_{{ message.id }}"></label>
</div>
<div class="avatar-details">
<span class="time">
<p>{{ datetimeformat(message.created) }}</p>
</span>
<span class="to user">

{% for user in message.to.all()[:1] -%}
<li class="email-row">
<div class="email-cell sent">{{ datetimeformat(message.created) }}</div>
<div class="email-cell to">
{% for user in message.to.all()[:1] -%}
<a rel="nofollow" href="{{ profile_url(user) }}">
{%- if name -%}
{{ name }}
{%- else -%}
{{ user.profile.display_name }}
{%- endif -%}
</a>
{%- if message.recipients_count > 1 -%}, ...{% endif %}
{%- endfor %}
</div>
{% if in_staff_group(request.user) %}
<div class="email-cell to-groups">
{%- for group in message.to_groups[:1] -%}
{%- for profile in group.profile.all() -%}
{% set group_slug = profile.slug %}
<a href="{{ url('groups.profile', group_slug) }}">{{ group }}</a>
{%- endfor -%}
{% if message.to_groups_count>1 %}, ...{% endif %}
{% endfor %}
</div>
{% endif %}
<div class="email-cell excerpt">
<a class="read message text-body-sm" href="{{ url('messages.read_outbox', message.id) }}">
{{ message.content_parsed|striptags|truncate(length=160) }}
</a>
{% else %}
{{ _('None') }}
{%- endfor %}
</span>
{% if in_staff_group(request.user) %}
<span class="to group">
{%- for group in message.to_groups[:1] -%}
{%- for profile in group.profile.all() -%}
<a href="{{ url('groups.profile', profile.slug) }}">{{ group }}</a>
{%- endfor -%}
{% if message.to_groups_count > 1 %}, ...{% endif %}
{% else %}
{{ _('None') }}
{% endfor %}
</span>
{% endif %}
<span class="message-view">
<a class="read message text-body-sm" href="{{ url('messages.read_outbox', message.id) }}">
{{ message.content_parsed|striptags|truncate(length=160) }}
</a>
</span>
<span class="delete-button">
<a class="delete" href="{{ url('messages.delete_outbox', message.id) }}" title="{{ _('Delete message') }}">&#x2716;</a>
</span>
</div>
</li>
<div class="email-cell delete">
<a class="delete" href="{{ url('messages.delete_outbox', message.id) }}" title="{{ _('Delete message') }}">&#x2716;</a>
</div>
</li>
{% endfor %}
</ol>
<!-- Additional rows go here -->
</ol>
{% csrf_token %}
</form>
{{ msgs|paginator }}
Expand Down
73 changes: 12 additions & 61 deletions kitsune/sumo/static/sumo/scss/components/_inbox.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -76,6 +66,7 @@
}

.avatar-details {
width: 190px;
flex: 0 0 auto;
}
}
Expand All @@ -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;

Expand All @@ -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);
}
}
}
Expand All @@ -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;
}
1 change: 1 addition & 0 deletions kitsune/sumo/static/sumo/scss/components/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
@forward 'card';
@forward 'card-grid';
@forward 'inbox';
@forward 'messages';
@forward 'kbox--todo-remove';
@forward 'modal';
@forward 'notifications';
Expand Down
Loading

0 comments on commit 931e261

Please sign in to comment.