Refine UI of the main-image section in the PublicLab Editor

[Paul Ibeabuchi C.]

Hi, @TildaDares
I'm trying to refine the UI of the main-image section for mobile view.
Here's what it currently looks like:

\

Here's what I'm trying to achieve:

[Paul Ibeabuchi C.]

I'm looking for the corresponding html file so that I can add a class to elements and use that to style them.
I know you mentioned that the html file could be found at https://github.com/publiclab/plots2/blob/main/app/views/editor/rich.html.erb but here's where I have a bit of confusion:
I'm trying to style this in the PublicLab.Editor project and not the Plots2 project. I remember you also mentioned that instead of adding a new class, I could use an existing class instead but the problem with that is some elements share classes which makes it a problem to style just a targeted element.

My next move was to use some kind of CSS selectors to target the elements but the problem that may arise with that is if at some point, the html is modified by someone else or dynamically added, then the CSS style might be targetting an unintended element. (I don't know if you get what I mean, but let me know if you do need me to reiterate).

So how do I go about this, any suggestions?
@TildaDares

[Tilda Udufo]

To add a new class, you need to add the class in https://github.com/publiclab/plots2/blob/main/app/views/editor/rich.html.erb
and if you also want that same change to appear in the editor, you also have to add it to the HTML file in https://github.com/publiclab/PublicLab.Editor/blob/main/examples/index.html. The CSS can be added to the PublicLab.Editor CSS file.

[Paul Ibeabuchi C.]

Great, this brings me to my first idea with using the examples/index.html file in the PublicLab.Editor project which we discussed on Gitter(or Matrix).
If I add the classes to the examples/index.html file when it gets merged, will the changes impact the editor when it gets merged to plots2?

[Tilda Udufo]

No it won’t. You have to also add that class in the plots2 html file.

If I add the classes to the examples/index.html file when it gets merged, will the changes impact the editor when it gets merged to plots2?

[Paul Ibeabuchi C.]

Hmm, this here was my confusion.
But ok, I'd give it a try. Thank you @TildaDares

[Paul Ibeabuchi C.]

Or what if I add the class using javascript, does that pose any problem in your opinion? @TildaDares
I worry that changing the class names in plots2 and then in the editor might not be the best approach.

[Tilda Udufo]

No it doesn’t

[Paul Ibeabuchi C.]

I think I just got it. Let me make a PR so we can discuss my approach there.
Thank you very much @TildaDares I'd send you the PR soonest