Merge pull request #16 from prefeitura-rio/staging

Staging
prefeitura-rio · Dec 19, 2024 · 2739d51 · 2739d51
2 parents a311ccc + fd3e9c6
commit 2739d51
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 23 deletions.
diff --git a/src/components/admin-panel/collapse-menu-button.tsx b/src/components/admin-panel/collapse-menu-button.tsx
@@ -232,7 +232,7 @@ export function CollapseMenuButton({
             </DropdownMenuItem>
           ) : (
             <DropdownMenuItem key={index} asChild>
-              <Link className="cursor-pointer" href={href}>
+              <Link className="cursor-pointer" href={`${href}/${activeTab === 'tab1' ? 'mapa' : 'grafico'}`}>
                 <p className="max-w-[180px] truncate">{label}</p>
               </Link>
             </DropdownMenuItem>

diff --git a/src/components/admin-panel/sheet-menu.tsx b/src/components/admin-panel/sheet-menu.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { MenuIcon, PanelsTopLeft } from "lucide-react";
+import { ChevronRight, MenuIcon } from 'lucide-react';
 
 import { Menu } from "@/components/admin-panel/menu";
 import {
@@ -19,27 +19,23 @@ interface SheetMenuProps {
 export function SheetMenu({ view, indice }: SheetMenuProps) {
   return (
     <Sheet>
-      <SheetTrigger className="lg:hidden fixed top-2 left-4 z-50" >
+      <SheetTrigger className="lg:hidden fixed top-24 left-4 z-50" >
         <Button className="rounded-md w-7 h-7"
           variant="outline" size="icon">
           <MenuIcon size={20} />
         </Button>
+
       </SheetTrigger>
       <SheetContent className="sm:w-72 pl-0 pr-1 h-full flex flex-col" side="left">
         <SheetHeader>
-          <Button
-            className="flex justify-center items-center pb-2 pt-1"
-            variant="link"
-            asChild
-          >
-            <Link href="/previsao-de-chuva/v1/mapa" className="flex items-center gap-2">
-              <img src="https://cdn2.iconfinder.com/data/icons/weather-flat-14/64/weather02-512.png" alt="Weather Icon" className="w-6 h-6 mr-1" />
-              <SheetTitle className="font-bold text-lg">Plataforma Clima</SheetTitle>
-            </Link>
-          </Button>
+          <Link href="/previsao-de-chuva/v1/mapa" className="flex items-center gap-2 pb-2 pt-1">
+            <img src="https://cdn2.iconfinder.com/data/icons/weather-flat-14/64/weather02-512.png" alt="Weather Icon" className="w-6 h-6 mr-1" />
+            <SheetTitle className="font-bold text-lg">Plataforma Clima</SheetTitle>
+          </Link>
         </SheetHeader>
         <Menu isOpen view={view} indice={indice} />
       </SheetContent>
     </Sheet>
   );
-}
+}
+
diff --git a/src/components/color-label.tsx b/src/components/color-label.tsx
@@ -35,20 +35,20 @@ export default function ColorBar({
 
   return (
     <div
-      className="w-full max-w-xl mx-auto px-5 py-3 md:mt-2 pt-10 rounded-xl"
+      className="w-full max-w-xl mx-auto px-5 py-3 md:mt-2 rounded-xl"
       style={{
         backgroundColor: 'rgba(33, 41, 54, 0.2)', // Set the background color
         position: 'relative',   // Ensure the position is set for z-index to take effect
         zIndex: 0,           // Higher z-index to place it above the Mapbox map
       }}
     >
-      <div className="relative h-5 mb-8">
+      <div className="relative h-6 mb-8">
         <div className="flex justify-center absolute w-full text-center text-black font-bold -top-8">
-          {unit && (
+          {/* {unit && (
             <div className="absolute bg-black text-white font-bold text-sm px-2 py-1 rounded-full">
               {unit}
             </div>
-          )}
+          )} */}
         </div>
         <svg width="100%" height="100%">
           <defs>
@@ -85,6 +85,9 @@ export default function ColorBar({
                 />
               );
             })}
+          <text x="98.5%" y="50%" dy="0.35em" textAnchor="end" fill="#FFFFFF" fontSize="13" fontWeight="bold">
+            {unit}
+          </text>
         </svg>
         {colorStops.map((item, index) => {
           const isFirst = index === 0;
@@ -97,7 +100,7 @@ export default function ColorBar({
                 left: `${getPosition(item.value)}%`,
               }}
             >
-              <div className="h-2 w-px bg-gray-400 mb-1 mx-auto"></div>
+              <div className="h-2 w-px bg-gray-600 mb-1 mx-auto"></div>
               <div className="text-black text-sm text-right">
                 {item.value}
                 {item.value == 90 && '+'}

diff --git a/src/components/time-slider-previsao.tsx b/src/components/time-slider-previsao.tsx
@@ -31,6 +31,7 @@ export function TimeSliderPrevisao({
   const [hasInteracted, setHasInteracted] = useState(false);
   const [showInfo, setShowInfo] = useState(true);
   const isMobile = useMediaQuery({ query: '(max-width: 767px)' });
+  const isShortScreen = useMediaQuery({ query: '(max-width: 1119px)' });
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const handleShowControls = () => {
@@ -155,7 +156,7 @@ export function TimeSliderPrevisao({
   return (
     <div className="z-50 fixed bottom-2 w-[90%] sm:w-[50%] py-2 px-4 rounded-lg bg-gray-800 text-white">
       <div
-        className={`absolute w-72 bottom-full mb-2 ml-[-16px] transition-opacity duration-[1500ms] ${showImage && !isMobile ? "opacity-100" : "opacity-0 pointer-events-none"
+        className={`absolute w-72 bottom-full mb-[13px] ml-[-16px] transition-opacity duration-[1500ms] ${showImage && !isMobile ? "opacity-100" : "opacity-0 pointer-events-none"
           }`}
       >
         <ControlButtons
@@ -190,10 +191,13 @@ export function TimeSliderPrevisao({
         />
       </div>
       <div
-        className={`absolute bottom-full mb-2 transition-opacity duration-[3000ms] ${showInfo ? "opacity-100" : "opacity-0"}`}
-        style={{ right: 0 }}
+        className={`absolute bottom-full ${showImage && !isMobile && isShortScreen && showInfo ? 'mb-20' : 'mb-2'} transition-opacity duration-[3000ms] ${showInfo ? "opacity-100" : "opacity-0"}`}
+        style={{
+          left: showImage && !isMobile && isShortScreen && showInfo ? 0 : "auto",
+          right: showImage && !isMobile && isShortScreen && showInfo ? "auto" : 0,
+        }}
       >
-        <div className="relative w-64 p-2 rounded-lg bg-[#21293633]">
+        <div className="relative max-w-64 p-2 rounded-lg bg-[#21293633]">
           <Button
             variant="ghost"
             size="icon"