Merge pull request #228 from code4romania/develop

deploy to prod

frontend/src/App.js

@@ -22,6 +22,7 @@ import DSU from "./images/dsu.png";
 import "./App.scss";
 
 const About = lazy(() => import("./components/About"));
+const Conduita = lazy(() => import("./components/Conduita"));
 const PrivacyPolicy = lazy(() => import("./components/PrivacyPolicy"));
 const TermsAndConditions = lazy(() =>
   import("./components/TermsAndConditions")
@@ -54,6 +55,9 @@ const MenuItems = [
   >
     Știri oficiale
   </a>,
+  <Link to="/conduita" key={"cond"}>
+    Conduită
+  </Link>,
   <Link to="/despre" key={"des"}>
     Despre
   </Link>,
@@ -95,6 +99,9 @@ const App = () => {
             <Route path="/despre">
               <About />
             </Route>
+            <Route path="/conduita">
+              <Conduita />
+            </Route>
             <Route path="/politica-de-confidentialitate">
               <PrivacyPolicy />
             </Route>

frontend/src/components/Card/Card.scss

@@ -0,0 +1,5 @@
+.cardImage {
+  margin-right: 15px;
+  max-width: 120px; 
+  width: 100%;
+}

frontend/src/components/Card/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./Card.scss";
+
+const Card = (props) => {
+  const { image, children } = props;
+  return (
+    <div className="columns column is-vcentered">
+      <img src={image} alt="" width="112" height="112" className="cardImage" />
+      <p>{children}</p>
+    </div>
+  );
+};
+
+Card.propTypes = {
+  image: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default Card;

frontend/src/components/Conduita/index.js

@@ -0,0 +1,147 @@
+import React from "react";
+import { Hero, Instruments } from "@code4ro/taskforce-fe-components";
+import UsefulApps from "../../data/useful-apps";
+import Card from "./../Card";
+import conduitaImge1 from "../../images/conduita/1.png";
+import conduitaImge2 from "../../images/conduita/2.png";
+import conduitaImge3 from "../../images/conduita/3.png";
+import conduitaImge4 from "../../images/conduita/4.png";
+import conduitaImge5 from "../../images/conduita/5.png";
+import conduitaImge6 from "../../images/conduita/6.png";
+import conduitaImge7 from "../../images/conduita/7.png";
+import conduitaImge8 from "../../images/conduita/8.png";
+import conduitaImge9 from "../../images/conduita/9.png";
+import conduitaImge10 from "../../images/conduita/10.png";
+import conduitaImge11 from "../../images/conduita/11.png";
+import conduitaImge12 from "../../images/conduita/12.png";
+import conduitaImge13 from "../../images/conduita/13.png";
+import conduitaImge14 from "../../images/conduita/14.png";
+import conduitaImge15 from "../../images/conduita/15.png";
+import conduitaImge16 from "../../images/conduita/16.png";
+import conduitaImge17 from "../../images/conduita/17.png";
+import conduitaImge18 from "../../images/conduita/18.png";
+import conduitaImge19 from "../../images/conduita/19.png";
+import conduitaImge20 from "../../images/conduita/20.png";
+import {
+  renderInstrumentItem,
+  remapInstrumentsData,
+} from "../../utils/instruments.utils";
+
+const Conduita = () => {
+  const instrumentsData = remapInstrumentsData(UsefulApps);
+
+  return (
+    <div className="container">
+      <div className="columns">
+        <div className="column">
+          <section>
+            <Hero title="Port masca corect" useFallbackIcon={true} />
+          </section>
+          <section className="content">
+            <h3 className="has-text-info">Ai grijă să:</h3>
+            <div className="columns  is-desktop has-text-centered-mobile">
+              <div className="column">
+                <Card image={conduitaImge1}>
+                  Îți speli/dezinfectezi mâinile înainte să atingi masca.
+                </Card>
+                <Card image={conduitaImge2}>
+                  Verifici ca masca să nu fie ruptă sau găurită.
+                </Card>
+                <Card image={conduitaImge3}>
+                  Pui partea colorată a măștii în exterior.
+                </Card>
+                <Card image={conduitaImge4}>
+                  Identifici latura cu fir metalic a măștii și să o pliezi pe
+                  forma nasului.
+                </Card>
+                <Card image={conduitaImge5}>
+                  Fixezi masca cu ajutorul firelor elastice trecute prin spatele
+                  urechilor.
+                </Card>
+              </div>
+              <div className="column">
+                <Card image={conduitaImge6}>
+                  Poziționezi masca astfel încât să acopere atât nasul, cât și
+                  gura.
+                </Card>
+                <Card image={conduitaImge7}>
+                  Îndepărtezi masca întotdeauna trăgând de elasticul din spatele
+                  urechilor.
+                </Card>
+                <Card image={conduitaImge8}>
+                  Ții masca folosită la distanță de tine și de suprafețe.
+                </Card>
+                <Card image={conduitaImge9}>
+                  Arunci întotdeauna masca la un coș de gunoi, preferabil cu
+                  capac.
+                </Card>
+                <Card image={conduitaImge10}>
+                  Speli mâinile sau să le dezinfectezi după ce ai aruncat masca.
+                </Card>
+              </div>
+            </div>
+
+            <h3 className="has-text-danger">Ai grijă să NU:</h3>
+            <div className="columns  is-desktop has-text-centered-mobile">
+              <div className="column">
+                <Card image={conduitaImge11}>
+                  Folosești o mască ruptă sau umedă.
+                </Card>
+                <Card image={conduitaImge12}>
+                  Acoperi cu masca doar gura sau doar nasul.
+                </Card>
+                <Card image={conduitaImge13}>
+                  Rămână spațiu între mască și față.
+                </Card>
+                <Card image={conduitaImge14}>
+                  Atingi masca cu mâinile în timpul folosirii.
+                </Card>
+                <Card image={conduitaImge15}>
+                  Porți o masca nepotrivită, care nu stă fixă pe față.
+                </Card>
+              </div>
+              <div className="column">
+                <Card image={conduitaImge16}>
+                  Atingi partea din față a măștii.
+                </Card>
+                <Card image={conduitaImge17}>
+                  Înlături masca atunci când stai de vorbă cu cineva.
+                </Card>
+                <Card image={conduitaImge18}>Porți masca sub bărbie.</Card>
+                <Card image={conduitaImge19}>
+                  Lași masca folosită de tine la îndemâna altcuiva.
+                </Card>
+                <Card image={conduitaImge20}>
+                  Refolosești măștile de unică folosință.
+                </Card>
+              </div>
+            </div>
+          </section>
+        </div>
+        <aside className="column is-4">
+          <Hero title={"Instrumente utile"} useFallbackIcon={true} />
+
+          <Instruments layout="list">
+            {instrumentsData.info.map((usefulApp) =>
+              renderInstrumentItem(usefulApp)
+            )}
+            {instrumentsData.news.map((usefulApp) =>
+              renderInstrumentItem(usefulApp)
+            )}
+            {instrumentsData.offer_help.map((usefulApp) =>
+              renderInstrumentItem(usefulApp)
+            )}
+            {instrumentsData.data.map((usefulApp) =>
+              renderInstrumentItem(usefulApp)
+            )}
+            {instrumentsData.diaspora.map((usefulApp) =>
+              renderInstrumentItem(usefulApp)
+            )}
+          </Instruments>
+        </aside>
+      </div>
+    </div>
+  );
+};
+
+export default Conduita;

frontend/src/components/Home/index.js

@@ -137,42 +137,46 @@ const Home = () => {
                   onClick={triggerSearch}
                 />
               </div>
-              {data.map((doc) => {
-                let menuItems = null;
-                if (doc.content.length > 1) {
-                  // Ignore the first subpage title
-                  // It's shown as page title
-                  menuItems = doc.content.slice(1).map((page) => (
-                    <SidebarMenuItem
-                      key={`subpage-header_${page.slug}`}
-                      theme={page.theme}
-                      active={page.slug === subPageSlug}
-                      onClick={() => navigateToPage(`${doc.slug}/${page.slug}`)}
-                    >
-                      {page.title}
-                    </SidebarMenuItem>
-                  ));
-                }
-
-                return (
-                  <div key={`page-wrapper_${doc.slug}`}>
-                    <SidebarMenuItem
-                      key={`page-header_${doc.slug}`}
-                      theme={doc.theme}
-                      active={
-                        !subPageSlug &&
-                        (doc.slug === pageSlug ||
-                          (doc.slug === "/" && !pageSlug))
-                      }
-                      onClick={() => navigateToPage(doc.slug)}
-                      isTitle
-                    >
-                      {doc.title}
-                    </SidebarMenuItem>
-                    {menuItems}
-                  </div>
-                );
-              })}
+              {data
+                .filter((doc) => doc.showInSideMenu)
+                .map((doc) => {
+                  let menuItems = null;
+                  if (doc.content.length > 1) {
+                    // Ignore the first subpage title
+                    // It's shown as page title
+                    menuItems = doc.content.slice(1).map((page) => (
+                      <SidebarMenuItem
+                        key={`subpage-header_${page.slug}`}
+                        theme={page.theme}
+                        active={page.slug === subPageSlug}
+                        onClick={() =>
+                          navigateToPage(`${doc.slug}/${page.slug}`)
+                        }
+                      >
+                        {page.title}
+                      </SidebarMenuItem>
+                    ));
+                  }
+
+                  return (
+                    <div key={`page-wrapper_${doc.slug}`}>
+                      <SidebarMenuItem
+                        key={`page-header_${doc.slug}`}
+                        theme={doc.theme}
+                        active={
+                          !subPageSlug &&
+                          (doc.slug === pageSlug ||
+                            (doc.slug === "/" && !pageSlug))
+                        }
+                        onClick={() => navigateToPage(doc.slug)}
+                        isTitle
+                      >
+                        {doc.title}
+                      </SidebarMenuItem>
+                      {menuItems}
+                    </div>
+                  );
+                })}
             </SidebarMenu>
 
             {extraInfo}

frontend/src/data/static-pages.js

@@ -7,6 +7,7 @@ export default [
     active: true,
     display_order: 2,
     showInTopMenu: true,
+    showInSideMenu: true,
     firstNodeId: null,
     content: [
       {
@@ -81,6 +82,7 @@ export default [
     doc_type: "STATIC_PAGE",
     doc_id: 102,
     showInTopMenu: true,
+    showInSideMenu: true,
     active: false,
     display_order: 3,
     content: [
@@ -283,7 +285,8 @@ export default [
     doc_type: "STATIC_PAGE",
     doc_id: 103,
     active: false,
-    showInTopMenu: true,
+    showInTopMenu: false,
+    showInSideMenu: false,
     display_order: 4,
     content: [
       {
@@ -574,6 +577,7 @@ export default [
     active: false,
     display_order: 5,
     showInTopMenu: true,
+    showInSideMenu: true,
     content: [
       {
         title: "Adaptare și rezistență",
@@ -765,21 +769,9 @@ export default [
 
       `
       },
-      {
-        title: "Model declarație pe proprie răspundere",
-        theme: { highlightColor: '#ffde59'},
-        display_order: 7,
-        slug: "modele-de-declaratii",
-        page: `
-        <p> Descarcă de aici modelul de declarație pe proprie răspundere pe care o poți utiliza în perioada stării de alertă.  </p>
-
-        <p style="background-color: #ffd738; padding: 10px;"> <a target="_blank" href="https://stirioficiale.ro/storage/declaratii%2014%20mai/Declaratie%20proprie%20raspundere_starealerta.pdf"> Descarcă de aici </a> modelul de declarație pe proprie răspundere </p>
-
-        `
-      },
       {
         title: "Cum să îți planifici mai bine finanțele proprii",
-        display_order: 8,
+        display_order: 7,
         slug: "planificare-finante",
         page: `
         <p style="background-color: #ffd738; padding: 10px; font-weight: bold;">Statul în casă poate fi eficient pentru tine și pentru bugetul tău. Nu mai ieși așa des în oraș, nu te mai plimbi prin magazine, nu mai pleci în excursii. Toate aceste NU-uri sunt ca o gură de aer pentru cheltuielile tale sau, altfel spus, un DA pentru economii. Totuși, la polul opus, te pândește cheltuitul impulsiv sau un venit mai mic. Să ai grijă de bugetul tău poate părea complicat acum și, totuși, sunt câteva sfaturi financiare pe care e bine să le iei în considerare în această perioadă.</p>
@@ -824,6 +816,7 @@ export default [
     active: false,
     display_order: 6,
     showInTopMenu: true,
+    showInSideMenu: true,
     content: [
       {
         title: "Pentru cei care oferă ajutor",
@@ -936,6 +929,7 @@ export default [
     active: false,
     display_order: 8,
     showInTopMenu: false,
+    showInSideMenu: true,
     content: [
       {
         title: "Întrebări frecvente - COVID-19",
@@ -1229,6 +1223,7 @@ Cea mai sigură metodă de evitare a infecției este să evitați expunerea la v
     active: false,
     display_order: 1,
     showInTopMenu: true,
+    showInSideMenu: true,
     content: [
       {
         title: "Întrebări frecvente - stare de alertă",
@@ -1333,6 +1328,7 @@ Totodată, se va considera zonă metropolitană Municipiul București și între
     active: false,
     display_order: 7,
     showInTopMenu: true,
+    showInSideMenu: true,
     content: [
       {
         title: "Mituri despre coronavirus",