[refactor] Update layout and styling in IncidentPanel, DateFilter, Ad…

…minCRUD, and Map components
DSSD-Madison · Nov 15, 2024 · 7eca2ba · 7eca2ba
1 parent ce24b74
commit 7eca2ba
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 9 deletions.
diff --git a/src/components/controls/IncidentPanel.tsx b/src/components/controls/IncidentPanel.tsx
@@ -127,7 +127,7 @@ const InfoPanelControl: React.FC<InfoPanelControlProps> = ({
       key={'overlay'}
       className={`${
         incident || tmpSelected ? 'w-[100%] md:w-[400px]' : 'w-0'
-      } duration-400 fixed left-0 z-[1000] box-border h-full cursor-default overflow-y-auto rounded-e-xl bg-tint-02/60 font-merriweather text-sm text-shade-02 shadow-lg backdrop-blur-sm transition-all duration-100`}
+      } duration-400 absolute bottom-0 left-0 top-0 z-[1000] box-border cursor-default overflow-y-auto rounded-r-xl bg-tint-02/60 font-merriweather text-sm text-shade-02 shadow-lg backdrop-blur-sm transition-all duration-100`}
       onMouseEnter={disableZoom}
       onMouseLeave={enableZoom}
     >

diff --git a/src/components/filters/DateFilter.tsx b/src/components/filters/DateFilter.tsx
@@ -4,6 +4,9 @@ import { LucideCalendar } from 'lucide-react'
 import { useState } from 'react'
 import { formatDateString } from '@/utils'
 
+/**
+ * Bare minimum filter component that filters incidents based on them matching a certain date.
+ */
 const FilterDate = ({ id, dispatch }: filterProps) => {
   const [date, setDate] = useState('')
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {

diff --git a/src/pages/AdminCRUD.tsx b/src/pages/AdminCRUD.tsx
@@ -175,11 +175,6 @@ const AdminCRUD: React.FC<CrudProps> = ({ firestore, data }) => {
 
   return (
     <div className="relative flex h-full flex-col items-center justify-center">
-      <div className="absolute right-0 top-0 m-4">
-        <button className="mb-4 mr-2 rounded-full bg-shade-01 px-4 py-2 text-white shadow-md" onClick={() => navigate('/admin')}>
-          Volver al mapa
-        </button>
-      </div>
       <div className="absolute left-0 top-0 m-4">
         {entityType == 'Types' && (
           <button onClick={() => toggleEntityType('Categories')} className="mb-4 mr-2 rounded-full bg-shade-01 px-4 py-2 text-white shadow-md">
@@ -193,7 +188,7 @@ const AdminCRUD: React.FC<CrudProps> = ({ firestore, data }) => {
         )}
       </div>
       {/* Title displaying current entity type */}
-      <h2 className="mb-4 text-2xl font-bold">{entityTypesSpanish[entityType]}</h2>
+      <h2 className="mb-4 mt-16 text-2xl font-bold">{entityTypesSpanish[entityType]}</h2>
       {/* Edit form */}
       {modifyEntityId && (
         <div className="mb-4 flex flex-col items-center">
@@ -228,7 +223,7 @@ const AdminCRUD: React.FC<CrudProps> = ({ firestore, data }) => {
         </div>
       )}
       {/* Scrollable list view */}
-      <div className="ove6rflow-x-auto mb-6 h-80 w-full max-w-4xl overflow-y-scroll">
+      <div className="mb-6 h-full w-full max-w-4xl overflow-x-auto overflow-y-auto" style={{ scrollbarGutter: 'stable' }}>
         {Object.entries(data[entityType])
           .sort((a, b) => {
             const entity1 = a[1]

diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx
@@ -120,7 +120,7 @@ const Map: React.FC<MapProps> = ({ data, isAdmin, addIncident, deleteIncident, e
   }
 
   return (
-    <div className="relative h-[calc(100%-1.25rem)]">
+    <div className="relative h-full">
       <MapContainer
         className="h-full w-full focus-visible:outline-none"
         center={[20, 0]}