From 71a16383eeb81d301caa10e42d1446b773f4ca24 Mon Sep 17 00:00:00 2001
From: brandon <41245867+murphybrandon@users.noreply.github.com>
Date: Fri, 1 Mar 2019 12:40:00 -0500
Subject: [PATCH 1/2] front-end v.002 styling
---
src/app/.gitignore | 2 +-
.../components/EventCards/EventCreator.jsx | 14 ++++---
src/app/styles/Events.jsx | 39 ++++++++++++++++++-
src/app/styles/Nav.jsx | 18 +++++----
src/app/styles/SplitPane.jsx | 14 ++++---
5 files changed, 67 insertions(+), 20 deletions(-)
diff --git a/src/app/.gitignore b/src/app/.gitignore
index f06235c..76add87 100644
--- a/src/app/.gitignore
+++ b/src/app/.gitignore
@@ -1,2 +1,2 @@
node_modules
-dist
+dist
\ No newline at end of file
diff --git a/src/app/components/EventCards/EventCreator.jsx b/src/app/components/EventCards/EventCreator.jsx
index 3bbe106..b673d83 100644
--- a/src/app/components/EventCards/EventCreator.jsx
+++ b/src/app/components/EventCards/EventCreator.jsx
@@ -1,12 +1,16 @@
import React from 'react';
+import { EventCard, EventTimeDiv } from '../../styles/Events.jsx';
+
export default function EventCreator(props) {
// renders individual action
- const { action, id, addAction } = props;
-
+ const { action, id, addAction, actionTime } = props;
+ console.log(EventCard);
return (
-
- {action}
-
+
+ ☰ {action}
+ {actionTime || '00:00:01'}
+
+
);
}
diff --git a/src/app/styles/Events.jsx b/src/app/styles/Events.jsx
index 788e055..50858dc 100644
--- a/src/app/styles/Events.jsx
+++ b/src/app/styles/Events.jsx
@@ -2,5 +2,40 @@ import styled from 'styled-components';
// formats the events display
export const EventsWrapper = styled.div`
- margin: 17px 17px;
-`;
\ No newline at end of file
+ /* margin: 17px 17px; */
+ /* padding-top: 2%; */
+ /* padding-bottom: 2%; */
+ height: 79%;
+ overflow: auto;
+`;
+
+
+
+// events actions bar
+export const EventCard = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 50px;
+ color: black;
+ padding-left: 5%;
+ padding-right: 5%;
+ border-bottom: 1px solid black;
+ cursor: pointer;
+
+ &:hover {
+ color: white;
+ border-bottom: 1px solid blue;
+ }
+`;
+
+export const EventTimeDiv = styled.div`
+ height: 15px;
+ width: 25%;
+ text-align: center;
+ /* background-color: black; */
+ color: black;
+ padding: 1%;
+ border-radius: 25px;
+ border: 1px solid black;
+`;
diff --git a/src/app/styles/Nav.jsx b/src/app/styles/Nav.jsx
index d1dd1b1..2371c9c 100644
--- a/src/app/styles/Nav.jsx
+++ b/src/app/styles/Nav.jsx
@@ -2,22 +2,24 @@ import styled from "styled-components";
// events nav wrapper
export const EventsNavWrapper = styled.div`
- background-color: lightyellow;
+ background-color: #000;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 17%;
- border-bottom: 1px solid black;
+ border-bottom: 4px double blue;
+ color: white;
`;
// details nav wrapper
export const DetailsNavWrapper = styled.div`
- background-color: lavenderblush;
+ background-color: #000;
width: 100%;
height: 17%;
- border-bottom: 1px solid black;
+ border-bottom: 4px double blue;
+ color: white;
`;
@@ -34,11 +36,12 @@ export const Buttons = styled.div`
height: 100%;
width: 100%;
text-decoration: none;
- color: black;
+ color: white;
&.active {
color: white;
- background-color: lavender;
+ background-color: blue;
+ /* border-bottom: 3px solid white; */
}
}
@@ -60,8 +63,9 @@ export const Button = styled.div`
}
:hover {
- background: lavender;
+ background: blue;
color: white;
+ /* border-bottom: 3px solid black; */
}
`;
diff --git a/src/app/styles/SplitPane.jsx b/src/app/styles/SplitPane.jsx
index 82cebbb..262734c 100644
--- a/src/app/styles/SplitPane.jsx
+++ b/src/app/styles/SplitPane.jsx
@@ -1,22 +1,26 @@
import styled from 'styled-components';
export const PaneWrapper = styled.div`
- font-family: Arial;
- background-color:lightblue;
+ font-family: "courier new";
+ font-weight: 400;
+ font-size: .80em;
+ color: white;
+ background-color:#393939;
height: 350px;
display: flex;
justify-content: space-around;
`;
export const LeftPane = styled.div`
- background-color: Ghostwhite;
- border-right: 1px solid black;
+ background-color: #393939;
+ border-right: 3px solid white;
height: 100%;
width: 43%;
`;
export const RightPane = styled.div`
- background-color: honeydew;
+ color: white;
+ background-color: #393939;
height: 100%;
width: 57%;
`;
From e564c21ecd96ffabf01f8651b3504c4f3a039ce6 Mon Sep 17 00:00:00 2001
From: brandon <41245867+murphybrandon@users.noreply.github.com>
Date: Fri, 1 Mar 2019 13:31:48 -0500
Subject: [PATCH 2/2] front-end v.003 --- most recent updates to styling are
shown
---
src/app/components/App.jsx | 53 ++++++++++++++++++++++++++++----------
1 file changed, 39 insertions(+), 14 deletions(-)
diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx
index 6bf1a17..d62c635 100644
--- a/src/app/components/App.jsx
+++ b/src/app/components/App.jsx
@@ -1,4 +1,5 @@
import React, { useContext, Component } from 'react';
+import { createGlobalStyle } from 'styled-components';
// data
import data from '../data.jsx'
@@ -10,6 +11,27 @@ import SplitPane from '../container/SplitPane.jsx';
import Events from '../container/Events.jsx';
import Details from '../container/Details.jsx';
+const GlobalStyle = createGlobalStyle`
+ html {
+ box-sizing: border-box;
+ font-size: 10px;
+ height: 100%;
+ width: 100%;
+ }
+ * *:before, *:after {
+ box-sizing: inherit;
+ }
+ body {
+ padding: 0;
+ margin: 0;
+ font-size: 1.5rem;
+ line-height: 2;
+ height: 100%;
+ width: 100%;
+ }
+`;
+
+
class App extends Component {
constructor(props) {
super(props);
@@ -71,20 +93,23 @@ class App extends Component {
action, id, payload, state, data
} = this.state;
return (
-
- }
- right={
- (
-