search

visdesignlab / visdesignlab.github.io

https://vdl.sci.utah.edu/
BSD 3-Clause "New" or "Revised" License
6 stars 21 forks source link

Update Team Page #21

Closed samquinan closed 6 years ago

samquinan commented 8 years ago

Open issues include:

mckennapsean commented 7 years ago

I played with some of the responsive bits, to clean up a few of the major issues that exist, though a lot of minor ones still exist. Images are now linked via text on hover (so doesn't work on mobile unfortunately). I leave the rest for others to tackle. :-)

mckennapsean commented 7 years ago

Alex, Alex, Sam, & I talked about this remaining item today. It includes linking pictures to names better, and vice-versa.

For both, we will support both on-hover and on-click events attached to the pictures and each .person-block (which needs to be redesigned to better support these interactions effectively). I may make a separate issue about this factor if I want to clean up how the list of names is generated (e.g. to use flexbox to figure out how many dots to generate).

A click will add a hashtag (#) to the URL and "lock" a selection on screen. Going back or clicking again on the team page would "clear" this selection. A selected item highlights the name and the picture, and should ideally scroll that person into view. The only exception will be clicking on the name of the person which goes to their individual or external website page.

A hover will just highlight the name and picture, clearing when it is hovered off. If a person is out-of-view, no scrolling will occur. We could make the team header fixed to accommodate this, but we decided against doing that for now.

The highlighting of the picture could change the border-width or perhaps add some coloring around/behind the images. When I come to this, I will play around with some design ideas and post them. For the name, I imagined just doing a background highlight for the block, but some additional color may be splashed in too. It should be easy enough to do the highlighting based on a single function that adds (or removes) a classname to the necessary objects that causes the highlight.

mckennapsean commented 6 years ago

Got a working solution for clicking on people & images. Here is some sample output with some CSS, any thoughts?

sample

mckennapsean commented 6 years ago

Got a working branch up with the clicking & hovering implemented. The CSS could probably use some love, but I may punt on that. :)

Also, redoing the team page for grid (even better responsiveness and layout) is a separate issue imo. Feel free to make one! These changes would require a significant rewrite (the page heavily uses SASS & Neat for its grid currently).

alexsb commented 6 years ago

Awesome, closing!