UX: Reduce the number of columns on invite page (#12891)

We used to have different columns for invite type, groups and topics,
which sometimes introduced a lot of whitespace or distorted the other
columns.
This commit is contained in:
Dan Ungureanu 2021-04-29 16:44:51 +03:00 committed by GitHub
parent 8636292a40
commit 614166ab1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 34 deletions

View File

@ -90,10 +90,6 @@
<thead>
<tr>
<th>{{i18n "user.invited.invited_via"}}</th>
{{#if currentUser.staff}}
<th>{{i18n "user.invited.groups"}}</th>
<th>{{i18n "user.invited.topic"}}</th>
{{/if}}
<th>{{i18n "user.invited.sent"}}</th>
<th>{{i18n "user.invited.expires_at"}}</th>
<th></th>
@ -105,33 +101,25 @@
<td class="invite-type">
<div class="label">{{i18n "user.invited.invited_via"}}</div>
{{#if invite.email}}
{{invite.email}}
{{d-icon "envelope"}} {{invite.email}}
{{else}}
{{i18n "user.invited.invited_via_link" key=invite.shortKey count=invite.redemption_count max=invite.max_redemptions_allowed}}
{{d-icon "link"}} {{i18n "user.invited.invited_via_link" key=invite.shortKey count=invite.redemption_count max=invite.max_redemptions_allowed}}
{{/if}}
</td>
{{#if currentUser.staff}}
<td class="invite-groups">
<div class="label">{{i18n "user.invited.groups"}}</div>
{{#each invite.groups as |g|}}
<a href="/g/{{g.name}}">{{g.name}}</a>
{{else}}
&mdash;
<p class="invite-extra"><a href="/g/{{g.name}}">{{d-icon "users"}} {{g.name}}</a></p>
{{/each}}
</td>
<td class="invite-topic">
<div class="label">{{i18n "user.invited.topic"}}</div>
{{#if invite.topic}}
<a href={{invite.topic.url}}>{{invite.topic.title}}</a>
{{else}}
&mdash;
<p class="invite-extra"><a href={{invite.topic.url}}>{{d-icon "file"}} {{invite.topic.title}}</a></p>
{{/if}}
</td>
{{/if}}
<td class="invite-updated-at">
<div class="label">{{i18n "user.invited.sent"}}</div>
{{format-date invite.updated_at}}
</td>
<td class="invite-expires-at">
<div class="label">{{i18n "user.invited.expires_at"}}</div>
{{#if inviteExpired}}
@ -142,6 +130,7 @@
{{raw-date invite.expires_at}}
{{/if}}
</td>
<td class="invite-actions">
{{d-button icon="pencil-alt" action=(action "editInvite" invite) title="user.invited.edit"}}
{{d-button icon="trash-alt" class="cancel" action=(action "destroyInvite" invite) title=(if invite.destroyed "user.invited.removed" "user.invited.remove")}}

View File

@ -789,9 +789,31 @@
}
.user-invites-page {
.user-invite-search {
clear: both;
margin: 15px 0px -15px 0px;
}
.invite-error {
grid-column: 1 / span 2;
}
table.user-invite-list {
.invite-type {
.d-icon {
color: var(--primary-medium);
}
}
.invite-extra {
font-size: $font-down-1;
margin: 0.25em 0;
a {
color: var(--primary-medium);
}
}
}
}
.notification-schedule {

View File

@ -104,11 +104,6 @@ table.user-invite-list {
}
}
.user-invite-search {
clear: both;
margin: 15px 0px -15px 0px;
}
.user-invite-none {
padding: 15px 0;
}

View File

@ -307,12 +307,16 @@
}
.user-invites-page {
.user-invite-search input {
width: 100%;
}
.admin-controls {
flex-wrap: wrap;
.pull-right {
flex: 1 1 100%;
font-size: $font-down-1;
padding: 0;
padding: 5px 0;
}
}
@ -323,7 +327,7 @@
tr {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
padding: 0.25em;
}
@ -345,15 +349,21 @@
order: 2;
align-self: center;
text-align: right;
button {
margin: 0.25em;
}
}
td.invite-groups,
td.invite-topic {
td.invite-updated-at {
grid-column-start: 1;
grid-column-end: 3;
order: 3;
}
td.invite-updated-at,
td.invite-expires-at {
grid-column-start: 3;
grid-column-end: -1;
order: 4;
}
}