flesh out status component
This commit is contained in:
Nolan Lawson
parent
eaa3cb0e4f
commit
0340a0d16f
21
package-lock.json
generated
21
package-lock.json
generated
|
|
@ -3344,6 +3344,27 @@
|
|||
"resolved": "https://registry.npmjs.org/interpret/-/interpret-1.1.0.tgz",
|
||||
"integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ="
|
||||
},
|
||||
"intl-messageformat": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-2.2.0.tgz",
|
||||
"integrity": "sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw=",
|
||||
"requires": {
|
||||
"intl-messageformat-parser": "1.4.0"
|
||||
}
|
||||
},
|
||||
"intl-messageformat-parser": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz",
|
||||
"integrity": "sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU="
|
||||
},
|
||||
"intl-relativeformat": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/intl-relativeformat/-/intl-relativeformat-2.1.0.tgz",
|
||||
"integrity": "sha1-AQ8RBYAiUfQKxH0OPhogE0iiVd8=",
|
||||
"requires": {
|
||||
"intl-messageformat": "2.2.0"
|
||||
}
|
||||
},
|
||||
"invert-kv": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
"font-awesome-svg-png": "^1.2.2",
|
||||
"glob": "^7.1.2",
|
||||
"idb": "^2.0.4",
|
||||
"intl-relativeformat": "^2.1.0",
|
||||
"lodash": "^4.17.4",
|
||||
"node-fetch": "^1.7.3",
|
||||
"node-sass": "^4.7.2",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 10px auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,32 @@
|
|||
<article on:click="alert(event)">
|
||||
<article>
|
||||
{{#if status.reblog}}
|
||||
<div class="header">
|
||||
<a href="{{status.account.url}}">{{status.account.username}}</a> boosted
|
||||
<div class="boosted">
|
||||
<svg>
|
||||
<use xlink:href="#fa-retweet" />
|
||||
</svg>
|
||||
<span>
|
||||
<a href="/accounts/{{status.account.id}}">
|
||||
{{status.account.username}}
|
||||
</a> boosted
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="author">
|
||||
<a class="author-name" href="/accounts/{{status.account.id}}">
|
||||
{{status.account.display_name}}
|
||||
</a>
|
||||
<span class="author-handle">
|
||||
{{status.account.acct}}
|
||||
</span>
|
||||
<a class="author-relative-date" rel="noopener" target="_blank" href="{{status.url}}">
|
||||
{{relativeDate}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<Avatar account={{status.reblog ? status.reblog.account : status.account}} />
|
||||
</div>
|
||||
<div class="content">{{{status.content}}}</div>
|
||||
<div class="footer">
|
||||
<div class="toolbar">
|
||||
<button aria-label="Reply" aria-pressed="false" type="button">
|
||||
<svg>
|
||||
<use xlink:href="#fa-reply" />
|
||||
|
|
@ -34,7 +52,6 @@
|
|||
|
||||
<style>
|
||||
article {
|
||||
pointer-events: none;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 10px 0;
|
||||
|
|
@ -42,9 +59,10 @@
|
|||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-areas:
|
||||
"....... header"
|
||||
"....... boosted"
|
||||
"sidebar author"
|
||||
"sidebar content"
|
||||
"....... footer";
|
||||
"....... toolbar";
|
||||
grid-template-columns: 70px 1fr;
|
||||
}
|
||||
.sidebar {
|
||||
|
|
@ -52,8 +70,52 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.author a, .author a:visited, .author a:hover, .author .author-handle {
|
||||
color: var(--deemphasized-text-color);
|
||||
}
|
||||
|
||||
.author .author-name {
|
||||
color: var(--body-text-color);
|
||||
min-width: 0;
|
||||
flex-shrink: 1;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.author .author-name:hover {
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
|
||||
.author-handle {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
margin-left: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.author-relative-date {
|
||||
min-width: 0;
|
||||
flex-shrink: 1;
|
||||
text-align: right;
|
||||
margin-left: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 5px;
|
||||
margin: 20px 5px;
|
||||
grid-area: content;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
|
|
@ -61,62 +123,84 @@
|
|||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
:global(.content a) {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
:global(.header a) {
|
||||
pointer-events: auto;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:global(.content p) {
|
||||
margin: 0 0 10px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
margin: 5px 5px;
|
||||
:global(.content p:first-child) {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
|
||||
:global(.content p:last-child) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.boosted span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.boosted span, .boosted a, .boosted a:visited, .boosted a:hover {
|
||||
color: var(--deemphasized-text-color);
|
||||
}
|
||||
|
||||
.boosted {
|
||||
grid-area: boosted;
|
||||
margin: 5px 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.boosted svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: var(--deemphasized-text-color)
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
grid-area: toolbar;
|
||||
display: flex;
|
||||
margin: 5px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer button {
|
||||
pointer-events: auto;
|
||||
.toolbar button {
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.footer button svg {
|
||||
pointer-events: none;
|
||||
.toolbar button svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: var(--action-button-fill-color);
|
||||
}
|
||||
|
||||
.footer button:hover svg {
|
||||
.toolbar button:hover svg {
|
||||
fill: var(--action-button-fill-color-hover);
|
||||
}
|
||||
|
||||
.footer button:active svg {
|
||||
.toolbar button:active svg {
|
||||
fill: var(--action-button-fill-color-active);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Avatar from './Avatar.html'
|
||||
import IntlRelativeFormat from 'intl-relativeformat'
|
||||
const relativeFormat = new IntlRelativeFormat('en-US');
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Avatar
|
||||
},
|
||||
data: () => ({
|
||||
status: null
|
||||
status: null,
|
||||
}),
|
||||
computed: {
|
||||
relativeDate: (status) => {
|
||||
let date = new Date(status.created_at)
|
||||
return relativeFormat.format(date)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
alert: function (e) {
|
||||
e.preventDefault()
|
||||
|
|
|
|||
|
|
@ -19,18 +19,19 @@
|
|||
|
||||
export default {
|
||||
oncreate: async function () {
|
||||
if (process.browser) {
|
||||
let instanceData = this.store.get('currentInstance')
|
||||
if (!instanceData) {
|
||||
return
|
||||
}
|
||||
let response = fixture
|
||||
// let response = await (await getHomeTimeline(instanceData.instanceName, instanceData.access_token)).json()
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
console.log(response)
|
||||
}
|
||||
this.set({'statuses': response})
|
||||
if (!process.browser) {
|
||||
return
|
||||
}
|
||||
let instanceData = this.store.get('currentInstance')
|
||||
if (!instanceData) {
|
||||
return
|
||||
}
|
||||
let response = fixture
|
||||
// let response = await (await getHomeTimeline(instanceData.instanceName, instanceData.access_token)).json()
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
console.log(response)
|
||||
}
|
||||
this.set({'statuses': response})
|
||||
},
|
||||
data: () => ({
|
||||
target: 'home',
|
||||
|
|
|
|||
|
|
@ -54,4 +54,6 @@
|
|||
|
||||
--mask-bg: $toast-bg;
|
||||
--mask-svg-fill: $secondary-text-color;
|
||||
|
||||
--deemphasized-text-color: #666;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<style>
|
||||
/* auto-generated w/ build-sass.js */
|
||||
:root{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#839deb;--action-button-fill-color-hover:#99afef;--action-button-fill-color-active:#577ae4;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff}
|
||||
:root{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#839deb;--action-button-fill-color-hover:#99afef;--action-button-fill-color-active:#577ae4;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--deemphasized-text-color:#666}
|
||||
body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg)}#svelte{display:flex;flex-direction:column}main{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;max-width:800px;padding:15px 15px;box-sizing:border-box;margin:85px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{padding:5px 5px;margin:75px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue