Refactor editor layout to use grid

[gordlin]

Related Item(s)

Issue #503

Changes

• [REFACTOR] Changes editor base layout to use grid instead of previous hardcoded solution. The editor layout should now be more robust, and should be able to 'flex' and adjust to element height changes without scrollbars appearing.

Notes

No scrollbar for the editor itself, despite the larger-than-usual header!

Testing

Steps:

1. Open any product.
2. Play around with the editor, especially with the slide list. No matter what you do (e.g. resizing the window, adding/copying slides, opening a specific panel's editor, etc.) the main editor should never get a scrollbar.
   a. (Note: There does seem to be a bug where scrolling through the slide ToC while a tooltip is showing can cause a scrollbar to appear for a short while before disappearing. If others get it too, it might be worth opening an issue for).

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/storylines-editor/editor-base-layout

[yileifeng]

Shrinking the browser size to a mobile(?) resolution does eliminate the editor scrollbar but also removes the page scrollbar. There is no way to access any of the slide content besides using keyboard navigation:

To reproduce, shrink the browser size until the mobile layout comes into view.

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

---

src/components/metadata-editor.vue line 1667 at r1 (raw file):

            // Commented out as it was causing issues with the "Edit Metadata" modal's config swap button.
            // Is it actually needed?

I'd assume this was code prior to the main editor redesign of having both lang slides side by side so would be safe to remove, but it'd be good for someone to confirm

[gordlin]

This issue's been solved in the related PR #514, which is based on this branch - it was part of making the header sticky. I'd suggest doing both these PRs at once, I try to keep that one synced up with this one.

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

---

src/components/metadata-editor.vue line 1667 at r1 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

I'd assume this was code prior to the main editor redesign of having both lang slides side by side so would be safe to remove, but it'd be good for someone to confirm

Sounds good. I'll wait a bit to remove the comment, just in case anyone else has something to chime in about this.

[yileifeng]

The scrollbar issue does seem to be fixed in the latest PR. Noticed a new issue related to this PR with the Canada.ca templates on the metadata page, as the page footer is layered on top of the metadata content when a product is loaded:

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

[gordlin]

Donethanks!

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

[yileifeng]

Looks good now 👍

Reviewed 2 of 2 files at r3, all commit messages.
Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @gordlin)

---

src/components/slide-toc.vue line 75 at r3 (raw file):

        <!-- Slide list -->
        <ul class="toc-slide-list" :class="[isMobileSidebar ? 'toc-list-mobile' : 'toc-list']">

'toc-list-mobile' and 'toc-list' can be removed with these changes?

---

src/components/slide-toc.vue line 677 at r3 (raw file):

}

.line-clamp-2 {

Is this used anywhere?

[RyanCoulsonCA]

Reviewed 1 of 3 files at r2, 2 of 2 files at r3, all commit messages.
Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @gordlin and @yileifeng)

---

src/components/metadata-editor.vue line 1667 at r1 (raw file):

Previously, gordlin (Gordon Lin) wrote…

Sounds good. I'll wait a bit to remove the comment, just in case anyone else has something to chime in about this.

Can't remember what exactly this bit of code was for, but I'd say give removing it a shot and see if anything breaks.

[gordlin]

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

---

src/components/metadata-editor.vue line 1667 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

Can't remember what exactly this bit of code was for, but I'd say give removing it a shot and see if anything breaks.

Donethanks!

---

src/components/slide-toc.vue line 75 at r3 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

'toc-list-mobile' and 'toc-list' can be removed with these changes?

Donethanks!

---

src/components/slide-toc.vue line 677 at r3 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

Is this used anywhere?

Donethanks!

[RyanCoulsonCA]

Reviewed 2 of 2 files at r4, all commit messages.
Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @yileifeng)

---

src/components/metadata-editor.vue line 1667 at r1 (raw file):

Previously, gordlin (Gordon Lin) wrote…

Donethanks!

Things seem to be working for me still. I actually think you might be able to remove this entire if block, since loadConfig also calls updateSlides (via useConfig function).

[yileifeng]

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

[IshavSohal]

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