frontend update Summoner.tsx

[JacobWillkomm]

changes to Summoner.tsx, RecentlyPlayedWith.jsx, MatchFilterForm.tsx and index.css

On Summoner.tsx

• RecentlyPlayedWith above MatchFilerForm
• OftenPlaysWith above MatchCards
• Structure changes to bootstrap elements
• • OftenPlaysWith and MatchCards are within another 'row' and 'l4' and 'l8' respectively
• Add css class 'collapsible-plays-with' so OftenPlaysWith collapses on smaller screens

On RecentlyPlayedWith.jsx

• Remove leftMargin style (content on right side after reorder)

On MatchFilterForm.tsx

• Add style 'width:600' to align with match cards

On index.css

• Add media queries to collapse OftenPlaysWith on smaller screens

Notes: Would be nice to get the MatchFilterForm to align with the bottom of the container instead of the top. We should consider including the MatchFilterForm in the div with the MatchCards, and the RecentlyPlayedWith in the div with OftenPlaysWith. Ideally, we could just reorder the elements on the smaller screen size rather than collapse them.

Named this branch a WIP so that I can address any feedback you have regarding layout.

[brianjp93]

Nice! You mention this in your PR a little bit. Since we're changing this up, I think it is a good idea to get the match list to align with the bottom of the matchfilterform like you said. Maybe we can create two columns and just hide the second column with the "players in these games" and "often plays with" components.

[JacobWillkomm]

If you want to try to do the change to create two columns and align the match list with the matchfilterform then I can wait for you to commit that as well.

I'll take a look and get the matchfilterform aligned, and add the other columns. Just to make sure I understand, do you mean that we should add another column that contains the "players in these games" and "often plays with" components, below the current layout, hidden on a large screen, and visible when on a small screen? (so that those components are always visible somewhere)

[brianjp93]

No, I don't think it's needs to be shown at all if the screen is too small. I just mean that it would be nice to create two columns just so the match list can be bumped up a little bit

[JacobWillkomm]

Indentation & trailing whitespace fixed. 'react/.yarn/sdks' updated per https://yarnpkg.com/getting-started/editor-sdks#editor-setup This only seems to fix the errors if you open the react folder specifically with vscode.

[JacobWillkomm]

Just wanted to touch base on the PR. No worries if you haven't had a chance to review yet :).

[brianjp93]

looks good!