Elaman/kgroad-frontend2
1
0
Fork 0
forked from Transparency/kgroad-frontend2
Code Pull Requests Activity

Merge pull request 'updated navbar, fixed map' (#3) from kg-road-fix into ali

Browse Source 
Reviewed-on: Transparency/kgroad-frontend2#3
This commit is contained in:
altynai 2024-06-13 11:41:41 +00:00
commit bea7ec82c2
11 changed files with 80 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/[locale]/layout.tsx
View File

@ -17,10 +17,7 @@ export default function LocaleLayout({
return ( return (
<html lang={params.locale}> <html lang={params.locale}>
<body> <body>
<NextIntlClientProvider <NextIntlClientProvider locale={params.locale} messages={messages}>
locale={params.locale}
messages={messages}
>
<Providers> <Providers>
<Navbar /> <Navbar />
<div className="app">{children}</div> <div className="app">{children}</div>

9
src/features/SearchForm/SearchForm.tsx
View File

@ -5,8 +5,7 @@ import Image from "next/image";
import search from "./icons/search.svg"; import search from "./icons/search.svg";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
interface ISearchFormProps interface ISearchFormProps extends React.InputHTMLAttributes<HTMLInputElement> {
extends React.InputHTMLAttributes<HTMLInputElement> {
handleSubmit: (e: React.MouseEvent<HTMLFormElement>) => void; handleSubmit: (e: React.MouseEvent<HTMLFormElement>) => void;
} }
@ -20,11 +19,7 @@ const SearchForm: React.FC<ISearchFormProps> = ({
}: ISearchFormProps) => { }: ISearchFormProps) => {
const t = useTranslations("general"); const t = useTranslations("general");
return ( return (
<form <form style={style} className="search-form" onSubmit={handleSubmit}>
style={style}
className="search-form"
onSubmit={handleSubmit}
>
<div className="search-form__input"> <div className="search-form__input">
<Image src={search} alt="Search Icon" /> <Image src={search} alt="Search Icon" />
<input <input

4
src/widgets/Footer/Footer.tsx
View File

@ -18,9 +18,9 @@ const Footer = () => {
return ( return (
<footer className="footer"> <footer className="footer">
<div className="footer__logo"> <div className="footer__logo">
<Link href="/"> {/* <Link href="/">
<Image src={logo} alt="Logo" /> <Image src={logo} alt="Logo" />
</Link> </Link> */}
<p>© {tRights("text")}</p> <p>© {tRights("text")}</p>
<p>{tDisclaimer("text")}</p> <p>{tDisclaimer("text")}</p>
</div> </div>

43
src/widgets/Navbar/NavAuth/NavAuth.scss
View File

@ -2,13 +2,31 @@
.nav-auth-profile-lg, .nav-auth-profile-lg,
.nav-auth-signin-lg { .nav-auth-signin-lg {
width: fit-content; // width: fit-content;
padding: 8px 16px; // padding: 8px 16px;
background-color: $light-blue; // background-color: $light-blue;
border-radius: 5px; // border-radius: 5px;
font-weight: 900; // font-weight: 900;
// color: white;
background-color: white;
color: #3695d8;
border-color: #3695d8;
border: 3px solid #3695d8;
padding-top: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-left: 20px;
border-radius: 15px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.3s, color 0.3s;
&:hover{
background-color: #3695d8;
color: white; color: white;
} }
}
.nav-auth-profile-sm, .nav-auth-profile-sm,
.nav-auth-signin-sm { .nav-auth-signin-sm {
@ -20,3 +38,18 @@
width: fit-content; width: fit-content;
color: $light-blue; color: $light-blue;
} }
.appeal-btn {
background-color: white;
color: #3695d8;
border-color: #3695d8;
border: 3px solid #3695d8;
padding-top: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-left: 20px;
border-radius: 15px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.3s, color 0.3s;
}

17
src/widgets/Navbar/NavLanguage/NavLanguage.tsx
View File

@ -1,9 +1,6 @@
"use client";
import "./NavLanguage.scss"; import "./NavLanguage.scss";
import Image from "next/image"; import Image from "next/image";
import { useEffect, useRef, useState, useTransition } from "react"; import { useEffect, useRef, useState, useTransition } from "react";
import globus from "./icons/globus.svg";
import chevron from "./icons/chevron-down.svg"; import chevron from "./icons/chevron-down.svg";
import check from "./icons/check.svg"; import check from "./icons/check.svg";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
@ -32,10 +29,7 @@ const NavLanguage = () => {
useEffect(() => { useEffect(() => {
function handleClickOutside(event: any) { function handleClickOutside(event: any) {
if ( if (menuRef.current && !menuRef.current.contains(event.target)) {
menuRef.current &&
!menuRef.current.contains(event.target)
) {
setOpenMenu(false); setOpenMenu(false);
} }
} }
@ -47,11 +41,18 @@ const NavLanguage = () => {
return ( return (
<div ref={menuRef} className="nav-language"> <div ref={menuRef} className="nav-language">
{/* <button
onClick={() => setOpenMenu((prev) => !prev)}
className="nav-language__btn"
> */}
{/* <Image src={globus} alt="globus icon" /> */}
<button <button
onClick={() => setOpenMenu((prev) => !prev)} onClick={() => setOpenMenu((prev) => !prev)}
className="nav-language__btn" className="nav-language__btn"
> >
<Image src={globus} alt="globus icon" /> {language === "ru" && <span>Рус</span>}
{language === "kg" && <span>Кырг</span>}
{language === "en" && <span>Eng</span>}
<Image src={chevron} alt="chevron icon" /> <Image src={chevron} alt="chevron icon" />
</button> </button>
{openMenu && ( {openMenu && (

26
src/widgets/Navbar/Navbar.scss
View File

@ -1,15 +1,18 @@
@import "../../shared/ui/variables.scss"; @import "../../shared/ui/variables.scss";
.navbar { .navbar {
padding: 0 90px; padding: 15px 90px;
// padding: 15px;
width: 100%; width: 100%;
height: 78px; // height: 78px;
position: fixed; position: fixed;
z-index: 10005; z-index: 10005;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
box-shadow: 0 4px 6px #0000001a;
margin-bottom: 40px;
&__logo { &__logo {
display: flex; display: flex;
@ -17,9 +20,16 @@
gap: 10px; gap: 10px;
&_last { &_last {
min-width: 78px; // min-width: 78px;
max-width: 78px; // max-width: 78px;
height: 100%; // height: 100%;
margin-top: 30px;
height: 120px;
width: 120px;
display: inline-block;
margin-right: 10px;
object-fit: cover;
} }
} }
@ -39,8 +49,8 @@
&__link_active { &__link_active {
opacity: 1; opacity: 1;
font-weight: 900; font-weight: 800;
border-bottom: 2px solid black; // border-bottom: 2px solid black;
} }
&__lang-and-auth { &__lang-and-auth {
@ -60,7 +70,7 @@
@media screen and (max-width: 1220px) { @media screen and (max-width: 1220px) {
.navbar { .navbar {
padding: 0 60px; // padding: 0 60px;
&__links { &__links {
gap: 40px; gap: 40px;

4
src/widgets/Navbar/Navbar.tsx
View File

@ -32,13 +32,14 @@ const Navbar = () => {
<section className="navbar"> <section className="navbar">
<div className="navbar__logo"> <div className="navbar__logo">
<Link href="/"> <Link href="/">
<Image src={logo} alt="Logo" /> <Image src={logo} alt="Logo" className="navbar__logo-ti" />
</Link> </Link>
<Image <Image
className="navbar__logo_last" className="navbar__logo_last"
src={FOUNDED[locale as string]} src={FOUNDED[locale as string]}
alt="Founded by EU Image" alt="Founded by EU Image"
/> />
<NavLanguage />
</div> </div>
<nav className="navbar__links"> <nav className="navbar__links">
@ -56,7 +57,6 @@ const Navbar = () => {
</nav> </nav>
<div className="navbar__lang-and-auth"> <div className="navbar__lang-and-auth">
<NavLanguage />
<NavAuth setOpenMenu={setOpenMenu} /> <NavAuth setOpenMenu={setOpenMenu} />
</div> </div>

1
src/widgets/forms/ReportForm/ReportForm.tsx
View File

@ -21,7 +21,6 @@ import { apiInstance } from "@/shared/config/apiConfig";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import { IDisplayMap } from "@/shared/types/map-type"; import { IDisplayMap } from "@/shared/types/map-type";
import Loader from "@/shared/ui/components/Loader/Loader"; import Loader from "@/shared/ui/components/Loader/Loader";
import { useRouter } from "@/shared/config/navigation";
import ReportMessage from "@/features/ReportMessage/ReportMessage"; import ReportMessage from "@/features/ReportMessage/ReportMessage";
interface ILatLng { interface ILatLng {

2
src/widgets/home/Header/Header.scss
View File

@ -1,6 +1,6 @@
.header { .header {
position: relative; position: relative;
height: 386px; height: 500px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

2
src/widgets/home/MapSection/HomeMap/HomeMap.scss
View File

@ -1,5 +1,5 @@
.home-map { .home-map {
width: 100%; width: 88%;
height: 580px; height: 580px;
border-radius: 8px; border-radius: 8px;

19
src/widgets/home/MapSection/HomeMap/HomeMap.tsx
View File

@ -40,9 +40,7 @@ interface IHomeMapProps {
reports: IData[]; reports: IData[];
} }
const HomeMap: React.FC<IHomeMapProps> = ({ const HomeMap: React.FC<IHomeMapProps> = ({ reports }: IHomeMapProps) => {
reports,
}: IHomeMapProps) => {
const { display_location, latLng } = useMapStore(); const { display_location, latLng } = useMapStore();
const [position, setPosition] = useState<ILatLng>({ const [position, setPosition] = useState<ILatLng>({
lat: 42.8746, lat: 42.8746,
@ -95,10 +93,7 @@ const HomeMap: React.FC<IHomeMapProps> = ({
lng: 74.606, lng: 74.606,
}; };
if ( if (latLng.lat === defPosition.lat && latLng.lng === defPosition.lng)
latLng.lat === defPosition.lat &&
latLng.lng === defPosition.lng
)
return null; return null;
return ( return (
@ -112,7 +107,7 @@ const HomeMap: React.FC<IHomeMapProps> = ({
<MapContainer <MapContainer
center={position} center={position}
zoom={14} zoom={14}
scrollWheelZoom={false} scrollWheelZoom={true}
className="home-map" className="home-map"
> >
<TileLayer <TileLayer
@ -144,14 +139,10 @@ const HomeMap: React.FC<IHomeMapProps> = ({
<Marker <Marker
key={marker.id} key={marker.id}
icon={icons[report.category]} icon={icons[report.category]}
position={ position={[+marker.latitude, +marker.longitude] as LatLngTuple}
[+marker.latitude, +marker.longitude] as LatLngTuple
}
> >
<Popup> <Popup>
<Link href={`/report/${report?.id}`}> <Link href={`/report/${report?.id}`}>{marker.address}</Link>
{marker.address}
</Link>
</Popup> </Popup>
</Marker> </Marker>
)) ))