Fix map extent and mobile demos

[dnlnashed]

For #70

Changes

• Map extents for the home page maps are now changed to have a better initial view of the map
• The mobile map on the home page is now sized to a proper mobile format
• The mobile demo page now does what it mentions in the description - 3 maps are displayed, each in different sizes.

Feel free to mention any feedback. May want to keep the mobile demo as it is now or maybe change it to something else.

---

This change is 

[github-actions]

Your demo site is ready! 🚀

Main: https://ramp4-pcar4.github.io/ramp-website/extent-changes/

[szczz]

Looks great! Can you just move the R3 & R4 buttons above the mobile demo please. The demo should also be centred in its existing container.

Something like this

Reviewed 10 of 10 files at r1, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @dnlnashed)

---

src/components/map.vue line 17 at r1 (raw file):

                ultrices arcu pharetra at. Sed justo lacus, lacinia nec ex eget, semper ultrices enim. Nullam blandit
                convallis lectus, quis dictum lectus maximus eget. Maecenas ex dolor, dictum a faucibus vitae,
                sollicitudin sit amet augue. Aenean sollicitudin turpis in accumsan condimentum. Quisque lobortis odio a

Just curious what the placeholder text is for?

[dnlnashed]

doneThanks I think. Wanted to make the position similar to the other features, but let me know if it looks off still. Can try and make the gap smaller between the text and map. Also repositioned the rest of the toggle buttons to be on the edge above the map instead of slightly inwards.

Reviewable status: 9 of 11 files reviewed, 1 unresolved discussion (waiting on @szczz)

---

src/components/map.vue line 17 at r1 (raw file):

Previously, szczz (Matt Szczerba) wrote…

Just curious what the placeholder text is for?

I think its to try and show RAMP embedded within something since the description mentions showing a map embedded with text or page contents. Can remove the text and say in the desciption something along the lines of "full width, medium width, and mobile view".

[szczz]

Reviewed 2 of 2 files at r2, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @dnlnashed)

---

src/components/info/feature.vue line 15 at r2 (raw file):

                <div class="map-container md:mr-[20px]" v-if="index % 2 !== 0">
                    <toggle-version @ramp3="openRAMP3" @ramp4="openRAMP4" :version="version" :key="version" />
                    <div :class="{ 'flex justify-start': index === 5 }">

Button / demo alignment looks good, but it looks like the demo was moved under the buttons rather than the buttons shifted to the demo. This causes a large gap between the demo and the description text. Think it may have to do with this change.

[dnlnashed]

Reviewable status: 10 of 11 files reviewed, 1 unresolved discussion (waiting on @szczz)

---

src/components/info/feature.vue line 15 at r2 (raw file):

Previously, szczz (Matt Szczerba) wrote…

Button / demo alignment looks good, but it looks like the demo was moved under the buttons rather than the buttons shifted to the demo. This causes a large gap between the demo and the description text. Think it may have to do with this change.

Removed the gap and positioned everything to the center 👍

[yileifeng]

Reviewed 9 of 10 files at r1, 1 of 2 files at r2, 1 of 1 files at r3, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @szczz)

[dnlnashed]

Fixed position flickering when scrolling to the mobile demo on the home page when using a mobile device

Reviewable status: 10 of 11 files reviewed, 1 unresolved discussion (waiting on @szczz and @yileifeng)

[szczz]

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