stryan/matrix.to
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

make responsive and add footer

Browse Source
This commit is contained in:
Bruno Windels 2020-11-30 13:14:13 +01:00
parent 67cc43f3c0
commit eded08595a
4 changed files with 56 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
css/main.css
View File

@ -60,10 +60,13 @@ textarea {
width: 100%; width: 100%;
} }
.PreviewView { .card {
background-color: var(--background); background-color: var(--background);
border-radius: 16px; border-radius: 16px;
box-shadow: 0px 18px 24px rgba(0, 0, 0, 0.06); box-shadow: 0px 18px 24px rgba(0, 0, 0, 0.06);
}
.card, .footer {
padding: 2rem; padding: 2rem;
} }
@ -83,3 +86,40 @@ textarea {
.hidden { .hidden {
display: none !important; display: none !important;
} }
@media screen and (max-width: 480px) {
body {
background-image: none;
background-color: var(--background);
padding: 0;
}
.card {
border-radius: unset;
box-shadow: unset;
}
}
.footer .links li:not(:first-child) {
margin-left: 0.5em;
}
.footer .links li:not(:first-child)::before {
content: "·";
margin-right: 0.5em;
}
.footer .links li {
display: inline-block;
}
.footer .links {
font-size: 0.8em;
list-style: none;
padding: 0;
}
a {
color: var(--link);
}

2
index.html
View File

@ -2,6 +2,8 @@
<html> <html>
<head> <head>
<title></title> <title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
</head> </head>
<body> <body>

12
src/RootView.js
View File

@ -21,6 +21,18 @@ export class RootView extends TemplateView {
render(t, vm) { render(t, vm) {
return t.div({className: "RootView"}, [ return t.div({className: "RootView"}, [
t.mapView(vm => vm.previewViewModel, vm => vm ? new PreviewView(vm) : null), t.mapView(vm => vm.previewViewModel, vm => vm ? new PreviewView(vm) : null),
t.div({className: "footer"}, [
t.p(t.img({src: "images/matrix-logo.svg"})),
t.p(["This invite uses ", externalLink(t, "https://matrix.org", "Matrix"), ", an open network for secure, decentralized communication."]),
t.ul({className: "links"}, [
t.li(externalLink(t, "https://github.com/matrix-org/matrix.to", "GitHub project")),
t.li(externalLink(t, "https://github.com/matrix-org/matrix.to/tree/main/src/clients", "Add your app")),
])
])
]); ]);
} }
} }
function externalLink(t, href, label) {
return t.a({href, target: "_blank", rel: "noopener noreferrer"}, label);
}

2
src/preview/PreviewView.js
View File

@ -18,7 +18,7 @@ import {TemplateView} from "../utils/TemplateView.js";
export class PreviewView extends TemplateView { export class PreviewView extends TemplateView {
render(t, vm) { render(t, vm) {
return t.div({className: "PreviewView"}, [ return t.div({className: "PreviewView card"}, [
t.h2({className: {hidden: vm => !vm.loading}}, "Loading preview…"), t.h2({className: {hidden: vm => !vm.loading}}, "Loading preview…"),
t.div({className: {preview: true, hidden: vm => vm.loading}}, [ t.div({className: {preview: true, hidden: vm => vm.loading}}, [
t.p(t.img({className: "avatar", src: vm => vm.avatarUrl})), t.p(t.img({className: "avatar", src: vm => vm.avatarUrl})),