Skip to content

Commit

Permalink
styling changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@lightertu
lightertu committed Jun 8, 2017
2 parents ca2e422 + 72b6b4b commit 64ef3ce
Show file tree
Hide file tree
Showing 5 changed files with 157 additions and 20 deletions.
15 changes: 10 additions & 5 deletions src/routes/Activity/components/GroupCard/GroupCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,20 +123,25 @@ class GroupCard extends React.Component {
(responses.size < (index + 1)) ?
(responses = responses
.push(Map({question:response.get('question'),
answer:response.get('answer')})))
answers:List(response.get('answer')),
answersInCommon:response.get('answer')
})))
:
(responses = responses
.updateIn([index, 'answer'], answer => {
((responses = responses
.updateIn([index, 'answers'], answer => {
return answer.concat(response.get('answer'))
})) && (responses = responses
.updateIn([index, 'answersInCommon'], answer => {
return answer.intersect(response.get('answer'))
}))
})))
})
});

let answerSegments = [];
responses.forEach((response, index) => {
(renderFunctions[response.get('question')]) &&
answerSegments.push(
renderFunctions[response.get('question')](response.get('answer'), index)
renderFunctions[response.get('question')](response.get('answers'), index, this.props.participants.length, response.get('answersInCommon'))
);
})

Expand Down
37 changes: 24 additions & 13 deletions src/routes/Activity/components/GroupCard/renderFunctions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,21 @@ import {Map, List, Set} from 'immutable';
import {Card, Popup, Image, Label, Button, Icon, Segment} from 'semantic-ui-react'
import getColorByLanguage from "../../modules/LanguageColorMap";

const answersStyle = {
paddingTop: "1%",
const radioAnswersStyle = {
paddingTop: "0%",
paddingBottom: "1%",
paddingLeft: "3%",
backgroundColor: "#F4F5F7"
}

function TimeAvailability (answers, sIndex) {
const answersStyle = {
paddingTop: "0%",
paddingBottom: "1%",
paddingLeft: "2%",
backgroundColor: "#F4F5F7"
}
function TimeAvailability (dontReallyCare, sIndex, dontCare, answers) {

let weekdays= ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let labels = [];
weekdays.forEach((day, index) => {
Expand Down Expand Up @@ -43,7 +50,8 @@ function TimeAvailability (answers, sIndex) {
);
}

function ProgrammingLanguages (answers, sIndex) {
function ProgrammingLanguages (answers, sIndex, totalPars) {
let count = answers.countBy(x => {return x});
return (
<Segment key = {"PLGCR_SEGMENT_" + sIndex} basic style={ {
paddingTop: "1%",
Expand All @@ -53,34 +61,37 @@ function ProgrammingLanguages (answers, sIndex) {
} }>
<Label.Group style={ {marginTop: "-1%"} } size="medium">
{
answers.map((answer, index) =>
<Label as='a' key={"GC_" + sIndex + "_PLGCR_"+index+"_"+answer}
style = {{backgroundColor: getColorByLanguage(answer), color: "white"}} >
{ answer }
count.map((number, language) =>
<Label as='a' key={"GC_" + sIndex + "_PLGCR_"+language+"_"+number}
style = {{backgroundColor: getColorByLanguage(language), color: "white"}} >
{language}
<Label.Detail style={ {color: "white"} }>
{Math.floor((number / totalPars) * 100)}%
</Label.Detail>
</Label>)
}
</Label.Group>
</Segment>
);
}

function CircleSelection (answers, sIndex) {
function CircleSelection (dontReallyCare, sIndex, dontCare, answers) {
let labels = [];
weekdays.forEach((day, index) => {
labels.push(<Label circular key = {"GC_" + sIndex + "_CSGCR_"+index+"_"+day }
answers.forEach((answer, index) => {
labels.push(<Label circular key = {"GC_" + sIndex + "_CSGCR_"+index+"_"+answer}
as='a' color="green">{ day[0] }
</Label>)
})
return (
<Segment basic key = {"CSGCR_SEGMENT_" + sIndex} style={ answersStyle }>
<Segment basic key = {"CSGCR_SEGMENT_" + sIndex} style={ radioAnswersStyle}>
<Label.Group circular size={"big"} style={ {marginLeft: "2%", paddingTop: "2%"} }>
{labels}
</Label.Group>
</Segment>
);
}

function MultiInputTextField (answers, sIndex) {
function MultiInputTextField (dontCare, sIndex, dontCareEither, answers) {
return (
<Segment basic key = {"MTFGCR_SEGMENT_" + sIndex} >
<Label.Group style={ {marginTop: "-1%"} } size="medium">
Expand Down
120 changes: 120 additions & 0 deletions src/routes/Activity/components/GroupCard/renderFunctions.js.orig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
/*
* Created by Matt on 05/25/17
* This file defines a List of Maps containing the question types and what features they might use
*/

import React from 'react'
import {Map, List, Set} from 'immutable';
import {Card, Popup, Image, Label, Button, Icon, Segment} from 'semantic-ui-react'
import getColorByLanguage from "../../modules/LanguageColorMap";

<<<<<<< HEAD
function TimeAvailability (dontReallyCare, sIndex, dontCare, answers) {

=======
const answersStyle = {
paddingTop: "0%",
paddingBottom: "1%",
paddingLeft: "0%",
backgroundColor: "#F4F5F7"
}

function TimeAvailability (answers, sIndex) {
>>>>>>> 1cd6307f3ab4d7ba17922bf6df669edd6632288a
let weekdays= ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let labels = [];
weekdays.forEach((day, index) => {
(answers.has(day)) ?
labels.push(<Label circular key = {"GC_" + sIndex + "_TAGCR_"+index+"_"+day }
as='a' color="green">{ day[0] }
</Label>)
:
labels.push(<Label circular key = {"GC_" + sIndex + "_TAGCR_"+index+"_"+day }
as='a'>{ day[0] }
</Label>)
})
return (
<Segment basic key = {"TAGCR_SEGMENT_" + sIndex} style={ answersStyle }>
<Label.Group circular size={"big"} style={ {marginLeft: "2%", paddingTop: "2%"} }>
{labels}
</Label.Group>
</Segment>
);
}

function ProgrammingLanguages (answers, sIndex, totalPars) {
let count = answers.countBy(x => {return x});
return (
<Segment key = {"PLGCR_SEGMENT_" + sIndex} basic style={ answersStyle }>
<Label.Group style={ {marginTop: "-1%"} } size="medium">
{
count.map((number, language) =>
<Label as='a' key={"GC_" + sIndex + "_PLGCR_"+language+"_"+number}
style = {{backgroundColor: getColorByLanguage(language), color: "white"}} >
{language}
<Label.Detail style={ {color: "white"} }>
{Math.floor((number / totalPars) * 100)}%
</Label.Detail>
</Label>)
}
</Label.Group>
</Segment>
);
}

function CircleSelection (dontReallyCare, sIndex, dontCare, answers) {
let labels = [];
answers.forEach((answer, index) => {
labels.push(<Label circular key = {"GC_" + sIndex + "_CSGCR_"+index+"_"+answer}
as='a' color="green">{ day[0] }
</Label>)
})
return (
<Segment basic key = {"CSGCR_SEGMENT_" + sIndex} style={ answersStyle }>
<Label.Group circular size={"big"} style={ {marginLeft: "2%", paddingTop: "2%"} }>
{labels}
</Label.Group>
</Segment>
);
}

function MultiInputTextField (dontCare, sIndex, dontCareEither, answers) {
return (
<Segment basic key = {"MTFGCR_SEGMENT_" + sIndex} >
<Label.Group style={ {marginTop: "-1%"} } size="medium">
{
answers.map((answer, index) =>
<Label as='a' key={"GC_" + sIndex + "_MTFGCR_"+index+"_"+answer}
style = {{backgroundColor: 'grey', color: "white"}} >
{ answer }
</Label>)
}
</Label.Group>
</Segment>
);
}

function SingleInputTextField (answers, sIndex) {
return (
<Segment basic key = {"STFGCR_SEGMENT_" + sIndex} style={ answersStyle }>
<Label.Group style={ {marginTop: "-1%"} } size="medium">
{
answers.map((answer, index) =>
<Label as='a' key={"GC_" + sIndex + "_STFGCR_"+index+"_"+answer}
style = {{backgroundColor: 'grey', color: "white"}} >
{ answer }
</Label>)

}
</Label.Group>
</Segment>
);
}

export {
TimeAvailability,
ProgrammingLanguages,
CircleSelection,
MultiInputTextField,
SingleInputTextField,
}
1 change: 1 addition & 0 deletions src/routes/Dashboard/modules/actions/fetchActivityListActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ let fetchActivityList = (dispatch) => {
dispatch(fetchActivityListSuccess(response.data));
})
.catch((error) => {
console.log(error);
dispatch(fetchActivityListFailure(error));
});
}
Expand Down
4 changes: 2 additions & 2 deletions src/routes/Login/components/LoginView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ class LoginView extends Component {
</Form>
</Segment>
<Message>
New to us? <a style={{cursor: 'pointer'}} onClick={this.redirectToSignup}>Sign up</a>
New to Groupify? <a style={{cursor: 'pointer'}} onClick={this.redirectToSignup}>Sign up</a>
</Message>
</Grid.Column>
</Grid>
Expand All @@ -80,4 +80,4 @@ class LoginView extends Component {

}

export default LoginView
export default LoginView

0 comments on commit 64ef3ce

Please sign in to comment.