web: add dummy timeline
This commit is contained in:
parent
3523bc86c7
commit
3df29a3cf3
GPG key ID:
EC22E476DC2D3D84
6 changed files with 184 additions and 20 deletions
|
|
@ -5,11 +5,13 @@ import {msg, str} from "@lit/localize";
|
|||
import {aboutURL, sourceURL, version} from "./config";
|
||||
import withSharedStyles from "./theme";
|
||||
|
||||
import "./components/header-bar";
|
||||
import "./components/nav-bar";
|
||||
import "./features/compose-form";
|
||||
import "./features/timed-line";
|
||||
import "./layout/column-layout";
|
||||
import "./layout/scroll-list";
|
||||
import "./layout/side-panel";
|
||||
import {Account, Note} from "./data/types";
|
||||
|
||||
@customElement("nyano-blog")
|
||||
export default class NyanoBlog extends LitElement {
|
||||
|
|
@ -30,8 +32,10 @@ export default class NyanoBlog extends LitElement {
|
|||
</p>
|
||||
</footer>
|
||||
|
||||
<div slot="main">
|
||||
<header-bar></header-bar>
|
||||
<div id="main-container" slot="main">
|
||||
<nav-bar id="nav"></nav-bar>
|
||||
<timed-line id="tl" .notes=${testNotes}></timed-line>
|
||||
<div class="flex-spacer"></div>
|
||||
</div>
|
||||
|
||||
<side-panel slot="right" headline="${msg("Notifications")}">
|
||||
|
|
@ -66,6 +70,78 @@ export default class NyanoBlog extends LitElement {
|
|||
footer a, footer a:visited {
|
||||
color: var(--text-faint-color);
|
||||
}
|
||||
|
||||
#main-container {
|
||||
display: block;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media(min-width: 1400px) {
|
||||
.flex-spacer, #nav {
|
||||
flex: 1;
|
||||
}
|
||||
#main-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: unset;
|
||||
}
|
||||
#tl {
|
||||
width: 600px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
const testAccount: Account = {
|
||||
id: "1",
|
||||
name: "fef",
|
||||
domain: "localhost",
|
||||
created_at: new Date(),
|
||||
updated_at: new Date(),
|
||||
};
|
||||
|
||||
const testNotes: Note[] = [
|
||||
{
|
||||
id: "1",
|
||||
account: testAccount,
|
||||
content: "Lorem ipsum dolor sit amet",
|
||||
sensitive: false,
|
||||
created_at: new Date(),
|
||||
updated_at: new Date(),
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
account: testAccount,
|
||||
content: "The quick brown fox jumped over the lazy dog.",
|
||||
sensitive: false,
|
||||
created_at: new Date(),
|
||||
updated_at: new Date(),
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
account: testAccount,
|
||||
content: "hi i'm gay uwu",
|
||||
sensitive: false,
|
||||
created_at: new Date(),
|
||||
updated_at: new Date(),
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
account: testAccount,
|
||||
content: "are there any #Homosexuals #OnHere?",
|
||||
sensitive: false,
|
||||
created_at: new Date(),
|
||||
updated_at: new Date(),
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
account: testAccount,
|
||||
content: "test note 1",
|
||||
sensitive: false,
|
||||
created_at: new Date(),
|
||||
updated_at: new Date(),
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -6,46 +6,46 @@ import withSharedStyles from "../theme";
|
|||
|
||||
import "./svg-icon";
|
||||
|
||||
@customElement("header-bar")
|
||||
export default class HeaderBar extends LitElement {
|
||||
@customElement("nav-bar")
|
||||
export default class NavBar extends LitElement {
|
||||
protected render() {
|
||||
return html`
|
||||
<nav>
|
||||
<ul>
|
||||
<li aria-current="page">
|
||||
<a href="#">
|
||||
<svg-icon size="20" icon="house-fill" role="none"></svg-icon>
|
||||
<span class="name">${msg("Home")}</span>
|
||||
<svg-icon size="20" icon="house-fill" role="none"></svg-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<svg-icon size="20" icon="people-fill" role="none"></svg-icon>
|
||||
<span class="name">${msg("Local")}</span>
|
||||
<svg-icon size="20" icon="people-fill" role="none"></svg-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<svg-icon size="20" icon="${this.getGlobeIconName()}" role="none"></svg-icon>
|
||||
<span class="name">${msg("Federated")}</span>
|
||||
<svg-icon size="20" icon="${this.getGlobeIconName()}" role="none"></svg-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<svg-icon size="20" icon="star-fill" role="none"></svg-icon>
|
||||
<span class="name">${msg("Favourites")}</span>
|
||||
<svg-icon size="20" icon="star-fill" role="none"></svg-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<svg-icon size="20" icon="bookmark-fill" role="none"></svg-icon>
|
||||
<span class="name">${msg("Bookmarks")}</span>
|
||||
<svg-icon size="20" icon="bookmark-fill" role="none"></svg-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<svg-icon size="20" icon="gear-fill" role="none"></svg-icon>
|
||||
<span class="name">${msg("Settings")}</span>
|
||||
<svg-icon size="20" icon="gear-fill" role="none"></svg-icon>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -69,7 +69,7 @@ export default class HeaderBar extends LitElement {
|
|||
static get styles() {
|
||||
return withSharedStyles(css`
|
||||
:host {
|
||||
font-size: 1rem;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
|
@ -104,17 +104,31 @@ export default class HeaderBar extends LitElement {
|
|||
}
|
||||
|
||||
svg-icon {
|
||||
transform: translateY(4px);
|
||||
transform: translateY(3px);
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media(max-width: 1600px) {
|
||||
.name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media(min-width: 1400px) {
|
||||
ul {
|
||||
border-bottom: none;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 0 20px;
|
||||
text-align: right;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1700px) {
|
||||
.name {
|
||||
display: inline;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
`);
|
||||
}
|
||||
27
src/web/components/tl-note.ts
Normal file
27
src/web/components/tl-note.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import {LitElement, html, css} from "lit";
|
||||
import {customElement, property} from "lit/decorators.js";
|
||||
|
||||
import {Note} from "../data/types";
|
||||
import withSharedStyles from "../theme";
|
||||
|
||||
import "./account-header";
|
||||
|
||||
/** single note on the timed line */
|
||||
@customElement("tl-note")
|
||||
export default class TlNote extends LitElement {
|
||||
@property()
|
||||
public note: Note;
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<account-header .account=${this.note.account}></account-header>
|
||||
<div>${this.note.content}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return withSharedStyles(css`
|
||||
|
||||
`);
|
||||
}
|
||||
}
|
||||
18
src/web/data/types.ts
Normal file
18
src/web/data/types.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
export interface Account {
|
||||
id: string,
|
||||
name: string,
|
||||
domain: string,
|
||||
display_name?: string,
|
||||
created_at: Date,
|
||||
updated_at: Date,
|
||||
}
|
||||
|
||||
export interface Note {
|
||||
id: string,
|
||||
account: Account,
|
||||
content: string,
|
||||
summary?: string,
|
||||
sensitive: boolean,
|
||||
created_at: Date,
|
||||
updated_at: Date,
|
||||
}
|
||||
32
src/web/features/timed-line.ts
Normal file
32
src/web/features/timed-line.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import {LitElement, html, css} from "lit";
|
||||
import {customElement, property} from "lit/decorators.js";
|
||||
|
||||
import {Note} from "../data/types";
|
||||
import withSharedStyles from "../theme";
|
||||
|
||||
import "../components/tl-note";
|
||||
import "../layout/scroll-list";
|
||||
|
||||
@customElement("timed-line")
|
||||
export default class TimedLine extends LitElement {
|
||||
@property()
|
||||
public notes: Note[] = [];
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<scroll-list>
|
||||
${this.notes.map(note => html`<tl-note .note=${note}></tl-note>`)}
|
||||
</scroll-list>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return withSharedStyles(css`
|
||||
:host {
|
||||
display: block;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,10 @@
|
|||
import {LitElement, html, css} from "lit";
|
||||
import {customElement, property} from "lit/decorators.js";
|
||||
import {customElement} from "lit/decorators.js";
|
||||
|
||||
import withSharedStyles from "../theme";
|
||||
|
||||
@customElement("scroll-list")
|
||||
export default class ScrollList extends LitElement {
|
||||
@property({type: Function})
|
||||
public onLoadMore: () => Promise<HTMLElement[]>;
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<slot/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue