Skip to content

Commit 5cf8c30

Browse files
vinaypuppalvinaypuppal
committed
fix nprogress css loading
1 parent dde8972 commit 5cf8c30

File tree

5 files changed

+78
-82
lines changed

5 files changed

+78
-82
lines changed

‎postcss.config.js‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,8 @@ module.exports = {
1010
defaultExtractor: content =>
1111
content
1212
.match(/[\w-/:%]+(?<!:)/g)
13-
.concat(content.match(/html|body|after|before|snackbar|snackbarks|tippy|next|#nprogress/g)) || [],
14-
whitelistPatterns: [
15-
/html/,
16-
/body/,
17-
/after/,
18-
/before/,
19-
/tippy/,
20-
/next/,
21-
/snackbar/,
22-
/snackbarks/,
23-
/#nprogress/,
24-
],
13+
.concat(content.match(/html|body|after|before|snackbar|snackbarks|tippy|next/g)) || [],
14+
whitelistPatterns: [/html/, /body/, /after/, /before/, /tippy/, /next/, /snackbar/, /snackbarks/],
2515
}),
2616
require('cssnano'),
2717
]

‎src/components/common/PaymentForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
8787
}
8888

8989
return (
90-
<div className={clsx('md:px-0', !inlineForm && 'px-4')}>
90+
<div className={clsx(!inlineForm && 'px-4', inlineForm && 'md:px-0')}>
9191
<p className="text-lg mb-4 text-gray-700 leading-relaxed">We truly appreciate your generosity</p>
9292
<form name="payment" onSubmit={onSubmit}>
9393
<div className="mb-4 mt-4">

‎src/pages/_app.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { AppProps } from 'next/app';
55
import Div100vh from 'react-div-100vh';
66
import NProgress from 'nprogress';
77
import Router from 'next/router';
8+
import Head from 'next/head';
89

910
import { MobileMenu } from '../components/common/MobileMenu';
1011

@@ -17,10 +18,16 @@ Router.events.on('routeChangeError', () => NProgress.done());
1718

1819
const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
1920
return (
20-
<Div100vh>
21-
<Component {...pageProps} />
22-
<MobileMenu />
23-
</Div100vh>
21+
<>
22+
<Head>
23+
{/* Import CSS for nprogress */}
24+
<link rel="stylesheet" type="text/css" href="/nprogress.css" />
25+
</Head>
26+
<Div100vh>
27+
<Component {...pageProps} />
28+
<MobileMenu />
29+
</Div100vh>
30+
</>
2431
);
2532
};
2633

‎src/styles/index.css‎

Lines changed: 0 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -56,68 +56,3 @@ body {
5656
transform: translateX(100%);
5757
}
5858
}
59-
60-
#nprogress {
61-
pointer-events: none;
62-
}
63-
#nprogress .bar {
64-
background: #aa97fb;
65-
position: fixed;
66-
z-index: 1031;
67-
top: 0;
68-
left: 0;
69-
width: 100%;
70-
height: 6px;
71-
}
72-
#nprogress .peg {
73-
display: block;
74-
position: absolute;
75-
right: 0px;
76-
width: 100px;
77-
height: 100%;
78-
box-shadow: 0 0 10px #aa97fb, 0 0 5px #aa97fb;
79-
opacity: 1;
80-
transform: rotate(3deg) translate(0px, -4px);
81-
}
82-
#nprogress .spinner {
83-
display: block;
84-
position: fixed;
85-
z-index: 1031;
86-
top: 15px;
87-
right: 15px;
88-
}
89-
#nprogress .spinner-icon {
90-
width: 18px;
91-
height: 18px;
92-
box-sizing: border-box;
93-
border: solid 2px transparent;
94-
border-top-color: #aa97fb;
95-
border-left-color: #aa97fb;
96-
border-radius: 50%;
97-
-webkit-animation: nprogress-spinner 400ms linear infinite;
98-
animation: nprogress-spinner 400ms linear infinite;
99-
}
100-
.nprogress-custom-parent {
101-
overflow: hidden;
102-
position: relative;
103-
}
104-
.nprogress-custom-parent #nprogress .spinner,
105-
.nprogress-custom-parent #nprogress .bar {
106-
position: absolute;
107-
}
108-
@-webkit-keyframes nprogress-spinner {
109-
0% {
110-
-webkit-transform: rotate(0deg);
111-
}
112-
100% {
113-
-webkit-transform: rotate(360deg);
114-
}
115-
}
116-
@keyframes nprogress-spinner {
117-
0% {
118-
transform: rotate(0deg);
119-
}
120-
100% {
121-
transform: rotate(360deg);
122-
}
123-
}

‎src/styles/nprogress.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
#nprogress {
2+
pointer-events: none;
3+
}
4+
#nprogress .bar {
5+
background: #aa97fb;
6+
position: fixed;
7+
z-index: 1031;
8+
top: 0;
9+
left: 0;
10+
width: 100%;
11+
height: 6px;
12+
}
13+
#nprogress .peg {
14+
display: block;
15+
position: absolute;
16+
right: 0px;
17+
width: 100px;
18+
height: 100%;
19+
box-shadow: 0 0 10px #aa97fb, 0 0 5px #aa97fb;
20+
opacity: 1;
21+
transform: rotate(3deg) translate(0px, -4px);
22+
}
23+
#nprogress .spinner {
24+
display: block;
25+
position: fixed;
26+
z-index: 1031;
27+
top: 15px;
28+
right: 15px;
29+
}
30+
#nprogress .spinner-icon {
31+
width: 18px;
32+
height: 18px;
33+
box-sizing: border-box;
34+
border: solid 2px transparent;
35+
border-top-color: #aa97fb;
36+
border-left-color: #aa97fb;
37+
border-radius: 50%;
38+
-webkit-animation: nprogress-spinner 400ms linear infinite;
39+
animation: nprogress-spinner 400ms linear infinite;
40+
}
41+
.nprogress-custom-parent {
42+
overflow: hidden;
43+
position: relative;
44+
}
45+
.nprogress-custom-parent #nprogress .spinner,
46+
.nprogress-custom-parent #nprogress .bar {
47+
position: absolute;
48+
}
49+
@-webkit-keyframes nprogress-spinner {
50+
0% {
51+
-webkit-transform: rotate(0deg);
52+
}
53+
100% {
54+
-webkit-transform: rotate(360deg);
55+
}
56+
}
57+
@keyframes nprogress-spinner {
58+
0% {
59+
transform: rotate(0deg);
60+
}
61+
100% {
62+
transform: rotate(360deg);
63+
}
64+
}

0 commit comments

Comments
 (0)