Plots2: Fix "Insert Header" Toolbar Button Responsive Styling

Created on 21 Mar 2021  ·  3Comments  ·  Source: publiclab/plots2

In the legacy editor, the "Insert Header" toolbar button's icon completely disappears when you resize the window.
Specifically, if the window's width is greater than 700px and less than 1000px.

Video

(The Header button is the H in the video below)

https://user-images.githubusercontent.com/4361605/111892783-b005ec80-89bb-11eb-81e6-14d68b3a9422.mov

How to Reproduce

Go to any place that uses the legacy editor on our site. This includes notes, wikis, and questions.
It also includes /wiki/new.

  1. For example, go to this note on our testing server at stable.
  2. Resize the window as above, and notice how the H disappears.

Suggested Fixes

You'll have to do some research in the codebase and the CSS stylesheets.

The partial for the toolbar is at /app/views/editor/_toolbar.html.erb:
https://github.com/publiclab/plots2/blob/07a243da39702501d0f5d4de8a3683a24d680a38/app/views/editor/_toolbar.html.erb#L29-L44

I notice that the icon is wrapped in a span with class d-md-none, so that might be it. But definitely play around with this and see what you find!

This is a great issue for someone who just completed an FTO and wants something a little more challenging.

Post a comment here to claim this issue, and afterward, feel free to post a comment asking for help if you get stuck!

CSS easy feature help wanted

Most helpful comment

@waridrox Nice, that was fast! Go ahead, just post a comment here if you get stuck.

All 3 comments

Can I try it please ? @noi5e

@waridrox Nice, that was fast! Go ahead, just post a comment here if you get stuck.

You know what they say - sometimes the answer is right in front of you...

https://github.com/publiclab/plots2/blob/07a243da39702501d0f5d4de8a3683a24d680a38/app/views/editor/_toolbar.html.erb#L29-L43
In this case, code at line 40 was applying an unnecessary span element which was conflicting with the styles. Removing that simply resolved the issue :D

_No functionality is hindered after the change though a lot of time went into finding this 😅_

https://user-images.githubusercontent.com/58583793/111906743-2831e800-8a78-11eb-953d-58dfe534048b.mp4

I've reverted back the colors, they were just for debugging purposes.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ebarry picture ebarry  ·  3Comments

divyabaid16 picture divyabaid16  ·  3Comments

keshavsethi picture keshavsethi  ·  3Comments

first-timers[bot] picture first-timers[bot]  ·  3Comments

shapironick picture shapironick  ·  3Comments