Add a footer

4 years ago · 58f3021cb1
parent fada97dab0
commit 58f3021cb1
8 changed files with 219 additions and 6 deletions
--- a/webclient/public/logo-long.svg
+++ b/webclient/public/logo-long.svg
--- a/webclient/public/logo-short.svg
+++ b/webclient/public/logo-short.svg
@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="68.49765mm"
+   height="8.4772501mm"
+   viewBox="0 0 68.497652 8.4772501"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="logo-short.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="52.056865"
+     inkscape:cy="0.89274889"
+     inkscape:document-units="mm"
+     inkscape:current-layer="flowRoot10"
+     showgrid="false"
+     inkscape:window-width="3840"
+     inkscape:window-height="2096"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-50.975741,-114.80657)">
+    <g
+       aria-label="PROTOSPACE PORTAL"
+       transform="scale(0.26458333)"
+       style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
+       id="flowRoot10">
+      <path
+         d="m 204.12422,465.9546 q -2.56,0 -4.84,-0.76 -2.24,-0.8 -3.92,-2.2 -1.68,-1.44 -2.52,-3.28 -0.36,-0.76 0,-1.4 0.4,-0.68 1.32,-0.88 0.64,-0.16 1.28,0.2 0.68,0.32 1,1 0.52,1.08 1.64,1.96 1.12,0.84 2.68,1.36 1.6,0.52 3.36,0.52 2,0 3.6,-0.64 1.64,-0.64 2.6,-1.84 1,-1.2 1,-2.96 0,-2.24 -1.72,-3.92 -1.68,-1.72 -5.48,-2.16 -4.88,-0.52 -7.68,-2.92 -2.76,-2.4 -2.76,-5.92 0,-2.6 1.4,-4.4 1.44,-1.84 3.88,-2.8 2.48,-0.96 5.56,-0.96 2.36,0 4.16,0.68 1.8,0.68 3.16,1.88 1.36,1.16 2.32,2.72 0.48,0.8 0.36,1.52 -0.08,0.72 -0.72,1.12 -0.72,0.4 -1.52,0.16 -0.8,-0.28 -1.2,-0.96 -0.6,-1.08 -1.52,-1.88 -0.92,-0.8 -2.2,-1.28 -1.24,-0.48 -2.96,-0.48 -3,-0.04 -5,1.2 -1.96,1.2 -1.96,3.6 0,1.28 0.64,2.4 0.68,1.08 2.32,1.92 1.68,0.8 4.68,1.12 4.84,0.56 7.4,2.96 2.6,2.4 2.6,6.28 0,2.24 -0.88,3.92 -0.88,1.68 -2.44,2.84 -1.52,1.12 -3.52,1.72 -1.96,0.56 -4.12,0.56 z"
+         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Comfortaa;-inkscape-font-specification:'Comfortaa Semi-Bold'"
+         id="path34"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 223.43172,465.5546 q -0.84,0 -1.4,-0.52 -0.52,-0.56 -0.52,-1.4 v -27.4 q 0,-0.84 0.52,-1.36 0.56,-0.56 1.4,-0.56 h 8 q 2.96,0 5.28,1.32 2.32,1.32 3.6,3.64 1.28,2.28 1.28,5.32 0,2.96 -1.28,5.24 -1.28,2.24 -3.6,3.52 -2.32,1.28 -5.28,1.28 h -6.12 v 9 q 0,0.84 -0.52,1.4 -0.52,0.52 -1.36,0.52 z m 1.88,-14.48 h 6.12 q 1.88,0 3.36,-0.8 1.48,-0.84 2.28,-2.32 0.84,-1.48 0.84,-3.36 0,-2 -0.84,-3.48 -0.8,-1.52 -2.28,-2.36 -1.48,-0.88 -3.36,-0.88 h -6.12 z"
+         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Comfortaa;-inkscape-font-specification:'Comfortaa Semi-Bold'"
+         id="path36"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 243.70547,465.5546 q -1.04,0 -1.6,-0.88 -0.52,-0.92 -0.08,-1.88 l 11.4,-27.2 q 0.56,-1.28 1.8,-1.28 1.32,0 1.8,1.28 l 11.48,27.28 q 0.4,1 -0.16,1.84 -0.52,0.84 -1.56,0.84 -0.56,0 -1.08,-0.28 -0.48,-0.32 -0.72,-0.88 l -10.28,-25.32 h 1.16 l -10.4,25.32 q -0.24,0.56 -0.76,0.88 -0.48,0.28 -1,0.28 z m 2.28,-7.08 1.48,-3.16 h 15.88 l 1.44,3.16 z"
+         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Comfortaa;-inkscape-font-specification:'Comfortaa Semi-Bold'"
+         id="path38"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 286.44922,465.9546 q -3.24,0 -6.08,-1.2 -2.8,-1.24 -4.92,-3.44 -2.08,-2.2 -3.28,-5.12 -1.2,-2.92 -1.2,-6.28 0,-3.32 1.16,-6.2 1.2,-2.92 3.32,-5.12 2.12,-2.2 4.92,-3.44 2.8,-1.24 6.08,-1.24 3.04,0 5.28,0.84 2.28,0.8 4.52,2.64 0.32,0.24 0.44,0.56 0.16,0.28 0.12,0.56 0,0.28 -0.08,0.6 -0.04,0.6 -0.52,1 -0.44,0.36 -1.12,0.4 -0.64,0.04 -1.24,-0.44 -1.52,-1.32 -3.2,-2 -1.64,-0.68 -4.2,-0.68 -2.44,0 -4.6,1 -2.12,1 -3.76,2.72 -1.6,1.72 -2.52,4 -0.92,2.24 -0.92,4.8 0,2.6 0.92,4.88 0.92,2.28 2.52,4 1.64,1.72 3.76,2.68 2.16,0.96 4.6,0.96 2.12,0 3.96,-0.68 1.88,-0.72 3.6,-2 0.64,-0.48 1.28,-0.4 0.64,0.04 1.08,0.52 0.48,0.44 0.48,1.24 0,0.4 -0.16,0.76 -0.12,0.32 -0.44,0.6 -2.12,1.8 -4.6,2.64 -2.48,0.84 -5.2,0.84 z"
+         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Comfortaa;-inkscape-font-specification:'Comfortaa Semi-Bold'"
+         id="path40"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 305.38484,465.5546 q -0.84,0 -1.4,-0.52 -0.52,-0.56 -0.52,-1.4 v -27.4 q 0,-0.84 0.52,-1.36 0.56,-0.56 1.4,-0.56 h 18.28 q 0.84,0 1.36,0.52 0.52,0.48 0.52,1.28 0,0.76 -0.52,1.28 -0.52,0.48 -1.36,0.48 h -16.4 v 10.16 h 11.84 q 0.84,0 1.36,0.52 0.52,0.48 0.52,1.28 0,0.76 -0.52,1.28 -0.52,0.48 -1.36,0.48 h -11.84 v 10.4 h 16.4 q 0.84,0 1.36,0.52 0.52,0.48 0.52,1.24 0,0.8 -0.52,1.32 -0.52,0.48 -1.36,0.48 z"
+         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Comfortaa;-inkscape-font-specification:'Comfortaa Semi-Bold'"
+         id="path42"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 344.99422,465.5546 q -0.84,0 -1.4,-0.52 -0.52,-0.56 -0.52,-1.4 v -27.4 q 0,-0.84 0.52,-1.36 0.56,-0.56 1.4,-0.56 h 8 q 2.96,0 5.28,1.32 2.32,1.32 3.6,3.64 1.28,2.28 1.28,5.32 0,2.96 -1.28,5.24 -1.28,2.24 -3.6,3.52 -2.32,1.28 -5.28,1.28 h -6.12 v 9 q 0,0.84 -0.52,1.4 -0.52,0.52 -1.36,0.52 z m 1.88,-14.48 h 6.12 q 1.88,0 3.36,-0.8 1.48,-0.84 2.28,-2.32 0.84,-1.48 0.84,-3.36 0,-2 -0.84,-3.48 -0.8,-1.52 -2.28,-2.36 -1.48,-0.88 -3.36,-0.88 h -6.12 z"
+         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Comfortaa;-inkscape-font-specification:'Comfortaa Semi-Bold'"
+         id="path44"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 382.27984,465.9546 q -3.52,0 -6.44,-1.16 -2.92,-1.2 -5.04,-3.36 -2.08,-2.16 -3.28,-5.08 -1.16,-2.92 -1.16,-6.44 0,-3.48 1.16,-6.4 1.2,-2.92 3.28,-5.08 2.12,-2.16 5.04,-3.32 2.92,-1.2 6.44,-1.2 3.48,0 6.4,1.2 2.92,1.16 5.04,3.32 2.12,2.16 3.28,5.08 1.2,2.92 1.2,6.4 0,3.52 -1.2,6.44 -1.16,2.92 -3.28,5.08 -2.12,2.16 -5.04,3.36 -2.92,1.16 -6.4,1.16 z m 0,-3.48 q 2.64,0 4.88,-0.96 2.24,-0.96 3.88,-2.64 1.68,-1.72 2.56,-4 0.88,-2.28 0.88,-4.96 0,-2.64 -0.88,-4.92 -0.88,-2.32 -2.56,-4 -1.64,-1.72 -3.88,-2.64 -2.24,-0.96 -4.88,-0.96 -2.68,0 -4.92,0.96 -2.24,0.92 -3.88,2.64 -1.6,1.68 -2.52,4 -0.92,2.28 -0.92,4.92 0,2.68 0.92,4.96 0.92,2.28 2.52,4 1.64,1.68 3.88,2.64 2.24,0.96 4.92,0.96 z"
+         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Comfortaa;-inkscape-font-specification:'Comfortaa Semi-Bold'"
+         id="path46"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 406.63484,465.5546 q -0.84,0 -1.4,-0.52 -0.52,-0.56 -0.52,-1.4 v -27.4 q 0,-0.84 0.52,-1.36 0.56,-0.56 1.4,-0.56 h 7.28 q 2.96,0 5.28,1.24 2.32,1.24 3.6,3.44 1.32,2.2 1.32,5.08 0,2.72 -1.32,4.84 -1.28,2.12 -3.6,3.32 -2.32,1.2 -5.28,1.2 h -5.4 v 10.2 q 0,0.84 -0.52,1.4 -0.52,0.52 -1.36,0.52 z m 16.64,0 q -0.56,0 -0.96,-0.2 -0.4,-0.24 -0.72,-0.72 l -7.36,-11.84 3.76,-1.04 6.76,10.88 q 0.68,1.08 0.2,2 -0.48,0.92 -1.68,0.92 z m -14.76,-15.68 h 5.4 q 1.92,0 3.36,-0.72 1.48,-0.76 2.32,-2.08 0.84,-1.32 0.84,-3 0,-1.8 -0.84,-3.2 -0.84,-1.44 -2.32,-2.2 -1.44,-0.8 -3.36,-0.8 h -5.4 z"
+         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Comfortaa;-inkscape-font-specification:'Comfortaa Semi-Bold'"
+         id="path48"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 438.95297,465.5546 q -0.76,0 -1.32,-0.56 -0.56,-0.56 -0.56,-1.36 v -29.32 h 3.8 v 29.32 q 0,0.8 -0.56,1.36 -0.52,0.56 -1.36,0.56 z m -10.8,-27.72 q -0.8,0 -1.28,-0.48 -0.48,-0.52 -0.48,-1.28 0,-0.8 0.48,-1.28 0.48,-0.48 1.28,-0.48 h 21.64 q 0.8,0 1.28,0.48 0.48,0.48 0.48,1.28 0,0.76 -0.48,1.28 -0.48,0.48 -1.28,0.48 z"
+         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Comfortaa;-inkscape-font-specification:'Comfortaa Semi-Bold'"
+         id="path50"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
-import Logo from './logo.svg';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import { requester } from './utils.js';
 import { Home } from './Home.js';
@ -12,6 +11,7 @@ import { Courses, CourseDetail } from './Courses.js';
 import { Classes, ClassDetail } from './Classes.js';
 import { Members } from './Members.js';
 import { NotFound, PleaseLogin } from './Misc.js';
+import { Footer } from './Footer.js';

 function App() {
 	const [token, setToken] = useState(localStorage.getItem('token', ''));
@ -47,9 +47,11 @@ function App() {

 	return (
 		<Router>
+			<div className='content-wrap'>
+			<div className='content-wrap-inside'>
 			<Container>
 				<div className='header'>
-					<img src={Logo} className='logo' />
+					<img src='/logo-long.svg' className='logo-long' />
 				</div>
 			</Container>

@ -162,7 +164,10 @@ function App() {
 					</Route>
 				}
 			</div>
+			</div>
+			</div>

+			<Footer />
 		</Router>
 	)
 };
--- a/webclient/src/Classes.js
+++ b/webclient/src/Classes.js
@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
-import Logo from './logo.svg';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import moment from 'moment';
 import { requester } from './utils.js';
--- a/webclient/src/Courses.js
+++ b/webclient/src/Courses.js
@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
-import Logo from './logo.svg';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import moment from 'moment';
 import { requester } from './utils.js';
--- a/webclient/src/Footer.js
+++ b/webclient/src/Footer.js
@ -0,0 +1,44 @@
+import React from 'react';
+import { Container, Icon } from 'semantic-ui-react';
+
+export function Footer() {
+	return (
+		<div className='footer'>
+			<Container>
+				<p>
+					<img alt='site logo' src='/logo-short.svg' className='logo' />
+				</p>
+
+				<p className='text'>
+					Contact us: <a href='mailto:info@protospace.ca' target='_blank' rel='noopener noreferrer'>info@protospace.ca</a>
+				</p>
+
+				<p className='text'>
+					Created and hosted by Protospace members for Protospace members.
+				</p>
+
+				<p className='text'>
+					Spaceport is free and open-source software. <a href='https://github.com/Protospace/spaceport' target='_blank' rel='noopener noreferrer'>Click here</a> to view the source code and license.
+				</p>
+
+				<p>
+					<a href='https://instagram.com/protospace' target='_blank' rel='noopener noreferrer' aria-label='link to our instagram'>
+						<Icon name='instagram' size='large' />
+					</a>
+					<a href='https://twitter.com/protospace' target='_blank' rel='noopener noreferrer' aria-label='link to our twitter'>
+						<Icon name='twitter' size='large' />
+					</a>
+					<a href='https://youtube.com/user/calgaryprotospace/playlists' target='_blank' rel='noopener noreferrer' aria-label='link to our youtube'>
+						<Icon name='youtube' size='large' />
+					</a>
+					<a href='https://github.com/Protospace' target='_blank' rel='noopener noreferrer' aria-label='link to our github'>
+						<Icon name='github' size='large' />
+					</a>
+				</p>
+
+				<p>© 2020 Calgary Protospace Ltd.</p>
+
+			</Container>
+		</div>
+	);
+};
--- a/webclient/src/Transactions.js
+++ b/webclient/src/Transactions.js
@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
-import Logo from './logo.svg';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import { requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
--- a/webclient/src/light.css
+++ b/webclient/src/light.css
@ -1,17 +1,26 @@
 html, body {
 	font-size: 16px;
+	height: 100%;
+	margin: 0;
 }

 body {
+	background: black;
 	overflow-y: scroll;
 }

+#root {
+	position: relative;
+	height: 100%;
+	margin: 0;
+}
+
 .header {
 	padding-top: 1.5rem;
 	margin-bottom: 1.5rem;
 }

-.header .logo {
+.header .logo-long {
 	max-width: 100%;
 	height: 2rem;
 	display: block;
@ -44,3 +53,49 @@ body {
 	max-width: 100%;
 	height: auto;
 }
+
+.content-wrap {
+	min-height: 100%;
+	background: white;
+}
+
+.content-wrap-inside {
+	padding-bottom: 24rem;
+}
+
+.footer {
+	margin-top: -20rem;
+
+	background: black;
+	color: white;
+}
+
+.footer .container {
+	padding-top: 3rem;
+	padding-bottom: 3rem;
+}
+
+.footer p {
+	color: white;
+}
+
+.footer .logo {
+	filter: invert(100%);
+	height: 1.5rem;
+}
+
+.footer a {
+	color: white;
+	outline: 0;
+}
+
+.footer .text a {
+	border-bottom: 1px solid #ddd;
+	padding-bottom: 2px;
+}
+
+.footer i {
+	margin-top: 3px;
+	margin-left: -3.5px;
+	margin-right: 0.5em;
+}