paulvill / paulvill.github.io

The Embryo Digital Atlas is an open-source project aiming at building a web based platform to visualize complex experimental datasets in an easy and beautiful way.
http://www.embryodigitalatlas.org
MIT License
9 stars 3 forks source link

Side bar #25

Closed paulvill closed 7 years ago

paulvill commented 7 years ago

We need a side bar containing the various keys to interact with the data set.

For example the slider.

The site mockups can be found at the bottom of this issue

issue #10

A first implementation of the side can be found there

0xStarcat commented 7 years ago

@paulvill Hey Paul! I'd like to pick this up

paulvill commented 7 years ago

Thanks you so much! @0xStarcat

defenestrated commented 7 years ago

thanks @0xStarcat! let me know if you need help interpreting the designs – we did them in a hurry so they're not so well marked-up

0xStarcat commented 7 years ago

hey all @paulvill @defenestrated @chitech, I pushed up some code into my fork https://github.com/0xStarcat/paulvill.github.io for the sidebar. When I integrated into layout_test, however, it seems like I ran into a small problem. The Materialize library we are using for the pop-out legend from PR #26 overrides my styling to the point where my sidebar and Materialize can't really coexist nicely. I wanted to reach out to you all (and Christine in particular) for help with this. Can we incorporate the pop-out legend without the Materialize library?

Because of how much custom CSS and detailing went into the sidebar, I don't think we can do the opposite and incorporate Materialize styles into the sidebar without redesigning the mocks (which I suppose is option B).

I've also looked into seeing if we can have Materialize ignore a chunk of the HTML, but it seems like we can't selectively apply the library.

Also here's a screenshot of the sidebar w/o materialize

screen shot 2017-06-03 at 11 15 35 am

and with materialize overriding the styles

screen shot 2017-06-03 at 11 15 47 am
paulvill commented 7 years ago

Hey @0xStarcat !

Thanks a lot for sharing your progress! The screenshot looks really good.

Indeed, @chitech or @defenestrated should be able to answer how to have it work with the Materialize library.

chitech commented 7 years ago

Hi Jeff @0xStarcat , Tomorrow, I will work a solution that doesn't use the Materialize library styles for the legend modal. As for the javascript, I will explore JQuery solution since I see that is already in use. Please let me know if you have any other questions.

0xStarcat commented 7 years ago

Thanks Christine @chitech ! Please send me a note here when you've got it merged and I'll get to work on making a PR for the sidebar. A jQuery solution should be absolutely compatible with the Sidebar (I used pure CSS/HTML). Thanks for understanding and coming back to this =)

chitech commented 7 years ago

Hi Jeff @0xStarcat, I updated the code and removed the materialize library and replaced it with custom javascript and css styles. Just created a pull request on a branch called feature-legend. Please let me know if you have questions.

paulvill commented 7 years ago

Thanks a lot for going back to your code @chitech ! I hope that it will work this time!

0xStarcat commented 7 years ago

Thanks @chitech ! Sorry for the delay, I'll make a PR for the Sidebar then over the next day @paulvill .

paulvill commented 7 years ago

Ok great!!

0xStarcat commented 7 years ago

I made a PR #31 for this issue. Please review! @paulvill @chitech @defenestrated Happy to make changes after review as well. Reach me here or for quicker response - email jeffahking@gmail.com

paulvill commented 7 years ago

Hi Jeff, @0xStarcat - thank you very much for your contribution! I will discuss with @defenestrated the best way to use the sidebar.