Skip to content

Commit

Permalink
Merge pull request #367 from DemocracyLab/add-transition-for-active-p…
Browse files Browse the repository at this point in the history 
…rojects

add-transition-for-active-projects - for width >= 992, added carousel…
  • Loading branch information
@marlonkeating
marlonkeating committed Jul 26, 2020
2 parents 69356fe + ef6609a commit e5089ac
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 62 deletions.
38 changes: 35 additions & 3 deletions civictechprojects/static/css/partials/_LandingController.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,12 +231,26 @@
flex-wrap: nowrap;

.ProjectCard-root {
flex-basis: 31%;
min-width: 31%;
flex-basis: 30%;
min-width: 30%;
}

.ProjectCard-root:not(:last-child) {
margin-right: 10px;
}

.carousel-control-prev, .carousel-control-next {
top: 180px;
width: 25px;
align-items: self-start;
}
.carousel-control-prev {
display: none
}

}
.RecentProjects-toggle {
margin: auto 0;
margin: 120px 0 0 0;
display: inline-block;
width: 20px;
color: $color-grey-medium;
Expand All @@ -251,3 +265,21 @@
}

}

@include media-breakpoint-up(lg) {
.ProjectCard-root {
min-height: 535px;
}
}
@include media-breakpoint-up(xl) {
.ProjectCard-root {
min-height: 405px;
}
}
@include media-breakpoint-up(xxl) {
.ProjectCard-root {
min-height: 380px;
}
}


74 changes: 30 additions & 44 deletions common/components/componentsBySection/Landing/RecentProjectsSection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import ProjectAPIUtils from "../../utils/ProjectAPIUtils.js";
import Button from "react-bootstrap/Button";
import url from "../../utils/url.js";
import Section from '../../enums/Section.js';
import Carousel from 'react-bootstrap/Carousel';


type State = {|
Expand All @@ -28,8 +29,6 @@ class RecentProjectsSection extends React.Component<{||}, State> {
cardCapacity: 3
};
this._updateWindowDimensions = this._updateWindowDimensions.bind(this);
this._prevProjects = this._prevProjects.bind(this);
this._nextProjects = this._nextProjects.bind(this);
}


Expand Down Expand Up @@ -58,9 +57,7 @@ class RecentProjectsSection extends React.Component<{||}, State> {
<div className="RecentProjects">
<h2 className="RecentProjects-title">Active Projects</h2>
<div className="RecentProjects-cards">
{this._renderPrevControl()}
{this._renderCards()}
{this._renderNextControl()}
</div>
<div className="RecentProjects-button">
<Button className="RecentProjects-all" href={url.section(Section.FindProjects)}>See All Projects</Button>
Expand All @@ -69,42 +66,6 @@ class RecentProjectsSection extends React.Component<{||}, State> {
);
}

_renderPrevControl(): $React$Node {
if (this.state.cardStart != 0) {
return (
<div className="RecentProjects-toggle RecentProjects-decrease" onClick={this._prevProjects}>
<i className={GlyphStyles.ChevronLeft}></i>
</div>
)
} else {
return null;
}
}

_renderNextControl(): $React$Node {
if (this.state.cardStart === 0) {
return (
<div className="RecentProjects-toggle RecentProjects-increase" onClick={this._nextProjects}>
<i className={GlyphStyles.ChevronRight}></i>
</div>
)
} else {
return null;
}
}

_nextProjects(): void {
this.setState(prevState => ({
cardStart: prevState.cardStart + this.state.cardCapacity
}));
}

_prevProjects(): void {
this.setState(prevState => ({
cardStart: prevState.cardStart - this.state.cardCapacity
}));
}

_setCardCapacity(): void {
//sets how many cards are shown at one time
const width = this.state.windowWidth
Expand All @@ -116,9 +77,11 @@ class RecentProjectsSection extends React.Component<{||}, State> {
}

_renderCards(): $ReadOnlyArray<React$Node> {
return !this.state.projects
? <i className={Glyph(GlyphStyles.LoadingSpinner, GlyphSizes.X2)}></i>
: this.state.projects.slice(this.state.cardStart, this.state.cardStart + this.state.cardCapacity).map(
if (!this.state.projects) {
return <i className={Glyph(GlyphStyles.LoadingSpinner, GlyphSizes.X2)}></i>
}
if (this.state.windowWidth < 992) {
return this.state.projects.slice(this.state.cardStart, this.state.cardStart + this.state.cardCapacity).map(
(project, index) =>
<ProjectCard
className="RecentProjects-card"
Expand All @@ -127,8 +90,31 @@ class RecentProjectsSection extends React.Component<{||}, State> {
textlen={140}
skillslen={4}
/>
);
);
} else {
return <Carousel className="RecentProjects-carousel w-100" indicators={false} interval={null} onSlid={(eventKey, direction) => this._carouselSlidHandler(eventKey, direction)} >{this._renderCardsForCarousel()}</Carousel>
}
}

_carouselSlidHandler(eventKey, direction): void {
const carouselChildren = document.querySelectorAll(".RecentProjects-carousel")[0].children
for (let el of carouselChildren) {
if (el.className === "carousel-control-next") {
eventKey === 1 ? el.setAttribute('style', 'display:none') : el.setAttribute('style', 'display:flex')
} else if (el.className === "carousel-control-prev") {
eventKey === 0 ? el.setAttribute('style', 'display:none') : el.setAttribute('style', 'display:flex')
}
}
}

_renderCardsForCarousel(): $ReadOnlyArray<ReactNode> {
const carouselItem0 = <Carousel.Item key="0"><div className="d-flex justify-content-center">{this.state.projects.slice(0, 3)
.map((project, index) => <ProjectCard className="RecentProjects-card" project={project} key={index} textlen={140} skillslen={4} /> )}</div></Carousel.Item>
const carouselItem1 = <Carousel.Item key="1"><div className="d-flex justify-content-center">{this.state.projects.slice(3, 6)
.map((project, index) => <ProjectCard className="RecentProjects-card" project={project} key={index} textlen={140} skillslen={4} /> )}</div></Carousel.Item>
return [carouselItem0, carouselItem1]
}

}


Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"optimize-css-assets-webpack-plugin": "^5.0.3",
"path": "^0.12.7",
"react": "^16.11.0",
"react-bootstrap": "^1.0.0-beta.14",
"react-bootstrap": "^1.0.1",
"react-datepicker": "^2.14.1",
"react-dom": "^16.11.0",
"react-file-drop": "^0.2.8",
Expand Down
54 changes: 40 additions & 14 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -915,14 +915,25 @@
"@types/istanbul-reports" "^1.1.1"
"@types/yargs" "^13.0.0"

"@popperjs/core@^2.0.0":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.0.tgz#0e1bdf8d021e7ea58affade33d9d607e11365915"

"@restart/context@^2.1.4":
version "2.1.4"
resolved "https://registry.yarnpkg.com/@restart/context/-/context-2.1.4.tgz#a99d87c299a34c28bd85bb489cb07bfd23149c02"

"@restart/hooks@^0.3.11", "@restart/hooks@^0.3.12":
"@restart/hooks@^0.3.12":
version "0.3.21"
resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.21.tgz#5264d12019ffb844dc1fc44d55517ded7b580ee2"

"@restart/hooks@^0.3.21":
version "0.3.22"
resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.22.tgz#bb7e27c832bf576f56977d0a0b8b9d8ccee877b8"
dependencies:
lodash "^4.17.15"
lodash-es "^4.17.15"

"@svgr/babel-plugin-add-jsx-attribute@^5.0.1":
version "5.0.1"
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.0.1.tgz#744853b6533e83ce712d41d1873200b3e0a0b6fc"
Expand Down Expand Up @@ -1090,17 +1101,28 @@
version "1.5.2"
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"

"@types/react@^16.8.23", "@types/react@^16.9.11":
"@types/react@^16.9.11":
version "16.9.23"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.23.tgz#1a66c6d468ba11a8943ad958a8cb3e737568271c"
dependencies:
"@types/prop-types" "*"
csstype "^2.2.0"

"@types/react@^16.9.23":
version "16.9.34"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.34.tgz#f7d5e331c468f53affed17a8a4d488cd44ea9349"
dependencies:
"@types/prop-types" "*"
csstype "^2.2.0"

"@types/stack-utils@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"

"@types/warning@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"

"@types/yargs-parser@*":
version "15.0.0"
resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
Expand Down Expand Up @@ -4639,6 +4661,10 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"

lodash-es@^4.17.15:
version "4.17.15"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"

lodash.memoize@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
Expand Down Expand Up @@ -5601,7 +5627,7 @@ pn@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"

popper.js@^1.14.4, popper.js@^1.15.0, popper.js@^1.16.0:
popper.js@^1.14.4:
version "1.16.1"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"

Expand Down Expand Up @@ -6097,21 +6123,20 @@ react-async-script@^1.0.0:
hoist-non-react-statics "^3.3.0"
prop-types "^15.5.0"

react-bootstrap@^1.0.0-beta.14:
version "1.0.0-beta.17"
resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-1.0.0-beta.17.tgz#09d4789633b2fb24d408fa493b4a80a496e87c82"
react-bootstrap@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-1.0.1.tgz#044b51f34a9db8e17dbfb321a71267a8d6ad11b4"
dependencies:
"@babel/runtime" "^7.4.2"
"@restart/context" "^2.1.4"
"@restart/hooks" "^0.3.11"
"@types/react" "^16.8.23"
"@restart/hooks" "^0.3.21"
"@types/react" "^16.9.23"
classnames "^2.2.6"
dom-helpers "^5.1.2"
invariant "^2.2.4"
popper.js "^1.16.0"
prop-types "^15.7.2"
prop-types-extra "^1.1.0"
react-overlays "^2.1.0"
react-overlays "^3.1.2"
react-transition-group "^4.0.0"
uncontrollable "^7.0.0"
warning "^4.0.3"
Expand Down Expand Up @@ -6201,14 +6226,15 @@ react-onclickoutside@^6.9.0:
version "6.9.0"
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz#a54bc317ae8cf6131a5d78acea55a11067f37a1f"

react-overlays@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-2.1.1.tgz#ffe2090c4a10da6b8947a1c7b1a67d0457648a0d"
react-overlays@^3.1.2:
version "3.1.3"
resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-3.1.3.tgz#e6ac2b43fd2179924491bd794508072399940128"
dependencies:
"@babel/runtime" "^7.4.5"
"@popperjs/core" "^2.0.0"
"@restart/hooks" "^0.3.12"
"@types/warning" "^3.0.0"
dom-helpers "^5.1.0"
popper.js "^1.15.0"
prop-types "^15.7.2"
uncontrollable "^7.0.0"
warning "^4.0.3"
Expand Down

0 comments on commit e5089ac

Please sign in to comment.