diff --git a/routes/_components/Avatar.html b/routes/_components/Avatar.html
index 8181217..b0ac208 100644
--- a/routes/_components/Avatar.html
+++ b/routes/_components/Avatar.html
@@ -18,6 +18,11 @@
height: 48px;
}
+ :global(.avatar.size-medium) {
+ width: 64px;
+ height: 64px;
+ }
+
:global(.avatar.size-big) {
width: 100px;
height: 100px;
diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html
index d84eb1d..846c9d9 100644
--- a/routes/_components/status/Status.html
+++ b/routes/_components/status/Status.html
@@ -5,10 +5,14 @@
{{#if (notification && (notification.type === 'reblog' || notification.type === 'favourite')) || status.reblog}}
<StatusHeader :notification :status :isStatusInNotification />
{{/if}}
- <StatusAuthor status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
- <StatusSidebar status="{{originalStatus}}" />
+ <StatusAuthorName status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
+ <StatusAuthorHandle status="{{originalStatus}}" :isStatusInNotification />
+ {{#if !isStatusInOwnThread}}
+ <StatusRelativeDate status="{{originalStatus}}" :isStatusInNotification />
+ {{/if}}
+ <StatusSidebar status="{{originalStatus}}" :isStatusInOwnThread />
{{#if originalStatus.spoiler_text}}
- <StatusSpoiler status="{{originalStatus}}" :contextualStatusId :isStatusInNotification on:recalculateHeight />
+ <StatusSpoiler status="{{originalStatus}}" :isStatusInOwnThread :contextualStatusId :isStatusInNotification on:recalculateHeight />
{{/if}}
{{#if !originalStatus.spoiler_text || spoilerShown}}
<StatusContent status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
@@ -16,7 +20,10 @@
{{#if originalStatus.media_attachments && originalStatus.media_attachments.length}}
<StatusMediaAttachments status="{{originalStatus}}" :contextualStatusId on:recalculateHeight />
{{/if}}
- <StatusToolbar :status />
+ {{#if isStatusInOwnThread}}
+ <StatusAbsoluteDate status="{{originalStatus}}" />
+ {{/if}}
+ <StatusToolbar :status :isStatusInOwnThread />
</article>
<style>
@@ -25,13 +32,13 @@
padding: 10px 20px;
display: grid;
grid-template-areas:
- "....... header header header"
- "sidebar author-name author-handle author-date"
- "sidebar spoiler spoiler spoiler"
- "sidebar spoiler-button spoiler-button spoiler-button"
- "sidebar content content content"
- "media media media media"
- "....... toolbar toolbar toolbar";
+ "....... header header header"
+ "sidebar author-name author-handle relative-date"
+ "sidebar spoiler spoiler spoiler"
+ "sidebar spoiler-btn spoiler-btn spoiler-btn"
+ "sidebar content content content"
+ "media media media media"
+ "....... toolbar toolbar toolbar";
grid-template-columns: min-content minmax(0, max-content) 1fr min-content;
}
@@ -44,6 +51,19 @@
background-color: var(--status-direct-background);
}
+ .status-article.status-in-own-thread {
+ grid-template-areas:
+ "sidebar author-name"
+ "sidebar author-handle"
+ "spoiler spoiler"
+ "spoiler-btn spoiler-btn"
+ "content content"
+ "media media"
+ "date date"
+ "toolbar toolbar";
+ grid-template-columns: min-content 1fr;
+ }
+
@media (max-width: 767px) {
.status-article {
padding: 10px 10px;
@@ -54,7 +74,10 @@
<script>
import StatusSidebar from './StatusSidebar.html'
import StatusHeader from './StatusHeader.html'
- import StatusAuthor from './StatusAuthor.html'
+ import StatusAuthorName from './StatusAuthorName.html'
+ import StatusAuthorHandle from './StatusAuthorHandle.html'
+ import StatusRelativeDate from './StatusRelativeDate.html'
+ import StatusAbsoluteDate from './StatusAbsoluteDate.html'
import StatusToolbar from './StatusToolbar.html'
import StatusMediaAttachments from './StatusMediaAttachments.html'
import StatusContent from './StatusContent.html'
@@ -66,7 +89,10 @@
components: {
StatusSidebar,
StatusHeader,
- StatusAuthor,
+ StatusAuthorName,
+ StatusAuthorHandle,
+ StatusRelativeDate,
+ StatusAbsoluteDate,
StatusToolbar,
StatusMediaAttachments,
StatusContent,
diff --git a/routes/_components/status/StatusAbsoluteDate.html b/routes/_components/status/StatusAbsoluteDate.html
new file mode 100644
index 0000000..061024f
--- /dev/null
+++ b/routes/_components/status/StatusAbsoluteDate.html
@@ -0,0 +1,37 @@
+<ExternalLink class="status-absolute-date" href="{{status.url}}" showIcon="true">
+ <time datetime={{createdAtDate}} title="{{formattedDate}}">{{formattedDate}}</time>
+</ExternalLink>
+<style>
+ :global(.status-absolute-date) {
+ grid-area: date;
+ font-size: 1.1em;
+ white-space: nowrap;
+ margin: 10px 5px;
+ justify-self: right;
+ }
+
+ :global(.status-absolute-date, .status-absolute-date:hover, .status-absolute-date:visited) {
+ color: var(--deemphasized-text-color);
+ }
+</style>
+<script>
+ import ExternalLink from '../ExternalLink.html'
+
+ const formatter = new Intl.DateTimeFormat('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ })
+
+ export default {
+ computed: {
+ createdAtDate: (status) => status.created_at,
+ formattedDate: (createdAtDate) => formatter.format(new Date(createdAtDate))
+ },
+ components: {
+ ExternalLink
+ }
+ }
+</script>
\ No newline at end of file
diff --git a/routes/_components/status/StatusAuthor.html b/routes/_components/status/StatusAuthor.html
deleted file mode 100644
index 0a8998e..0000000
--- a/routes/_components/status/StatusAuthor.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<a
- class="status-author-name {{getClass(isStatusInNotification)}}"
- href="/accounts/{{status.account.id}}"
->
- {{status.account.display_name || status.account.username}}
-</a>
-<span class="status-author-handle {{getClass(isStatusInNotification)}}"
->
- {{'@' + status.account.acct}}
- </span>
-{{#if isStatusInOwnThread}}
-<ExternalLink class="status-author-date" href="{{status.url}}" showIcon="true">
- <time datetime={{createdAtDate}} title="{{relativeDate}}">{{relativeDate}}</time>
-</ExternalLink>
-{{else}}
-<a class="status-author-date {{getClass(isStatusInNotification)}}"
- href="/statuses/{{status.id}}"
->
- <time datetime={{createdAtDate}} title="{{relativeDate}}">{{relativeDate}}</time>
-</a>
-{{/if}}
-<style>
- .status-author {
- grid-area: author;
- align-items: center;
- min-width: 0;
- }
-
- .status-author-name {
- grid-area: author-name;
- align-self: center;
- margin-left: 5px;
- font-size: 1.1em;
- min-width: 0;
- font-weight: 600;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .status-author-name, .status-author-name:hover, .status-author-name:visited {
- color: var(--body-text-color);
- }
-
- .status-author-handle {
- grid-area: author-handle;
- align-self: center;
- margin-left: 5px;
- color: var(--deemphasized-text-color);
- font-size: 1.1em;
- min-width: 0;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .status-author-date {
- grid-area: author-date;
- align-self: center;
- margin-left: 5px;
- margin-right: 10px;
- font-size: 1.1em;
- text-align: right;
- white-space: nowrap;
- }
- .status-author-date, .status-author-date:hover, .status-author-date:visited {
- color: var(--deemphasized-text-color);
- }
-
- .status-author-in-notification, .status-author-in-notification:hover, .status-author-in-notification:visited {
- color: var(--very-deemphasized-text-color);
- }
-
-</style>
-<script>
- import IntlRelativeFormat from 'intl-relativeformat'
- import ExternalLink from '../ExternalLink.html'
- import { mark, stop } from '../../_utils/marks'
-
- const relativeFormat = new IntlRelativeFormat('en-US');
-
- export default {
- helpers: {
- getClass: isStatusInNotification => isStatusInNotification ? 'status-author-in-notification' : ''
- },
- computed: {
- createdAtDate: (status) => status.created_at,
- relativeDate: (createdAtDate) => {
- mark('compute relativeDate')
- let res = relativeFormat.format(new Date(createdAtDate))
- stop('compute relativeDate')
- return res
- }
- },
- components: {
- ExternalLink
- }
- }
-</script>
\ No newline at end of file
diff --git a/routes/_components/status/StatusAuthorHandle.html b/routes/_components/status/StatusAuthorHandle.html
new file mode 100644
index 0000000..1398226
--- /dev/null
+++ b/routes/_components/status/StatusAuthorHandle.html
@@ -0,0 +1,20 @@
+<span class="status-author-handle {{isStatusInNotification ? 'status-in-notification' : '' }}">
+ {{'@' + status.account.acct}}
+</span>
+<style>
+ .status-author-handle {
+ grid-area: author-handle;
+ align-self: center;
+ margin-left: 5px;
+ color: var(--deemphasized-text-color);
+ font-size: 1.1em;
+ min-width: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .status-author-handle.status-in-notification {
+ color: var(--very-deemphasized-text-color);
+ }
+</style>
\ No newline at end of file
diff --git a/routes/_components/status/StatusAuthorName.html b/routes/_components/status/StatusAuthorName.html
new file mode 100644
index 0000000..b9dd738
--- /dev/null
+++ b/routes/_components/status/StatusAuthorName.html
@@ -0,0 +1,57 @@
+<a class="status-author-name {{isStatusInNotification ? 'status-in-notification' : '' }} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}"
+ href="/accounts/{{status.account.id}}">
+ {{status.account.display_name || status.account.username}}
+</a>
+<style>
+ .status-author-name {
+ grid-area: author-name;
+ align-self: center;
+ margin-left: 5px;
+ font-size: 1.1em;
+ min-width: 0;
+ font-weight: 600;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .status-author-name.status-in-own-thread {
+ font-size: 1.3em;
+ }
+
+ .status-author-name, .status-author-name:hover, .status-author-name:visited {
+ color: var(--body-text-color);
+ }
+
+ .status-author-name.status-in-notification,
+ .status-author-name.status-in-notification:hover,
+ .status-author-name.status-in-notification:visited {
+ color: var(--very-deemphasized-text-color);
+ }
+
+</style>
+<script>
+ import IntlRelativeFormat from 'intl-relativeformat'
+ import ExternalLink from '../ExternalLink.html'
+ import { mark, stop } from '../../_utils/marks'
+
+ const relativeFormat = new IntlRelativeFormat('en-US');
+
+ export default {
+ helpers: {
+ getClass: isStatusInNotification => isStatusInNotification ? 'status-author-in-notification' : ''
+ },
+ computed: {
+ createdAtDate: (status) => status.created_at,
+ relativeDate: (createdAtDate) => {
+ mark('compute relativeDate')
+ let res = relativeFormat.format(new Date(createdAtDate))
+ stop('compute relativeDate')
+ return res
+ }
+ },
+ components: {
+ ExternalLink
+ }
+ }
+</script>
\ No newline at end of file
diff --git a/routes/_components/status/StatusRelativeDate.html b/routes/_components/status/StatusRelativeDate.html
new file mode 100644
index 0000000..4cedfa2
--- /dev/null
+++ b/routes/_components/status/StatusRelativeDate.html
@@ -0,0 +1,43 @@
+<a class="status-relative-date {{isStatusInNotification ? 'status-in-notification' : '' }}"
+ href="/statuses/{{status.id}}">
+ <time datetime={{createdAtDate}} title="{{relativeDate}}">{{relativeDate}}</time>
+</a>
+<style>
+ .status-relative-date {
+ grid-area: relative-date;
+ align-self: center;
+ margin-left: 5px;
+ margin-right: 10px;
+ font-size: 1.1em;
+ text-align: right;
+ white-space: nowrap;
+ }
+ .status-relative-date, .status-relative-date:hover, .status-relative-date:visited {
+ color: var(--deemphasized-text-color);
+ }
+
+ .status-relative-date.status-in-notification,
+ .status-relative-date.status-in-notification:hover,
+ .status-relative-date.status-in-notification:visited {
+ color: var(--very-deemphasized-text-color);
+ }
+
+</style>
+<script>
+ import IntlRelativeFormat from 'intl-relativeformat'
+ import { mark, stop } from '../../_utils/marks'
+
+ const relativeFormat = new IntlRelativeFormat('en-US');
+
+ export default {
+ computed: {
+ createdAtDate: (status) => status.created_at,
+ relativeDate: (createdAtDate) => {
+ mark('compute relativeDate')
+ let res = relativeFormat.format(new Date(createdAtDate))
+ stop('compute relativeDate')
+ return res
+ }
+ }
+ }
+</script>
\ No newline at end of file
diff --git a/routes/_components/status/StatusSidebar.html b/routes/_components/status/StatusSidebar.html
index fcb6da2..6f1e4d1 100644
--- a/routes/_components/status/StatusSidebar.html
+++ b/routes/_components/status/StatusSidebar.html
@@ -1,6 +1,6 @@
<Avatar account={{status.account}}
className="status-sidebar"
- size="small" />
+ size="{{isStatusInOwnThread ? 'medium' : 'small'}}" />
<style>
:global(.status-sidebar) {
grid-area: sidebar;
diff --git a/routes/_components/status/StatusSpoiler.html b/routes/_components/status/StatusSpoiler.html
index fcbb51c..6fe6f32 100644
--- a/routes/_components/status/StatusSpoiler.html
+++ b/routes/_components/status/StatusSpoiler.html
@@ -1,7 +1,7 @@
-<div class="status-spoiler {{isStatusInNotification ? 'status-in-notification' : ''}}">
- {{status.spoiler_text}}
+<div class="status-spoiler {{isStatusInNotification ? 'status-in-notification' : ''}} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
+ <p>{{status.spoiler_text}}</p>
</div>
-<div class="status-spoiler-button">
+<div class="status-spoiler-button {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
<button type="button" on:click="onClickSpoilerButton()">
{{spoilerShown ? 'Show less' : 'Show more'}}
</button>
@@ -12,23 +12,31 @@
word-wrap: break-word;
overflow: hidden;
white-space: pre-wrap;
- font-size: 1.1em;
- margin: 5px;
+ font-size: 0.9em;
+ margin: 10px 5px;
+ }
+
+ .status-spoiler.status-in-own-thread {
+ font-size: 1.3em;
+ margin: 20px 5px 10px;
+ }
+
+ .status-spoiler.status-in-notification {
+ color: var(--very-deemphasized-text-color);
}
.status-spoiler-button {
- grid-area: spoiler-button;
- margin: 5px;
+ grid-area: spoiler-btn;
+ margin: 10px 5px;
+ }
+
+ .status-spoiler-button.status-in-own-thread {
}
.status-spoiler-button button {
padding: 5px 10px;
font-size: 1.1em;
}
-
- .status-spoiler.status-in-notification {
- color: var(--very-deemphasized-text-color);
- }
</style>
<script>
import { store } from '../../_store/store'
diff --git a/routes/_components/status/StatusToolbar.html b/routes/_components/status/StatusToolbar.html
index 21dab0b..13051e8 100644
--- a/routes/_components/status/StatusToolbar.html
+++ b/routes/_components/status/StatusToolbar.html
@@ -1,4 +1,4 @@
-<div class="status-toolbar">
+<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
<IconButton
label="Reply"
href="#fa-reply"
@@ -26,6 +26,9 @@
display: flex;
justify-content: space-between;
}
+ .status-toolbar.status-in-own-thread {
+ margin-left: 58px;
+ }
</style>
<script>