From bdcfea32e736774c295202eef8cd677ac294cdd3 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sun, 14 Jan 2018 21:41:19 -0800 Subject: [PATCH] fix style for statuses --- routes/_components/Avatar.html | 30 +++++++++++++++++++++----- routes/_components/FreeTextLayout.html | 2 +- routes/_components/Status.html | 23 ++++++++++---------- routes/_components/Timeline.html | 3 +++ routes/_utils/fixture.json | 4 ++-- scss/global.scss | 2 +- templates/2xx.html | 26 ++++++++++++---------- 7 files changed, 58 insertions(+), 32 deletions(-) diff --git a/routes/_components/Avatar.html b/routes/_components/Avatar.html index fa44a80..b2572b8 100644 --- a/routes/_components/Avatar.html +++ b/routes/_components/Avatar.html @@ -1,16 +1,36 @@ -Profile picture for @{{account.acct}} +{{#await imagePromise}} + + + +{{then src}} +Profile picture for @{{account.acct}} +{{catch error}} + + + +{{/await}} + \ No newline at end of file diff --git a/routes/_components/FreeTextLayout.html b/routes/_components/FreeTextLayout.html index 6dfb24d..cbb82cb 100644 --- a/routes/_components/FreeTextLayout.html +++ b/routes/_components/FreeTextLayout.html @@ -6,6 +6,6 @@ margin: 20px; } :global(.free-text p) { - margin: 20px 0; + margin: 30px 0; } \ No newline at end of file diff --git a/routes/_components/Status.html b/routes/_components/Status.html index 52c1d97..18b1ad8 100644 --- a/routes/_components/Status.html +++ b/routes/_components/Status.html @@ -12,18 +12,18 @@ {{/if}}
- - {{status.account.display_name}} + + {{original.display_name || original.username}} - @{{status.account.acct}} + @{{original.acct}} - + {{relativeDate}}
- +
{{{status.content}}}
@@ -55,7 +55,6 @@ max-width: 600px; margin: 0 auto; padding: 10px 0; - border-bottom: 1px solid var(--main-border); display: grid; width: 100%; grid-template-areas: @@ -63,7 +62,7 @@ "sidebar author" "sidebar content" "....... toolbar"; - grid-template-columns: 70px 1fr; + grid-template-columns: 60px 1fr; } .sidebar { grid-area: sidebar; @@ -71,12 +70,12 @@ } .author { - max-width: 525px; /* have to spell this out to avoid overflows from long text */ grid-area: author; display: flex; align-items: center; margin-left: 5px; font-size: 1.1em; + min-width: 0; } .author a, .author a:visited, .author a:hover, .author .author-handle { @@ -84,9 +83,9 @@ } .author .author-name { - color: var(--body-text-color); min-width: 0; flex-shrink: 1; + color: var(--body-text-color); font-weight: 600; white-space: nowrap; overflow: hidden; @@ -107,7 +106,6 @@ } .author-relative-date { - min-width: 0; flex-shrink: 1; text-align: right; margin-left: 5px; @@ -115,7 +113,7 @@ } .content { - margin: 20px 5px; + margin: 10px 5px 20px; grid-area: content; word-wrap: break-word; overflow: hidden; @@ -199,7 +197,8 @@ relativeDate: (status) => { let date = new Date(status.created_at) return relativeFormat.format(date) - } + }, + original: (status) => status.reblog ? status.reblog.account : status.account }, methods: { alert: function (e) { diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html index d13dfe7..6182a4c 100644 --- a/routes/_components/Timeline.html +++ b/routes/_components/Timeline.html @@ -10,6 +10,9 @@ list-style: none; padding-right: 10px; } + li { + border-bottom: 1px solid var(--main-border); + }