ensure map is focused before teleported grid

[RyanCoulsonCA]

Related Item(s)

https://github.com/ramp4-pcar4/tcei-tmx-cwa-storylines/issues/190

Changes

• Modified the order of the map component and the teleport container in the map panel. This should ensure that the map is focused before the teleported panel is.

Notes

While this now ensures that the map is focused prior to the grid when the grid is teleported to the right of the map, we will now have the same issue pop up if the grid is teleported to the left of the map.

It doesn't seem like there's a great solution for this. Adding tabindex conditionally makes the focus jump all over the place. I could potentially duplicate the div with the grid-teleport class and swap the elements depending on whether the grid is teleported to the left or right, but that adds a bunch of unnecessary duplication to the code.

Testing

Steps:

1. Open the demo page.
2. Tab through the 000 product until you get to the first map slide (should the third slide down from the top)
3. Ensure that the map is focused before the teleported grid.

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/story-ramp/fix-190/#/en/00000000-0000-0000-0000-000000000000

[yileifeng]

Reviewed 1 of 1 files at r1, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @RyanCoulsonCA)

[spencerwahl]

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA)

---

src/components/panels/map-panel.vue line 26 at r1 (raw file):

                class="storylines-grid-container flex-1 min-w-0 min-h-0 ramp-styles"
                :class="{
                    'sm:order-1 order-2': config.teleportGrid === 'left',

The simplest solution for both cases is probably to duplicate this and use a v-if instead of doing the order trickery.

Doesn't need to be done now if this is needed ASAP

[RyanCoulsonCA]

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @spencerwahl)

---

src/components/panels/map-panel.vue line 26 at r1 (raw file):

Previously, spencerwahl (Spencer Wahl) wrote…

The simplest solution for both cases is probably to duplicate this and use a v-if instead of doing the order trickery.

Doesn't need to be done now if this is needed ASAP

Yep, I agree. I'll have it done this afternoon 👍

[RyanCoulsonCA]

Reviewable status: 0 of 1 files reviewed, 1 unresolved discussion (waiting on @spencerwahl and @yileifeng)

---

src/components/panels/map-panel.vue line 26 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

Yep, I agree. I'll have it done this afternoon 👍

Donethanks

[spencerwahl]

Reviewable status: 0 of 1 files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA and @yileifeng)

---

src/components/panels/map-panel.vue line 26 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

Donethanks

I think you can just remove all of the order classes?

[RyanCoulsonCA]

Reviewable status: 0 of 1 files reviewed, 1 unresolved discussion (waiting on @spencerwahl and @yileifeng)

---

src/components/panels/map-panel.vue line 26 at r1 (raw file):

Previously, spencerwahl (Spencer Wahl) wrote…

I think you can just remove all of the order classes?

I've removed the order-2 class from the right grid element, but it looks like we need to keep it on the other two elements so that the map still appears above the grid when in mobile mode.

[spencerwahl]

Reviewed 1 of 1 files at r3, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @RyanCoulsonCA)

---

src/components/panels/map-panel.vue line 26 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

I've removed the order-2 class from the right grid element, but it looks like we need to keep it on the other two elements so that the map still appears above the grid when in mobile mode.

lol yep, I forgot about mobile 👍

[yileifeng]

Reviewed all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @RyanCoulsonCA)