forked from cybrespace/pinafore
start fleshing out timeline
This commit is contained in:
parent
4b593e794e
commit
e573220f3f
|
@ -4,6 +4,7 @@ body {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
|
@ -11,6 +12,7 @@ main {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
@ -32,6 +34,10 @@ a:visited {
|
||||||
color: royalblue;
|
color: royalblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
border: 1px solid #dadada;
|
border: 1px solid #dadada;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
@ -45,6 +51,10 @@ button {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
}
|
}
|
||||||
|
@ -69,4 +79,14 @@ button.primary:active {
|
||||||
|
|
||||||
p, label, input {
|
p, label, input {
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
|
@ -0,0 +1,16 @@
|
||||||
|
<img src="{{account.avatar_static}}">
|
||||||
|
<style>
|
||||||
|
img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin: 10px auto;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data: () => ({
|
||||||
|
account: null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -0,0 +1,81 @@
|
||||||
|
<article>
|
||||||
|
{{#if status.reblog}}
|
||||||
|
<div class="header">
|
||||||
|
{{status.account.username}} boosted
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
<div class="sidebar">
|
||||||
|
<Avatar account={{status.reblog ? status.reblog.account : status.account}} />
|
||||||
|
</div>
|
||||||
|
<div class="content">{{{status.content}}}</div>
|
||||||
|
<div class="footer">
|
||||||
|
<button type="button">
|
||||||
|
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5T1385 1619q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5T365 1569q0-6 2-20l86-500L89 695q-25-27-25-48 0-37 56-46l502-73L847 73q19-41 49-41t49 41l225 455 502 73q56 9 56 46z"/></svg>
|
||||||
|
</button>
|
||||||
|
<button type="button">
|
||||||
|
<svg viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1344 1504q0 13-9.5 22.5t-22.5 9.5H352q-8 0-13.5-2t-9-7-5.5-8-3-11.5-1-11.5V896H128q-26 0-45-19t-19-45q0-24 15-41l320-384q19-22 49-22t49 22l320 384q15 17 15 41 0 26-19 45t-45 19H576v384h576q16 0 25 11l160 192q7 10 7 21zm640-416q0 24-15 41l-320 384q-20 23-49 23t-49-23l-320-384q-15-17-15-41 0-26 19-45t45-19h192V640H896q-16 0-25-12L711 436q-7-9-7-20 0-13 9.5-22.5T736 384h960q8 0 13.5 2t9 7 5.5 8 3 11.5 1 11.5v600h192q26 0 45 19t19 45z"/></svg>
|
||||||
|
</button>
|
||||||
|
<button type="button">
|
||||||
|
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1792 1120q0 166-127 451-3 7-10.5 24t-13.5 30-13 22q-12 17-28 17-15 0-23.5-10t-8.5-25q0-9 2.5-26.5t2.5-23.5q5-68 5-123 0-101-17.5-181t-48.5-138.5-80-101-105.5-69.5-133-42.5-154-21.5-175.5-6H640v256q0 26-19 45t-45 19-45-19L19 685Q0 666 0 640t19-45L531 83q19-19 45-19t45 19 19 45v256h224q713 0 875 403 53 134 53 333z"/></svg>
|
||||||
|
</button>
|
||||||
|
<button type="button">
|
||||||
|
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M576 736v192q0 40-28 68t-68 28H288q-40 0-68-28t-28-68V736q0-40 28-68t68-28h192q40 0 68 28t28 68zm512 0v192q0 40-28 68t-68 28H800q-40 0-68-28t-28-68V736q0-40 28-68t68-28h192q40 0 68 28t28 68zm512 0v192q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68V736q0-40 28-68t68-28h192q40 0 68 28t28 68z"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
article {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
grid-template-areas:
|
||||||
|
"....... header"
|
||||||
|
"sidebar content"
|
||||||
|
"....... footer";
|
||||||
|
grid-template-columns: 70px 1fr;
|
||||||
|
}
|
||||||
|
.sidebar {
|
||||||
|
grid-area: sidebar;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: 5px;
|
||||||
|
grid-area: content;
|
||||||
|
word-wrap: break-word;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
grid-area: header;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
grid-area: footer;
|
||||||
|
display: flex;
|
||||||
|
margin: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer button {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer svg {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
fill: royalblue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
import Avatar from './Avatar.html'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Avatar
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
status: null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -1,29 +1,36 @@
|
||||||
<ul>
|
<ul>
|
||||||
{{#each statuses as status}}
|
{{#each statuses as status}}
|
||||||
<div>{{JSON.stringify(status, null, ' ')}}</div>
|
<Status :status />
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</ul>
|
</ul>
|
||||||
<script>
|
<script>
|
||||||
import { store } from '../_utils/store'
|
import { store } from '../_utils/store'
|
||||||
import { getHomeTimeline } from '../_utils/mastodon'
|
import { getHomeTimeline } from '../_utils/mastodon'
|
||||||
|
import fixture from '../_utils/fixture.json'
|
||||||
|
import Status from './Status.html'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
oncreate: function () {
|
oncreate: async function () {
|
||||||
if (process.browser) {
|
if (process.browser) {
|
||||||
(async () => {
|
let instanceData = this.store.get('currentOauthInstance')
|
||||||
let instanceData = this.store.get('currentOauthInstance')
|
if (!instanceData) {
|
||||||
if (!instanceData) {
|
return
|
||||||
return
|
}
|
||||||
}
|
let response = fixture
|
||||||
let response = await (await getHomeTimeline(instanceData.instanceName, instanceData.access_token)).json()
|
// let response = await (await getHomeTimeline(instanceData.instanceName, instanceData.access_token)).json()
|
||||||
this.set({'statuses': response})
|
if (process.env.NODE_ENV !== 'production') {
|
||||||
})()
|
console.log(response)
|
||||||
|
}
|
||||||
|
this.set({'statuses': response})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: () => ({
|
data: () => ({
|
||||||
target: 'home',
|
target: 'home',
|
||||||
statuses: []
|
statuses: []
|
||||||
}),
|
}),
|
||||||
store: () => store
|
store: () => store,
|
||||||
|
components: {
|
||||||
|
Status
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
File diff suppressed because it is too large
Load Diff
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset='utf-8'>
|
<meta charset='utf-8'>
|
||||||
<meta name='viewport' content='width=device-width'>
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name='theme-color' content='#4169e1'>
|
<meta name='theme-color' content='#4169e1'>
|
||||||
|
|
||||||
<link rel='stylesheet' href='/global.css'>
|
<link rel='stylesheet' href='/global.css'>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset='utf-8'>
|
<meta charset='utf-8'>
|
||||||
<meta name='viewport' content='width=device-width'>
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name='theme-color' content='#4169e1'>
|
<meta name='theme-color' content='#4169e1'>
|
||||||
|
|
||||||
<link rel='manifest' href='/manifest.json'>
|
<link rel='manifest' href='/manifest.json'>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset='utf-8'>
|
<meta charset='utf-8'>
|
||||||
<meta name='viewport' content='width=device-width'>
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name='theme-color' content='#4169e1'>
|
<meta name='theme-color' content='#4169e1'>
|
||||||
|
|
||||||
<link rel='manifest' href='/manifest.json'>
|
<link rel='manifest' href='/manifest.json'>
|
||||||
|
|
Loading…
Reference in New Issue