Merged stagingupdates and postionings for new info and mobile map men…

…u buttons

docs/CONTRIBUTING.md

@@ -14,17 +14,47 @@ We hold weekly meetings via Zoom, plus the monthly in-person Code for Philly hac
 
 ## How can I contribute?
 
+### Find an issue
 We welcome all kinds of contributions, big or small. The best way to start is to look through the [issues page](https://github.com/CodeForPhilly/vacant-lots-proj/issues) to see what's available to be working on. If you're not sure which issue to tackle, consider filtering them by tags or asking in the [Slack channel](https://codeforphilly.slack.com/archives/C05H9QBMP96).
 
-Once you've found an issue you'd like to work on, please comment on it to let us know you're interested. We'll do our best to assign it to you ASAP. If you're unable to complete the issue in a timely manner (a week or two), please let us know so we can reassign it. If we see an issue with no activity for 3 or more days, we'll reach out via GitHub and Slack to the person to whom it's assigned. If there is no activity at all on the issue for 1 week, we'll reassign it. If there is some activity (e.g., a draft PR or a message to let us know that you're out of town), then you're free to continue working on the issue for another week. However, in the interest of avoiding bottlenecks and giving everyone a fair chance to contribute, we ask that everyone try to complete all issues within 2 weeks of assignment.
+Once you've found an issue you'd like to work on, please comment on it to let us know you're interested. We'll do our best to assign it to you ASAP. 
+
+### Being fair
+If you're unable to complete the issue in a timely manner (a week or two), please let us know so we can reassign it. If we see an issue with no activity for 3 or more days, we'll reach out via GitHub and Slack to the person to whom it's assigned. If there is no activity at all on the issue for 1 week, we'll reassign it. If there is some activity (e.g., a draft PR or a message to let us know that you're out of town), then you're free to continue working on the issue for another week. However, in the interest of avoiding bottlenecks and giving everyone a fair chance to contribute, we ask that everyone try to complete all issues within 2 weeks of assignment.
+
+### Local setup
 
 For info on how to get the codebase setup, see the [SETUP](/SETUP) folder, which contains instructions for setting up the front end, back end, and full stack, depending on your interest. If you have questions about the process, please ask in the [Slack channel](https://codeforphilly.slack.com/archives/C05H9QBMP96).
 
-To make sure the repo is protected and organized, merges to `main` are not allowed. All changes must be made through pull requests to the `staging` branch. Once you have commits ready to merge, please create a new branch named in the format of `<github-username>`/`<issue-number>`-`<kebab-case-description>`. For example vimusds/1069-fix-territory-on-mobile. Your PR will need to be approved by at least one required reviewer (see [CODEOWNERS](https://github.com/CodeForPhilly/vacant-lots-proj/blob/main/.github/CODEOWNERS)) and must pass all required status checks. When these are complete, it will be merged to the `staging` branch and then eventually reviwed by our design team and merged to `main` for deployment. To help them in this, please provide clear instructions on how to test/view the changes you've made, and tag the issues you're addressing. You can do this when writing the PR by writing `#<number>` in the `Does this close any currently open issues` section.
 
-If you're unclear on the precise implementation of a ticket, please refer to [the prototype](https://www.figma.com/proto/NAFkgq34abW6uJ0R7PW24T/Prototype---Clean-%26-Green-Philly?page-id=187%3A12602&type=design&node-id=2592-30019&viewport=-657%2C-623%2C0.1&t=fqZvOvLyE9qv7AAV-8&scaling=min-zoom&starting-point-node-id=2592%3A30019&hide-ui=1).
+## Quickstart
+
+To maintain repo organization and protection, merges to main are not allowed. All changes must be made through pull requests to the `staging` branch. Follow these steps, [example PR](https://github.com/CodeForPhilly/clean-and-green-philly/pull/617) for reference:
+
+1. Have an assigned issue (e.g. [#646](https://github.com/CodeForPhilly/clean-and-green-philly/issues/646))
+1. Ensure you're up to date with the `staging` branch
+2. Create a new branch
+    - Name it `<github-username>`/`<issue-number>`-`<kebab-case-description>`. 
+    - Example: `vimusds/1069-fix-territory-on-mobile`.
+3. Push changes and open PR: Push your commits and open a PR with the template filled in. 
+    - Provide clear instructions on how to test/view your changes
+    - Tag the issues you're addressing using `#<number>` in the "Does this close any currently open issues?" section.
+4. Ensure your PR passes all checks. If not, resolve the errors and try again.
+5. Tag reviewers: Tag a code approver (see [CODEOWNERS](https://github.com/CodeForPhilly/vacant-lots-proj/blob/main/.github/CODEOWNERS)) for review.
+
+Once approved and all checks pass, your code will be built in Vercel if it's a frontend change and merged into staging by a reviewer. Now you just need to close your issue!
+
+### Closing your Issue
+To close the issue you worked on, add a comment to the issue tagging the appropriate reviewer(s).
+- Front-End Issues: Tag @paulhchoi and @thansidwell. If it involves the map, also tag @brandonfcohen1.
+- Back-End Issues: Tag @brandonfcohen1.
+
+🎉 Congrats, you finished your contribution!
+
+### What's next?
 
-Note: when you have completed an issue and are ready to close it, please tag the appropriate reviewe(s). It it's a front-end issue, tag @paulhchoi and @thansidwell (plus @brandonfcohen1 if it involves the map). If it's a back-end issue, tag @brandonfcohen1. Feel free to drop a message in the Slack channel if you have questions.
+-  Design review: The design team will review and eventually merge it into main for deployment.
+- Deploy to prod: A Clean and Green Philly team member will deploy your changes to the production site.
 
 ## Open an Issue
 

src/app/find-properties/[[...opa_id]]/page.tsx

@@ -308,7 +308,7 @@ const MapPage = ({ params }: MapPageProps) => {
             <ThemeButton
               aria-label={`Change to ${smallScreenMode}`}
               label={smallScreenMode === "map" ? "List View" : "Map View"}
-              className="absolute bottom-4 left-1/2 -ml-[3.5rem] rounded-2xl sm:hidden max-md:min-w-[7rem]"
+              className="fixed bottom-10 left-1/2 -ml-[3.5rem] rounded-2xl sm:hidden max-md:min-w-[7rem]"
               onPress={updateSmallScreenMode}
               startContent={
                 smallScreenMode === "map" ? (

src/app/globals.css

@@ -327,7 +327,7 @@ a .bg-color-none {
 .maplibregl-ctrl button.maplibregl-ctrl-geolocate,
 .maplibregl-ctrl button.maplibregl-ctrl-zoom-in,
 .maplibregl-ctrl button.maplibregl-ctrl-zoom-out,
-.maplibregl-ctrl button.custom-info {
+.maplibregl-ctrl button.custom-legend-info {
   border-radius: 0.25em;
   height: 40px;
   width: 40px;
@@ -346,9 +346,40 @@ a .bg-color-none {
   background-image: url('data:image/svg+xml,<svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 0.724609C15.5 0.89037 15.4342 1.04934 15.3169 1.16655C15.1997 1.28376 15.0408 1.34961 14.875 1.34961H1.125C0.95924 1.34961 0.800269 1.28376 0.683058 1.16655C0.565848 1.04934 0.5 0.89037 0.5 0.724609C0.5 0.558849 0.565848 0.399878 0.683058 0.282668C0.800269 0.165458 0.95924 0.0996094 1.125 0.0996094H14.875C15.0408 0.0996094 15.1997 0.165458 15.3169 0.282668C15.4342 0.399878 15.5 0.558849 15.5 0.724609Z" fill="%2303141B"/></svg>') !important;
 }
 
-.custom-info-icon {
+.custom-legend-info-div {
+  top: 82%;
+  @apply left-7 fixed;
+}
+
+.custom-legend-info-icon {
   background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 0.875C7.39303 0.875 5.82214 1.35152 4.486 2.24431C3.14985 3.1371 2.10844 4.40605 1.49348 5.8907C0.87852 7.37535 0.717618 9.00901 1.03112 10.5851C1.34463 12.1612 2.11846 13.6089 3.25476 14.7452C4.39106 15.8815 5.8388 16.6554 7.4149 16.9689C8.99099 17.2824 10.6247 17.1215 12.1093 16.5065C13.594 15.8916 14.8629 14.8502 15.7557 13.514C16.6485 12.1779 17.125 10.607 17.125 9C17.1227 6.84581 16.266 4.78051 14.7427 3.25727C13.2195 1.73403 11.1542 0.877275 9 0.875ZM9 15.875C7.64026 15.875 6.31105 15.4718 5.18046 14.7164C4.04987 13.9609 3.16868 12.8872 2.64833 11.6309C2.12798 10.3747 1.99183 8.99237 2.2571 7.65875C2.52238 6.32513 3.17716 5.10013 4.13864 4.13864C5.10013 3.17716 6.32514 2.52237 7.65876 2.2571C8.99238 1.99183 10.3747 2.12798 11.631 2.64833C12.8872 3.16868 13.9609 4.04987 14.7164 5.18045C15.4718 6.31104 15.875 7.64025 15.875 9C15.8729 10.8227 15.1479 12.5702 13.8591 13.8591C12.5702 15.1479 10.8227 15.8729 9 15.875ZM10.25 12.75C10.25 12.9158 10.1842 13.0747 10.0669 13.1919C9.94974 13.3092 9.79076 13.375 9.625 13.375C9.29348 13.375 8.97554 13.2433 8.74112 13.0089C8.5067 12.7745 8.375 12.4565 8.375 12.125V9C8.20924 9 8.05027 8.93415 7.93306 8.81694C7.81585 8.69973 7.75 8.54076 7.75 8.375C7.75 8.20924 7.81585 8.05027 7.93306 7.93306C8.05027 7.81585 8.20924 7.75 8.375 7.75C8.70652 7.75 9.02447 7.8817 9.25889 8.11612C9.49331 8.35054 9.625 8.66848 9.625 9V12.125C9.79076 12.125 9.94974 12.1908 10.0669 12.3081C10.1842 12.4253 10.25 12.5842 10.25 12.75ZM7.75 5.5625C7.75 5.37708 7.80499 5.19582 7.908 5.04165C8.01101 4.88748 8.15743 4.76732 8.32874 4.69636C8.50004 4.62541 8.68854 4.60684 8.8704 4.64301C9.05226 4.67919 9.2193 4.76848 9.35042 4.89959C9.48153 5.0307 9.57082 5.19775 9.60699 5.3796C9.64316 5.56146 9.6246 5.74996 9.55364 5.92127C9.48268 6.09257 9.36252 6.23899 9.20835 6.342C9.05418 6.44502 8.87292 6.5 8.6875 6.5C8.43886 6.5 8.20041 6.40123 8.02459 6.22541C7.84878 6.0496 7.75 5.81114 7.75 5.5625Z" fill="%23173009"/></svg>') !important;
 }
+/* Tooltips for maplibre components, classes style the title attributes */
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate[title]:hover::after,
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-in[title]:hover::after,
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-out[title]:hover::after {
+  content: attr(title);
+  font-size: 14px;
+  padding: 4px 10px;
+  width: max-content;
+  z-index: 100;
+  @apply absolute items-center flex bg-gray-900 rounded-[14px] text-white z-[75];
+}
+
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate[title]:hover::after {
+  transform: translateX(-102.5%);
+  @apply top-1.5;
+}
+
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-in[title]:hover::after {
+  transform: translateX(-105.5%);
+  @apply top-1.5;
+}
+
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-out[title]:hover::after {
+  transform: translateX(-105.5%);
+  @apply top-[46px];
+}
 
 /* styling for the map tooltip */
 .customized-map-popup {
@@ -372,3 +403,13 @@ a .bg-color-none {
     width: 24px;
   }
 }
+
+@media screen and (max-width: 640px) {
+  .maplibregl-ctrl-bottom-right,
+  .maplibregl-ctrl-bottom-left {
+    position: fixed !important;
+  }
+  .maplibregl-ctrl-bottom-left {
+    bottom: 50px !important;
+  }
+}

src/components/PropertyCard.tsx

@@ -41,7 +41,7 @@ const PropertyCard = ({ feature, setSelectedProperty }: PropertyCardProps) => {
         className="cursor-pointer max-w-sm w-full h-full"
         onClick={handleClick}
       >
-        <div className="bg-white h-full flex flex-col rounded-lg overflow-hidden p-3 hover:bg-gray-100">
+        <div className="bg-white h-full flex flex-col rounded-lg overflow-hidden p-3 hover:bg-gray-100 focus-within:bg-gray-100">
           <div
             className="relative w-full rounded-md overflow-hidden"
             style={{ height: "160px", width: "auto" }}
@@ -55,7 +55,10 @@ const PropertyCard = ({ feature, setSelectedProperty }: PropertyCardProps) => {
             />
           </div>
           <div className="my-3">
-            <button className="font-bold heading-lg" onKeyDown={handleKeyDown}>
+            <button
+              className="font-bold heading-lg focus:bg-gray-100"
+              onKeyDown={handleKeyDown}
+            >
               {formattedAddress}
             </button>
             <div className="text-gray-700 body-sm">

src/components/PropertyMap.tsx

@@ -119,10 +119,10 @@ const MapControls = () => {
       {(smallScreenToggle || window.innerWidth > 640) ?
         <MapLegendControl position="bottom-left" setSmallScreenToggle={setSmallScreenToggle} layerStyle={layerStylePolygon} />
         :
-        <div className="maplibregl-ctrl maplibregl-ctrl-group w-[40px] h-[40px]">
+        <div className="custom-legend-info-div maplibregl-ctrl maplibregl-ctrl-group w-[40px] h-[40px]">
           <ThemeButton
-            className="custom-info z-10"
-            startContent={<span className="custom-info-icon maplibregl-ctrl-icon"></span>}
+            className="custom-legend-info z-10"
+            startContent={<span className="custom-legend-info-icon maplibregl-ctrl-icon"></span>}
             onPress={() => setSmallScreenToggle(s => !s)}
           />
         </div>

src/components/SinglePropertyDetail.tsx

@@ -217,6 +217,8 @@ const SinglePropertyDetail = ({
               }}
               onMouseEnter={() => setHover(true)}
               onMouseLeave={() => setHover(false)}
+              onFocus={() => setHover(true)}
+              onBlur={() => setHover(false) }
             />
           </Tooltip>
         </div>
@@ -230,14 +232,24 @@ const SinglePropertyDetail = ({
             objectFit="cover"
             unoptimized
           />
-          <button
-            className="absolute top-4 right-4 bg-white p-[10px] rounded-md hover:bg-gray-100"
-            onClick={() => setIsStreetViewModalOpen(true)}
-            aria-label="Open full screen street view map"
-            id="outside-iframe-element"
+          <Tooltip
+            disableAnimation
+            closeDelay={100}
+            placement="top"
+            content="Street View"
+            classNames={{
+              content: "bg-gray-900 rounded-[14px] text-white relative top-[5px]",
+            }}
           >
-            <ArrowsOut color="#3D3D3D" size={24} />
-          </button>
+            <button
+              className="absolute top-4 right-4 bg-white p-[10px] rounded-md hover:bg-gray-100"
+              onClick={() => setIsStreetViewModalOpen(true)}
+              aria-label="Open full screen street view map"
+              id="outside-iframe-element"
+            >
+              <ArrowsOut color="#3D3D3D" size={24} />
+            </button>
+          </Tooltip>
         </div>
       </div>
       <div className="py-4 px-2">
@@ -251,14 +263,24 @@ const SinglePropertyDetail = ({
             {address.toLowerCase()}
           </h2>
           <div>
-            <ThemeButtonLink
-              href={atlasUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              color="tertiary"
-              label="Atlas"
-              endContent={<ArrowSquareOut aria-hidden="true" />}
-            />
+            <Tooltip
+              disableAnimation
+              closeDelay={100}
+              placement="top"
+              content="View on City Atlas"
+              classNames={{
+                content: "bg-gray-900 rounded-[14px] text-white relative top-1",
+              }}
+            >
+              <ThemeButtonLink
+                href={atlasUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                color="tertiary"
+                label="Atlas"
+                endContent={<ArrowSquareOut aria-hidden="true" />}
+              />
+            </Tooltip>
           </div>
         </div>
       </div>