Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Collect and solve Bootstrap 4 follow-up fixes #5612

Closed
jywarren opened this issue Apr 24, 2019 · 58 comments · Fixed by #5613, #5661, #5697, #5699 or #5704
Closed

Collect and solve Bootstrap 4 follow-up fixes #5612

jywarren opened this issue Apr 24, 2019 · 58 comments · Fixed by #5613, #5661, #5697, #5699 or #5704
Labels
break-me-up break up for cleaner code separation, discrete tests, and, easier and iterative collaboration bug the issue is regarding one of our programs which faces problems when a certain task is executed Epic help wanted requires help by anyone willing to contribute

Comments

@jywarren
Copy link
Member

jywarren commented Apr 24, 2019

Hi, we have finally upgraded to Bootstrap4 in #3937. Thanks @Souravirus for your awesome work 🎉 💯

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 🔄

We also want your help with the issues reported below so sit back with your 🎧 💻 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 🙌 !!!


image

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

@jywarren jywarren added bug the issue is regarding one of our programs which faces problems when a certain task is executed help wanted requires help by anyone willing to contribute break-me-up break up for cleaner code separation, discrete tests, and, easier and iterative collaboration labels Apr 24, 2019
@Souravirus
Copy link
Member

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

@Souravirus
Copy link
Member

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

@jywarren
Copy link
Member Author

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

@gautamig54
Copy link
Contributor

I would love to contribute in this issue! Thanks!

@grvsachdeva
Copy link
Member

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

@grvsachdeva
Copy link
Member

grvsachdeva commented Apr 24, 2019

Issues reported by @stefannibrasil

oh, okay ✌️

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 Reporting or contributing for the Bootstrap 4 upgradation #5182 (comment) 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;
  • 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?)
  • The button group here is not aligned https://unstable.publiclab.org/wiki/plots-staff
  • 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
  • Just the 'logout from all devices' option is showing up, not sure if this is intentional;

I think that was all, good job! 🎉


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

@grvsachdeva
Copy link
Member

I would love to contribute in this issue! Thanks!

Most welcome @gautamig54 !!

@Souravirus
Copy link
Member

Souravirus commented Apr 25, 2019

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

@Souravirus
Copy link
Member

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

@jywarren
Copy link
Member Author

jywarren commented Apr 26, 2019 via email

@Souravirus
Copy link
Member

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

@Souravirus Souravirus reopened this May 2, 2019
@jywarren
Copy link
Member Author

jywarren commented May 2, 2019

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!

@jywarren

This comment has been minimized.

@jywarren
Copy link
Member Author

jywarren commented May 2, 2019

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

@Souravirus
Copy link
Member

Souravirus commented May 2, 2019

Hi @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.

@jywarren
Copy link
Member Author

jywarren commented May 3, 2019 via email

@Souravirus
Copy link
Member

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

@Souravirus
Copy link
Member

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?

@jywarren
Copy link
Member Author

jywarren commented May 5, 2019 via email

@Souravirus
Copy link
Member

Yeah I can try this fix. Thanks!!

@jywarren
Copy link
Member Author

jywarren commented May 5, 2019 via email

@Souravirus
Copy link
Member

image
Ok buttons fixed

@jywarren
Copy link
Member Author

jywarren commented May 9, 2019 via email

@jywarren
Copy link
Member Author

jywarren commented May 9, 2019 via email

@jywarren
Copy link
Member Author

jywarren commented May 17, 2019

just adding a few more here:

  • the upper-right profile picture used to be circular
  • 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
  • the editing tools button groups seem to be a little too close to each other

image

Also some padding issues on these pages:

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

image

Tiny stuff, but makes a difference!

@jywarren
Copy link
Member Author

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

image

@jywarren
Copy link
Member Author

Fixed the footer! It was in a feature!

@jywarren
Copy link
Member Author

@jywarren
Copy link
Member Author

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

@CleverFool77
Copy link
Member

CleverFool77 commented May 21, 2019

Referencing the Issue #5741 .

  • updating forms as per bootstrap4

@CleverFool77
Copy link
Member

CleverFool77 commented May 21, 2019

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

@jywarren
Copy link
Member Author

jywarren commented May 21, 2019 via email

@steviepubliclab
Copy link
Contributor

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?

@Souravirus
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment