Merge pull request #43 from abakus-ntnu/feat/arr-styling

Feat/arr styling
abakus-ntnu · Feb 11, 2020 · 76180ad · 76180ad
2 parents bcb5383 + 9b5d76a
commit 76180ad
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 105 deletions.
diff --git a/src/Events/UpcomingEvents/UpcomingEvents.css b/src/Events/UpcomingEvents/UpcomingEvents.css
@@ -2,9 +2,9 @@
   text-align: center;
   white-space: nowrap;
   background-color: #ffffff;
-  margin: 20px;
-  padding: 50px;
-  border-radius: 10px;
+  margin: 40px 0;
+  padding: 10px;
+  border-radius: 0 0 14px 14px;
   box-shadow: 0px 5px 20px rgb(71, 71, 71);
 }
 
@@ -13,12 +13,15 @@
   white-space: pre;
 }
 
+.signup-wrapper {
+  display: flex;
+}
+
 .split {
   height: 100%;
   width: 50%;
   top: 0;
   overflow-x: hidden;
-  padding-top: 70px;
   text-align: center;
 }
 
@@ -31,24 +34,37 @@
 }
 
 .title {
-  font-size: 270%;
+  font-size: 2.3em;
+  color: white;
+  text-align: left;
+  margin: 0;
+}
+
+.event-title {
+  text-transform: uppercase;
+  font-size: 2.5em;
+}
+
+.event-title,
+.event-information {
+  margin: 20px;
 }
 
-.title-line.green {
-  background-color: #a1c34a;
+.border-green {
+  border-top: 5px solid #a1c34a;
 }
-.title-line.yellow {
-  background-color: rgb(252, 215, 72);
+.border-yellow {
+  border-top: 5px solid rgb(252, 215, 72);
 }
-.title-line.black {
-  background-color: #111;
+.border-black {
+  border-top: 5px solid#111;
 }
-.title-line.blue {
-  background-color: #52b0ec;
+.border-blue {
+  border-top: 5px solid#52b0ec;
 }
-.title-line.red {
-  background-color: #b11c11;
+.border-red {
+  border-top: 5px solid #b11c11;
 }
-.title-line.purple {
-  background-color: rgb(138, 43, 226);
+.border-purple {
+  border-top: 5px solid rgb(138, 43, 226);
 }
diff --git a/src/Events/UpcomingEvents/UpcomingEvents.js b/src/Events/UpcomingEvents/UpcomingEvents.js
@@ -1,56 +1,66 @@
-import React, { Component } from 'react';
-import { func, arrayOf, object } from 'prop-types';
-import { connect } from 'react-redux';
-import { fetchEvents } from '../../store/modules/events';
-import UpcomingHalfEvents from './UpcomingHalfEvents';
-import './UpcomingEvents.css';
-
+import React, { Component } from "react";
+import { func, arrayOf, object } from "prop-types";
+import { connect } from "react-redux";
+import { fetchEvents } from "../../store/modules/events";
+import UpcomingHalfEvents from "./UpcomingHalfEvents";
+import "./UpcomingEvents.css";
 
 class UpcomingEventsComponent extends Component {
   static propTypes = {
     get: func,
-    data: arrayOf(object),
-  }
+    data: arrayOf(object)
+  };
 
   static defaultProps = {
     get: () => {},
-    data: [],
-  }
+    data: []
+  };
 
   componentDidMount() {
     const { get } = this.props;
     get();
   }
 
-  getBusinessEvents = (data) => {
-    const eventTypeList = ['company_presentation', 'course', 'KID_event', 'lunch_presentation', 'alternative_presentation'];
+  getBusinessEvents = data => {
+    const eventTypeList = [
+      "company_presentation",
+      "course",
+      "KID_event",
+      "lunch_presentation",
+      "alternative_presentation"
+    ];
     const list = data.filter(event => eventTypeList.includes(event.eventType));
-    return (
-      list.slice(0, 3)
-    );
-  }
+    return list.slice(0, 3);
+  };
 
-  getPartyEvents = (data) => {
-    const eventTypeList = ['social', 'party', 'event', 'other'];
+  getPartyEvents = data => {
+    const eventTypeList = ["social", "party", "event", "other"];
     const list = data.filter(event => eventTypeList.includes(event.eventType));
-    return (
-      list.slice(0, 3)
-    );
-  }
+    return list.slice(0, 3);
+  };
 
   renderEvent() {
     const { data } = this.props;
     if (data[0]) {
       if (data[0].title) {
         return (
           <div>
-            <div className="split left">
-              <h1 className="title">Bedriftsarrangement</h1>
-              <UpcomingHalfEvents events={this.getBusinessEvents(data)} className="half" />
-            </div>
-            <div className="split right">
-              <h1 className="title">Sosialarrangement</h1>
-              <UpcomingHalfEvents events={this.getPartyEvents(data)} className="half" />
+            <p className="main-title">KALENDER</p>
+            <div className="signup-wrapper">
+              <div className="split left">
+                <UpcomingHalfEvents
+                  events={this.getBusinessEvents(data)}
+                  className="half"
+                  title={"Bedriftspresentasjon & Kurs"}
+                />
+              </div>
+              <div className="split right">
+                <UpcomingHalfEvents
+                  events={this.getPartyEvents(data)}
+                  className="half"
+                  title={"Sosialarrangement"}
+                />
+              </div>
             </div>
           </div>
         );
@@ -69,20 +79,19 @@ class UpcomingEventsComponent extends Component {
   }
 
   render() {
-    return (
-      <div id="signup-wrapper">
-        {this.renderEvent()}
-      </div>
-    );
+    return <React.Fragment>{this.renderEvent()}</React.Fragment>;
   }
 }
 
 const mapStateToProps = state => ({ data: state.events.data });
 
 const mapDispatchToProps = dispatch => ({
-  get: () => dispatch(fetchEvents()),
+  get: () => dispatch(fetchEvents())
 });
 
-const UpcomingEvents = connect(mapStateToProps, mapDispatchToProps)(UpcomingEventsComponent);
+const UpcomingEvents = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(UpcomingEventsComponent);
 
 export default UpcomingEvents;
diff --git a/src/Events/UpcomingEvents/UpcomingHalfEvents.js b/src/Events/UpcomingEvents/UpcomingHalfEvents.js
@@ -1,14 +1,14 @@
-import React from 'react';
-import UpcomingSingleEvent from './UpcomingSingleEvent';
-import './UpcomingEvents.css';
+import React from "react";
+import UpcomingSingleEvent from "./UpcomingSingleEvent";
+import "./UpcomingEvents.css";
 
-const HalfSignupEvents = ({ events }) => (
-  <div className="half-wrapper">
+const HalfSignupEvents = ({ events, title }) => (
+  <div>
+    <h1 className="title">{title}</h1>
     <UpcomingSingleEvent event={events[0]} />
     <UpcomingSingleEvent event={events[1]} />
     <UpcomingSingleEvent event={events[2]} />
   </div>
 );
 
-
 export default HalfSignupEvents;
diff --git a/src/Events/UpcomingEvents/UpcomingSingleEvent.js b/src/Events/UpcomingEvents/UpcomingSingleEvent.js
@@ -1,51 +1,49 @@
-import React from 'react';
-import './UpcomingEvents.css';
+import React from "react";
+import "./UpcomingEvents.css";
 import {
   dateToFormattedDate,
-  dateToFormattedTime,
-} from '../../components/Time/eventTime';
+  dateToFormattedTime
+} from "../../components/Time/eventTime";
 
 function getCapacity(totalCapacity, registrationCount) {
   return totalCapacity === 0
-    ? 'Ingen påmelding!'
+    ? "Ingen påmelding!"
     : `${registrationCount}/${totalCapacity} påmeldt`;
 }
 
 function getTitleLineColor(eventType) {
   const eventNames = {
-    company_presentation: 'green',
-    course: 'blue',
-    KID_event: 'green',
-    lunch_presentation: 'green',
-    social: 'red',
-    party: 'yellow',
-    event: 'red',
-    other: 'black',
-    alternative_presentation: 'purple',
+    company_presentation: "green",
+    course: "blue",
+    KID_event: "green",
+    lunch_presentation: "green",
+    social: "red",
+    party: "yellow",
+    event: "red",
+    other: "black",
+    alternative_presentation: "purple"
   };
   return eventNames[eventType];
 }
 
 const SingleSignupEvent = ({ event }) => {
   const {
     id = 0,
-    title = 'Tittel',
-    eventType = 'EventType',
+    title = "Tittel",
+    eventType = "EventType",
     startTime = new Date().toJSON(),
     totalCapacity = 0,
-    registrationCount = 0,
+    registrationCount = 0
   } = event;
 
   return (
-    <div className="upcoming-wrapper" key={id}>
-      <h1>{title}</h1>
-      <div className={`title-line ${getTitleLineColor(eventType)}`} />
-      <div className="start-time">
-        {dateToFormattedDate(startTime)}
-        |
-        {dateToFormattedTime(startTime)}
-      </div>
-      <div className="capacity">
+    <div
+      className={`upcoming-wrapper border-${getTitleLineColor(eventType)}`}
+      key={id}
+    >
+      <h1 className="event-title">{title}</h1>
+      <div className="event-information">
+        {dateToFormattedDate(startTime)} {dateToFormattedTime(startTime)} |{" "}
         {getCapacity(totalCapacity, registrationCount)}
       </div>
     </div>

diff --git a/src/Main.css b/src/Main.css
@@ -43,11 +43,15 @@ div {
   z-index: 0;
 }
 
+.wrapper {
+  margin: 80px 0;
+}
+
 .main-title {
   color: white;
   text-align: center;
   height: 20vh;
   margin: 0;
-  font-weight: 750;
-  font-size: 110px;
+  font-weight: bolder;
+  font-size: 90px;
 }
diff --git a/src/Main.js b/src/Main.js
@@ -1,13 +1,13 @@
-import React, { Component } from 'react';
-import { func, shape } from 'prop-types';
-import { connect } from 'react-redux';
-import Time from './components/Time/index';
-import Bus from './Bus/Bus';
-import PromotedEvents from './Events/Events';
-import UpcomingEvents from './Events/UpcomingEvents/UpcomingEvents';
-import Abakus from './components/Abakus';
-import { fetchNextComponent } from './store/modules/animation';
-import './Main.css';
+import React, { Component } from "react";
+import { func, shape } from "prop-types";
+import { connect } from "react-redux";
+import Time from "./components/Time/index";
+import Bus from "./Bus/Bus";
+import PromotedEvents from "./Events/Events";
+import UpcomingEvents from "./Events/UpcomingEvents/UpcomingEvents";
+import Abakus from "./components/Abakus";
+import { fetchNextComponent } from "./store/modules/animation";
+import "./Main.css";
 
 class MainComponent extends Component {
   static propTypes = {
@@ -31,11 +31,11 @@ class MainComponent extends Component {
   renderComponent() {
     const { data } = this.props;
     switch (data.currentComponent) {
-      case 'bus':
+      case "bus":
         return <Bus />;
-      case 'events':
+      case "events":
         return <PromotedEvents />;
-      case 'signup':
+      case "signup":
         return <UpcomingEvents />;
       default:
         return <Bus />;
@@ -44,12 +44,15 @@ class MainComponent extends Component {
 
   render() {
     return (
-      <div className='main'>
-        {/* <React.Fragment>
+      <div className="main">
+        <div className="wrapper">
+          <UpcomingEvents />;
+          {/* <React.Fragment>
           <Time displayTime />
         </React.Fragment> */}
-        { this.renderComponent() }
-        {/* <Abakus /> */}
+          {/* this.renderComponent() */}
+          {/* <Abakus /> */}
+        </div>
       </div>
     );
   }