nolanlawson
/
pinafore
forked from cybrespace/pinafore
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add separate style for status-in-own-context

This commit is contained in:
Nolan Lawson 2018-02-09 22:55:11 -08:00
parent 4a653df3b6
commit 473ddfaa85
10 changed files with 225 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
routes/_components/Avatar.html
View File

@ -18,6 +18,11 @@
height: 48px;
}
:global(.avatar.size-medium) {
width: 64px;
height: 64px;
}
:global(.avatar.size-big) {
width: 100px;
height: 100px;

42
routes/_components/status/Status.html
View File

@ -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>
@ -26,9 +33,9 @@
display: grid;
grid-template-areas:
"....... header header header"
"sidebar author-name author-handle author-date"
"sidebar author-name author-handle relative-date"
"sidebar spoiler spoiler spoiler"
"sidebar spoiler-button spoiler-button spoiler-button"
"sidebar spoiler-btn spoiler-btn spoiler-btn"
"sidebar content content content"
"media media media media"
"....... toolbar toolbar toolbar";
@ -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,

37
routes/_components/status/StatusAbsoluteDate.html Normal file
View File

@ -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>

99
routes/_components/status/StatusAuthor.html
View File

@ -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>

20
routes/_components/status/StatusAuthorHandle.html Normal file
View File

@ -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>

57
routes/_components/status/StatusAuthorName.html Normal file
View File

@ -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>

43
routes/_components/status/StatusRelativeDate.html Normal file
View File

@ -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>

2
routes/_components/status/StatusSidebar.html
View File

@ -1,6 +1,6 @@
<Avatar account={{status.account}}
className="status-sidebar"
size="small" />
size="{{isStatusInOwnThread ? 'medium' : 'small'}}" />
<style>
:global(.status-sidebar) {
grid-area: sidebar;

30
routes/_components/status/StatusSpoiler.html
View File

@ -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'

5
routes/_components/status/StatusToolbar.html
View File

@ -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>