Adjust Projects Page Dropdown to account for length

[Aveline-art]

Overview

The dropdown for the 'Technologies' in the projects page is getting quite long, and some awkward scrolling is required to view further into the list.

Action Items

Design

• Create a design for how the dropdown should behave in order to remove the awkward scrolling.

Development

• Read through this issue to understand what the designer's solutions are.
• Locate the code controlling the dropdown behavior.
• Implement the new design.

Resources/Instructions

None, but do be aware that the page with the dropdown is liable to change rapidly in the coming weeks, so be sure to review our architecture before proceeding.
Projects Page
Projects Page - Figma

[Aveline-art]

@hackforla/website-design Hello! This is my first design issue, so I am unsure if this is considered...good? Well done? So please review this, and reword this and then it can go straight to the backlog.

[janieche]

1. Progress: In progress (yellow rectangle). Created 2 options and want to explore a 3rd with mega menus.
2. Blockers: Need to identify any categorizations or groupings that can be made with the entire Technologies list to create an example of a mega menu
3. Availability: Weekends and weekday evenings
4. ETA: TBD pending Technology groupings
5. Pictures:

[Aveline-art]

Notes about all technologies we have thus far (sorted-WIP):

Backend Frameworks

Django - free and open-source web framework (backend, python)
Express - back end web application framework (backend, js)
FastAPI - web framework for building APIs with Python (backend, python)
Flask - web framework written in Python (backend, python)

Code Review and Testing

Code Climate - code review/testing tool (review/test)
Cypress - testing for anything that runs in a browser (review/test)
ESLint - static code analysis tool for identifying problematic patterns (review/test)
Jest - JavaScript testing framework (review/testing)
React Testing Library - very light-weight solution for testing React components (review/testing)

Database Management and Database Tools

Microsoft SQL Server - relational database management system (database/database tool)
MongoDB - source-available cross-platform document-oriented database program (database/database tool)
NoSQL - a type of database that stores and retrieves data without needing to define its structure first (database/database tool)
PostGIS - open source software program that adds support for geographic objects to the PostgreSQL object-relational database (database/database tool)
PostgreSQL - relational database management system (database/database tool)
Redis - in-memory data structure store, used as a distributed, in-memory key–value database, cache and message broker (database/database tool)

Design and Design Systems

Adobe CC - graphic design, video editing, web development, photography (design)
Figma - vector graphics editor and prototyping tool (design)
Material-UI - a design language (design / design system)

Hosting/Cloud Computing

AWS - cloud computing platforms and APIs (hosting/cloud computing)
Azure App Service - cloud computing based platform for hosting websites (hosting/cloud)
GitHub Pages - Build your own site from scratch or generate one for your project (hosting)

Libraries

GeoPandas - extends the datatypes used by pandas to allow spatial operations on geometric types (python library)
jQuery - JavaScript library designed to simplify HTML DOM tree traversal and manipulation (library, js)
Leaflet - open source JavaScript library used to build web mapping applications (libraries)
React - JavaScript library for building user interfaces)
Redux - open-source JavaScript library for managing application state (js, library)

Other - Web

Jekyll - simple, blog-aware, static site generator (other)
Markdown - a lightweight markup language for creating formatted text (html, web)
Node.js - open-source, cross-platform, back-end JavaScript runtime environment (javascript)
SASS - preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (web)

Other - Misc.

Auth0 / OIDC / OAuth2 - open standard for access delegation (other)
Docker - virtual container (other)
Flutter - open-source UI software development kit (think, premade tools, such as with Android Studio) (other)
Mapbox - provider of custom online maps for websites and applications, basically an api for map data (other)
Miro - online collaborative whiteboard platform (think kanban board) (other)
Prefect - dataflow automation (data science thing)

Unlisted (unsure how to sort these)

Python - general-purpose programming language (python)
SCSS - SCSS syntax (web)
TypeScript - programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript (javascript)

[janieche]

Thanks @Aveline-art ! Can the Unlisted section be called Programming Languages? Since SCSS is a syntax of a language I'd consider that a part of the language.

[Aveline-art]

@janieche I think that can be done. I worry though, since inside each project's page (an example), we list languages separate from technologies. We might need to ask @ExperimentsInHonesty on the distinction between tech and lang, and whether the tech dropdown needs to include langs.

I also get the feeling that for some projects, there may not have been a strict distinction between tech and lang, so having only a dropdown to filter by tech might not have a lot of meaning...

[janieche]

1. Progress: In progress (yellow rectangle). Created 3 options and want to explore a 4th with categorized mega menus.
2. Blockers: Can we assign the Unlisted items under existing categories?
3. Availability: Weekends and weekday evenings
4. ETA: TBD pending feedback
5. Pictures:

[janieche]

After team feedback and voting, we decided to move forward with the mega menu (without categorized sections). There are 3 versions for desktop --

• Version A is the default with the current set of technologies.
• Version B is an example of the future version if new technologies are added. The box will become longer rather than wider (it should not go wider than 4 columns) as long as the entire list can be viewed in the user's screen all at once.
• Version C is a future future version if even more technologies are added and the list would extend beyond the user's screen. In this case, the dropdown will be scrollable (with the section of list shown still viewable all at once in the user's screen).

For future work, the mobile version will be a scrollable single column dropdown.

The final mocks can be found in the yellow rectangle.

[ExperimentsInHonesty]

@janieche please remove "looking for" and replace "Location" with "Program Area"

[janieche]

Additional notes from 9/19 meeting:

• Remove "looking for" and replace "Location" with "Program Area"
• Create mobile mock version of the dropdown
• Note size and behavior of each dropdown boxes
• Update resting state with current filter options
• Organize screens from top-down and left-to-right for most updated screens
• final set of screens get a red line around them

[janieche]

1. Progress: Completed (pink rectangle). Created 3 versions to account for changing dropdown heights for different
2. Blockers: None
3. Availability: n/a
4. ETA: 9/23, looking for feedback or confirmation it's ready to go!
5. Pictures:

[janieche]

Notes on final designs in the pink rectangle:

• Version A - The mega menu is 768px wide and 412px high for the current number of technologies pictured. The scroll bar is not triggered for this size and number of options.
• Version B - If more technologies are added, the box gets longer/taller taking the users screen size into consideration. The goal is to keep the entire dropdown box viewable on the screen. Recommendation: Height of 493px comfortably fits the dropdown on a 13in Macbook Pro screen.
• Version C - If even more technologies are added that it goes beyond the users viewable screen, the scroll bar is triggered on the recommended max dropdown height (493px).
• Mobile Version - For the mobile version, users will see a single column scrollable list.

[kristine-eudey]

@abuna1985 can you please make an issue for this and add a dependency for completion of #1051? Thanks!
UPDATE 10/6/21 - Issue #1051 is completed so this should be good to go.

[abuna1985]

Created #2397 to complete the dev implementation of the projects dropdown