discourse/app/assets/stylesheets/admin/emails.scss
Kris f0069a4fab
REFACTOR: modernize email logs, fix filtering (#34015)
Started off attempting to fix filters, but was frustrated working with
the old patterns and template duplication so I've updated everything and
tried to consolidate into a `email-logs-list.gjs` component.

The primary issue was that the filters only worked once, and if you
needed to change them or remove them... you couldn't and had to refresh
the page.


Before: 


https://github.com/user-attachments/assets/9cfa0328-41d4-4178-ab87-ba2ff495d932



After:


https://github.com/user-attachments/assets/febcff8f-3dfa-4b86-9be1-f333e6502648
2025-08-27 13:43:12 -04:00

203 lines
2.8 KiB
SCSS
Vendored

// Styles for admin/emails
// Emails
.admin-email-logs {
.admin-container {
margin-top: 0;
}
}
.email-list {
th {
white-space: nowrap;
min-width: 6rem;
}
.email-logs-user a {
display: flex;
gap: var(--space-2);
align-items: center;
min-width: 200px;
img {
align-self: baseline;
}
}
.filters input {
width: 100%;
}
.time {
width: 50px;
}
.reply-key {
display: block;
font-size: var(--font-down-1);
color: var(--primary-medium);
}
.username div {
max-width: 180px;
}
.addresses p {
margin: 2px 0;
max-width: 200px;
}
a {
// prevent long links from breaking the layout
display: inline-block;
max-width: 300px;
overflow-wrap: anywhere;
+ a {
margin-top: var(--space-2);
}
&[href^="mailto:"] {
// don't aggressively wrap email addresses
min-width: 250px;
}
}
code {
white-space: pre-line;
}
.email-details {
text-align: right;
a {
color: var(--primary-high);
}
}
}
.incoming-emails {
.control-group {
margin: 8px 0;
}
.controls {
margin-left: 110px;
}
p {
margin: 5px 10px;
}
.error-description {
color: var(--primary-medium);
font-size: var(--font-down-1);
}
hr {
margin: 0;
}
label {
font-weight: bold;
float: left;
width: 100px;
text-align: right;
margin: 0 10px;
}
ul {
list-style: none;
margin: 0 10px;
}
textarea {
width: 95%;
height: 150px;
font-family: monospace;
box-shadow: none;
}
}
.admin-list-item {
width: 100%;
border-top: 1px solid var(--content-border-color);
padding: 0.25em 0;
}
.email-preview-digest {
.controls {
margin: 1em 0.5em;
}
.preview-output iframe {
width: 100%;
height: 600px;
border-width: 1px;
}
}
.email-advanced-test {
.admin-controls {
display: block;
}
.email-body {
width: 95%;
height: 150px;
font-family: monospace;
}
}
.admin-email {
.email-list {
.sent-email-reply-key {
.reply-key {
word-break: break-word;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 125px;
}
}
.sent-email-post-link-with-smtp-response {
width: 100%;
display: inline-block;
word-break: break-word;
code {
font-size: var(--font-down-2);
}
}
}
}
// specific email admin modal styling
.admin-incoming-email-modal {
.incoming-emails {
label {
float: none;
margin: 0;
width: unset;
}
.control-group {
textarea {
height: 200px;
}
&:last-of-type textarea {
height: 40px;
}
}
.controls {
margin: 0;
}
p {
margin: 5px 0;
}
}
}