From 6f8451009a077e4f28ba7eb76281ceacb3259f86 Mon Sep 17 00:00:00 2001 From: Francesca Cavuoti Date: Sun, 16 May 2021 14:40:58 -0400 Subject: [PATCH 1/4] Modified second col layout, changed styling and contents of MoreDormInfoBlock, added Filters section --- .../src/components/MoreDormInfoBlock.js | 66 ++++++++++------ src/client/src/containers/Reviews.js | 77 ++++++++++++++++--- 2 files changed, 110 insertions(+), 33 deletions(-) diff --git a/src/client/src/components/MoreDormInfoBlock.js b/src/client/src/components/MoreDormInfoBlock.js index 7c909ac8..144719e0 100644 --- a/src/client/src/components/MoreDormInfoBlock.js +++ b/src/client/src/components/MoreDormInfoBlock.js @@ -4,26 +4,36 @@ import { theme } from "../util/GlobalStyles"; const DormInfoBlock = styled.div` display: flex; - flex-wrap: wrap; + flex-direction: column; border: 0.05rem solid ${theme.columbiaBlue}; border-radius: 2%; - padding: 2rem; + padding: .5rem 2rem; margin-top: 1rem; `; -const Bold = styled.div` +const Bold = styled.p` font-weight: 800; + margin-right: .2rem; + font-size: inherit; `; -const Regular = styled.div``; +const Italic = styled.p` + font-style: italic; + margin-right: .2rem; + font-size: inherit; +`; + +const Regular = styled.p` + margin-right: .2rem; + font-size: inherit; +`; const TitleBlock = styled.div` display: flex; - flex-direction: column; - flex-wrap: wrap; - margin-bottom: 1.5rem; - width: 50%; + flex-direction: row; + justify-content: flex-start; + margin: .75rem 0; @media (max-width: 786px) { font-size: 17px; @@ -48,17 +58,17 @@ export default class MoreDormInfoBlock extends Component { let length = string.split(',').length; if (length === 1) { - return string.charAt(0).toUpperCase() + string.slice(1) + return string.charAt(0).toUpperCase() + string.slice(1, -1) } let stringArr = string.split(',').map((word, index) => { if (index === length - 1) { - return "& " + word.charAt(0).toUpperCase() + word.slice(1); + return "& " + word.charAt(0).toUpperCase() + word.slice(1, -1); } else if (index === length - 2) { - return word.charAt(0).toUpperCase() + word.slice(1) + return word.charAt(0).toUpperCase() + word.slice(1, -1) } else { - return word.charAt(0).toUpperCase() + word.slice(1) + "," + return word.charAt(0).toUpperCase() + word.slice(1, -1) + "," } }) @@ -72,16 +82,16 @@ export default class MoreDormInfoBlock extends Component { let string = ""; if (single) { - string += "singles" + string += "Singles" } if (double) { if (single) { - string += "," + string += " & " } - string += "doubles" + string += "Doubles" } if (triple) { - string += ",triples" + string += " & Triples" } return this.formatList(string); @@ -94,20 +104,28 @@ export default class MoreDormInfoBlock extends Component { return ( - {this.props.dorm === "Wien Hall" ? "Singles & Doubles" : this.formatRooms(this.props.dormInfo.SINGLE_, this.props.dormInfo.DOUBLE_, this.props.dormInfo.TRIPLE_ )} - dorms + {this.props.dormInfo.SUITE ? "Suite" : "Corridor"} + style + + + {this.formatRooms(this.props.dormInfo.SINGLE_, this.props.dormInfo.DOUBLE_, this.props.dormInfo.TRIPLE_ )} + dorms + + + Lottery + #### - {this.props.dorm === "Wien Hall" ? "Sophomores, Juniors & Seniors" : this.formatList(this.props.dormInfo.CLASS_MAKEUP)} - residents + {this.props.dormInfo.F_KITCHEN ? "Per floor" : this.props.dormInfo.P_KITCHEN ? "Per suite" : "No"} + kitchen - Per Floor - {this.props.dormInfo.F_KITCHEN ? "kitchen" : "bathroom"} + {this.props.dormInfo.P_BATHROOM ? "Per suite" : "Shared"} + bathroom - Per Suite - {this.props.dormInfo.P_KITCHEN ? "kitchen" : "bathroom"} + {this.formatList(this.props.dormInfo.CLASS_MAKEUP)} + residents ) diff --git a/src/client/src/containers/Reviews.js b/src/client/src/containers/Reviews.js index e233a206..95baf28e 100644 --- a/src/client/src/containers/Reviews.js +++ b/src/client/src/containers/Reviews.js @@ -9,6 +9,7 @@ import carouselimg from "./carouselimg.jpg" import QuickReview from "../components/QuickReview"; import "react-responsive-carousel/lib/styles/carousel.min.css"; import { Carousel } from 'react-responsive-carousel'; +import { theme } from "../util/GlobalStyles"; //import WhiteboardSidebar from "../components/ReviewsWhiteboardSidebar" //import Review from "../components/Review" @@ -156,9 +157,9 @@ const ColThree = styled.div` padding: 4rem 0 2rem 1rem; ` -const QuickReviewDisplay = styled.div` +const CarouselDisplay = styled.div` width: 100%; - padding-top: 1rem; + padding: 1rem 0; ` const QuickReviewBox = styled.div` margin-top: 1rem; @@ -166,6 +167,43 @@ const QuickReviewBox = styled.div` padding-right: 1rem; ` +const DormName = styled.h1` + font-family: Raleway; + font-style: normal; + font-weight: normal; + color: ${theme.columbiaBlue}; +` +const FilterDisplay = styled.div` + +`; + +const FilterTitle = styled.div` + font-style: normal; + font-weight: 500; + font-size: 24px; + line-height: 28px; + + padding: 3rem 0 .5rem 0; + border-bottom: 3px solid; + margin-bottom: 2rem; +`; + +const Filter = styled.div` + display: flex; + flex-direction: row; + margin-bottom: 2rem; +`; + +const FilterCheckbox = styled.div``; + +const FilterText = styled.p` + font-style: normal; + font-weight: normal; + font-size: 20px; + line-height: 23px; +`; + + export default class Reviews extends Component{ constructor(props){ super(props) @@ -282,6 +320,17 @@ export default class Reviews extends Component{ } + fetchLotteryNumber(dormName){ + fetch(`/api/getLotteryNum/${dormName}`, { + method: "GET", + headers: {"Content-Type": "application/json"}, + }) + .then(res => res.json()) + .then(lotteryNums => { + this.setState({LowerBound: lotteryNums[0], UpperBound: lotteryNums[1]}) + }); + } + handleDormChange(dorm) { const firstFloor = { @@ -309,6 +358,7 @@ export default class Reviews extends Component{ this.fetchQuickReview(dorm); this.fetchDormPhotos(dorm); this.fetchMoreDormInfo(dorm) + this.fetchLotteryNums(dorm); }); } @@ -369,9 +419,8 @@ export default class Reviews extends Component{ {/*Compare Dorms*/} -

{this.state.dorm}

- {this.state.moreDormInfo ? () : (
)} - + {this.state.dorm} + {this.state.dorm_photos.filter(function (img) { if (img == 'N/A'){ return false; } @@ -382,10 +431,20 @@ export default class Reviews extends Component{ ))} - - - - + + {this.state.moreDormInfo ? () : (
)} + + Filter Reviews + + Sort by date from latest to earliest + + + Sort by date from latest to earliest + + + Sort by date from latest to earliest + + From da6bbaf1345cd22798d662131f6611ee14b5ade0 Mon Sep 17 00:00:00 2001 From: Francesca Cavuoti Date: Sun, 16 May 2021 18:10:53 -0400 Subject: [PATCH 2/4] Added updated styling to review box, need to change arrows --- .../src/components/NewReviewPageReview.js | 86 +++++++++++++++++++ src/client/src/components/Vote.js | 11 ++- src/client/src/containers/Reviews.js | 7 +- 3 files changed, 97 insertions(+), 7 deletions(-) create mode 100644 src/client/src/components/NewReviewPageReview.js diff --git a/src/client/src/components/NewReviewPageReview.js b/src/client/src/components/NewReviewPageReview.js new file mode 100644 index 00000000..3dc9468e --- /dev/null +++ b/src/client/src/components/NewReviewPageReview.js @@ -0,0 +1,86 @@ +import React, { Component } from "react"; +import "../css/Review.css"; +import styled from 'styled-components'; +import Vote from "./Vote"; + +let Wrapper = styled.div` + padding: 1.2rem 1rem 1rem 1rem; + margin-bottom: 2rem; + box-shadow: 5px 5px 10px ${props => props.theme.lightGray}; + border: 1px solid ${props => props.theme.lightGray}; +`; + +let ReviewText = styled.div` + display: flex; + flex-direction: row; + justify-content: left; + align-self: center; + font-style: normal; + font-weight: 500; + font-size: 25px; +` + +let Date = styled.div` + margin-left: auto; +` + +let InfoWrapper = styled.div` + display: flex; + justify-content: row; + align-items: center; + font-style: normal; + font-weight: 500; + font-size: 15px; + text-align: right; + padding-top: 1rem; + color: #707070; +`; + +let monthsDict = { + 1: "january", + 2: "february", + 3: "march", + 4: "april", + 5: "may", + 6: "june", + 7: "july", + 8: "august", + 9: "september", + 10: "october", + 11: "november", + 12: "december" +}; + +export default class NewReviewPageReview extends Component { + constructor(props) { + super(props); + } + + + getPublishedDate(timestamp){ + // parse year from MySQL timestamp + let posted = "posted: ".toUpperCase() + let month = monthsDict[timestamp.split('/', 3)[0]].toUpperCase() + let date = timestamp.split('/', 3)[1].substring(0, 2) + let year = timestamp.split('/', 3)[2].substring(0, 4) + let parsedDate = date + " " + month + " " + year + return ( + {posted + parsedDate} + ); + } + + render() { + let hasNoReviews = (this.props.review === "No Reviews") + return ( + + +

{this.props.review}

+ + + + {hasNoReviews ? null : this.getPublishedDate(this.props.timestamp)} + + + ); + } +} diff --git a/src/client/src/components/Vote.js b/src/client/src/components/Vote.js index 8566ebc8..e094e8d1 100644 --- a/src/client/src/components/Vote.js +++ b/src/client/src/components/Vote.js @@ -53,10 +53,13 @@ const DownIMG = styled.img` } `; -const UpText = styled.div``; - +const UpText = styled.div` +`; const DownText = styled.div``; +let agree = "agree ".toUpperCase(); +let disagree = "disagree ".toUpperCase(); + export default class Vote extends Component{ constructor(props) { super(props); @@ -130,11 +133,11 @@ export default class Vote extends Component{ - Agree {this.state.upvotes + this.state.my_upvotes} + {agree}{this.state.upvotes + this.state.my_upvotes} - Disagree {this.state.downvotes + this.state.my_downvotes} + {disagree}{this.state.downvotes + this.state.my_downvotes} ) diff --git a/src/client/src/containers/Reviews.js b/src/client/src/containers/Reviews.js index 95baf28e..bf9e6183 100644 --- a/src/client/src/containers/Reviews.js +++ b/src/client/src/containers/Reviews.js @@ -5,6 +5,7 @@ import WhiteboardSidebar from "../components/ReviewsWhiteboardSidebar" import ReviewsBox from "../components/ReviewsBox" import Review from "../components/Review" import ReviewPageReview from "../components/ReviewPageReview" +import NewReviewPageReview from "../components/NewReviewPageReview" import carouselimg from "./carouselimg.jpg" import QuickReview from "../components/QuickReview"; import "react-responsive-carousel/lib/styles/carousel.min.css"; @@ -439,17 +440,17 @@ export default class Reviews extends Component{ Sort by date from latest to earliest - Sort by date from latest to earliest + Sort by date from earliest to latest - Sort by date from latest to earliest + Sort by agree to disagree ratio {this.state.reviews.map((review, j) => ( - Date: Mon, 24 May 2021 21:32:11 -0400 Subject: [PATCH 3/4] Added styling and colors to vote buttons --- .../src/components/NewReviewPageReview.js | 2 +- src/client/src/components/Vote.js | 55 ++++++++++++------- 2 files changed, 35 insertions(+), 22 deletions(-) diff --git a/src/client/src/components/NewReviewPageReview.js b/src/client/src/components/NewReviewPageReview.js index 3dc9468e..a2c600e8 100644 --- a/src/client/src/components/NewReviewPageReview.js +++ b/src/client/src/components/NewReviewPageReview.js @@ -4,7 +4,7 @@ import styled from 'styled-components'; import Vote from "./Vote"; let Wrapper = styled.div` - padding: 1.2rem 1rem 1rem 1rem; + padding: 1.2rem 2rem; margin-bottom: 2rem; box-shadow: 5px 5px 10px ${props => props.theme.lightGray}; border: 1px solid ${props => props.theme.lightGray}; diff --git a/src/client/src/components/Vote.js b/src/client/src/components/Vote.js index e094e8d1..70ca3d7c 100644 --- a/src/client/src/components/Vote.js +++ b/src/client/src/components/Vote.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import upvote from '../assets/Icons/up_arrow.svg'; import downvote from '../assets/Icons/down_arrow.svg'; @@ -15,47 +15,60 @@ const Upvotes = styled.div` display: flex; justify-content: row; align-items: center; + + ${props => props.clicked && css` + ${UpIMG} { + filter: invert(55%) sepia(86%) saturate(502%) hue-rotate(70deg) brightness(79%) contrast(85%); + } + + ${Text} { + color: green; + } + `} `; const Downvotes = styled.div` display: flex; justify-content: row; align-items: center; + + ${props => props.clicked && css` + ${DownIMG} { + filter: invert(16%) sepia(92%) saturate(4089%) hue-rotate(352deg) brightness(87%) contrast(93%); + } + + ${Text} { + color: red; + } + `} `; const UpIMG = styled.img` cursor: pointer; - filter: ${props => props.clicked ? - "invert(55%) sepia(86%) saturate(502%) hue-rotate(70deg) brightness(79%) contrast(85%)" : - "invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(108%)"}; width: 28px; padding: .5rem; + filter: invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(100%); :hover { - filter: ${props => props.clicked ? - "invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(108%)" : - "invert(55%) sepia(86%) saturate(502%) hue-rotate(70deg) brightness(79%) contrast(85%)"}; + filter: invert(55%) sepia(86%) saturate(502%) hue-rotate(70deg) brightness(79%) contrast(85%); } `; const DownIMG = styled.img` cursor: pointer; - filter: ${props => props.clicked ? - "invert(16%) sepia(92%) saturate(4089%) hue-rotate(352deg) brightness(87%) contrast(93%)" : - "invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(108%)"}; + width: 28px; padding: .5rem; + filter: invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(108%); :hover { - filter: ${props => props.clicked ? - "invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(108%)" : - "invert(16%) sepia(92%) saturate(4089%) hue-rotate(352deg) brightness(87%) contrast(93%)"}; + filter: invert(16%) sepia(92%) saturate(4089%) hue-rotate(352deg) brightness(87%) contrast(93%); } `; -const UpText = styled.div` +const Text = styled.div` + color: gray; `; -const DownText = styled.div``; let agree = "agree ".toUpperCase(); let disagree = "disagree ".toUpperCase(); @@ -131,13 +144,13 @@ export default class Vote extends Component{ render() { return ( - - - {agree}{this.state.upvotes + this.state.my_upvotes} + + + {agree}{this.state.upvotes + this.state.my_upvotes} - - - {disagree}{this.state.downvotes + this.state.my_downvotes} + + + {disagree}{this.state.downvotes + this.state.my_downvotes} ) From f7b97d0b0af66d45ec64983b8d5504c36e32dd11 Mon Sep 17 00:00:00 2001 From: Francesca Cavuoti Date: Mon, 24 May 2021 21:43:52 -0400 Subject: [PATCH 4/4] Fixed colors to match arrows --- src/client/src/components/Vote.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/client/src/components/Vote.js b/src/client/src/components/Vote.js index 70ca3d7c..907635f0 100644 --- a/src/client/src/components/Vote.js +++ b/src/client/src/components/Vote.js @@ -22,7 +22,7 @@ const Upvotes = styled.div` } ${Text} { - color: green; + color: #28A528; } `} `; @@ -38,7 +38,7 @@ const Downvotes = styled.div` } ${Text} { - color: red; + color: #D11E1E; } `} `; @@ -47,7 +47,7 @@ const UpIMG = styled.img` cursor: pointer; width: 28px; padding: .5rem; - filter: invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(100%); + filter: invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(108%); :hover { filter: invert(55%) sepia(86%) saturate(502%) hue-rotate(70deg) brightness(79%) contrast(85%); @@ -67,7 +67,7 @@ const DownIMG = styled.img` `; const Text = styled.div` - color: gray; + color: #707070; `; let agree = "agree ".toUpperCase();