Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

content loaders on events #75

Merged
merged 2 commits into from
Nov 6, 2017
Merged

content loaders on events #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b7c8602
padding in bottom of common banner was of different color from the re…
Nov 6, 2017
8acf5b7
content loader added for events
Nov 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/common-banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ export default props => (
background-color: #f4f7fb;
min-height: 150px;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
.headline {
padding-top: 20px;
font-size: 4em;
color: #df1cb5;
font-weight: 900;
Expand All @@ -24,7 +25,6 @@ export default props => (
margin-right: auto;
letter-spacing: 2px;
line-height: 2;
margin-bottom: 30px;
}
@media (max-width: 720px) {
h2 {
Expand Down
243 changes: 243 additions & 0 deletions components/content-loaders.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,243 @@
import React from 'react';

export const CardContentLoader = () => (
<div className="root">
<div className="main">
<div className="animation-background">
<div className="background-masker header-right" />
<div className="background-masker subheader-bottom" />
<div className="background-masker content-first-end" />
<div className="background-masker content-second-line" />
<div className="background-masker content-third-end" />
</div>
</div>
<style jsx>{`
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}

.root {
color: #141823;
padding: 20px;
}

.main {
background: #fff;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 3px;
padding: 12px;
margin: 0 auto;
max-width: 600px;
min-height: 120px;
}

.animation-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: #eeeeee;
background: linear-gradient(
to right,
#eeeeee 8%,
#dddddd 18%,
#eeeeee 33%
);
background-size: 800px 104px;
height: 96px;
position: relative;
}

.background-masker {
background: #fff;
position: absolute;
box-sizing: border-box;
}

.outlined .background-masker {
border: 1px solid #ddd;
}

.outlined:hover .background-masker {
border: none;
}

.outlined:hover .background-masker:hover {
border: 1px solid #ccc;
z-index: 1;
}

.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
top: 0;
left: 0;
right: 0;
height: 20px;
}

.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
top: 00px;
left: 40px;
height: 30px;
width: 10px;
}

.background-masker.header-bottom {
top: 18px;
height: 6px;
}

.background-masker.subheader-right {
top: 24px;
height: 18px;
}

.background-masker.header-right,
.background-masker.subheader-right {
width: auto;
left: 300px;
right: 0;
}

.background-masker.subheader-right {
left: 230px;
}

.background-masker.subheader-bottom {
top: 30px;
height: 25px;
}

.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
top: 40px;
left: 0;
right: 0;
height: 6px;
}

.background-masker.content-top {
height: 20px;
}

.background-masker.content-first-end,
.background-masker.content-second-end {
width: auto;
left: 180px;
right: 0;
top: 40px;
height: 30px;
}
.background-masker.content-third-end {
width: auto;
right: 0;
height: 10px;
}

.background-masker.content-second-line {
top: 68px;
height: 20px;
}

.background-masker.content-second-end {
left: 420px;
top: 74px;
}

.background-masker.content-third-line {
top: 82px;
}

.background-masker.content-third-end {
left: 500px;
top: 88px;
}
`}</style>
</div>
);

export const TextContentLoader = props => (
<div className="root">
<div className="animation-background">
<div className="background-masker subheader-right" />
</div>
<style jsx>{`
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}

.root {
background: #fff;
padding-top: ${props.topPadding};
margin: 0 auto;
max-width: 600px;
}

.animation-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: #eeeeee;
background: linear-gradient(
to right,
#eeeeee 8%,
#dddddd 18%,
#eeeeee 33%
);
background-size: 800px 104px;
height: 20px;
position: relative;
}

.background-masker {
background: #fff;
position: absolute;
box-sizing: border-box;
}

.outlined .background-masker {
border: 1px solid #ddd;
}

.outlined:hover .background-masker {
border: none;
}

.outlined:hover .background-masker:hover {
border: 1px solid #ccc;
z-index: 1;
}

.background-masker.subheader-right {
top: 0px;
right: 0px;
height: 30px;
width: 300px;
}
`}</style>
</div>
);
2 changes: 2 additions & 0 deletions components/learn-components/accord-guide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,15 @@ export default class AccordGuide extends Component {
activeIndex: -1,
};
}

handleClick = (e, titleProps) => {
const { index } = titleProps;
const { activeIndex } = this.state;
const newIndex = activeIndex === index ? -1 : index;

this.setState({ activeIndex: newIndex });
};

async componentDidMount() {
try {
const request = await fetch(this.props.url);
Expand Down
21 changes: 14 additions & 7 deletions pages/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import React from 'react';
import fetch from 'isomorphic-unfetch';
import { Card, Divider, Dimmer, Loader } from 'semantic-ui-react';
import { Card, Divider } from 'semantic-ui-react';

import publicPage from '../hocs/public-page';
import CommonBanner from '../components/common-banner';
import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
import RowEvent from '../components/row-events';
import {
TextContentLoader,
CardContentLoader,
} from '../components/content-loaders';

class Events extends React.Component {
state = {
Expand Down Expand Up @@ -106,15 +110,18 @@ class Events extends React.Component {
pageTitle="Events"
pageSubTitle="Because you cannot change the world alone"
/>
<main>
<div>
{this.state.loading ? (
<Dimmer active>
<Loader indeterminate>Fetching Events</Loader>
</Dimmer>
<div style={{ backgroundColor: '#FFF' }}>
<TextContentLoader topPadding="80px" />
<CardContentLoader />
<CardContentLoader />
<CardContentLoader />
</div>
) : (
this.renderEvents()
<main>{this.renderEvents()}</main>
)}
</main>
</div>
<style jsx>{`
main {
background-color: #ffffff;
Expand Down