diff --git a/frontend/public/Logo_Export_Trans_but_not_on_HRT.png b/frontend/public/Logo_Export_Trans_but_not_on_HRT.png
new file mode 100644
index 00000000..ac3677ae
Binary files /dev/null and b/frontend/public/Logo_Export_Trans_but_not_on_HRT.png differ
diff --git a/frontend/src/App.css b/frontend/src/App.css
index f0c7dd0a..a41ca7e2 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -70,18 +70,158 @@ body {
font-size: 7em;
margin-top: 0;
margin-bottom: 0;
+ display: inline-flex;
}
.isitweeka h2 {
font-size: 3em;
+ display: inline-flex;
}
.isitweeka h3 {
font-size: 2.5em;
+ display: inline-flex;
}
.isitweeka h4 {
font-size: 1.5em;
+ display: inline-flex;
}
.isitweeka a {
color: #00B0FF;
+}
+
+.events * {
+ text-align: left;
+}
+
+/* Button */
+
+button {
+ color: inherit;
+ font-size: 1.5em;
+ font-weight: 500;
+ line-height: 26px;
+ text-transform: lowercase;
+ text-decoration: none;
+ transition-duration: 100ms;
+ position: relative;
+ cursor: pointer;
+ display: inline-flex;
+ flex-direction: row;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ background: transparent;
+ border: none;
+}
+
+button.forward {
+ margin: 0 auto;
+ width: auto;
+}
+
+button.back {
+ height: 100%;
+ justify-content: center;
+ flex-direction: column;
+}
+
+button.forward::after {
+ content: url("./appbar.arrow.right.svg");
+ /*content: url(#icon);*/
+ width: 48px;
+ height: 48px;
+ margin: -8px;
+ padding-left: 8px;
+ fill: var(--icon-fill);
+ filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(130deg) brightness(119%) contrast(116%);
+}
+
+button.back::before {
+ content: url("./appbar.arrow.left.svg");
+ /*content: url(#icon);*/
+ width: 48px;
+ height: 48px;
+ margin: -8px;
+ /*margin-left: -24px;*/
+ padding-right: 16px;
+ fill: var(--icon-fill);
+ filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(130deg) brightness(119%) contrast(116%);
+}
+
+button.forward::before {
+ content: "";
+ /* background-image: linear-gradient(to right, var(--rykan-accent-primary), var(--rykan-accent-secondary)); */
+ background-color: var(--rykan-accent-primary);
+ position: absolute;
+ height: 3px;
+ width: 100%;
+ left: 0;
+ bottom: -4px;
+ transition-duration: 100ms;
+ pointer-events: none;
+ transform: scaleX(0);
+ transform-origin: 0 0;
+}
+
+button.forward:hover::before {
+ transform: scaleX(1);
+}
+
+button.back::after {
+ content: "";
+ /* background-image: linear-gradient(to right, var(--rykan-accent-primary), var(--rykan-accent-secondary)); */
+ background-color: var(--rykan-accent-primary);
+ position: absolute;
+ height: 3px;
+ width: 100%;
+ left: 0;
+ bottom: -4px;
+ transition-duration: 100ms;
+ pointer-events: none;
+ transform: scaleX(0);
+ transform-origin: 0 0;
+}
+
+
+
+.events-list {
+ display: flex;
+ height: 50%;
+ flex-direction: column;
+}
+
+.events-list > * > div {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+}
+
+.events-row {
+ display: flex;
+ width: 100%;
+ min-height: 320px;
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
+ border-bottom-color: var(--link-active);
+ margin: 0 -5vw;
+ padding: 0 5vw;
+}
+
+
+
+:root {
+ --rykan-accent-primary: #F10DA2;
+ --rykan-accent-secondary: #FE5000;
+ background: black;
+ color: white;
+ --icon-fill: white;
+ --link-active: rgba(255, 255, 255, 0.6);
}
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ee0da70b..0a9006a5 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -25,9 +25,13 @@ import { Navbar } from "react-bootstrap";
);
}*/
+const baseEventImageStyle = {
+ backgroundSize: "contain", backgroundRepeat: "no-repeat", backgroundPosition: "center", display: "flex", flex: 1, margin: "auto", width: "90%", maxHeight: "80%"
+};
+
/**
* YES I KNOW THIS IS A BAD IDEA!!!!!!
- * But it's more convient
+ * But it's more convient
* And i've limited it's use
* And it's only for access to a public read-only
*/
@@ -132,12 +136,12 @@ class App extends Component<{}, TheState> {
this.setState({
isWeekend: true,
})
- }
+ }
const startTime = weekStart.toISOString()
const endTime = weekEnd.toISOString();
-
+
// The "Calendar ID" from your calendar settings page, "Calendar Integration" secion:
const calendarId = 'calendar@camphillboys.bham.sch.uk';
@@ -147,7 +151,7 @@ class App extends Component<{}, TheState> {
// b) Create Credentials / API key
// c) Since your key will be called from any of your users' browsers, set "Application restrictions" to "None",
// leave "Website restrictions" blank; you may optionally set "API restrictions" to "Google Calendar API"
-
+
// You can get a list of time zones from here: http://www.timezoneconverter.com/cgi-bin/zonehelp
const userTimeZone = "Europe/London";
@@ -211,7 +215,8 @@ class App extends Component<{}, TheState> {
<>
It is neither Week A or B.
This means it's probably a holiday.
- If you believe this is in error, please email info@isitweeka.com
+
+ If you believe this is in error, please email info@isitweeka.com
)
} else {
@@ -220,11 +225,26 @@ class App extends Component<{}, TheState> {
{this.state.isWeekend ? "Next week will be" : "It is"}
{/* Special case for weekend, where we show next week*/}
Week {this.state.week}
More coming soon...
+
)
}
}
+ scrollDown() {
+ window.scrollTo({
+ top: window.innerHeight,
+ behavior: "smooth",
+ });
+ }
+
+ scrollUp() {
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+ }
+
render() {
return (
@@ -239,6 +259,32 @@ class App extends Component<{}, TheState> {
IT BEGINS.
More coming soon
*/}
+
+
Upcoming Events
+
+
+
+
+ {/*
[IMAGE SET AS BACKGROUND OF THIS DIV]
*/}
+
+
+
+
Would I Lie To You?
+
+ On sale now!
+
+
+
+
+
[IMAGE SET AS BACKGROUND OF THIS DIV]
+
+
+
Event Number Two?
+ Tickets on sale 03/02/21
+
+
+
+