diff --git a/src/Components/Layout/NavBarSalw/NavBarSalw.js b/src/Components/Layout/NavBarSalw/NavBarSalw.js index 0f59611..28212b3 100644 --- a/src/Components/Layout/NavBarSalw/NavBarSalw.js +++ b/src/Components/Layout/NavBarSalw/NavBarSalw.js @@ -1,10 +1,9 @@ import React from "react"; -import { BrowserRouter as Router, Route, Link, Switch, Routes } from "react-router-dom"; +import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import Container from "react-bootstrap/Container"; import Nav from "react-bootstrap/Nav"; import Navbar from "react-bootstrap/Navbar"; -import NavDropdown from "react-bootstrap/NavDropdown"; import Home from "../../Pages/Home"; import About from "../../Pages/About"; import ControlInAfrica from "../../Pages/ControlInAfrica"; @@ -14,16 +13,17 @@ const NavBarSalw = () => { return ( <> - - - SALW Guide + + + SALW Guide | + diff --git a/src/Components/Layout/PSSM/Blurb.js b/src/Components/Layout/PSSM/Blurb.js index 4870aff..2b02e9b 100644 --- a/src/Components/Layout/PSSM/Blurb.js +++ b/src/Components/Layout/PSSM/Blurb.js @@ -2,7 +2,6 @@ import React, { useState } from "react"; import Card_ from "../../UI/Card_/Card_"; import DOMPurify from "dompurify"; import parse from "html-react-parser"; -import TruncateContent from "../../Helpers/TruncateContent/TruncateContent"; import Collapse from "react-bootstrap/Collapse"; const Blurb = () => { @@ -30,14 +29,14 @@ const Blurb = () => { ]); return ( - + ); }; const MainText = ({ footnotes }) => { - const [open, setOpen] = useState(false); + const [open, setOpen] = useState(true); const [isHidden, setIsHidden] = useState(true); return (
@@ -157,14 +156,17 @@ const MainText = ({ footnotes }) => {
- {setOpen(!open); setIsHidden(!isHidden);}} + onClick={() => { + setOpen(!open); + setIsHidden(!isHidden); + }} aria-controls="example-collapse-text" aria-expanded={open} > {isHidden ? "Read more" : "Read less"} - + */} ); }; diff --git a/src/Components/Layout/PSSM/ImageGallery.jsx b/src/Components/Layout/PSSM/ImageGallery.jsx new file mode 100644 index 0000000..245e54f --- /dev/null +++ b/src/Components/Layout/PSSM/ImageGallery.jsx @@ -0,0 +1,53 @@ +import React, { useState } from "react"; +import images from "./ImportImages"; +import Card_ from "../../UI/Card_/Card_"; + +const ImageGallery = () => { + const [selectedImage, setSelectedImage] = useState(null); + + const handleThumbnailClick = (image) => { + setSelectedImage(image); + }; + + const handleCloseModal = () => { + setSelectedImage(null); + }; + + return ( + +
+ {Object.keys(images).map((key, index) => ( + {key} handleThumbnailClick(images[key])} + /> + ))} +
+ {selectedImage && ( +
+
e.stopPropagation()}> + + × + + Full Size +
+
+ )} +
+

+ Pictures have been taken by ©Nikhil Achary, ©IPSTC/Kenya, ©MSAG AUT, + and ©Hans Lampalzer (BLMV).{" "} +

+
+ + ); +}; + +export default ImageGallery; diff --git a/src/Components/Layout/PSSM/ImpactStories.jsx b/src/Components/Layout/PSSM/ImpactStories.jsx new file mode 100644 index 0000000..340378d --- /dev/null +++ b/src/Components/Layout/PSSM/ImpactStories.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import Card_ from '../../UI/Card_/Card_' +const ImpactStories = (props) => { + const {className} = props; + return ( + ImpactStories + ) +} + +export default ImpactStories \ No newline at end of file diff --git a/src/Components/Layout/PSSM/ImportImages.js b/src/Components/Layout/PSSM/ImportImages.js new file mode 100644 index 0000000..3211286 --- /dev/null +++ b/src/Components/Layout/PSSM/ImportImages.js @@ -0,0 +1,12 @@ +// src/importImages.js +function importAll(r) { + let images = {}; + r.keys().map((item, index) => { + images[item.replace('./', '')] = r(item); + }); + return images; + } + + const images = importAll(require.context('../../../img/pssm', false, /\.(png|jpe?g|svg)$/)); + + export default images; \ No newline at end of file diff --git a/src/Components/Layout/PSSM/PSSM.jsx b/src/Components/Layout/PSSM/PSSM.jsx index ccb7fe5..b25311a 100644 --- a/src/Components/Layout/PSSM/PSSM.jsx +++ b/src/Components/Layout/PSSM/PSSM.jsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, createRef } from "react"; import { MapContainer, GeoJSON, useMap } from "react-leaflet"; import L from "leaflet"; @@ -16,7 +16,7 @@ const CustomZoomControl = React.memo(() => { useEffect(() => { const zoomControl = L.control.zoom({ - position: 'topright' // Change the position to bottom right + position: "topright", // Change the position to bottom right }); map.addControl(zoomControl); @@ -33,6 +33,8 @@ class PSSM extends React.Component { constructor(props) { super(props); + this.mapRef = createRef(); // Create a ref to store the MapContainer instance + this.state = { africaCountries: null, countriesNames: [], @@ -93,6 +95,22 @@ class PSSM extends React.Component { }); }; + resetMap = () => { + if (this.mapRef.current) { + this.mapRef.current.setView(this.state.center, this.state.zoom); // Set the center and zoom to initial values + } + }; + zoomIn = () => { + if (this.mapRef.current) { + this.mapRef.current.setZoom(this.mapRef.current.getZoom() + 1); + } + }; + zoomOut = () => { + if (this.mapRef.current) { + this.mapRef.current.setZoom(this.mapRef.current.getZoom() - 1); + } + }; + onMouseClick = (e) => { this.setState({ selectedCountriesFilter: [], @@ -135,8 +153,9 @@ class PSSM extends React.Component { } return ( - + - + {/* */} +
+ + + +
+ + diff --git a/src/Components/Layout/PSSM/PssmResources.jsx b/src/Components/Layout/PSSM/PssmResources.jsx new file mode 100644 index 0000000..f316654 --- /dev/null +++ b/src/Components/Layout/PSSM/PssmResources.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import Card_ from '../../UI/Card_/Card_'; +const PssmResources = (props) => { + const {className} = props; + return ( + PSSM Resources + ) +} + +export default PssmResources \ No newline at end of file diff --git a/src/Components/Pages/PSSM.js b/src/Components/Pages/PSSM.js index 58af2ee..517a117 100644 --- a/src/Components/Pages/PSSM.js +++ b/src/Components/Pages/PSSM.js @@ -1,12 +1,28 @@ import React from "react"; import Container from "react-bootstrap/Container"; +import Row from "react-bootstrap/Row"; +import Col from "react-bootstrap/Col"; import Blurb from "../Layout/PSSM/Blurb"; import PSSM from "../Layout/PSSM/PSSM"; +import ImageGallery from "../Layout/PSSM/ImageGallery"; +import ImpactStories from "../Layout/PSSM/ImpactStories"; +import PssmResources from "../Layout/PSSM/PssmResources"; const Treaties = () => { return ( - - - + + + + + + + + + + + + + + ); }; diff --git a/src/Styles/Layout/_blurb.scss b/src/Styles/Layout/_blurb.scss new file mode 100644 index 0000000..3d95dd4 --- /dev/null +++ b/src/Styles/Layout/_blurb.scss @@ -0,0 +1,8 @@ +.blurb { + width: 100%; /* Adjust the width as needed */ + height: 50%; /* Adjust the height as needed */ + overflow-y: auto; + border: 1px solid #ccc; /* Optional: Add a border for better visibility */ + padding: 10px; /* Optional: Add some padding */ + box-sizing: border-box; /* Ensure padding is included in the element's total width and height */ + } \ No newline at end of file diff --git a/src/Styles/Layout/_nav_bar.scss b/src/Styles/Layout/_nav_bar.scss new file mode 100644 index 0000000..7d52e74 --- /dev/null +++ b/src/Styles/Layout/_nav_bar.scss @@ -0,0 +1,13 @@ +.nav-bar{ + background-color: $primary-accent-color !important; +} + +.nav-bar-title{ + font-size: 26px; +} + +.nav-bar-item{ + font-size: 26px; + color: $primary-text-color; + margin-right: 10px; +} \ No newline at end of file diff --git a/src/Styles/Layout/_pssm_image_gallery.scss b/src/Styles/Layout/_pssm_image_gallery.scss new file mode 100644 index 0000000..55f56db --- /dev/null +++ b/src/Styles/Layout/_pssm_image_gallery.scss @@ -0,0 +1,49 @@ +.image-gallery { + display: flex; + flex-wrap: wrap; + gap: 10px; + } + + .thumbnail { + width: 200px; + height: 200px; + object-fit: cover; + cursor: pointer; + transition: transform 0.2s; + } + + .thumbnail:hover { + transform: scale(1.1); + } + + .modal { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + } + + .modal-content { + position: relative; + max-width: 90%; + max-height: 90%; + } + + .close { + position: absolute; + top: 10px; + right: 10px; + color: white; + font-size: 30px; + cursor: pointer; + } + + .full-size-image { + width: 100%; + height: auto; + } \ No newline at end of file diff --git a/src/Styles/main.scss b/src/Styles/main.scss index 2ad78d3..8f63496 100644 --- a/src/Styles/main.scss +++ b/src/Styles/main.scss @@ -17,6 +17,9 @@ @import 'Layout/_map_info_box'; @import 'Layout/_map_info_box2'; @import 'Layout/_legend'; +@import 'Layout/_blurb'; +@import 'Layout/_pssm_image_gallery'; +@import 'Layout/_nav_bar'; // Import other layout partials... diff --git a/src/img/pssm/1000013063.jpg b/src/img/pssm/1000013063.jpg new file mode 100644 index 0000000..d6065d6 Binary files /dev/null and b/src/img/pssm/1000013063.jpg differ diff --git a/src/img/pssm/1000013066.jpg b/src/img/pssm/1000013066.jpg new file mode 100644 index 0000000..04b96c1 Binary files /dev/null and b/src/img/pssm/1000013066.jpg differ diff --git a/src/img/pssm/1000013069.jpg b/src/img/pssm/1000013069.jpg new file mode 100644 index 0000000..d8153e4 Binary files /dev/null and b/src/img/pssm/1000013069.jpg differ diff --git a/src/img/pssm/1000013072.jpg b/src/img/pssm/1000013072.jpg new file mode 100644 index 0000000..16e7ad8 Binary files /dev/null and b/src/img/pssm/1000013072.jpg differ diff --git a/src/img/pssm/1000013075.jpg b/src/img/pssm/1000013075.jpg new file mode 100644 index 0000000..f26a467 Binary files /dev/null and b/src/img/pssm/1000013075.jpg differ diff --git a/src/img/pssm/1000013078.jpg b/src/img/pssm/1000013078.jpg new file mode 100644 index 0000000..715463f Binary files /dev/null and b/src/img/pssm/1000013078.jpg differ diff --git a/src/img/pssm/Bild1_Nikhil.jpg b/src/img/pssm/Bild1_Nikhil.jpg new file mode 100644 index 0000000..a87e5ad Binary files /dev/null and b/src/img/pssm/Bild1_Nikhil.jpg differ diff --git a/src/img/pssm/Bild2_Nikhil.jpg b/src/img/pssm/Bild2_Nikhil.jpg new file mode 100644 index 0000000..7e03794 Binary files /dev/null and b/src/img/pssm/Bild2_Nikhil.jpg differ diff --git a/src/img/pssm/Group of Senior Instructors and Instructors.jpg b/src/img/pssm/Group of Senior Instructors and Instructors.jpg new file mode 100644 index 0000000..e9e4773 Binary files /dev/null and b/src/img/pssm/Group of Senior Instructors and Instructors.jpg differ diff --git a/src/img/pssm/Image 1.jpg b/src/img/pssm/Image 1.jpg new file mode 100644 index 0000000..d85ccf7 Binary files /dev/null and b/src/img/pssm/Image 1.jpg differ diff --git a/src/img/pssm/Opening 2.jpg b/src/img/pssm/Opening 2.jpg new file mode 100644 index 0000000..c479932 Binary files /dev/null and b/src/img/pssm/Opening 2.jpg differ diff --git a/src/img/pssm/Storekeeper and Policewoman.jpg b/src/img/pssm/Storekeeper and Policewoman.jpg new file mode 100644 index 0000000..76ece39 Binary files /dev/null and b/src/img/pssm/Storekeeper and Policewoman.jpg differ diff --git a/src/img/pssm/bild.jpg b/src/img/pssm/bild.jpg new file mode 100644 index 0000000..c0ba58a Binary files /dev/null and b/src/img/pssm/bild.jpg differ