Restore old dropdown scss to wins page

[Jaretzbalba]

Fixes #4557

What changes did you make and why did you make them ?

-Created a copy of old dropdown scss file and imported into main.scss
-Applied old dropdown scss to wins page only

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b Jaretzbalba-restore-dropdown-scss-wins-4557 gh-pages
git pull https://github.com/Jaretzbalba/website.git restore-dropdown-scss-wins-4557

[mjshelton12]

Avail: Monday 8pm-10pm, Tuesday 9am-3pm
ETA: Tuesday end of day

[mjshelton12]

This is looking really great! The changes are effective and function well in phone, tablet, and desktop views.

I do have one question though: What is the relevance of the change in _sass/components/_projects-page.scss? It looks like a media query was deleted for the projects page. I didn't see this requested in the original issue but also can't see a difference in docker vs live on the projects page. It felt out of scope for this issue, can you expand on why you made this change if I'm missing it?

[Jaretzbalba]

@mjshelton12 Of course! I found that the dropdown buttons on tablet/desktop screens weren't being displayed correctly because that media query is for the newer filter display. Since this issue is restoring the old dropdown filter to the wins page only, this media query was actually messing up the layout. I'm not sure as to why the scss file is called projects-page when it is actually for the wins page. You can see that the scss file for the project page is actually just called project.scss. Hopefully, that clears things up!

[cng008]

Availability: weekdays after 2pm
ETA: Wednesday EOD

[cng008]

I see that the:

• PR was done on the correct branch
• issue is linked correctly
• new file is imported in _sass/main.scss
• class names have been updated in _includes/wins-filter-template.html (though you may want to ask if the id attributes also need to be changed)

Great job reverting the changes on _sass/elements/_old_dropdown_filters.scss!

There is an issue with the drop-downs in desktop view in Safari. Anything above mobile formats appears like the below image. It may have something to do with the media query you removed in _sass/components/_projects-page.scss bc when I put it back, I'm at least able to use the filtering. Otherwise, looks good on Firefox and Chrome.

Things to note:

desktop view

• I did notice that the width of the dropdown is off when it's opened on desktop and mobile. This wasn't a part of the original issue but is something to note. Changing the width to 100% on line 57 & line 166 in _sass/elements/_old_dropdown_filters.scss fixes this.

mobile view

• The dropdown text in mobile could be smaller to account for word-wrapping going on
• The dropdown card could be made scrollable as it currently extends past the height of the screen

@roslynwythe should these styling issues be fixed in a separate issue?

[Jaretzbalba]

@mjshelton12 @cng008 Thank you both for the input! I made some changes to the _wins-page.scss file to fix the display of the filter on all browsers now and added back the code I removed from the _projects-page.scss file.

[mjshelton12]

Thank you for your timely and effective replies!

This looks great. To review: Your branches look correct, you linked the issue, you explained what you did and why, and you provided visuals. Your code is clean and effective. I checked the code in chrome for phone, tablet, and desktop as well as safari for desktop and all looked as expected for me.

Thanks again for all your hard work and for being so responsive to our notes!

[cng008]

I can confirm that the desktop view on Safari is now fixed. Great work in meeting the requirements for the issue. Appreciate all the hard work you put into this. Thank you!

[roslynwythe]

Hi @Jaretzbalba @cng008 @mjshelton12 @t-will-gillis thank you all for your great work on this PR. It would be a good idea for someone to write an ER to address the "desktop view" and "mobile view" issues raised by Christien in her excellent comment If anyone is interested in writing that ER, please let myself or Justin know.

[t-will-gillis]

Hey @Jaretzbalba – Fantastic job on this issue, and awesome communication with @mjshelton and @cng008. Great work!

Christien has some good observations about styling in comments above. These are outside the scope of this issue but would be good to address these in an ER. Thanks for your work!