Merge pull request #85 from matrix-org/matrixtwo/responsive-layout

Basic layout

package.json

@@ -49,7 +49,6 @@
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^3.0.2",
-    "eslint": "^7.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.7",
     "node-sass": "^4.14.1",

src/App.scss

@@ -0,0 +1,33 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@mixin spacer {
+  width: 100%;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.topSpacer {
+  @include spacer;
+
+  height: 30vh;
+}
+
+.bottomSpacer {
+  @include spacer;
+
+  height: 10vh;
+}

src/App.tsx

@@ -1,8 +1,31 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import React from "react";
-import "./App.css";
+import "./App.scss";
+
+import SingleColumn from "./layouts/SingleColumn";
 
 function App() {
-  return <div className="App"></div>;
+  return (
+    <SingleColumn>
+      <div className="topSpacer" />
+      <div className="bottomSpacer" />
+    </SingleColumn>
+  );
 }
 
 export default App;

src/index.scss

@@ -0,0 +1,13 @@
+// CSS reset
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+}

src/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
+import "./index.scss";
 import App from "./App";
 
 ReactDOM.render(

src/layouts/SingleColumn.scss

@@ -0,0 +1,11 @@
+.singleColumnLayout {
+  height: 100%;
+
+  padding: 0 1em;
+  margin: 0 auto;
+
+  max-width: 550px;
+
+  display: flex;
+  flex-direction: column;
+}

src/layouts/SingleColumn.tsx

@@ -0,0 +1,27 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import "./SingleColumn.scss";
+
+interface IProps {
+  children?: React.ReactNode;
+}
+
+export default (props: IProps) => {
+  return <div className="singleColumnLayout">{props.children}</div>;
+};