From 38cbf3ebc29aabc50177208b73f13fe3041b6a58 Mon Sep 17 00:00:00 2001 From: Sahin-Albayram Date: Sun, 22 Oct 2023 11:56:02 +0300 Subject: [PATCH 1/2] MapLayout Created, Navigation bar created as a component simple map designed --- .../frontend/components/Map/MainMap.js | 25 ++++++ .../components/Map/MainMap.module.scss | 7 ++ .../frontend/components/{ => Map}/Map.js | 4 +- .../components/{ => Map}/Map.module.scss | 0 .../frontend/components/Map/MapFilterMenu.js | 48 +++++++++++ .../components/Map/MapFilterMenu.module.scss | 66 +++++++++++++++ .../frontend/components/NavigationBar.js | 52 ++++++++++++ .../components/NavigationBar.module.scss | 79 ++++++++++++++++++ .../frontend/layouts/MainLayout.js | 61 +++----------- .../frontend/layouts/MainLayout.module.scss | 4 + .../frontend/layouts/MapLayout.js | 22 +++++ .../frontend/layouts/MapLayout.module.scss | 83 +++++++++++++++++++ .../frontend/package-lock.json | 2 +- .../frontend/package.json | 11 ++- .../frontend/pages/index.js | 2 +- .../frontend/pages/map/index.js | 28 +++---- .../frontend/styles/globals.css | 1 - 17 files changed, 421 insertions(+), 74 deletions(-) create mode 100644 Disaster-Response-Platform/frontend/components/Map/MainMap.js create mode 100644 Disaster-Response-Platform/frontend/components/Map/MainMap.module.scss rename Disaster-Response-Platform/frontend/components/{ => Map}/Map.js (89%) rename Disaster-Response-Platform/frontend/components/{ => Map}/Map.module.scss (100%) create mode 100644 Disaster-Response-Platform/frontend/components/Map/MapFilterMenu.js create mode 100644 Disaster-Response-Platform/frontend/components/Map/MapFilterMenu.module.scss create mode 100644 Disaster-Response-Platform/frontend/components/NavigationBar.js create mode 100644 Disaster-Response-Platform/frontend/components/NavigationBar.module.scss create mode 100644 Disaster-Response-Platform/frontend/layouts/MapLayout.js create mode 100644 Disaster-Response-Platform/frontend/layouts/MapLayout.module.scss diff --git a/Disaster-Response-Platform/frontend/components/Map/MainMap.js b/Disaster-Response-Platform/frontend/components/Map/MainMap.js new file mode 100644 index 00000000..bc0d7be8 --- /dev/null +++ b/Disaster-Response-Platform/frontend/components/Map/MainMap.js @@ -0,0 +1,25 @@ +import React, { useState, useRef } from 'react' +import { MapContainer, TileLayer, Marker } from 'react-leaflet' +import 'leaflet/dist/leaflet.css' +import styles from './MainMap.module.scss' + +export default function Map() { + const [center, setCenter] = useState({ lat: 41.08714, lng: 29.043474 }) + const ZOOM_LEVEL = 15 + const mapRef = useRef() + + + return ( + +
+ + + + +
+ + ) +} \ No newline at end of file diff --git a/Disaster-Response-Platform/frontend/components/Map/MainMap.module.scss b/Disaster-Response-Platform/frontend/components/Map/MainMap.module.scss new file mode 100644 index 00000000..6962bc9e --- /dev/null +++ b/Disaster-Response-Platform/frontend/components/Map/MainMap.module.scss @@ -0,0 +1,7 @@ +.map{ + width:100% !important; + float: left; + height:90vh !important; + margin-right: 0.2rem; + border-radius: 5px; + } \ No newline at end of file diff --git a/Disaster-Response-Platform/frontend/components/Map.js b/Disaster-Response-Platform/frontend/components/Map/Map.js similarity index 89% rename from Disaster-Response-Platform/frontend/components/Map.js rename to Disaster-Response-Platform/frontend/components/Map/Map.js index 9d829bea..3e03db05 100644 --- a/Disaster-Response-Platform/frontend/components/Map.js +++ b/Disaster-Response-Platform/frontend/components/Map/Map.js @@ -4,8 +4,8 @@ import 'leaflet/dist/leaflet.css' import styles from './Map.module.scss' export default function Map() { - const [center, setCenter] = useState({ lat: -4.043477, lng: 39.668205 }) - const ZOOM_LEVEL = 9 + const [center, setCenter] = useState({ lat: 37.4, lng: 37 }) + const ZOOM_LEVEL = 6 const mapRef = useRef() diff --git a/Disaster-Response-Platform/frontend/components/Map.module.scss b/Disaster-Response-Platform/frontend/components/Map/Map.module.scss similarity index 100% rename from Disaster-Response-Platform/frontend/components/Map.module.scss rename to Disaster-Response-Platform/frontend/components/Map/Map.module.scss diff --git a/Disaster-Response-Platform/frontend/components/Map/MapFilterMenu.js b/Disaster-Response-Platform/frontend/components/Map/MapFilterMenu.js new file mode 100644 index 00000000..1d81e160 --- /dev/null +++ b/Disaster-Response-Platform/frontend/components/Map/MapFilterMenu.js @@ -0,0 +1,48 @@ +import { color } from "framer-motion"; +import styles from "./MapFilterMenu.module.scss"; +import { FaSearch } from "react-icons/fa"; +export default function MapFilterMenu() { + return ( +
+
+
+ + +
+
+
+
Aradıklarınız
+
+
+ + Resource +
+
+ + Event +
+
+ + Actions +
+
+ + Needs +
+
+
+ ); +} diff --git a/Disaster-Response-Platform/frontend/components/Map/MapFilterMenu.module.scss b/Disaster-Response-Platform/frontend/components/Map/MapFilterMenu.module.scss new file mode 100644 index 00000000..9e8e6404 --- /dev/null +++ b/Disaster-Response-Platform/frontend/components/Map/MapFilterMenu.module.scss @@ -0,0 +1,66 @@ + +.main{ + background-color: #c7eff4; + float: right; + width: 20%; + border-radius: 5px; + margin: 0; + padding: 0.4rem; +} +@import url(https://fonts.googleapis.com/css?family=Open+Sans); + + + +.search { + width: 100%; + //position: relative; + display: flex; +} + +.searchTerm { + background-color: #ffffff; + width: 100%; + border: 3px solid #00B4CC; + border-right: none; + padding: 0.5rem; + height: 80%; + border-radius: 5px 0 0 5px; + outline: none; + color: #6c6c6c; +} + +.searchTerm:focus{ + color: #6c6c6c; +} + +.searchButton { + width: 12%; + //height: 100%; + border: 1px solid #00B4CC; + background: #00B4CC; + text-align: center; + padding-left: 5px; + padding-right: 5px; + color: #fff; + border-radius: 0 5px 5px 0; + cursor: pointer; + font-size: 1rem; +} + +/*Resize the wrap to see the search bar change!*/ +.searchBox{ + position: relative; +} + + +////////////////////////////////////////////////// + +.header{ + color: #4f4f4f !important; + text-align: center; +} + +.checkbox{ + color: white; + +} \ No newline at end of file diff --git a/Disaster-Response-Platform/frontend/components/NavigationBar.js b/Disaster-Response-Platform/frontend/components/NavigationBar.js new file mode 100644 index 00000000..3ff85ca4 --- /dev/null +++ b/Disaster-Response-Platform/frontend/components/NavigationBar.js @@ -0,0 +1,52 @@ +import styles from "./NavigationBar.module.scss"; +import {FaMapMarkedAlt} from "react-icons/fa"; +import {BsSearch} from "react-icons/bs"; +import {Button} from "@nextui-org/react"; +import {CgProfile} from "react-icons/cg"; +import Link from "next/link"; + + + +export default function NavigationBar() { + return ( +
+
+
+ + +
+
+ + + + +
+ +
+ + +
+ ) + +} \ No newline at end of file diff --git a/Disaster-Response-Platform/frontend/components/NavigationBar.module.scss b/Disaster-Response-Platform/frontend/components/NavigationBar.module.scss new file mode 100644 index 00000000..2c3dbea6 --- /dev/null +++ b/Disaster-Response-Platform/frontend/components/NavigationBar.module.scss @@ -0,0 +1,79 @@ +@import "@/styles/variables.scss"; + +.icon { + padding: 1rem; +} + +.main { + display: flex; + flex-direction: column; + justify-content: center; + + +} + +.navbar { + border-bottom: 1px solid #3C4043; + //background-color: #1C9BEF; + display: flex; + flex-direction: row; + justify-content: space-between; + nav { + + div { + cursor: pointer; + } + } +} + +.icon { + svg { + width:30px !important; + height:30px !important; + } + +} +.selected { + border-left: 3px solid $base-color; + pointer-events: none; + +} + +.nav { + padding: 1em; + width: 100%; + text-align: center; + height: 3.5em; + + +} +.rightbar { + display: flex; + flex-direction: row; +} + +.button { + overflow:hidden; + border-radius: 1em; + white-space: nowrap; + border-style: none; + outline-offset: 0; + margin:0; + height:100%; + padding-left: 3em; + padding-right: 3em; + padding-top: 1em; + padding-bottom: 1em; + background-color: #e00000; +} +.body { + display: flex; + flex-direction: column; + align-items: center; + background-color: $bg-color; + color:#262626; + padding: 2rem; + // min-width: 600px; + +} + diff --git a/Disaster-Response-Platform/frontend/layouts/MainLayout.js b/Disaster-Response-Platform/frontend/layouts/MainLayout.js index 81ad7441..666ec304 100644 --- a/Disaster-Response-Platform/frontend/layouts/MainLayout.js +++ b/Disaster-Response-Platform/frontend/layouts/MainLayout.js @@ -1,57 +1,22 @@ - import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import styles from "./MainLayout.module.scss"; -import {FaMapMarkedAlt} from "react-icons/fa"; -import {BsSearch} from "react-icons/bs"; -import {Button} from "@nextui-org/react"; -import {CgProfile} from "react-icons/cg"; +import { FaMapMarkedAlt } from "react-icons/fa"; +import { BsSearch } from "react-icons/bs"; +import { Button } from "@nextui-org/react"; +import { CgProfile } from "react-icons/cg"; +import NavigationBar from "@/components/NavigationBar.js"; function MainLayout({ children }) { - const router = useRouter(); - - return ( -
-
-
- - -
-
- - - - -
- -
- -
{children}
-
+ const router = useRouter(); - ); + return ( +
+ +
{children}
+
+ ); } -export default MainLayout; \ No newline at end of file +export default MainLayout; diff --git a/Disaster-Response-Platform/frontend/layouts/MainLayout.module.scss b/Disaster-Response-Platform/frontend/layouts/MainLayout.module.scss index 2c3dbea6..d904b296 100644 --- a/Disaster-Response-Platform/frontend/layouts/MainLayout.module.scss +++ b/Disaster-Response-Platform/frontend/layouts/MainLayout.module.scss @@ -5,6 +5,10 @@ } .main { + max-width: 70vw !important; + min-width: 600px; + margin: 0 auto; + overflow-x: hidden; display: flex; flex-direction: column; justify-content: center; diff --git a/Disaster-Response-Platform/frontend/layouts/MapLayout.js b/Disaster-Response-Platform/frontend/layouts/MapLayout.js new file mode 100644 index 00000000..36803292 --- /dev/null +++ b/Disaster-Response-Platform/frontend/layouts/MapLayout.js @@ -0,0 +1,22 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; +import styles from "./MapLayout.module.scss"; +import { FaMapMarkedAlt } from "react-icons/fa"; +import { BsSearch } from "react-icons/bs"; +import { Button } from "@nextui-org/react"; +import { CgProfile } from "react-icons/cg"; +import NavigationBar from "@/components/NavigationBar.js"; + +function MainLayout({ children }) { + const router = useRouter(); + + return ( +
+ +
{children}
+
+ ); +} + +export default MainLayout; diff --git a/Disaster-Response-Platform/frontend/layouts/MapLayout.module.scss b/Disaster-Response-Platform/frontend/layouts/MapLayout.module.scss new file mode 100644 index 00000000..79541b00 --- /dev/null +++ b/Disaster-Response-Platform/frontend/layouts/MapLayout.module.scss @@ -0,0 +1,83 @@ +@import "@/styles/variables.scss"; + +.icon { + padding: 1rem; +} + +.main { + min-width: 600px; + margin: 0 auto; + overflow-x: hidden; + display: flex; + flex-direction: column; + justify-content: center; + + +} + +.navbar { + border-bottom: 1px solid #3C4043; + //background-color: #1C9BEF; + display: flex; + flex-direction: row; + justify-content: space-between; + nav { + + div { + cursor: pointer; + } + } +} + +.icon { + svg { + width:30px !important; + height:30px !important; + } + +} +.selected { + border-left: 3px solid $base-color; + pointer-events: none; + +} + +.nav { + padding: 1em; + width: 100%; + text-align: center; + height: 3.5em; + + +} +.rightbar { + display: flex; + flex-direction: row; +} + +.button { + overflow:hidden; + border-radius: 1em; + white-space: nowrap; + border-style: none; + outline-offset: 0; + margin:0; + height:100%; + padding-left: 3em; + padding-right: 3em; + padding-top: 1em; + padding-bottom: 1em; + background-color: #e00000; +} +.body { + display: flex; + //flex-direction: column; + //align-items: center; + background-color: $bg-color; + color:#262626; + padding: 0.5rem; + margin: 0; + // min-width: 600px; + +} + diff --git a/Disaster-Response-Platform/frontend/package-lock.json b/Disaster-Response-Platform/frontend/package-lock.json index d0e700d7..77866d90 100644 --- a/Disaster-Response-Platform/frontend/package-lock.json +++ b/Disaster-Response-Platform/frontend/package-lock.json @@ -9,7 +9,7 @@ "version": "0.1.0", "dependencies": { "@nextui-org/react": "^2.1.13", - "autoprefixer": "10.4.16", + "autoprefixer": "^10.4.16", "framer-motion": "^10.16.4", "next": "13.5.6", "postcss": "8.4.31", diff --git a/Disaster-Response-Platform/frontend/package.json b/Disaster-Response-Platform/frontend/package.json index 22e354c4..4d9a8fdd 100644 --- a/Disaster-Response-Platform/frontend/package.json +++ b/Disaster-Response-Platform/frontend/package.json @@ -9,17 +9,16 @@ "lint": "next lint" }, "dependencies": { - "autoprefixer": "10.4.16", + "@nextui-org/react": "^2.1.13", + "autoprefixer": "^10.4.16", + "framer-motion": "^10.16.4", "next": "13.5.6", "postcss": "8.4.31", "react": "18.2.0", "react-dom": "18.2.0", - "tailwindcss": "3.3.3", - "@nextui-org/react": "^2.1.13", - "framer-motion": "^10.16.4", "react-icons": "^4.11.0", "react-leaflet": "^4.2.1", - "sass": "^1.69.3" - + "sass": "^1.69.3", + "tailwindcss": "3.3.3" } } diff --git a/Disaster-Response-Platform/frontend/pages/index.js b/Disaster-Response-Platform/frontend/pages/index.js index b7ff1692..14342b88 100644 --- a/Disaster-Response-Platform/frontend/pages/index.js +++ b/Disaster-Response-Platform/frontend/pages/index.js @@ -3,7 +3,7 @@ import MainLayout from '@/layouts/MainLayout' import dynamic from 'next/dynamic' import ActivityTable from '@/components/ActivityTable' -const Map = dynamic(() => import('../components/Map'), { +const Map = dynamic(() => import('../components/Map/Map'), { ssr: false, }) diff --git a/Disaster-Response-Platform/frontend/pages/map/index.js b/Disaster-Response-Platform/frontend/pages/map/index.js index 3bc0c8c8..2cf1c07a 100644 --- a/Disaster-Response-Platform/frontend/pages/map/index.js +++ b/Disaster-Response-Platform/frontend/pages/map/index.js @@ -1,22 +1,20 @@ -import Head from 'next/head' -import Image from 'next/image' -import { Inter } from 'next/font/google' -import styles from '@/styles/Home.module.css' -import MainLayout from '@/layouts/MainLayout' +import styles from "@/styles/Home.module.css"; +import MapLayout from "@/layouts/MapLayout"; +import dynamic from "next/dynamic"; +import MapFilterMenu from "@/components/Map/MapFilterMenu"; -const inter = Inter({ subsets: ['latin'] }) +const Map = dynamic(() => import("@/components/Map/MainMap"), { + ssr: false, +}); -export default function map() { +export default function home() { return ( <> -
-
- deneme deneme -
-
+ + - ) + ); } -map.getLayout = function getLayout(page) { - return {page}; +home.getLayout = function getLayout(page) { + return {page}; }; diff --git a/Disaster-Response-Platform/frontend/styles/globals.css b/Disaster-Response-Platform/frontend/styles/globals.css index b3f3adf3..bc0f7d25 100644 --- a/Disaster-Response-Platform/frontend/styles/globals.css +++ b/Disaster-Response-Platform/frontend/styles/globals.css @@ -83,7 +83,6 @@ html, body { - max-width: 70vw; min-width: 600px; margin: 0 auto; overflow-x: hidden; From 59ac021354dbce58edcac77ff6423249ad0fc709 Mon Sep 17 00:00:00 2001 From: Sahin-Albayram Date: Sun, 22 Oct 2023 12:36:47 +0300 Subject: [PATCH 2/2] font import deleted, map page function name changed, filter menu adjusted --- .../frontend/components/Map/MapFilterMenu.js | 3 +-- .../frontend/components/Map/MapFilterMenu.module.scss | 7 +++---- Disaster-Response-Platform/frontend/pages/map/index.js | 4 ++-- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/Disaster-Response-Platform/frontend/components/Map/MapFilterMenu.js b/Disaster-Response-Platform/frontend/components/Map/MapFilterMenu.js index 1d81e160..81f3d2ca 100644 --- a/Disaster-Response-Platform/frontend/components/Map/MapFilterMenu.js +++ b/Disaster-Response-Platform/frontend/components/Map/MapFilterMenu.js @@ -1,4 +1,3 @@ -import { color } from "framer-motion"; import styles from "./MapFilterMenu.module.scss"; import { FaSearch } from "react-icons/fa"; export default function MapFilterMenu() { @@ -17,7 +16,7 @@ export default function MapFilterMenu() {
-
Aradıklarınız
+
Filtreler
import("@/components/Map/MainMap"), { ssr: false, }); -export default function home() { +export default function mapPage() { return ( <> @@ -15,6 +15,6 @@ export default function home() { ); } -home.getLayout = function getLayout(page) { +mapPage.getLayout = function getLayout(page) { return {page}; };