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() { export default function AccordionTest() {
const [stations, {setStationsRequest}] = useStationsContext(); const [stations, { setStationsRequest }] = useStationsContext();
return ( return (
<Show when={stations()}> <Show when={stations()} fallback="<p>Loading Stations...</p>">
<h1>Find Stations</h1>
<ErrorBoundary fallback={<p>pretty list broke</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>
<Accordion class="space-y-2" defaultValue={stations()[0]} toggleable> <For each={stations()} fallback={<div>Loading...</div>}>
<For each={stations()} fallback={<div>Loading...</div>}> {(station) => (<AccordionItem value={station}>
{(station) => (<AccordionItem value={station}> <AccordionHeader>
<AccordionHeader> <AccordionButton
<AccordionButton as="div"
as="div" class="
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" flex
> justify-between
{({ isSelected }) => (<> w-full
<span>{station.Loc.Stations[0].Name}</span> px-4
<div> py-2
<ChevronUpIcon text-sm
class={`flex-0 ${isSelected() ? 'transform rotate-180' : ''} w-5 h-5 text-yellow-900`} font-medium
/> text-left
</div> text-yellow-700
</>)} bg-gray-900
</AccordionButton> rounded-lg
</AccordionHeader> hover:bg-gray-800
<AccordionPanel class="px-4 pt-4 pb-2 text-sm text-gray-500"> focus:outline-none
<ul> focus-visible:ring
<li>Distance: {station.Dist}</li> focus-visible:yellow-600
<li>{station.Loc.StreetAddress}</li> focus-visible:ring-opacity-75
<li>{station.Loc.City}, {station.Loc.State} {station.Loc.Zip} {station.Loc.Country}</li> shadow-2xl
<li>{station.Loc.CoordinateString}, {station.Loc.GeocodeStatus}</li> ">
</ul> {({ isSelected }) => (<>
</AccordionPanel> <span>{station.Loc.Stations[0].Name}</span>
</AccordionItem>)} <div>
</For> <ChevronUpIcon
</Accordion> class={`flex-0 ${isSelected() ? 'transform rotate-180' : ''} w-5 h-5 text-yellow-900`}
</div> />
</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> </ErrorBoundary>
</Show> </Show>
) as JSX.Element; ) 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([]); const [scats, setScats] = createSignal([]);
function getCoords(stations) { async function getCoords(stations) {
if (stations() === undefined) { if (stations() === undefined) {
return return
} else if (stations.loading) { } else if (stations.loading) {
@ -27,6 +27,7 @@ export default function MapScatLayer(props: any) {
} else { } else {
let buf: ScatData[] = []; let buf: ScatData[] = [];
for (const station of stations()) { for (const station of stations()) {
// long lat
buf.push({ coordinates: [station.Loc.Coordinates[1], station.Loc.Coordinates[0]] }) buf.push({ coordinates: [station.Loc.Coordinates[1], station.Loc.Coordinates[0]] })
}; };
return buf; return buf;

31
lightning/src/root.css
View file

@ -16,3 +16,34 @@ a {
margin-right: 1rem; 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() { export default function Stations() {
const [stations, {setStationsRequest}] = useStationsContext(); const [stations, { setStationsRequest }] = useStationsContext();
setStationsRequest(TEST_PACKET); setStationsRequest(TEST_PACKET);
return ( return (
<> <main>
<Title>Ride the Lightning</Title> <Title>Ride the Lightning</Title>
<AccordionTest /> <AccordionTest />
</> </main>
) as JSX.Element; ) as JSX.Element;
}; };