From cb42a20010c99508e1caf869f610162c76729810 Mon Sep 17 00:00:00 2001 From: cilasmarques Date: Mon, 14 Oct 2024 00:15:23 -0300 Subject: [PATCH 1/3] refact: update MapsMenu temporal bar --- src/components/DateInput/DateInput.styles.tsx | 113 ++++++------------ src/components/DateInput/DateInput.tsx | 51 ++++---- 2 files changed, 59 insertions(+), 105 deletions(-) diff --git a/src/components/DateInput/DateInput.styles.tsx b/src/components/DateInput/DateInput.styles.tsx index ff22898..ec20eea 100644 --- a/src/components/DateInput/DateInput.styles.tsx +++ b/src/components/DateInput/DateInput.styles.tsx @@ -1,12 +1,12 @@ import styled from "styled-components"; -import { Icon } from "../Icon/Icon"; export const Wrapper = styled.div<{ disabled: string }>` display: flex; gap: 0.5rem; - align-items: center; width: 100%; margin-top: 0.5rem; + align-items: center; + justify-content: space-around; ${({ disabled }) => disabled === "true" && ` @@ -17,18 +17,18 @@ export const Wrapper = styled.div<{ disabled: string }>` box-sizing: border-box; `; -export const CalendarImage = styled(Icon)` - height: fit-content; -`; - -export const DateInfo = styled.p` - width: max-content; - text-wrap: nowrap; - margin: 0; +export const InputWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + gap: 0rem; + width: 100%; + // height: 2rem; `; -export const InputWrapper = styled.div` +export const InputContainer = styled.div` width: 100%; + height: 2rem; `; export const RangeInput = styled.input` @@ -36,114 +36,73 @@ export const RangeInput = styled.input` -webkit-appearance: none; background: transparent; cursor: pointer; - /* z-index: 0; */ - padding-inline: 0.25rem; input[type="range"] { height: 22px; -webkit-appearance: none; - margin: 10px 0; width: 100%; } + &::-webkit-slider-runnable-track { width: 100%; - height: 8px; + height: 4px; cursor: pointer; - box-shadow: 0px 0px 0px ${({ theme }) => theme.colors.black}; background: ${({ theme }) => theme.colors.black}70; border-radius: 48px; - border: 0px solid ${({ theme }) => theme.colors.black}; } + &::-webkit-slider-thumb { - box-shadow: 0px 0px 2px ${({ theme }) => theme.colors.black}; - border: 0px solid #b3b5e3; - height: 16px; - width: 16px; + height: 12px; + width: 12px; border-radius: 16px; background: ${({ theme }) => theme.colors.orange}; cursor: pointer; - -webkit-appearance: none; margin-top: -4px; } - &:focus::-webkit-slider-runnable-track { - background: ${({ theme }) => theme.colors.black}; - } + &::-moz-range-track { width: 100%; - height: 8px; - cursor: pointer; - box-shadow: 0px 0px 0px ${({ theme }) => theme.colors.black}; + height: 4px; background: ${({ theme }) => theme.colors.black}; border-radius: 48px; - border: 0px solid ${({ theme }) => theme.colors.black}; } + &::-moz-range-thumb { - box-shadow: 0px 0px 2px ${({ theme }) => theme.colors.black}; - border: 0px solid #b3b5e3; - height: 16px; - width: 16px; + height: 12px; + width: 12px; border-radius: 16px; background: ${({ theme }) => theme.colors.orange}; cursor: pointer; } - &::-ms-track { - width: 100%; - height: 4px; - cursor: pointer; - background: transparent; - border-color: transparent; - color: transparent; - } - &::-ms-fill-lower { - background: ${({ theme }) => theme.colors.black}; - border: 0px solid ${({ theme }) => theme.colors.black}; - border-radius: 96px; - box-shadow: 0px 0px 0px ${({ theme }) => theme.colors.black}; - } - &::-ms-fill-upper { - background: ${({ theme }) => theme.colors.black}; - border: 0px solid ${({ theme }) => theme.colors.black}; - border-radius: 96px; - box-shadow: 0px 0px 0px ${({ theme }) => theme.colors.black}; - } - &::-ms-thumb { - margin-top: 1px; - box-shadow: 0px 0px 2px ${({ theme }) => theme.colors.black}; - height: 16px; - width: 16px; - border-radius: 16px; - cursor: pointer; - } - &:focus::-ms-fill-lower { - background: ${({ theme }) => theme.colors.black}; - } - &:focus::-ms-fill-upper { - background: ${({ theme }) => theme.colors.black}; - } &:disabled { cursor: not-allowed; } `; -export const DateList = styled.ul` +export const DateContainer = styled.div` width: 100%; display: flex; justify-content: space-between; + position: relative; - transform: translate(-10px, 3px); + // transform: translate(0, -10px); /* Aproximar a data da barra */ opacity: 0.7; z-index: -2; `; -export const DateItem = styled.li` +export const DateSpan = styled.span<{ year: string }>` position: relative; - list-style: none; - width: 2px; - height: 8px; - border-radius: 2px; - margin: 0 7px; - padding: 0; - background-color: ${({ theme }) => theme.colors.black}; + display: inline-block; + font-size: 12px; + color: ${({ theme }) => theme.colors.black}; pointer-events: none; + + &::after { + content: "${({ year }) => year}"; + top: 8px; + left: 50%; + transform: translateX(-50%); + pointer-events: none; + } `; diff --git a/src/components/DateInput/DateInput.tsx b/src/components/DateInput/DateInput.tsx index ddfe27e..f2056fb 100644 --- a/src/components/DateInput/DateInput.tsx +++ b/src/components/DateInput/DateInput.tsx @@ -1,13 +1,11 @@ import { IImageData, IMapInfo } from "@/utils/interfaces"; -import { ChangeEvent, useEffect, useRef, useState } from "react"; +import { ChangeEvent, useEffect, useRef } from "react"; import { Wrapper, - DateInfo, - CalendarImage, RangeInput, - DateList, InputWrapper, - DateItem, + DateContainer, + DateSpan, } from "./DateInput.styles"; const DateInput = ({ @@ -22,21 +20,18 @@ const DateInput = ({ dates: IImageData; onChange: (newValues: IMapInfo) => void; }) => { - const [currentDate, setCurrentDate] = useState(""); const inputRef = useRef(null); + const dateKeys: string[] = Object.keys(dates); + const hasGeneralDate = "general" in dates; const handleRangeChange = (event: ChangeEvent) => { const newDate = Object.keys(dates)[Number(event.target.value) - 1]; - setCurrentDate(newDate); onChange({ name: mapId, year: newDate }); }; - const dateKeys: string[] = Object.keys(dates); - const updateFields = (year: string) => { if (inputRef.current) inputRef.current.value = [dateKeys.indexOf(year) + 1].toString(); - setCurrentDate(year); onChange({ name: mapId, year: year }); }; @@ -50,24 +45,24 @@ const DateInput = ({ }, [mapId]); return ( - - - {dates?.general ? "--" : currentDate} - - - - {Object.keys(dates).map((date: string) => ( - - ))} - - + + {!hasGeneralDate && ( + + + + {Object.keys(dates).map((date) => ( + + ))} + + + )} ); }; From 4b1d8c3f5b6f88d478921b1dafc04cfdcb67373b Mon Sep 17 00:00:00 2001 From: cilasmarques Date: Mon, 14 Oct 2024 15:17:39 -0300 Subject: [PATCH 2/3] refact: apply requests --- src/components/DateInput/DateInput.styles.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/DateInput/DateInput.styles.tsx b/src/components/DateInput/DateInput.styles.tsx index ec20eea..4eba0bc 100644 --- a/src/components/DateInput/DateInput.styles.tsx +++ b/src/components/DateInput/DateInput.styles.tsx @@ -36,6 +36,7 @@ export const RangeInput = styled.input` -webkit-appearance: none; background: transparent; cursor: pointer; + height: 0.25rem; input[type="range"] { height: 22px; @@ -84,9 +85,10 @@ export const DateContainer = styled.div` width: 100%; display: flex; justify-content: space-between; + align-items: end; + height: 1.7rem; position: relative; - // transform: translate(0, -10px); /* Aproximar a data da barra */ opacity: 0.7; z-index: -2; `; From 3323691b9719b39b3d8401a9695cddacab760145 Mon Sep 17 00:00:00 2001 From: cilasmarques Date: Mon, 14 Oct 2024 15:39:14 -0300 Subject: [PATCH 3/3] refact: update mapsMenu z-index --- src/components/MapsSection/MapsSection.styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MapsSection/MapsSection.styles.tsx b/src/components/MapsSection/MapsSection.styles.tsx index de6c2dc..f86523f 100644 --- a/src/components/MapsSection/MapsSection.styles.tsx +++ b/src/components/MapsSection/MapsSection.styles.tsx @@ -141,7 +141,7 @@ export const ExpandBox = styled(Link)` border-radius: 6px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); cursor: pointer; - z-index: 1; + z-index: 0; transition: 0.3s; &:hover {