data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Fix text overflow on status headers (#383)

Browse source 
* Fix text overflow on status headers

* fix tests

* really fix tests
This commit is contained in:
Nolan Lawson 2018-06-09 15:04:47 -07:00 committed by GitHub
parent e489702dc6
commit eeff84a587
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
routes/_components/status/StatusHeader.html
View file

@ -5,27 +5,33 @@
<svg class="status-header-svg">
<use xlink:href={icon}/>
</svg>
<span class="status-header-span">
<div class="status-header-content">
{#if timelineType === 'pinned'}
Pinned toot
<span class="status-header-author">
Pinned toot
</span>
{:else}
<a href="/accounts/{accountId}"
class="status-header-a"
class="status-header-author"
title="{'@' + account.acct}"
focus-key={focusKey} >
{account.display_name || account.username}
</a>
{#if notification && notification.type === 'reblog'}
boosted your status
{:elseif notification && notification.type === 'favourite'}
favorited your status
{:elseif notification && notification.type === 'follow'}
followed you
{:elseif status && status.reblog}
boosted
{/if}
{/if}
</span>
<span class="status-header-action">
{#if notification && notification.type === 'reblog'}
boosted your status
{:elseif notification && notification.type === 'favourite'}
favorited your status
{:elseif notification && notification.type === 'follow'}
followed you
{:elseif status && status.reblog}
boosted
{/if}
</span>
</div>
</div>
<style>
.status-header {
@ -43,42 +49,57 @@
}
.status-header-svg {
min-width: 18px;
margin-left: 20px;
width: 18px;
height: 18px;
fill: var(--deemphasized-text-color);
}
@media (max-width: 767px) {
.status-header-svg {
margin-left: 10px;
}
}
.status-header.status-in-notification .status-header-svg {
fill: var(--body-text-color);
}
.status-header-span {
.status-header-content {
display: flex;
flex: 1;
min-width: 0;
width: 0;
}
.status-header-author {
margin-left: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.status-header-span,
.status-header-a,
.status-header-a:visited,
.status-header-a:hover {
.status-header-action {
margin-left: 0.5ch;
white-space: nowrap;
flex: 1;
}
.status-header-action,
.status-header-author,
.status-header-author:visited,
.status-header-author:hover {
color: var(--deemphasized-text-color);
}
.status-in-notification .status-header-span,
.status-in-notification .status-header-a,
.status-in-notification .status-header-a:visited,
.status-in-notification .status-header-a:hover {
.status-in-notification .status-header-action,
.status-in-notification .status-header-author,
.status-in-notification .status-header-author:visited,
.status-in-notification .status-header-author:hover {
color: var(--body-text-color);
}
@media (max-width: 767px) {
.status-header-svg {
margin-left: 10px;
}
}
</style>
<script>
import Avatar from '../Avatar.html'

6
tests/utils.js
View file

@ -265,15 +265,15 @@ export async function validateTimeline (t, timeline) {
}
if (status.followedBy) {
await t.expect(getNthStatusHeader(i).innerText)
.contains(status.followedBy + ' followed you', { timeout })
.match(new RegExp(status.followedBy + '\\s+followed you'), { timeout })
}
if (status.rebloggedBy) {
await t.expect(getNthStatusHeader(i).innerText)
.contains(status.rebloggedBy + ' boosted your status', { timeout })
.match(new RegExp(status.rebloggedBy + '\\s+boosted your status'), { timeout })
}
if (status.favoritedBy) {
await t.expect(getNthStatusHeader(i).innerText)
.contains(status.favoritedBy + ' favorited your status', { timeout })
.match(new RegExp(status.favoritedBy + '\\s+favorited your status'), { timeout })
}
}
}