refined mainImage section to account for responsiveness fixes #842 #843

NARUDESIGNS · 2022-02-22T12:18:41Z

Hello @TildaDares
This is the PR I've made to address issue #842
So I only made changes to the PublicLab.Editor.css file and so I had to use combinations of classes and IDs to target the selected classes. Do have a look and let me know what you think.
Here's what it looks like now:

gitpod-io · 2022-02-22T12:18:45Z

TildaDares · 2022-02-22T14:04:03Z

@NARUDESIGNS I just tested this in the plots2 site and this is what is being displayed

Without image:

With image:

NARUDESIGNS · 2022-02-22T14:17:10Z

This is similar to how it was before I started working on it. Also long before now, the uploaded doesn't work for me in my local environment.
I wonder what is wrong but I'd have a look, thanks.

TildaDares · 2022-02-22T14:19:41Z

It'll be better for you to also test how it looks on the plots2 repo. If you have the plots2 repo installed locally, you can do this:
https://github.com/publiclab/PublicLab.Editor#creating-a-mock-server

TildaDares · 2022-02-22T14:22:42Z

Also, remember that plots2 has its own custom styles so you might need to change that too
https://github.com/publiclab/plots2/blob/main/app/views/editor/rich.html.erb#L44-L58

NARUDESIGNS · 2022-02-22T15:26:45Z

It'll be better for you to also test how it looks on the plots2 repo. If you have the plots2 repo installed locally, you can do this: https://github.com/publiclab/PublicLab.Editor#creating-a-mock-server

I do not have plots2 installed locally. I only use it on Gitpod. But to get you, are you saying we can not make UI changes in the editor project without also making the same change in the plots2 project?

TildaDares · 2022-02-22T15:29:42Z

No, I'm saying to know that the UI looks good, you need to test image upload which is why you need the plots2 repo. Also, the plots2 repo has its own custom styling, so you need to also keep that in mind while you're adding styles.

jywarren · 2022-02-25T17:40:40Z

Hi all, thanks for this, the refinement proposed in #842 looks great.

@NARUDESIGNS basically this is the situation -- the HTML actually displayed on PublicLab.org is from plots2. But since we develop the editor in its own library, which doesn't contain plots2 code, we create an "example" HTML file, just so we can properly run the code, test it out, etc. It's called an example also because if anyone else ever uses this editor, they know what HTML is needed for the library to work properly.

But that means that if you want to style how something looks differently, you need to do it on plots2, which is what's actually published to the site. That also means that we need to either:

not make any changes which would break the version still at https://github.com/publiclab/PublicLab.Editor/blob/main/examples/index.html, or
update https://github.com/publiclab/PublicLab.Editor/blob/main/examples/index.html so that the example still works

option 2 above is technically a breaking change. That's OK, but if we do this, perhaps we can do it all at one time, rather than in a series of PRs, since we would technically need to make a major version bump each time.

That's a good reason to make as much of our changes as we can without requiring different underlying HTML. We could do all our changes to the HTML in one PR even before we do all our styling fixes, so that we only need to bump the major version once. That might be complex to think through, and if you need to make 2 breaking changes, it's not such a big deal. But if you think it may be relatively easy to do all your HTML improvements in a single big change, or to even avoid breaking HTML changes entirely, that's ideal. Many HTML changes will result in a different appearance, but the original example file at https://github.com/publiclab/PublicLab.Editor/blob/main/examples/index.html will still work, right?

I hope this makes sense. Some HTML is done actively using JavaScript, rather than relying on existing HTML. But the template file at rich.html contains essentially everything which /must/ be installed already in the final application for the Editor to have a foundation to install upon. Make sense? I'm happy to discuss more!

NARUDESIGNS · 2022-02-25T17:54:13Z

OK I think I'd have to go through again to grasp it well but these are where my confusion lies:

I only made changes to PublicLab.Editor.css not the HTML file.
Other CSS UI changes we've done in the past weren't complicated as this seems. We merged them and they worked just fine.

Can you speak to these concerns? @jywarren

jywarren · 2022-03-01T17:09:29Z

To check a PR's effects in plots2, before merging or publishing, here's a workflow you can use!

Open plots2 in GitPod (https://gitpod.io/#https://github.com/publiclab/plots2/)
copy the folder /public/lib/publiclab-editor/dist/ to /public/lib/publiclab-editor/dist-bkp/
copy in (manually copy pasting if necessary) the newly generated dist/PublicLab.Editor.css and dist/PublicLab.Editor.js or dist/PublicLab.Editor.min.js files (the minified version) to /public/lib/publiclab-editor/dist/
Navigate to https://GITPOD_URL/lib/publiclab-editor/dist/PublicLab.Editor.css (for example) and refresh or otherwise clear the cache
Try the editor in GitPod to see if your changes appear and work properly!

NARUDESIGNS · 2022-03-07T15:59:11Z

I had the same old problem we had with plots2 on Gitpod last time 😭 😭 😭

NARUDESIGNS · 2022-03-07T16:38:15Z

copy the folder /public/lib/publiclab-editor/dist/ to /public/lib/publiclab-editor/dist-bkp/

@jywarren @TildaDares can I try something like this with the plots2 project locally?

jywarren · 2022-03-09T14:33:23Z

Hi Paul, oh no! Ok, but so you can probably fix it the same way too. Use a link like this:

https://gitpod.io/#prebuild/https://github.com/publiclab/plots2/

That forces a fresh prebuild, so starting from an earlier stage than had generated your error.

jywarren · 2022-03-09T14:33:42Z

For reference here was the last time this happened: publiclab/plots2#10711

NARUDESIGNS · 2022-03-09T14:36:37Z

Alright, I'd try that, thanks.
@jywarren

NARUDESIGNS · 2022-03-10T10:45:12Z

Thanks for the tip @jywarren that was really helpful.
@TildaDares can you please have a look again and see if things show up better now?

TildaDares · 2022-03-10T11:30:26Z

Great work @NARUDESIGNS! This is what it looks like now

At about 767px width, the choose file button kind of cuts off from the screen. This happens till around 550px.

Screen.Recording.2022-03-10.at.12.29.25.mov

NARUDESIGNS · 2022-03-10T11:46:40Z

Oh, I see.
I guess we need to target screens within that range as well. I think that should be tablet view right?
@TildaDares

TildaDares · 2022-03-10T13:05:57Z

@NARUDESIGNS yeah you’re right

NARUDESIGNS · 2022-03-14T16:29:26Z

@TildaDares I think we should be fine now. Please check if all looks good so we can merge!
Thank you!!

TildaDares · 2022-03-14T16:55:43Z

dist/PublicLab.Editor.css

  background-color: #007bff !important;
 }

+@media (max-width: 800px) {


Change this to about 992px and we should be good!

Alright then
On it right away

But why exactly 992 if I may ask?
@TildaDares

It had the same issue as before at 992px.

Ok then, looks great on my end but let's try.
Also can you confirm it looks great and 993px and wider on your end?

It's perfect!

Screen.Recording.2022-03-14.at.18.14.49.mov

Haha love this quick iteration, you two! Thanks! 🎉

NARUDESIGNS · 2022-03-14T17:19:47Z

Thank you so much for your time @TildaDares I think we can merge now
cc @jywarren

jywarren · 2022-03-15T18:03:17Z

Just re-running the tests after a sync, and we should be good to merge!

jywarren · 2022-03-15T18:11:54Z

🎉

NARUDESIGNS · 2022-03-15T18:13:29Z

Thank you very much!
I'd move on to another part of the editor and let you know what I'm working on
@TildaDares @jywarren

refined mainImage section to account for responsiveness

cfdd94c

refined main image section UI

da7f424

refined image UI section and accounted for tablet views

bfebd0e

TildaDares reviewed Mar 14, 2022

View reviewed changes

refined image UI section and accounted for tablet views

958f34f

NARUDESIGNS mentioned this pull request Mar 15, 2022

[Planning] Refine the Public Lab Rich Editor #760

Open

31 tasks

Merge branch 'main' into refine-cover-image-section

6ca5e61

jywarren merged commit 1eb788a into main Mar 15, 2022

refined mainImage section to account for responsiveness fixes #842 #843

refined mainImage section to account for responsiveness fixes #842 #843

Uh oh!

Conversation

NARUDESIGNS commented Feb 22, 2022

Uh oh!

gitpod-io bot commented Feb 22, 2022

Uh oh!

TildaDares commented Feb 22, 2022

Uh oh!

NARUDESIGNS commented Feb 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TildaDares commented Feb 22, 2022

Uh oh!

TildaDares commented Feb 22, 2022

Uh oh!

NARUDESIGNS commented Feb 22, 2022

Uh oh!

TildaDares commented Feb 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jywarren commented Feb 25, 2022

Uh oh!

NARUDESIGNS commented Feb 25, 2022

Uh oh!

jywarren commented Mar 1, 2022

Uh oh!

NARUDESIGNS commented Mar 7, 2022

Uh oh!

NARUDESIGNS commented Mar 7, 2022

Uh oh!

jywarren commented Mar 9, 2022

Uh oh!

jywarren commented Mar 9, 2022

Uh oh!

NARUDESIGNS commented Mar 9, 2022

Uh oh!

NARUDESIGNS commented Mar 10, 2022

Uh oh!

TildaDares commented Mar 10, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NARUDESIGNS commented Mar 10, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TildaDares commented Mar 10, 2022

Uh oh!

NARUDESIGNS commented Mar 14, 2022

Uh oh!

TildaDares Mar 14, 2022

Choose a reason for hiding this comment

Uh oh!

NARUDESIGNS Mar 14, 2022

Choose a reason for hiding this comment

Uh oh!

NARUDESIGNS Mar 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TildaDares Mar 14, 2022

Choose a reason for hiding this comment

Uh oh!

NARUDESIGNS Mar 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TildaDares Mar 14, 2022

Choose a reason for hiding this comment

Uh oh!

NARUDESIGNS Mar 14, 2022

Choose a reason for hiding this comment

Uh oh!

jywarren Mar 15, 2022

Choose a reason for hiding this comment

Uh oh!

NARUDESIGNS commented Mar 14, 2022

Uh oh!

jywarren commented Mar 15, 2022

Uh oh!

NARUDESIGNS commented Feb 22, 2022 •

edited

Loading

TildaDares commented Feb 22, 2022 •

edited

Loading

TildaDares commented Mar 10, 2022 •

edited

Loading

NARUDESIGNS commented Mar 10, 2022 •

edited

Loading

NARUDESIGNS Mar 14, 2022 •

edited

Loading

NARUDESIGNS Mar 14, 2022 •

edited

Loading