Skip to content

Commit 0167b92

Browse files
moonflaredanmanabogdan00Utworedecs
authored
Deploy to prod (#170)
* fix: Show useful instruments and signup after main content on mobile. Closes #144 * chore: fix linting * chore: code review fixes * #112-show related pages at bottom of current page * Remove react-icons and logo.png. * simplify target page slug generation Co-Authored-By: Dan Lepadatu <lepadatudan@gmail.com> * scroll to top of container when navigating * phone and email links in the content page; default styling * some more phone numbers need links * Open links in new tab in order not to loose the current page (#157) Co-authored-by: Gauca <gaucab@gb-locs-MacBook-Pro.local> * smooth scrolling to top * more phonenumber links * #159 - scroll to content from the quick nav * fix html render in component * form result ListItem component * form result remove state * move navigate to instruments.util * form scss cleanup * switch to most recent components version * 149 mituri despre coronavirus => add myth images * 149 mituri despre coronavirus => extract common static page styles * lint:fix * 149 mituri despre coronavirus => add content for new accordion type page * 149 mituri despre coronavirus => add additional styles * 149 mituri despre coronavirus => PR review changes * 149 mituri despre coronavirus => fix emoji font on firefox and android * chore: compress mituri jpegs * styles: increase image sizes Co-authored-by: Dan Manastireanu <498419+danmana@users.noreply.github.com> Co-authored-by: Bogdan D <bogdandraghicescu@gmail.com> Co-authored-by: Utwo <mihai.legat@gmail.com> Co-authored-by: Mihai Nica <mihai@redecs.net> Co-authored-by: bianca-gauca <30489988+bianca-gauca@users.noreply.github.com> Co-authored-by: Gauca <gaucab@gb-locs-MacBook-Pro.local> Co-authored-by: Irina Borozan <anirib@gmail.com> Co-authored-by: Veronica Mihai <veronica.mihai90@outlook.com>
1 parent 79b10fe commit 0167b92

21 files changed

+821
-143
lines changed

‎frontend/package-lock.json

Lines changed: 3 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@
55
"description": "Arbore decizional pentru informarea publicului",
66
"private": true,
77
"dependencies": {
8-
"@code4ro/taskforce-fe-components": "^1.0.3",
8+
"@code4ro/taskforce-fe-components": "^1.0.5",
99
"bulma": "^0.8.0",
1010
"react": "^16.13.0",
1111
"react-dom": "^16.13.0",
1212
"react-ga": "^2.7.0",
13-
"react-icons": "^3.9.0",
1413
"react-router-dom": "^5.1.2",
1514
"react-scripts": "3.4.1"
1615
},

‎frontend/public/images/logo.png

-4.2 KB
Binary file not shown.

‎frontend/src/components/ContentPage/index.js

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
1-
import React from "react";
1+
import React, { useRef } from "react";
2+
import { useHistory } from "react-router-dom";
23
import PropTypes from "prop-types";
34
import Form from "../Form";
5+
import { List, ListItem } from "@code4ro/taskforce-fe-components";
46
import {
57
Hero,
68
Accordion,
79
SocialsShare
810
} from "@code4ro/taskforce-fe-components";
911

12+
import { navigate } from "../../utils/instruments.utils";
13+
1014
function ContentPage({ page, subPage }) {
15+
const history = useHistory();
16+
17+
const scrollAnchorRef = useRef(null);
18+
1119
const renderContent = () => {
1220
return (
1321
subPage &&
@@ -20,11 +28,36 @@ function ContentPage({ page, subPage }) {
2028
);
2129
};
2230

31+
const renderSubPages = () => {
32+
if (!page || !page.content || page.content.length < 2) {
33+
return;
34+
}
35+
const items = page.content
36+
.filter(item => item.slug !== subPage.slug)
37+
.map(item => (
38+
<ListItem
39+
key={item.display_order}
40+
title={item.title}
41+
onClick={() =>
42+
navigate(history, `/${page.slug}/${item.slug}`, scrollAnchorRef)
43+
}
44+
value={item}
45+
/>
46+
));
47+
return (
48+
<div className="content">
49+
<h4>Află mai multe:</h4>
50+
<List columns={2}>{items}</List>
51+
</div>
52+
);
53+
};
54+
2355
return (
24-
<div>
56+
<div ref={scrollAnchorRef}>
2557
<Hero title={(subPage && subPage.title) || page.title} />
2658
<SocialsShare currentPage={window.location.href} />
2759
{renderContent()}
60+
{renderSubPages()}
2861
{page.form && <Form data={page} />}
2962
{page.accordion &&
3063
page.accordion.map((accordion, index) => (
@@ -46,10 +79,12 @@ function ContentPage({ page, subPage }) {
4679
ContentPage.propTypes = {
4780
page: PropTypes.shape({
4881
title: PropTypes.string.isRequired,
82+
slug: PropTypes.string.isRequired,
4983
content: PropTypes.arrayOf(
5084
PropTypes.shape({
5185
title: PropTypes.string.isRequired,
52-
page: PropTypes.string.isRequired
86+
page: PropTypes.string.isRequired,
87+
slug: PropTypes.string.isRequired
5388
})
5489
),
5590
first_node_id: PropTypes.number,
@@ -75,7 +110,8 @@ ContentPage.propTypes = {
75110
}),
76111
subPage: PropTypes.shape({
77112
title: PropTypes.string.isRequired,
78-
page: PropTypes.string.isRequired
113+
page: PropTypes.string.isRequired,
114+
slug: PropTypes.string.isRequired
79115
})
80116
};
81117

‎frontend/src/components/Form/Form.scss

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,6 @@
33
display: flex;
44
}
55

6-
.no-hover {
7-
&:hover {
8-
cursor: initial !important;
9-
background-color: whitesmoke !important;
10-
}
11-
}
12-
136
@media (max-width: 768px) {
147
.action-buttons {
158
padding: 0;

‎frontend/src/components/Form/results.js

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react";
33
import PropTypes from "prop-types";
44
import "./Form.scss";
55
import {
6-
ListHeader,
6+
ListHeader, ListItem,
77
} from "@code4ro/taskforce-fe-components";
88

99
function Results({ question, answers }) {
@@ -93,17 +93,11 @@ function Results({ question, answers }) {
9393
return question.options[calculateResults()].label;
9494
};
9595

96-
// TODO: use a real component for this
9796
return (
9897
<div>
9998
<ListHeader title={question.questionText} />
10099
<div>
101-
<div
102-
className={'__list-item no-hover'}
103-
>
104-
<div className="__list-item__left-side" />
105-
<div className="__list-item__content">{showResults()}</div>
106-
</div>
100+
<ListItem nonOption={true} title={<div dangerouslySetInnerHTML={{ __html: showResults() }} />} />
107101
</div>
108102
</div>
109103
);

‎frontend/src/components/Home/index.js

Lines changed: 38 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect } from "react";
1+
import React, { useState, useEffect, useRef } from "react";
22
import { useParams, useHistory } from "react-router-dom";
33
import ContentPage from "../ContentPage";
44
import data from "../../data/static-pages";
@@ -14,7 +14,8 @@ import {
1414
import UsefulApps from "../../data/useful-apps";
1515
import {
1616
renderInstrumentItem,
17-
remapInstrumentsData
17+
remapInstrumentsData,
18+
navigate
1819
} from "../../utils/instruments.utils";
1920
import "./styles.scss";
2021
import { mailchimpURL } from "../../config/mailchimp";
@@ -24,6 +25,7 @@ const Home = () => {
2425
const [selectedSubPage, setSelectedSubPage] = useState(null);
2526
const { pageSlug, subPageSlug } = useParams();
2627
const history = useHistory();
28+
const scrollAnchorRef = useRef(null);
2729

2830
useEffect(() => {
2931
// Find the page
@@ -43,18 +45,31 @@ const Home = () => {
4345
} else {
4446
// Fallback to the first page if there is no slug
4547
const [firstPage] = data;
46-
history.push((firstPage && firstPage.slug) || "/");
48+
const destinationSlug = (firstPage && firstPage.slug) || "/";
49+
navigate(history, destinationSlug, scrollAnchorRef);
4750
}
4851
}, [pageSlug, subPageSlug, history]);
4952

50-
const navigate = slug => {
51-
// Fix SecurityError of pushState on History
52-
// Edge case for the `/` slug
53-
history.push(`/${slug !== "/" ? slug : ""}`);
54-
};
55-
5653
const instrumentsData = remapInstrumentsData(UsefulApps);
5754

55+
const extraInfo = (
56+
<>
57+
<div className="instruments-wrapper">
58+
<Hero title={"Instrumente utile"} useFallbackIcon={true} />
59+
<Instruments layout="column">
60+
{Object.keys(instrumentsData).map(category => {
61+
return instrumentsData[category].map(usefulApp =>
62+
renderInstrumentItem(usefulApp)
63+
);
64+
})}
65+
</Instruments>
66+
</div>
67+
<div className="newsletter">
68+
<MailchimpSubscribe url={mailchimpURL} compact={true} />
69+
</div>
70+
</>
71+
);
72+
5873
return (
5974
<>
6075
<div className="container">
@@ -73,7 +88,7 @@ const Home = () => {
7388
key={doc.doc_id}
7489
active={selectedPage && selectedPage.doc_id === doc.doc_id}
7590
title={doc.title}
76-
onClick={() => navigate(doc.slug)}
91+
onClick={() => navigate(history, doc.slug, scrollAnchorRef)}
7792
value={doc}
7893
/>
7994
))}
@@ -93,7 +108,13 @@ const Home = () => {
93108
<SidebarMenuItem
94109
key={`subpage-header_${page.slug}`}
95110
active={page.slug === subPageSlug}
96-
onClick={() => navigate(`${doc.slug}/${page.slug}`)}
111+
onClick={() =>
112+
navigate(
113+
history,
114+
`${doc.slug}/${page.slug}`,
115+
scrollAnchorRef
116+
)
117+
}
97118
>
98119
{page.title}
99120
</SidebarMenuItem>
@@ -109,7 +130,9 @@ const Home = () => {
109130
(doc.slug === pageSlug ||
110131
(doc.slug === "/" && !pageSlug))
111132
}
112-
onClick={() => navigate(doc.slug)}
133+
onClick={() =>
134+
navigate(history, doc.slug, scrollAnchorRef)
135+
}
113136
isTitle
114137
>
115138
{doc.title}
@@ -120,27 +143,16 @@ const Home = () => {
120143
})}
121144
</SidebarMenu>
122145

123-
<div className="instruments-wrapper">
124-
<Hero title={"Instrumente utile"} useFallbackIcon={true} />
125-
<Instruments layout="column">
126-
{Object.keys(instrumentsData).map(category => {
127-
return instrumentsData[category].map(usefulApp =>
128-
renderInstrumentItem(usefulApp)
129-
);
130-
})}
131-
</Instruments>
132-
</div>
133-
<div className="newsletter">
134-
<MailchimpSubscribe url={mailchimpURL} compact={true} />
135-
</div>
146+
{extraInfo}
136147
</aside>
137-
<div className="column is-8">
148+
<div ref={scrollAnchorRef} className="column is-8 homepage-content">
138149
{selectedPage && (
139150
<ContentPage
140151
page={selectedPage}
141152
subPage={selectedSubPage}
142153
></ContentPage>
143154
)}
155+
{extraInfo}
144156
</div>
145157
</div>
146158
</div>

‎frontend/src/components/Home/styles.scss

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,28 @@
22
margin-top: 20px;
33
}
44

5-
@media (min-width: 768px) {
5+
.homepage-content {
6+
.message .message-body img {
7+
max-width: 350px;
8+
}
9+
}
10+
11+
/* media queries are inclussive, so to avoid overlap, min-width query must be one pixel more than the max-width */
12+
@media (min-width: 769px) {
613
.homepage-columns {
714
flex-direction: row-reverse;
815
}
16+
17+
.homepage-content .instruments-wrapper,
18+
.homepage-content .newsletter {
19+
display: none;
20+
}
921
}
1022

1123
@media (max-width: 768px) {
1224
.homepage-sidebar .instruments-wrapper,
13-
.pages-list, .newsletter {
25+
.homepage-sidebar .newsletter,
26+
.pages-list {
1427
display: none;
1528
}
16-
}
29+
}

0 commit comments

Comments
 (0)