Commit f9356a4e authored by Jacob Cain's avatar Jacob Cain
Browse files

Used cards for footprint results

parent d5bb1b92

src/components/presentational/FootprintResults.jsx

+68 −55
Original line number Diff line number Diff line 
import React, { useEffect } from "react";

import Checkbox from "@mui/material/Checkbox";

import {Card, CardContent, CardActions} from "@mui/material";



// result action links

import Chip from "@mui/material/Chip";
@@ -29,6 +30,8 @@ function LoadingFootprints() { 
  return (

    <div className="resultsList">

      { Array(5).fill(null).map((_, i) => (

        <Card sx={{ width: 250, margin: 1}}>

          <CardContent sx={{padding: 0.9, paddingBottom: 0}}>

            <div className="resultContainer" key={i}>

              <div className="resultImgDiv">

                <Skeleton variant="rectangular" width={32} height={32}/>
@@ -40,13 +43,18 @@ function LoadingFootprints() { 
                <Skeleton/>

                <Skeleton/>

              </div>

            </div>

          </CardContent>

          <CardActions>

            <div className="resultLinks">

              <Stack direction="row" spacing={1} sx={{marginTop:1}}>

                <Skeleton variant="rounded" width={100} height={20} sx={{borderRadius:5}}/>

                <Skeleton variant="rounded" width={100} height={20} sx={{borderRadius:5}}/>

              </Stack>

            </div>

        </div>

          </CardActions>

        </Card>

        

      ))}

    </div>

  );
@@ -224,7 +232,9 @@ export default function FootprintResults(props) { 
      : hasFootprints ?   

        <div className="resultsList">

          {features.map((feature) => (

            <div className="resultContainer" key={feature.id}>

            <Card sx={{ width: 250, margin: 1}} key={feature.id}>

              <CardContent sx={{padding: 1.2, paddingBottom: 0}}>

                <div className="resultContainer" >

                  <div className="resultImgDiv">

                    <img className="resultImg" src={feature.assets.thumbnail.href} />

                  </div>
@@ -239,6 +249,9 @@ export default function FootprintResults(props) { 
                      <strong>Date:</strong>&nbsp;{feature.properties.datetime}

                    </div>

                  </div>

                </div>

              </CardContent>

              <CardActions>

                <div className="resultLinks">

                  <Stack direction="row" spacing={1}>

                    <Chip
@@ -256,13 +269,13 @@ export default function FootprintResults(props) { 
                      component="a"

                      href={`https://stac.astrogeology.usgs.gov/browser-dev/#/collections/${feature.collection}/items/${feature.id}`}

                      target="_blank"

                    //href="https://stac.astrogeology.usgs.gov/browser-dev/"

                      variant="outlined"

                      clickable

                    />

                  </Stack>

                </div>

            </div>

              </CardActions>

            </Card>

          ))}

        </div>

      :

src/styles.css

+1 −3
Original line number Diff line number Diff line
@@ -316,14 +316,12 @@ Controls the CSS for projection buttons when there is no available projection 
}



.resultContainer {

  width: 268px;

  width: 230px;

  display: grid;

  grid-template:

    "ra rb"

    "rc rc"

    / 20% 80%;

  border-bottom: 3px double rgba(0, 0, 0, 0.4);

  padding: 10px;

}



.resultSub {