Add More Imagery to Dashboard

[RuthNjeri]

Fixes #8967

Change the topic cards view in /v2/dashboard to design suggested by @ebarry

Design

Before

After

Thanks!

[gitpod-io]

[codecov]

Codecov Report

Merging #9708 (dabd0b4) into main (9682cb8) will decrease coverage by 0.04%.
The diff coverage is n/a.

❗ Current head dabd0b4 differs from pull request most recent head 69ce150. Consider uploading reports for the commit 69ce150 to get more accurate results

@@            Coverage Diff             @@
##             main    #9708      +/-   ##
==========================================
- Coverage   82.11%   82.07%   -0.05%     
==========================================
  Files          98       98              
  Lines        5982     5940      -42     
==========================================
- Hits         4912     4875      -37     
+ Misses       1070     1065       -5     

Impacted Files	Coverage Δ
app/services/execute_search.rb	88.88% <0.00%> (-5.56%)	⬇️
app/api/srch/search.rb	66.87% <0.00%> (-3.83%)	⬇️
app/controllers/images_controller.rb	70.27% <0.00%> (-2.23%)	⬇️
app/helpers/application_helper.rb	85.71% <0.00%> (-1.92%)	⬇️
app/models/concerns/comments_shared.rb	90.47% <0.00%> (-1.53%)	⬇️
app/models/drupal_file.rb	36.84% <0.00%> (-1.26%)	⬇️
app/controllers/tag_controller.rb	79.81% <0.00%> (-0.97%)	⬇️
app/controllers/notes_controller.rb	84.46% <0.00%> (-0.63%)	⬇️
app/models/user.rb	86.02% <0.00%> (-0.10%)	⬇️
app/channels/room_channel.rb	71.42% <0.00%> (ø)
... and 7 more

[RuthNjeri]

Unstable site https://unstable.publiclab.org/v2/dashboard

[jywarren]

Wow Ruth this is so cool!

I'm thinking the CSS margins/padding/font size may need a little refinement, so i gave it a try; what do you think:

.card-view .card-body p {
    margin-bottom: 10px;
}

.card-view .card-body h5 {
    font-size: 1.2em;
}
.card-view .card-body {
    font-size: 0.85em;
    /* padding-bottom: 4px; */
    /* padding-top: 6px; */
}

I also see it kind of hitting the right side of the card. We could add padding, but would it work better to use the container grid system in Bootstrap? But you probably know better.

[jywarren]

Like this seems to solve it... so maybe that's the most efficient fix?

.node-list {
    display: grid;
    margin-right: 12px;
}

[jywarren]

Is it possible to get the cards to not overlap each other horizontally, as well?

[jywarren]

Thanks for this @RuthNjeri it's so cool!!

[jywarren]

Ah, i see width is fixed at:

<div class="card h-100" style="width: 14rem;">

dropping it to 13rem worked OK:

[jywarren]

I think this is so close - we can do a few things -- collect input from staff, OR maybe we can just make this toggle-able -- what do you think? Let me ask staff if they think this should be something that can be toggled, vs. just liking this as-is and going for it!

[RuthNjeri]

Hi @jywarren 👋🏾

Thanks! Yeah, we could wait to hear what the staff says and proceed from there, thanks.

[ebarry]

I just have to write in here to say THIS IS AWESOME

[RuthNjeri]

Thanks @ebarry ❤️

@jywarren I looked at the additional styling you recommended, they look great. I have added them to the topicCard partial and I like how it looks...

I have also pushed the changes to the unstable branch, it should be visible in a few

[RuthNjeri]

https://unstable.publiclab.org/v2/dashboard

[jywarren]

Sorry, Sebastian pushed to unstable so I wasn't able to see. I'll try in gitpod!

[jywarren]

Main thing is I want to ensure it loads one-above-the-other nicely on smaller screens!

[jywarren]

I think this is /almost/ there. I did find a couple break points at which the wrapping gets a little... weird. 😭

1010px wide:

931px wide (notice spacing between the posts is now missing):

655px - we'd like them to become full width to fill available space once it's this narrow:

@RuthNjeri i wonder if a) we should revert to the Bootstrap grid to fix this? I'm more familiar with it than grid sizing. and b) if you're interested in getting support from perhaps Manasa or Sushmita who are looking for adjacent projects to get into? Either way is fine, just an idea!

[RuthNjeri]

Hi, @jywarren I would be happy to receive support on this from Manasa or Sushmita. I think it's also best to add more people working on the v2/dashboard that way, I am not the only one with the knowledge of the updates on the dashboard aside from you and Liz.

[Tlazypanda]

Hey @RuthNjeri this is looking awesome 🎉 💯

Looping in @17sushmita and @Manasa2850 if you folks have any time aside from your projects would really appreciate you to look into this. A good way would be to pull from @RuthNjeri branch and add your changes on top of it. Thank you all!! ❤️ cc @jywarren

[jywarren]

@Manasa2850 was this a project you were interested in taking up, do you think? No pressure but it's available and is one of the last remaining changes to the new dashboard we're working on. Thanks!

[Tlazypanda]

Hey @17sushmita @Manasa2850 if you are interested please have a look ✌️

[jywarren]

OK! I rebased, made some small changes, and tested at different widths, and I think we are OK here, fingers 🤞

[jywarren]

[codeclimate]

Code Climate has analyzed commit 41bcba1 and detected 0 issues on this pull request.

View more on Code Climate.