adam/maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

some styling

Browse source
This commit is contained in:
Adam 2023-04-25 14:46:33 -04:00
parent 2649e53e81
commit b3634132a4
4 changed files with 90 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
lightning/src/components/AccordionTest.tsx
View file

@ -24,44 +24,63 @@ function ChevronUpIcon(props: JSX.IntrinsicElements['svg']) {
};
export default function AccordionTest() {
const [stations, {setStationsRequest}] = useStationsContext();
const [stations, { setStationsRequest }] = useStationsContext();
return (
<Show when={stations()}>
<h1>Find Stations</h1>
<Show when={stations()} fallback="<p>Loading Stations...</p>">
<ErrorBoundary fallback={<p>pretty list broke</p>}>
<div class="w-full max-w-md p-2 mx-auto bg-black/90 rounded-2xl shadow-2xl max-h-screen overflow-scroll">
<Accordion class="space-y-2" defaultValue={stations()[0]} toggleable>
<For each={stations()} fallback={<div>Loading...</div>}>
{(station) => (<AccordionItem value={station}>
<AccordionHeader>
<AccordionButton
as="div"
class="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-yellow-700 bg-gray-900 rounded-lg hover:bg-gray-800 focus:outline-none focus-visible:ring focus-visible:yellow-600 focus-visible:ring-opacity-75 shadow-2xl"
>
{({ isSelected }) => (<>
<span>{station.Loc.Stations[0].Name}</span>
<div>
<ChevronUpIcon
class={`flex-0 ${isSelected() ? 'transform rotate-180' : ''} w-5 h-5 text-yellow-900`}
/>
</div>
</>)}
</AccordionButton>
</AccordionHeader>
<AccordionPanel class="px-4 pt-4 pb-2 text-sm text-gray-500">
<ul>
<li>Distance: {station.Dist}</li>
<li>{station.Loc.StreetAddress}</li>
<li>{station.Loc.City}, {station.Loc.State} {station.Loc.Zip} {station.Loc.Country}</li>
<li>{station.Loc.CoordinateString}, {station.Loc.GeocodeStatus}</li>
</ul>
</AccordionPanel>
</AccordionItem>)}
</For>
</Accordion>
</div>
<Accordion class="space-y-2" defaultValue={stations()[0]} toggleable>
<For each={stations()} fallback={<div>Loading...</div>}>
{(station) => (<AccordionItem value={station}>
<AccordionHeader>
<AccordionButton
as="div"
class="
flex
justify-between
w-full
px-4
py-2
text-sm
font-medium
text-left
text-yellow-700
bg-gray-900
rounded-lg
hover:bg-gray-800
focus:outline-none
focus-visible:ring
focus-visible:yellow-600
focus-visible:ring-opacity-75
shadow-2xl
">
{({ isSelected }) => (<>
<span>{station.Loc.Stations[0].Name}</span>
<div>
<ChevronUpIcon
class={`flex-0 ${isSelected() ? 'transform rotate-180' : ''} w-5 h-5 text-yellow-900`}
/>
</div>
</>)}
</AccordionButton>
</AccordionHeader>
<AccordionPanel class="
px-4
pt-4
pb-2
text-sm
text-gray-500
">
<ul>
<li>Distance: {station.Dist}</li>
<li>{station.Loc.StreetAddress}</li>
<li>{station.Loc.City}, {station.Loc.State} {station.Loc.Zip} {station.Loc.Country}</li>
<li>{station.Loc.CoordinateString}, {station.Loc.GeocodeStatus}</li>
</ul>
</AccordionPanel>
</AccordionItem>)}
</For>
</Accordion>
</ErrorBoundary>
</Show>
) as JSX.Element;

3
lightning/src/components/map/MapScatLayer.tsx
View file

@ -17,7 +17,7 @@ export default function MapScatLayer(props: any) {
const [scats, setScats] = createSignal([]);
function getCoords(stations) {
async function getCoords(stations) {
if (stations() === undefined) {
return
} else if (stations.loading) {
@ -27,6 +27,7 @@ export default function MapScatLayer(props: any) {
} else {
let buf: ScatData[] = [];
for (const station of stations()) {
// long lat
buf.push({ coordinates: [station.Loc.Coordinates[1], station.Loc.Coordinates[0]] })
};
return buf;

31
lightning/src/root.css
View file

@ -16,3 +16,34 @@ a {
margin-right: 1rem;
}
main {
max-height: 90vh;
overflow-y: scroll;
overflow-x: hidden;
background-color: rgba(0,0,0,0.9);
border-radius: 20px;
padding: 10px;
margin-top: 1rem;
box-shadow: 5px 5px 15px 10px black;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #333;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #666;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #999;
}

6
lightning/src/routes/stations.tsx
View file

@ -14,14 +14,14 @@ const TEST_PACKET: StationRequest = {
};
export default function Stations() {
const [stations, {setStationsRequest}] = useStationsContext();
const [stations, { setStationsRequest }] = useStationsContext();
setStationsRequest(TEST_PACKET);
return (
<>
<main>
<Title>Ride the Lightning</Title>
<AccordionTest />
</>
</main>
) as JSX.Element;
};