aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-01-30 21:36:44 +0100
committerNoah Loomans <noahloomans@gmail.com>2018-01-30 21:36:44 +0100
commit63f3b83d5f81ad4b08ecabde80b60178afcdb5d0 (patch)
tree6b28eb962962b01a153345b08e2f35580a1e8bf3 /src/client
parenta57d620d4229749a6aa8f831d6f5337c296ca6d8 (diff)
Auto resize schedule
Diffstat (limited to 'src/client')
-rw-r--r--src/client/react/components/presentational/Schedule.js63
-rw-r--r--src/client/style/_page-user.scss1
2 files changed, 54 insertions, 10 deletions
diff --git a/src/client/react/components/presentational/Schedule.js b/src/client/react/components/presentational/Schedule.js
index 256c1b4..e62039c 100644
--- a/src/client/react/components/presentational/Schedule.js
+++ b/src/client/react/components/presentational/Schedule.js
@@ -2,18 +2,61 @@ import React from 'react';
import PropTypes from 'prop-types';
import createDOMPurify from 'dompurify';
-const Schedule = ({ htmlStr }) => {
- const DOMPurify = createDOMPurify(window);
+class Schedule extends React.Component {
+ constructor(props) {
+ super(props);
- const cleanHTML = DOMPurify.sanitize(htmlStr, {
- ADD_ATTR: ['rules'],
- });
+ this.updateScaling = this.updateScaling.bind(this);
+ }
- return (
- // eslint-disable-next-line react/no-danger
- <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />
- );
-};
+ componentDidMount() {
+ window.addEventListener('resize', this.updateScaling);
+ this.updateScaling();
+ }
+
+ componentDidUpdate() {
+ this.updateScaling();
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.updateScaling);
+ }
+
+ updateScaling() {
+ const windowWidth = window.innerWidth;
+ const tableNode = this.scheduleDiv.querySelector('table');
+ if (!tableNode) return;
+
+ // We want a 16px margin on both sides, this marging will be scaled with
+ // the entire schedule.
+ const tableWidth = tableNode.offsetWidth + 32;
+
+ let scale = windowWidth / tableWidth;
+ if (scale > 1) {
+ scale = 1;
+ }
+
+ this.scheduleDiv.style.transform = `scale(${scale})`;
+ this.scheduleDiv.style.transformOrigin = 'left top';
+ this.scheduleDiv.style.margin = `${16 * scale}px`;
+ }
+
+ render() {
+ const DOMPurify = createDOMPurify(window);
+
+ const cleanHTML = DOMPurify.sanitize(this.props.htmlStr, {
+ ADD_ATTR: ['rules'],
+ });
+
+ return (
+ <div
+ // eslint-disable-next-line react/no-danger
+ dangerouslySetInnerHTML={{ __html: cleanHTML }}
+ ref={(div) => { this.scheduleDiv = div; }}
+ />
+ );
+ }
+}
Schedule.propTypes = {
htmlStr: PropTypes.string.isRequired,
diff --git a/src/client/style/_page-user.scss b/src/client/style/_page-user.scss
index 37a51eb..1938578 100644
--- a/src/client/style/_page-user.scss
+++ b/src/client/style/_page-user.scss
@@ -1,6 +1,7 @@
.page-user {
.search-wrapper {
position: fixed;
+ z-index: 1; // Position the search bar abore the schedule
width: 100%;
.search-container {