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

Commit fad3fbf

Browse files
Zubair Ahmedvinaypuppal
Zubair Ahmed
authored and
vinaypuppal
committed
content loaders on events (#75)
* padding in bottom of common banner was of different color from the rest of banner * content loader added for events
1 parent 6728286 commit fad3fbf

File tree

4 files changed

+261
-9
lines changed

4 files changed

+261
-9
lines changed

‎components/common-banner.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ export default props => (
1111
background-color: #f4f7fb;
1212
min-height: 150px;
1313
text-align: center;
14+
padding-top: 30px;
15+
padding-bottom: 30px;
1416
}
1517
.headline {
16-
padding-top: 20px;
1718
font-size: 4em;
1819
color: #df1cb5;
1920
font-weight: 900;
@@ -24,7 +25,6 @@ export default props => (
2425
margin-right: auto;
2526
letter-spacing: 2px;
2627
line-height: 2;
27-
margin-bottom: 30px;
2828
}
2929
@media (max-width: 720px) {
3030
h2 {

‎components/content-loaders.js

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
import React from 'react';
2+
3+
export const CardContentLoader = () => (
4+
<div className="root">
5+
<div className="main">
6+
<div className="animation-background">
7+
<div className="background-masker header-right" />
8+
<div className="background-masker subheader-bottom" />
9+
<div className="background-masker content-first-end" />
10+
<div className="background-masker content-second-line" />
11+
<div className="background-masker content-third-end" />
12+
</div>
13+
</div>
14+
<style jsx>{`
15+
@keyframes placeHolderShimmer {
16+
0% {
17+
background-position: -468px 0;
18+
}
19+
100% {
20+
background-position: 468px 0;
21+
}
22+
}
23+
24+
.root {
25+
color: #141823;
26+
padding: 20px;
27+
}
28+
29+
.main {
30+
background: #fff;
31+
border: 1px solid;
32+
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
33+
border-radius: 3px;
34+
padding: 12px;
35+
margin: 0 auto;
36+
max-width: 600px;
37+
min-height: 120px;
38+
}
39+
40+
.animation-background {
41+
animation-duration: 1s;
42+
animation-fill-mode: forwards;
43+
animation-iteration-count: infinite;
44+
animation-name: placeHolderShimmer;
45+
animation-timing-function: linear;
46+
background: #f6f7f8;
47+
background: #eeeeee;
48+
background: linear-gradient(
49+
to right,
50+
#eeeeee 8%,
51+
#dddddd 18%,
52+
#eeeeee 33%
53+
);
54+
background-size: 800px 104px;
55+
height: 96px;
56+
position: relative;
57+
}
58+
59+
.background-masker {
60+
background: #fff;
61+
position: absolute;
62+
box-sizing: border-box;
63+
}
64+
65+
.outlined .background-masker {
66+
border: 1px solid #ddd;
67+
}
68+
69+
.outlined:hover .background-masker {
70+
border: none;
71+
}
72+
73+
.outlined:hover .background-masker:hover {
74+
border: 1px solid #ccc;
75+
z-index: 1;
76+
}
77+
78+
.background-masker.header-top,
79+
.background-masker.header-bottom,
80+
.background-masker.subheader-bottom {
81+
top: 0;
82+
left: 0;
83+
right: 0;
84+
height: 20px;
85+
}
86+
87+
.background-masker.header-left,
88+
.background-masker.subheader-left,
89+
.background-masker.header-right,
90+
.background-masker.subheader-right {
91+
top: 00px;
92+
left: 40px;
93+
height: 30px;
94+
width: 10px;
95+
}
96+
97+
.background-masker.header-bottom {
98+
top: 18px;
99+
height: 6px;
100+
}
101+
102+
.background-masker.subheader-right {
103+
top: 24px;
104+
height: 18px;
105+
}
106+
107+
.background-masker.header-right,
108+
.background-masker.subheader-right {
109+
width: auto;
110+
left: 300px;
111+
right: 0;
112+
}
113+
114+
.background-masker.subheader-right {
115+
left: 230px;
116+
}
117+
118+
.background-masker.subheader-bottom {
119+
top: 30px;
120+
height: 25px;
121+
}
122+
123+
.background-masker.content-top,
124+
.background-masker.content-second-line,
125+
.background-masker.content-third-line,
126+
.background-masker.content-second-end,
127+
.background-masker.content-third-end,
128+
.background-masker.content-first-end {
129+
top: 40px;
130+
left: 0;
131+
right: 0;
132+
height: 6px;
133+
}
134+
135+
.background-masker.content-top {
136+
height: 20px;
137+
}
138+
139+
.background-masker.content-first-end,
140+
.background-masker.content-second-end {
141+
width: auto;
142+
left: 180px;
143+
right: 0;
144+
top: 40px;
145+
height: 30px;
146+
}
147+
.background-masker.content-third-end {
148+
width: auto;
149+
right: 0;
150+
height: 10px;
151+
}
152+
153+
.background-masker.content-second-line {
154+
top: 68px;
155+
height: 20px;
156+
}
157+
158+
.background-masker.content-second-end {
159+
left: 420px;
160+
top: 74px;
161+
}
162+
163+
.background-masker.content-third-line {
164+
top: 82px;
165+
}
166+
167+
.background-masker.content-third-end {
168+
left: 500px;
169+
top: 88px;
170+
}
171+
`}</style>
172+
</div>
173+
);
174+
175+
export const TextContentLoader = props => (
176+
<div className="root">
177+
<div className="animation-background">
178+
<div className="background-masker subheader-right" />
179+
</div>
180+
<style jsx>{`
181+
@keyframes placeHolderShimmer {
182+
0% {
183+
background-position: -468px 0;
184+
}
185+
100% {
186+
background-position: 468px 0;
187+
}
188+
}
189+
190+
.root {
191+
background: #fff;
192+
padding-top: ${props.topPadding};
193+
margin: 0 auto;
194+
max-width: 600px;
195+
}
196+
197+
.animation-background {
198+
animation-duration: 1s;
199+
animation-fill-mode: forwards;
200+
animation-iteration-count: infinite;
201+
animation-name: placeHolderShimmer;
202+
animation-timing-function: linear;
203+
background: #f6f7f8;
204+
background: #eeeeee;
205+
background: linear-gradient(
206+
to right,
207+
#eeeeee 8%,
208+
#dddddd 18%,
209+
#eeeeee 33%
210+
);
211+
background-size: 800px 104px;
212+
height: 20px;
213+
position: relative;
214+
}
215+
216+
.background-masker {
217+
background: #fff;
218+
position: absolute;
219+
box-sizing: border-box;
220+
}
221+
222+
.outlined .background-masker {
223+
border: 1px solid #ddd;
224+
}
225+
226+
.outlined:hover .background-masker {
227+
border: none;
228+
}
229+
230+
.outlined:hover .background-masker:hover {
231+
border: 1px solid #ccc;
232+
z-index: 1;
233+
}
234+
235+
.background-masker.subheader-right {
236+
top: 0px;
237+
right: 0px;
238+
height: 30px;
239+
width: 300px;
240+
}
241+
`}</style>
242+
</div>
243+
);

‎components/learn-components/accord-guide.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,15 @@ export default class AccordGuide extends Component {
2121
activeIndex: -1,
2222
};
2323
}
24+
2425
handleClick = (e, titleProps) => {
2526
const { index } = titleProps;
2627
const { activeIndex } = this.state;
2728
const newIndex = activeIndex === index ? -1 : index;
2829

2930
this.setState({ activeIndex: newIndex });
3031
};
32+
3133
async componentDidMount() {
3234
try {
3335
const request = await fetch(this.props.url);

‎pages/events.js

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import React from 'react';
22
import fetch from 'isomorphic-unfetch';
3-
import { Card, Divider, Dimmer, Loader } from 'semantic-ui-react';
3+
import { Card, Divider } from 'semantic-ui-react';
44

55
import publicPage from '../hocs/public-page';
66
import CommonBanner from '../components/common-banner';
77
import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
88
import RowEvent from '../components/row-events';
9+
import {
10+
TextContentLoader,
11+
CardContentLoader,
12+
} from '../components/content-loaders';
913

1014
class Events extends React.Component {
1115
state = {
@@ -106,15 +110,18 @@ class Events extends React.Component {
106110
pageTitle="Events"
107111
pageSubTitle="Because you cannot change the world alone"
108112
/>
109-
<main>
113+
<div>
110114
{this.state.loading ? (
111-
<Dimmer active>
112-
<Loader indeterminate>Fetching Events</Loader>
113-
</Dimmer>
115+
<div style={{ backgroundColor: '#FFF' }}>
116+
<TextContentLoader topPadding="80px" />
117+
<CardContentLoader />
118+
<CardContentLoader />
119+
<CardContentLoader />
120+
</div>
114121
) : (
115-
this.renderEvents()
122+
<main>{this.renderEvents()}</main>
116123
)}
117-
</main>
124+
</div>
118125
<style jsx>{`
119126
main {
120127
background-color: #ffffff;

0 commit comments

Comments
 (0)