JuliaDocs / DemoCards.jl

Let's focus on writing demos
MIT License
66 stars 14 forks source link

add bulma grid theme and fixes class name clashes for grid style #105

Closed piever closed 2 years ago

piever commented 2 years ago

This is the style I put together for AlgebraOfGraphics using the Bulma component, as Bulma is the CSS stylesheet used by Documenter, so this should give a consistent feel to the page. This is what it looks like for AlgebraOfGraphics.

It's a simpler approach than #104 (they are not mutually exclusive), where one gets nice defaults just by using a pre-built component (no custom CSS).

This does not force the size of the image, but is based on a 2-column layout for demo cards (1-column on mobile). It also does not force height or image ratio (as that may vary), but it does assumes that all images have a same (or at least similar ratio), which I think is reasonable. It would be possible to force the ratio using Bulma helpers, but I think it's better to be flexible here.

The thing I'm not happy about is that I would like to make the whole card clickable, but can't quite figure out how. I asked on Slack, and they mentioned it would need to be with some post-processing but I couldn't figure it out exactly (don't really now Documenter that well).

johnnychen94 commented 2 years ago

This is nice! I'm wondering if it's possible to center the image?

image

codecov[bot] commented 2 years ago

Codecov Report

Merging #105 (3ea828e) into master (ef6626f) will decrease coverage by 0.43%. The diff coverage is 0.00%.

:exclamation: Current head 3ea828e differs from pull request most recent head 7f71b7d. Consider uploading reports for the commit 7f71b7d to get more accurate results

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #105      +/-   ##
==========================================
- Coverage   88.34%   87.91%   -0.44%     
==========================================
  Files          14       15       +1     
  Lines         841      844       +3     
==========================================
- Hits          743      742       -1     
- Misses         98      102       +4     
Impacted Files Coverage Δ
src/Themes/Themes.jl 72.72% <ø> (ø)
src/Themes/bulmagrid/bulmagrid.jl 0.00% <0.00%> (ø)
src/Themes/grid/grid.jl 100.00% <ø> (ø)
src/generate.jl 76.99% <0.00%> (-0.47%) :arrow_down:

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 ef6626f...7f71b7d. Read the comment docs.

piever commented 2 years ago

Thanks for adding the docs!

Good to go also on my end! I've made the image fullwidth by default (so it looks sensible even with small images, like the logo).

I had some worries about screen-readers in that by default they would start by reading the uninformative alt text. I think it's better if the screen-reader starts with title and subtitle, so I've used a small CSS trick to display the image above but read things correctly.

Note that things don't display quite correctly in the docs here, because the other style :grid adds properties to a pre-existing Bulma class card. I don't think it should do that (it's the CSS equivalent of type piracy).

UPDATE: I've noticed the "TODO" in the source code about this. The reason why it wasn't working with the rename is that the package was using the Bulma card class, plus some custom styles added to it. I've fixed is so that it is implemented with the grid-card class (created here) and the Bulma card class (which is needed, but should not be modified). I've also added consistent class names to bulma grid, so that it can be customized with user css in the future.

johnnychen94 commented 2 years ago

I don't have many html/css experiences to tweak the stylesheets. Thank you so much for improving it!