Add Events Section

Gum-Joe · Dec 27, 2020 · ad30c60 · ad30c60
1 parent 5ba37e6
commit ad30c60
Show file tree

Hide file tree

Showing 8 changed files with 211 additions and 5 deletions.
diff --git a/frontend/public/Logo_Export_Trans_but_not_on_HRT.png b/frontend/public/Logo_Export_Trans_but_not_on_HRT.png
diff --git 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);
 }
diff --git 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> {
         <>
           <h2>It is neither Week A or B.</h2>
           <h3>This means it's probably a holiday.</h3>
-          <h4>If you believe this is in error, please email <a href="mailto:info@isitweeka.com">info@isitweeka.com</a></h4>
+          <button className="forward" onClick={this.scrollDown}><div>events</div></button>
+          <h5>If you believe this is in error, please email <a href="mailto:info@isitweeka.com">info@isitweeka.com</a></h5>
         </>
       )
     } else {
@@ -220,11 +225,26 @@ class App extends Component<{}, TheState> {
           <h2>{this.state.isWeekend ? "Next week will be" : "It is"}</h2> {/* Special case for weekend, where we show next week*/}
           <h1>Week {this.state.week}</h1>
           <h4>More coming soon...</h4>
+          <button className="forward" onClick={this.scrollDown}><div>events</div></button>
         </>
       )
     }
   }
 
+  scrollDown() {
+    window.scrollTo({
+      top: window.innerHeight,
+      behavior: "smooth",
+    });
+  }
+
+  scrollUp() {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }
+
   render() {
     return (
       <div className="App">
@@ -239,6 +259,32 @@ class App extends Component<{}, TheState> {
           <h1>IT BEGINS.</h1>
           <h3>More coming soon</h3>*/}
         </div>
+        <div className="isitweeka events">
+          <h2><button onClick={this.scrollUp} className="back" /> Upcoming Events</h2>
+          <div className="events-list">
+            <div className="events-row" style={{ backgroundColor: "#2C1F39" }}>
+              <div>
+				<div style={{ backgroundImage: `url("/Logo_Export_Trans_but_not_on_HRT.png")`, ...baseEventImageStyle }}>
+				  {/*<h4>[IMAGE SET AS BACKGROUND OF THIS DIV]</h4>*/}
+				</div>
+              </div>
+              <div>
+                <h3>Would I Lie To You?</h3>
+                <button className="forward">Buy Tickets</button>
+                <h4>On sale now!</h4>
+              </div>
+            </div>
+            <div className="events-row">
+				<div style={{ ...baseEventImageStyle }}>
+				  <h4>[IMAGE SET AS BACKGROUND OF THIS DIV]</h4>
+				</div>
+				<div>
+				  <h3>Event Number Two?</h3>
+				  <h4>Tickets on sale 03/02/21</h4>
+				</div>
+            </div>
+          </div>
+        </div>
 
         {/* Cookie consent */}
         <Navbar fixed="bottom">

diff --git a/frontend/src/Logo_Export_Trans_but_not_on_HRT.png b/frontend/src/Logo_Export_Trans_but_not_on_HRT.png
diff --git a/frontend/src/appbar.arrow.down.svg b/frontend/src/appbar.arrow.down.svg
diff --git a/frontend/src/appbar.arrow.left.svg b/frontend/src/appbar.arrow.left.svg
diff --git a/frontend/src/appbar.arrow.right.svg b/frontend/src/appbar.arrow.right.svg
diff --git a/frontend/src/appbar.arrow.up.svg b/frontend/src/appbar.arrow.up.svg