Mastodon/Pinafore-Web-Client-Frontend
1
0
Fork 0
mirror of https://github.com/nolanlawson/pinafore synced 2024-12-12 02:07:26 +01:00
Code Issues 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

57
routes/_components/status/StatusHeader.html
View File

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

6
tests/utils.js
View File

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