Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Card and Accordion layout [doc-build] #1262

Merged
merged 19 commits into from
Apr 13, 2020
Merged

Add Card and Accordion layout [doc-build] #1262

merged 19 commits into from
Apr 13, 2020

Conversation

philippjfr
Copy link
Member

@philippjfr philippjfr commented Apr 12, 2020

Supersedes #1182

Adds a Card model with configurable HTML tags and css classes and collapse button

Screen Shot 2020-04-12 at 2 34 58 PM

Here's what it will look like in the coming Material design template:

Screen Shot 2020-04-13 at 1 03 36 AM

@philippjfr philippjfr added the type: enhancement Minor feature or improvement to an existing feature label Apr 12, 2020
@philippjfr philippjfr mentioned this pull request Apr 12, 2020
@maximlt
Copy link
Member

maximlt commented Apr 12, 2020

This is really really cool!

@MarcSkovMadsen
Copy link
Collaborator

Looks nice. Does it support

  • Markdown or HTML in the header?

For example I might like to put an icon in there, a link or set the "size"/ "type" of header?

@philippjfr
Copy link
Member Author

Here are the docs I'm about to add, you'll see an example with a logo: https://anaconda.org/philippjfr/card/notebook

@codecov
Copy link

codecov bot commented Apr 13, 2020

Codecov Report

Merging #1262 into master will increase coverage by 0.22%.
The diff coverage is 93.23%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1262      +/-   ##
==========================================
+ Coverage   87.30%   87.53%   +0.22%     
==========================================
  Files         106      117      +11     
  Lines       12662    12952     +290     
==========================================
+ Hits        11055    11337     +282     
- Misses       1607     1615       +8     
Impacted Files Coverage Δ
panel/layout/spacer.py 74.07% <74.07%> (ø)
panel/layout/grid.py 75.00% <75.00%> (ø)
panel/layout/accordion.py 85.50% <85.50%> (ø)
panel/layout/tabs.py 91.01% <91.01%> (ø)
panel/layout/base.py 93.47% <93.47%> (ø)
panel/layout/card.py 95.65% <95.65%> (ø)
panel/tests/layout/test_accordion.py 96.55% <96.55%> (ø)
panel/__init__.py 100.00% <100.00%> (ø)
panel/layout/__init__.py 100.00% <100.00%> (ø)
panel/models/__init__.py 100.00% <100.00%> (ø)
... and 20 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a3993d1...b178a16. Read the comment docs.

@philippjfr philippjfr force-pushed the card branch 2 times, most recently from 09750e8 to 76b5d55 Compare April 13, 2020 15:50
@MarcSkovMadsen
Copy link
Collaborator

Hi @philippjfr

It's great. Here is a little feedback.

  1. The toogle area is very small and difficult to hit (see video below). Can it be made larger?
  2. Personally I would have liked to include something better than +/- for toggle in my example. I can see that a lot of times < and > (rotated 90 degrees) are used. And they are larger and bolder than what is there now.
  3. I have not seen it but is there a divider or border between the objects? I think that gives a nice seperation of objects. Or would I just specify a divider my self? Then maybe that should be included as an example.
  4. When clicking the toggle button a blue border appears while the +/- is clicked. This is a bit strange and should be removed if possible.
  5. Personally I would like the scroll to be on the objects only and not include the title/ header.

Difficult to hit toggle

card (2)

Divider between objects

image

Blue border when clicking +/-

blue_border

Scroll includes title/ header

image

@philippjfr
Copy link
Member Author

This PR now also adds support for a new Accordion layout which behaves very similarly to a Tabs component:

accordion
Screen Shot 2020-04-13 at 7 38 13 PM

@philippjfr philippjfr changed the title Add Card layout Add Card and Accordion layout Apr 13, 2020
@philippjfr
Copy link
Member Author

philippjfr commented Apr 13, 2020

@MarcSkovMadsen Thanks for the feedback, a lot of what you're seeing is simply because anaconda.org defines various CSS which does not seem to work too well with the Card CSS. I'll try to make sure they don't interfere like that but there's only so much we can do.

The toogle area is very small and difficult to hit (see video below). Can it be made larger?

It is actually considerably larger than it appears on anaconda.org, it defines various CSS tags that interfere with the actual look and feel. I'll still try to make it larger though.

Personally I would have liked to include something better than +/- for toggle in my example. I can see that a lot of times < and > (rotated 90 degrees) are used. And they are larger and bolder than what is there now.

Personally I prefer +/- and again they appear much larger and bolder without anaconda.org's theme interferring. I'll try to make sure that external CSS doesn't interfere like that.

I have not seen it but is there a divider or border between the objects? I think that gives a nice seperation of objects. Or would I just specify a divider my self? Then maybe that should be included as an example.

Happy to add an example, much less happy adding dividers by default.

When clicking the toggle button a blue border appears while the +/- is clicked. This is a bit strange and should be removed if possible.

Again, this is anaconda.org CSS, not part of the default look.

Personally I would like the scroll to be on the objects only and not include the title/ header.

Unlikely to be easy, but I'll give that a shot.

@kcpevey
Copy link
Contributor

kcpevey commented Apr 13, 2020

I'm super excited to see this!! 🎉

@philippjfr philippjfr changed the title Add Card and Accordion layout Add Card and Accordion layout [doc-build] Apr 13, 2020
@philippjfr
Copy link
Member Author

Merging for now. We can add additional tweaks later.

@philippjfr philippjfr merged commit 7a3398c into master Apr 13, 2020
@philippjfr philippjfr deleted the card branch April 13, 2020 21:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: enhancement Minor feature or improvement to an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants