make responsive and add footer

eded0859 · Bruno Windels · 67cc43f3 · eded0859 · eded0859 · eded0859
Commit eded0859 authored 4 years ago by Bruno Windels
--- a/css/main.css
+++ b/css/main.css
@@ -60,10 +60,13 @@ textarea {
 	width: 100%;
 }

-.PreviewView {
+.card {
 	background-color: var(--background);
    border-radius: 16px;
    box-shadow: 0px 18px 24px rgba(0, 0, 0, 0.06);
+}
+
+.card, .footer {
    padding: 2rem;
 }

@@ -82,4 +85,41 @@ textarea {

 .hidden {
 	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);
 }
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -2,6 +2,8 @@
 <html>
 <head>
 	<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">
 </head>
 <body>

--- a/src/RootView.js
+++ b/src/RootView.js
@@ -21,6 +21,18 @@ export class RootView extends TemplateView {
 	render(t, vm) {
 		return t.div({className: "RootView"}, [
 			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);
 }
\ No newline at end of file
--- a/src/preview/PreviewView.js
+++ b/src/preview/PreviewView.js
@@ -18,7 +18,7 @@ import {TemplateView} from "../utils/TemplateView.js";

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