Plots2: Collect and solve Bootstrap 4 follow-up fixes

Created on 24 Apr 2019  ·  58Comments  ·  Source: publiclab/plots2

Hi, we have finally upgraded to Bootstrap4 in #3937. Thanks @Souravirus for your awesome work :tada: :100:

Let's team up to look at the newly updated Bootstrap 4 UI https://stable.publiclab.org and compare to https://publiclab.org -- and note issues below.

Please report the issue below by leaving a comment and don't open a separate issue so that we can keep everyone synced :arrows_counterclockwise:

We also want your help with the issues reported below so sit back with your :headphones: :computer: and raise a PR. Make sure to comment below if you're working on a specific issue so that no one else work on the same.

Thanks everyone :raised_hands: !!!


image

^ Looks like the posting form main image upload button is oddly shaped!

Epic break-me-up bug help wanted

Most helpful comment

Awesome Work
It is EPIC

All 58 comments

Hi @jywarren, here is the updated gist for the updated carousel
https://gist.github.com/Souravirus/1f70b1ec63da1adaa686ccff7186ab2f

The main image button is appearing fine in firefox.
image
There might be some differences with the browser. Seeing this.

OK thanks @Souravirus and thanks @gauravano, i thought we should start a new one 🙌

I would love to contribute in this issue! Thanks!

@jywarren just edited the issue :sweat_smile:. Also, adding @stefannibrasil and @sashadev-sky's observations from #5182. Thanks!

Issues reported by @stefannibrasil

oh, okay :v:

The front page is looking weird. Maybe someone pushed other commits again?
The carousel is not working and all of the static content (social media icons, questions button, etc.) are not showing.

Some spaces to be added:

  • [ ] between the nodes and the pagination buttons (front page);
  • [ ] after node types buttons on /search page;
  • [ ] between nodes results ( the read more button is attached to the other node's image);

General notes

  • [ ] Any misalignments seen in radio buttons or checkboxes can be fixed using the classes in btsp_checkbox_override.css.scss. Note these misalignments were there before the update and the update has not fixed them --- by @sashadev-sky. Refer https://github.com/publiclab/plots2/issues/5182#issuecomment-481104366 for details
  • [ ] The footer is different when you navigate between the pages. For example, in the Dashboard, I see a different footer than the one being shown at the front page;
  • [x] Also in the Dashboard, when I clicked on 'Share your work', the dropdown is floating to the right, not beneath it;
  • [ ] When adding a question, in the button group, the Markdown is not at the same line as the others;
  • [ ] In the highlighted note that appears in the Dashboard, the text 'Node title by user1 from Public Lab Blog` is not aligned;
  • [ ] The 'enter tag' placeholder is not possible to read here, for example, https://unstable.publiclab.org/getting-started (maybe removing the caret solves this, since it's already visible that it's a button?)
  • [x] The button group here is not aligned https://unstable.publiclab.org/wiki/plots-staff
  • [x] Align the button hat the /subscriptions page;
  • [ ] I think these buttons for Questions and Research notes are too big https://unstable.publiclab.org/wiki/organizers
  • [x] Just the 'logout from all devices' option is showing up, not sure if this is intentional;

I think that was all, good job! :tada:


Front page means https://stable.publiclab.org/home :sweat_smile:

I would love to contribute in this issue! Thanks!

Most welcome @gautamig54 !!

@jywarren The issue you reported with the input button is happening in google chrome
image

Hi @jywarren that input button problem is now solved. Here is the screenshot of it:
image
I am pushing the fixes in #5613.

Awesome, thanks!!!!

On Fri, Apr 26, 2019, 2:35 PM Sourav Sahoo notifications@github.com wrote:

Hi @jywarren https://github.com/jywarren that input button problem is
now solved. Here is the screenshot of it:
[image: image]
https://user-images.githubusercontent.com/17192149/56828907-fad66280-687f-11e9-93f6-e3b5897c4f6c.png
I am pushing the fixes in #5613
https://github.com/publiclab/plots2/pull/5613.


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-487158505,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6J7X7CBA53E2KYVKIOTPSNDNPANCNFSM4HIH7DFA
.

Reopening this issue as some of the bugs were not solved.

Thanks, @Souravirus -- i'm trying to paste in your gist (https://gist.github.com/Souravirus/1f70b1ec63da1adaa686ccff7186ab2f) for the front-page carousel, and the Features system is a little strange looking; it also errors when I try to make a new feature:

image

I know you're in exams, so if anyone else is able to help out with this, that'd be great!

Looks like there are pretty minimal changes to the form:
https://github.com/publiclab/plots2/commit/7744d91e9bf03544da2f38e7e66056b6f20162e0#diff-d218cc0d572a2c87e465b2f68f3a20f8R5

I'll open a PR for a functional test for this!

Update: hmm, it already has a functional test. I'll try posting a simpler text?

https://github.com/publiclab/plots2/blob/66aa809253e30781a1bdc8a974d67b0a47411687/test/functional/features_controller_test.rb#L76

Update: looks like it's the post-to-save on create in features controller. Looking to reproduce in Codenvy, i'll open a new issue and stop addressing it here.

(Update: fixed!)

(moved to its own issue as this affects production site currently)

Hi @jywarren, I see the carousel is fixed but there are some other problems there too like:

  • [x] No space after the carousel and the social icons
  • [x] Carousel is not changing
  • [x] There is a newline after the problem, collaboration, and the solution sections.

Yes, I gave it a try, but didn't get it all the way! Here's the code:
https://gist.github.com/jywarren/3128766b5739555e6096aa12b27ab754

And i forget if you're an admin on unstable, but I put it here:
https://stable.publiclab.org/features/14908/edit?t=1556900971

I'll try again soon, we'll have to resolve this before publishing! Thanks!

On Thu, May 2, 2019 at 4:29 PM Sourav Sahoo notifications@github.com
wrote:

Hi @jywarren https://github.com/jywarren, I see the carousel is fixed
but there are some other problems there too like:

  • No space after the carousel and the social icons
  • Carousel is not changing
  • There is a newline after the problem, collaboration, and the
    solution sections.


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-488790466,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6J5OZVH4KGKAN5UGA3DPTM2ONANCNFSM4HIH7DFA
.

I don't think I am admin in unstable as I can't see the link.

Hi @jywarren, since the previous carousel was powered by slick right? Then why didn't it worked with Bootstrap 4. What do you think about this?

You know, i think if necessary we can freeze the carousel, and just show an
image as a short term fix. Just saying if that's easier! I thought the
block at this point was the rest of the page lower down, however. I will
take a look tomorrow!! Thank you!!

On Sun, May 5, 2019, 4:17 PM Sourav Sahoo notifications@github.com wrote:

Hi @jywarren https://github.com/jywarren, since the previous carousel
was powered by slick right? Then why didn't it worked with Bootstrap 4.
What do you think about this?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-489459810,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6JZ3DI37LU5LLIFC4R3PT46FHANCNFSM4HIH7DFA
.

Yeah I can try this fix. Thanks!!

awesome!!!

On Sun, May 5, 2019 at 4:34 PM Sourav Sahoo notifications@github.com
wrote:

Yeah I can try this fix. Thanks!!


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-489461145,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6J7E3DLQTPAYONPDMKLPT5AFFANCNFSM4HIH7DFA
.

@jywarren I have improved the homepage and kept only one image instead of the carousel.
Here is the gist https://gist.github.com/Souravirus/7bb63f9188f955d85e856ea14e47caff
Thank you!!

It looks great, Sourav, thanks. I may mess with the white text a bit but it's already not perfect...

https://stable.publiclab.org/home

I notice that there are now only 2 columns where we used to show 4;

Screen Shot 2019-05-06 at 10 18 52 AM

do we need to change a style in views/notes/_notes.html.erb to make it 4 column?

Hmm this seems fishy, let me see it.

Hi @jywarren, actually there was a mistake by me while doing the update. I have changed col-md-3 col-lg-6 which has been corrected to col-lg-3. So, now everything will appear fine.
Thank you!!

  • [x] Found a couple small ones here; one is a feature we will probably get rid of, but it uses the tag tabbed:notes to display tabs; compare this page (https://stable.publiclab.org/wisconsin) to the one on PublicLab.org:

image

  • [x] The other is small; i see this in a few places, but the button groups are occasionally showing discontinuities, where a left-end-button is stuck in the middle of a group:

image

image
Here is the error I am getting while logging in to localhost. So, this is the error @jywarren
The error is somewhere in the latest commit.

hmm, uh oh! Um, i just merged a PR that passed tests addressing this. Did
something go wrong with the merge?

On Tue, May 7, 2019 at 4:05 PM Sourav Sahoo notifications@github.com
wrote:

[image: image]
https://user-images.githubusercontent.com/17192149/57329335-34855400-7131-11e9-9382-ffc7f1e4542a.png
Here is the error I am getting while logging in to localhost. So, this is
the error @jywarren https://github.com/jywarren


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-490235028,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6JZXTLKYT4FCYBCV7TTPUHOEVANCNFSM4HIH7DFA
.

Huh... it should be available, no?
https://github.com/publiclab/plots2/search?q=logged_in_as

On Tue, May 7, 2019 at 4:05 PM Sourav Sahoo notifications@github.com
wrote:

[image: image]
https://user-images.githubusercontent.com/17192149/57329335-34855400-7131-11e9-9382-ffc7f1e4542a.png
Here is the error I am getting while logging in to localhost. So, this is
the error @jywarren https://github.com/jywarren


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-490235028,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6JZXTLKYT4FCYBCV7TTPUHOEVANCNFSM4HIH7DFA
.

https://github.com/publiclab/plots2/blob/d55c716621d8072d0ffcd51b46c6b2b240ce5f4d/app/helpers/application_helper.rb#L3

On Tue, May 7, 2019 at 4:30 PM Jeffrey Warren jeff@unterbahn.com wrote:

Huh... it should be available, no?
https://github.com/publiclab/plots2/search?q=logged_in_as

On Tue, May 7, 2019 at 4:05 PM Sourav Sahoo notifications@github.com
wrote:

[image: image]
https://user-images.githubusercontent.com/17192149/57329335-34855400-7131-11e9-9382-ffc7f1e4542a.png
Here is the error I am getting while logging in to localhost. So, this is
the error @jywarren https://github.com/jywarren


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-490235028,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6JZXTLKYT4FCYBCV7TTPUHOEVANCNFSM4HIH7DFA
.

Ack, helpers are available to views but not by default to controllers. We
will need to change where we do this from controllers...

On Tue, May 7, 2019 at 4:30 PM Jeffrey Warren jeff@unterbahn.com wrote:

>

https://github.com/publiclab/plots2/blob/d55c716621d8072d0ffcd51b46c6b2b240ce5f4d/app/helpers/application_helper.rb#L3

On Tue, May 7, 2019 at 4:30 PM Jeffrey Warren jeff@unterbahn.com wrote:

Huh... it should be available, no?
https://github.com/publiclab/plots2/search?q=logged_in_as

On Tue, May 7, 2019 at 4:05 PM Sourav Sahoo notifications@github.com
wrote:

[image: image]
https://user-images.githubusercontent.com/17192149/57329335-34855400-7131-11e9-9382-ffc7f1e4542a.png
Here is the error I am getting while logging in to localhost. So, this
is the error @jywarren https://github.com/jywarren


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-490235028,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6JZXTLKYT4FCYBCV7TTPUHOEVANCNFSM4HIH7DFA
.

OK i'm going to copy this method into application_controller for now, just
to solve this.

On Tue, May 7, 2019 at 4:31 PM Jeffrey Warren jeff@unterbahn.com wrote:

Ack, helpers are available to views but not by default to controllers. We
will need to change where we do this from controllers...

On Tue, May 7, 2019 at 4:30 PM Jeffrey Warren jeff@unterbahn.com wrote:

>

https://github.com/publiclab/plots2/blob/d55c716621d8072d0ffcd51b46c6b2b240ce5f4d/app/helpers/application_helper.rb#L3

On Tue, May 7, 2019 at 4:30 PM Jeffrey Warren jeff@unterbahn.com wrote:

Huh... it should be available, no?
https://github.com/publiclab/plots2/search?q=logged_in_as

On Tue, May 7, 2019 at 4:05 PM Sourav Sahoo notifications@github.com
wrote:

[image: image]
https://user-images.githubusercontent.com/17192149/57329335-34855400-7131-11e9-9382-ffc7f1e4542a.png
Here is the error I am getting while logging in to localhost. So, this
is the error @jywarren https://github.com/jywarren


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-490235028,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6JZXTLKYT4FCYBCV7TTPUHOEVANCNFSM4HIH7DFA
.

but i want to catch this in a test -- and know why it didn't work!
https://github.com/publiclab/plots2/pull/5677

On Tue, May 7, 2019 at 4:39 PM Jeffrey Warren jeff@unterbahn.com wrote:

OK i'm going to copy this method into application_controller for now, just
to solve this.

On Tue, May 7, 2019 at 4:31 PM Jeffrey Warren jeff@unterbahn.com wrote:

Ack, helpers are available to views but not by default to controllers. We
will need to change where we do this from controllers...

On Tue, May 7, 2019 at 4:30 PM Jeffrey Warren jeff@unterbahn.com wrote:

>

https://github.com/publiclab/plots2/blob/d55c716621d8072d0ffcd51b46c6b2b240ce5f4d/app/helpers/application_helper.rb#L3

On Tue, May 7, 2019 at 4:30 PM Jeffrey Warren jeff@unterbahn.com
wrote:

Huh... it should be available, no?
https://github.com/publiclab/plots2/search?q=logged_in_as

On Tue, May 7, 2019 at 4:05 PM Sourav Sahoo notifications@github.com
wrote:

[image: image]
https://user-images.githubusercontent.com/17192149/57329335-34855400-7131-11e9-9382-ffc7f1e4542a.png
Here is the error I am getting while logging in to localhost. So, this
is the error @jywarren https://github.com/jywarren


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-490235028,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6JZXTLKYT4FCYBCV7TTPUHOEVANCNFSM4HIH7DFA
.

OK, fixed it! https://stable.publiclab.org/dashboard -- still not sure how this didn't get caught by tests... maybe it's because we run the tests with ApplicationHelper included? I'll try to write a system test for the dashboard!

OK, dashboard system test here: https://github.com/publiclab/plots2/pull/5682

  • [x] image
    @jywarren, In the homepage, these items are overlapping, can you please send me the homepage features again, I will correct them.
    And nice to hear that the dashboard is working fine.
    :smile:
  • [ ] Ah! Our signup spamaway quiz is a little funky!

image

And here's the front page! https://gist.github.com/jywarren/3128766b5739555e6096aa12b27ab754

Thanks, @Souravirus !!!

Lol i gave away the answers 🐷 🐻 🐰 ✍️

Hmm, I'm actually seeing some formatting issues for the whole signup form:

image

@IshaGupta18 @CleverFool77 I think you both have worked with this file, and may be familiar with it. Would either of you like to try refactoring it to work well in Bootstrap 4?

Awesome Work
It is EPIC

@jywarren, that button in the sidebar which discontinues is actually a dropdown, so, I cannot append it with other buttons. So, what should I do? I guess other buttons are working fine but this one discontinues.

hmm. in Bootstrap 3 there was an example for this scenario. What about
this? https://getbootstrap.com/docs/4.3/components/button-group/#nesting

On Thu, May 9, 2019 at 3:47 PM Sourav Sahoo notifications@github.com
wrote:

@jywarren https://github.com/jywarren, that button in the sidebar which
discontinues is actually a dropdown, so, I cannot append it with other
buttons. So, what should I do? I guess other buttons are working fine but
this one discontinues.


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-491040519,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6J6LIBOUQSSW25677KLPUR5TVANCNFSM4HIH7DFA
.

Ok checking it out.

Here is the homepage updated for small screens https://gist.github.com/Souravirus/7bb63f9188f955d85e856ea14e47caff

image
Ok buttons fixed

awesome! Added to stable, it works perfectly.

On Thu, May 9, 2019 at 4:04 PM Sourav Sahoo notifications@github.com
wrote:

Here is the homepage updated for small screens
https://gist.github.com/Souravirus/7bb63f9188f955d85e856ea14e47caff


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-491046033,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6J4FBYSBEW2PXPTIPJTPUR7TZANCNFSM4HIH7DFA
.

awesome!!!

On Thu, May 9, 2019 at 4:28 PM Sourav Sahoo notifications@github.com
wrote:

[image: image]
https://user-images.githubusercontent.com/17192149/57484448-aba02100-72c6-11e9-8acb-4aa44b6e5fda.png
Ok buttons fixed


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612#issuecomment-491053985,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6JYVWTISPHUXWEHHRMDPUSCOJANCNFSM4HIH7DFA
.

just adding a few more here:

  • [ ] the upper-right profile picture used to be circular
  • [x] the drag to upload lead wiki image zone used to be higher up, if there is not yet an image set - basically in line with the top of the textarea
  • [x] the editing tools button groups seem to be a little too close to each other

image

Also some padding issues on these pages:

  • [x] I think the "methods" cards need some bottom-margin when in mobile phone widths:

image

Tiny stuff, but makes a difference!

OK, and one more here -- the footer seems to be all in one column - we're almost there!

image

Fixed the footer! It was in a feature!

And another small but important one -- as the navbar gets narrower, we had it set up to bump items into the dropdown menu, but they aren't displaying properly now;

image

Referencing the Issue https://github.com/publiclab/plots2/issues/5741 .

  • [ ] updating forms as per bootstrap4

Hi everyone, I would like to solve some of the follow-up fixes for bootstrap4.
Thanks !!!

Hi, we'd love your help! Especially with the navbar, actually, as that
affects every page!

On Tue, May 21, 2019 at 7:52 AM Lekhika Dugtal notifications@github.com
wrote:

Hi everyone, I would like to some of the follow-up fixes for bootstrap4.
Thanks !!!


You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5612?email_source=notifications&email_token=AAAF6J7QFKKDWBONCODVABDPWPO57A5CNFSM4HIH7DFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV3U7TA#issuecomment-494358476,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6JZCCFMFL5Z2HKWXA6DPWPO57ANCNFSM4HIH7DFA
.

Hi all! thanks for all the work on this. Wow!!

One suggestion, I've been finding since the update that I'm reducing the zoom on my Public Lab windows to 75% so I can see enough on one page to make out what's going on. Anyone else experiencing this? Is there a way to decrease the font size?

Hi @CleverFool77 really nice work here. Keep it up!!

Was this page helpful?
0 / 5 - 0 ratings