Skip to content

Commit 20083e3

Browse files
MrOrzMrOrz
authored
Merge pull request #557 from simonzheng/simonzheng-20240106/issue-553/Include-donation-link-in-mobile-web-app
Include donation link in mobile web app (simonzheng/20240106)
2 parents 5dc43ee + 12d4653 commit 20083e3

File tree

1 file changed

+81
-76
lines changed

1 file changed

+81
-76
lines changed

‎components/AppLayout/AppFooter.js

+81-76
Original file line numberDiff line numberDiff line change
@@ -89,88 +89,93 @@ const CustomLink = withStyles(theme => ({
8989
</div>
9090
));
9191

92+
function FactCheckSection({ classes }) {
93+
return (
94+
<div className={classes.column}>
95+
<h3>{t`Fact Check`}</h3>
96+
<CustomLink href="/articles">{t`Messages`}</CustomLink>
97+
<CustomLink href="/replies">{c('App layout').t`Replies`}</CustomLink>
98+
<CustomLink href="/hoax-for-you">{c('App layout').t`For You`}</CustomLink>
99+
<CustomLink href="/tutorial">{c('App layout').t`Tutorial`}</CustomLink>
100+
</div>
101+
);
102+
}
103+
104+
function AboutSection({ classes }) {
105+
return (
106+
<div className={classes.column}>
107+
<h3>{t`About`}</h3>
108+
<CustomLink href="/about">{t`About Cofacts`}</CustomLink>
109+
<CustomLink href="/terms">{t`User Agreement`}</CustomLink>
110+
<CustomLink external href={PROJECT_HACKFOLDR}>
111+
{t`Introduction`}
112+
</CustomLink>
113+
<CustomLink external href={PROJECT_SOURCE_CODE}>
114+
{t`Source Code`}
115+
</CustomLink>
116+
<CustomLink external href={PROJECT_MEDIUM}>
117+
Medium
118+
</CustomLink>
119+
<CustomLink href="/impact">{t`Impact Report`}</CustomLink>
120+
</div>
121+
);
122+
}
123+
124+
function ContactSection({ classes, isDesktop }) {
125+
return (
126+
<div className={classes.column}>
127+
<h3>{t`Contact`}</h3>
128+
<CustomLink
129+
external
130+
href={`mailto:${CONTACT_EMAIL}`}
131+
icon={({ className }) => (
132+
<img className={className} src={mailIcon} style={{ width: '30px' }} />
133+
)}
134+
>
135+
{t`Contact Us`}
136+
</CustomLink>
137+
<CustomLink
138+
external
139+
href={EDITOR_FACEBOOK_GROUP}
140+
icon={({ className }) => (
141+
<img
142+
className={className}
143+
src={facebookIcon}
144+
style={{ width: '30px' }}
145+
/>
146+
)}
147+
>
148+
{t`Facebook forum`}
149+
</CustomLink>
150+
<CustomLink
151+
external
152+
href={LINE_URL}
153+
icon={({ className }) => (
154+
<img className={className} src={lineIcon} style={{ width: '30px' }} />
155+
)}
156+
>
157+
Line: @cofacts
158+
</CustomLink>
159+
{isDesktop && <GoogleWebsiteTranslator />}
160+
<CustomLink external href={DONATION_URL}>
161+
{t`Donate to Cofacts`}
162+
</CustomLink>
163+
</div>
164+
);
165+
}
166+
92167
function AppFooter() {
93168
const classes = useStyles();
94-
const matches = useMediaQuery('(min-width:768px)');
169+
const isDesktop = useMediaQuery('(min-width:768px)');
95170

96171
return (
97-
<Box component="footer" display={['none', 'none', 'block']}>
172+
// <Box component="footer" display={['block', 'block', 'block']}>
173+
<Box component="footer">
98174
<div className={classes.first}>
99175
<div className={classes.container}>
100-
<div className={classes.column}>
101-
<h3>{t`Fact Check`}</h3>
102-
<CustomLink href="/articles">{t`Messages`}</CustomLink>
103-
<CustomLink href="/replies">
104-
{c('App layout').t`Replies`}
105-
</CustomLink>
106-
<CustomLink href="/hoax-for-you">
107-
{c('App layout').t`For You`}
108-
</CustomLink>
109-
<CustomLink href="/tutorial">
110-
{c('App layout').t`Tutorial`}
111-
</CustomLink>
112-
</div>
113-
<div className={classes.column}>
114-
<h3>{t`About`}</h3>
115-
<CustomLink href="/about">{t`About Cofacts`}</CustomLink>
116-
<CustomLink href="/terms">{t`User Agreement`}</CustomLink>
117-
<CustomLink external href={PROJECT_HACKFOLDR}>
118-
{t`Introduction`}
119-
</CustomLink>
120-
<CustomLink external href={PROJECT_SOURCE_CODE}>
121-
{t`Source Code`}
122-
</CustomLink>
123-
<CustomLink external href={PROJECT_MEDIUM}>
124-
Medium
125-
</CustomLink>
126-
<CustomLink href="/impact">{t`Impact Report`}</CustomLink>
127-
</div>
128-
<div className={classes.column}>
129-
<h3>{t`Contact`}</h3>
130-
<CustomLink
131-
external
132-
href={`mailto:${CONTACT_EMAIL}`}
133-
icon={({ className }) => (
134-
<img
135-
className={className}
136-
src={mailIcon}
137-
style={{ width: '30px' }}
138-
/>
139-
)}
140-
>
141-
{t`Contact Us`}
142-
</CustomLink>
143-
<CustomLink
144-
external
145-
href={EDITOR_FACEBOOK_GROUP}
146-
icon={({ className }) => (
147-
<img
148-
className={className}
149-
src={facebookIcon}
150-
style={{ width: '30px' }}
151-
/>
152-
)}
153-
>
154-
{t`Facebook forum`}
155-
</CustomLink>
156-
<CustomLink
157-
external
158-
href={LINE_URL}
159-
icon={({ className }) => (
160-
<img
161-
className={className}
162-
src={lineIcon}
163-
style={{ width: '30px' }}
164-
/>
165-
)}
166-
>
167-
Line: @cofacts
168-
</CustomLink>
169-
{matches && <GoogleWebsiteTranslator />}
170-
<CustomLink external href={DONATION_URL}>
171-
{t`Donate to Cofacts`}
172-
</CustomLink>
173-
</div>
176+
{isDesktop && <FactCheckSection classes={classes} />}
177+
{isDesktop && <AboutSection classes={classes} />}
178+
<ContactSection classes={classes} isDesktop={isDesktop} />
174179
</div>
175180
</div>
176181
<div className={classes.second}>

0 commit comments

Comments
 (0)