inmake/nks-virtual-tour
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

styles fix

Browse Source
This commit is contained in:
zojgame
2024-04-12 17:45:01 +05:00
parent 74a1b79ee7
commit c6fd912aee
9 changed files with 62 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/InfrastructurePage/InfrastructureFilters.tsx
+2 -1
View File
@@ -39,7 +39,8 @@ const InfrastructureFilters = ({
useEffect(() => {
const filteredMarks = marks.filter(
(mark) => mark.icon === filter && mark.distance <= selectedRange
(mark) =>
mark.icon === filter && mark.distance && mark.distance <= selectedRange
);
const filteredTransportMarks = transportMarks.filter(
(mark) => mark.icon === filter && mark.distance <= selectedRange
src/components/Mark.tsx
+6 -6
View File
@@ -42,8 +42,10 @@ const Mark = ({
<svg
onMouseEnter={handleOnMouseEnter}
onMouseLeave={handleOnMouseLeave}
className={`transition-all absolute ease-in-out cursor-pointer duration-300 group ${
isFiltered ? "opacity-100" : "opacity-0 pointer-events-none"
className={`transition-all absolute ease-in-out duration-300 group ${
isFiltered
? "opacity-100 cursor-pointer"
: "opacity-0 pointer-events-none"
} `}
x={mark.x - 150 + 50}
y={mark.y}
@@ -69,12 +71,10 @@ const Mark = ({
x={width / 2}
y="0"
rx={32}
width="100"
width={textWidth + 64}
height="64"
fill="white"
className={`transition-all duration-300 ease-in-out w-0 group-hover:w-[${
textWidth + 84
}]`}
className={`transition-all duration-300 ease-in-out w-0 `}
style={{
width: `${hoveredMark === mark.id ? `${textWidth + 64}` : 0}`,
}}
src/components/TransportMark.tsx
+2 -2
View File
@@ -60,7 +60,7 @@ const TransportMark = ({
<svg
x={transportMark.x}
y={transportMark.y}
className={`transition-all z-50 absolute duration-300 ease-in-out cursor-pointer group ${
className={`transition-all z-50 absolute duration-300 ease-in-out group ${
isFiltered ? "opacity-100" : "opacity-0 pointer-events-none"
}`}
xmlns="http://www.w3.org/2000/svg"
@@ -86,7 +86,7 @@ const TransportMark = ({
const offset = textOffset[textLength];
return (
<svg x={`${32.023 + index * 26}`} y="24">
<svg x={`${32.023 + index * 26}`} y="24" key={transport}>
<rect width="24" height="20" fill={mainColor} rx="4"></rect>
<text fill="#fff" fontSize={10} y={14} x={offset} fontWeight={500}>
{transport}
src/components/icons/EducationIcon.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ const EducationIcon = () => {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_133_6227)">
<g clipPath="url(#clip0_133_6227)">
<path
d="M4.66667 7.1875H2L10 2.5L18 7.1875H15.3333M4.66667 7.1875V14.6875M4.66667 7.1875H8.22222M4.66667 14.6875H3.33333L2 17.5H18L16.6667 14.6875H15.3333M4.66667 14.6875H8.22222M15.3333 7.1875V14.6875M15.3333 7.1875H11.7778M15.3333 14.6875H11.7778M11.7778 7.1875V14.6875M11.7778 7.1875H8.22222M11.7778 14.6875H8.22222M8.22222 7.1875V14.6875"
stroke="currentColor"
src/components/icons/SportIcon.tsx
+5 -17
View File
@@ -7,29 +7,17 @@ const SportIcon = () => {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_133_6248)">
<g clipPath="url(#clip0_35_7027)">
<path
d="M11.4085 10.6583C11.704 11.1701 11.8957 11.7351 11.9729 12.321C12.05 12.9069 12.011 13.5022 11.858 14.073C11.7051 14.6438 11.4412 15.1789 11.0815 15.6478C10.7217 16.1166 10.2731 16.51 9.76137 16.8055C9.2496 17.1009 8.68463 17.2927 8.09874 17.3698C7.51285 17.447 6.9175 17.408 6.34669 17.255C5.77587 17.1021 5.24078 16.8382 4.77195 16.4784C4.30311 16.1187 3.90973 15.6701 3.61426 15.1583C3.31878 14.6466 3.127 14.0816 3.04987 13.4957C2.97274 12.9098 3.01176 12.3145 3.16471 11.7437C3.31765 11.1728 3.58154 10.6377 3.94128 10.1689C4.30103 9.70009 4.7496 9.3067 5.26137 9.01123C5.77315 8.71576 6.33811 8.52398 6.924 8.44684C7.5099 8.36971 8.10525 8.40873 8.67606 8.56168C9.24687 8.71463 9.78197 8.97851 10.2508 9.33825C10.7196 9.698 11.113 10.1466 11.4085 10.6583L11.4085 10.6583Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="square"
/>
<path
d="M5.37646 8.94482L11.0056 5.69482L11.5056 6.56085L14.1037 5.06085L13.6037 4.19482L16.6348 2.44482L18.3848 5.47591L12.1576 13.69"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="square"
/>
<path
d="M3.79597 15.8419L3.24805 16.1582"
stroke="currentColor"
d="M8.23213 11.7678L11.7677 8.23229M15.3916 4.60837L16.2755 3.72448M3.72433 16.2756L4.60821 15.3917M8.2321 3.98961L11.0606 1.16122L18.8387 8.93939L16.0103 11.7678L8.2321 3.98961ZM1.16106 11.0607L3.98949 8.23228L11.7677 16.0105L8.93924 18.8389L1.16106 11.0607Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="square"
/>
</g>
<defs>
<clipPath id="clip0_133_6248">
<rect width="20" height="20" fill="currentColor" />
<clipPath id="clip0_35_7027">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
src/components/icons/marks/MarkEducationIcon.tsx
+20 -30
View File
@@ -1,35 +1,25 @@
const MarkEducationIcon = () => {
return (
<svg
x={9.5}
y={9.5}
width="45"
height="45"
viewBox="0 0 45 45"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M40.4998 18.5L22.4998 27L4.49976 18.5L22.4998 9L40.4998 18.5Z"
stroke="white"
strokeWidth="2.8125"
strokeLinecap="square"
/>
<ellipse cx="22.5002" cy="18" rx="4.5" ry="3.375" fill="white" />
<path
d="M21.3748 19.125L15.7498 22.4719V38.25"
stroke="white"
strokeWidth="2.8125"
strokeLinecap="square"
/>
<circle cx="15.1877" cy="39.9375" r="2.8125" fill="white" />
<path
d="M34.8748 22.5V29.6827C34.8748 30.0393 34.7425 30.5214 34.2594 31.1121C33.7646 31.717 32.955 32.3622 31.7895 32.9524C30.6331 33.538 29.2144 34.0244 27.6049 34.362C25.9987 34.6989 24.2625 34.875 22.4998 34.875C20.7371 34.875 19.0008 34.6989 17.3946 34.362C15.7851 34.0244 14.3664 33.538 13.21 32.9524C12.0445 32.3622 11.2349 31.717 10.7401 31.1121C10.257 30.5214 10.1248 30.0393 10.1248 29.6827L10.1248 22.5"
stroke="white"
strokeWidth="2.8125"
strokeLinecap="square"
/>
</svg>
<>
<g clipPath="url(#clip0_217_13219)">
<path
d="M22.8999 27.4375H18.0999L32.4999 19L46.8999 27.4375H42.0999M22.8999 27.4375V40.9375M22.8999 27.4375H29.2999M22.8999 40.9375H20.4999L18.0999 46H46.8999L44.4999 40.9375H42.0999M22.8999 40.9375H29.2999M42.0999 27.4375V40.9375M42.0999 27.4375H35.6999M42.0999 40.9375H35.6999M35.6999 27.4375V40.9375M35.6999 27.4375H29.2999M35.6999 40.9375H29.2999M29.2999 27.4375V40.9375"
stroke="white"
strokeWidth="3"
strokeLinecap="square"
/>
</g>
<defs>
<clipPath id="clip0_217_13219">
<rect
width="36"
height="36"
fill="white"
transform="translate(14.5 14.5)"
/>
</clipPath>
</defs>
</>
);
};
src/components/icons/marks/MarkHeathyIcon.tsx
+8 -6
View File
@@ -1,11 +1,13 @@
function MarkHeathyIcon() {
return (
<path
d="M37.8339 18.2764H27.1659V27.1664H18.2759V37.8344H27.1659V46.7244H37.8339V37.8344H46.7239V27.1664H37.8339V18.2764Z"
stroke="white"
stroke-width="2.2225"
stroke-linecap="square"
/>
<>
<path
d="M37.8999 17.6006H27.0999V26.6006H18.0999V37.4006H27.0999V46.4006H37.8999V37.4006H46.8999V26.6006H37.8999V17.6006Z"
stroke="white"
strokeWidth="3"
strokeLinecap="square"
/>
</>
);
}
src/components/icons/marks/MarkSportIcon.tsx
+13 -16
View File
@@ -1,28 +1,25 @@
const MarkSportIcon = () => {
return (
<svg
x={9.5}
y={9.5}
width="45"
height="45"
viewBox="0 0 45 45"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_177_12572)">
<>
<g clipPath="url(#clip0_341_12782)">
<path
d="M18.5222 26.4775L26.4772 18.5226M34.631 10.3688L36.6198 8.38002M8.37968 36.6201L10.3684 34.6314M18.5222 8.97656L24.8862 2.61267L42.3871 20.1136L36.0231 26.4775L18.5222 8.97656ZM2.61233 24.8865L8.97629 18.5226L26.4772 36.0235L20.1132 42.3874L2.61233 24.8865Z"
d="M29.8183 35.6823L36.1823 29.3183M42.7053 22.7952L44.2963 21.2043M21.7043 43.7963L23.2953 42.2053M29.8183 21.6815L34.9095 16.5904L48.9102 30.5911L43.819 35.6823L29.8183 21.6815ZM17.0904 34.4095L22.1816 29.3183L36.1823 43.319L31.0911 48.4102L17.0904 34.4095Z"
stroke="white"
stroke-width="2.8125"
stroke-linecap="square"
strokeWidth="3"
strokeLinecap="square"
/>
</g>
<defs>
<clipPath id="clip0_177_12572">
<rect width="45" height="45" fill="white" />
<clipPath id="clip0_341_12782">
<rect
width="36"
height="36"
fill="white"
transform="translate(15 14.5)"
/>
</clipPath>
</defs>
</svg>
</>
);
};
export { MarkSportIcon };
src/marks.json
+5 -21
View File
@@ -246,7 +246,7 @@
"x": 1010,
"y": 1340,
"icon": "heathy",
"distance": 400
"distance": 450
},
{
"id": "heathy_2",
@@ -262,7 +262,7 @@
"x": 780,
"y": 1170,
"icon": "heathy",
"distance": 450
"distance": 500
},
{
"id": "heathy_4",
@@ -287,15 +287,7 @@
"x": 1520,
"y": 810,
"icon": "heathy",
"distance": 750
},
{
"id": "heathy_6",
"label": "Детская поликлиника",
"x": 1480,
"y": 850,
"icon": "heathy",
"distance": 650
"distance": 700
},
{
"id": "heathy_6",
@@ -311,7 +303,7 @@
"x": 1360,
"y": 1330,
"icon": "heathy",
"distance": 600
"distance": 500
},
{
"id": "heathy_9",
@@ -321,14 +313,6 @@
"icon": "heathy",
"distance": 700
},
{
"id": "education_8",
"label": "Империя",
"x": 1320,
"y": 1280,
"icon": "education",
"distance": 500
},
{
"id": "education_1",
"label": "Детский сад №9",
@@ -340,7 +324,7 @@
{
"id": "education_2",
"label": "Детский сад №582",
"x": 1280,
"x": 1300,
"y": 1020,
"icon": "education",
"distance": 350