Upgrade to Bootstrap 4 #3937
Upgrade to Bootstrap 4 #3937
Conversation
ghost
assigned 
Generated by 🚫 Danger |
|
@edieblu take a look - @Souravirus is working on a Bootstrap 4 upgrade :-) |
|
Not sure why Travis is failing. We are seeing some intermittent issues with Dangerbot in #3935 that we are looking to resolve, in the meantime we can restart travis from time to time 👍 |
|
OH! haha - this is actually a JS failure! |
|
Yeah right @jywarren |
|
Hi @jywarren, can you help me with the installation of bootstrap v4. I have tried updating the bootstrap package in yarn but it seems that bootstrap 4 is not working with the html elements. Thank you!! |
|
Ah, what exactly are the errors? Perhaps @ryzokuken has some thoughts to
contribute? Thanks!!
…On Sun, Nov 11, 2018 at 7:32 AM Sourav Sahoo ***@***.***> wrote:
Hi @jywarren <https://github.com/jywarren>, can you help me with the
installation of bootstrap v4. I have tried updating the bootstrap package
in yarn but it seems that bootstrap 4 is not working with the html
elements. Thank you!!
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#3937 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AABfJ5c82fjvtGsOGTBQJUiWj0HvEtCzks5uuBi0gaJpZM4YXkmS>
.
|
|
The thing is that I am writing bootstrap 4 classes but it is having no effect on the HTML elements. It is appearing as there is no bootstrap installed. |
|
I think its working now. Thank you!! |
|
Hi @Souravirus nice to meet you. I'm working on a welcome landing page that is using Bootstrap 4, so really looking forward to your upgrade! :) How is it going so far? |
|
Hi @edieblu nice to meet you. I am currently doing with the setup of bootstrap as the classes are not working well with the public lab. Just playing with Gemfile and yarn to set the correct configuration of bootstrap 4. |
|
This is awesome. Any screenshots to share? Keep up the good work - glad you got past that issue! |
|
Hi @jywarren currently I am busy with my tests and assignments in my college. So, I am not able to work on it. I will surely work on with it once I get time. I don't think bootstrap is working fine still. As per I have studied, I have to transfer the stylesheet assets from .css to .scss. I guess it will work fine then. Till then I can show you the screenshots of the current homepage and how it looks.
|
|
oh, i'm not sure, but I would be surprised if we need to convert all .css
to .scss... i would guess we need to change the classnames as shown in the
HTML in /app/views/ to match the new Bootstrap 4 classnames... you're going
down the checklist provided by @ryzokuken in the original issue?
…On Wed, Nov 14, 2018 at 10:31 AM Sourav Sahoo ***@***.***> wrote:
Hi @jywarren <https://github.com/jywarren> currently I am busy with my
tests and assignments in my college. So, I am not able to work on it. I
will surely work on with it once I get time. I don't think bootstrap is
working fine still. As per I have studied, I have to transfer the
stylesheet assets from .css to .scss. I guess it will work fine then. Till
then I can show you the screenshots of the current homepage and how it
looks.
[image: screenshot from 2018-11-14 20-59-02]
<https://user-images.githubusercontent.com/17192149/48492724-6982af00-e850-11e8-961c-80effb1e5e29.png>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#3937 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AABfJ1rHaLrt0LzNv7lH4rFNbkTTUoUWks5uvDdPgaJpZM4YXkmS>
.
|
|
Yeah, I tried to change the class names which according to bootstrap4 class names but there was no effect. |
|
hmm, can you push it to unstable so I can take a look at it?
…On Thu, Nov 15, 2018 at 1:26 PM Sourav Sahoo ***@***.***> wrote:
Yeah, I tried to change the class names which according to bootstrap4
class names but there was no effect.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#3937 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AABfJ3yWrxQooif5XyrkaDihUNpadJeqks5uvbG8gaJpZM4YXkmS>
.
|
Souravirus
force-pushed
the
bootstrap4
branch
from
781da33
to
7d95867
Compare
|
Hi @jywarren, I wanted you to show the changes in the unstable branch but there is an error coming with the yarn installation. Here is the error: So now, the thing we can do is to install bootstrap 4 through gems. What do you think about this? |
|
Hmm, i'd prefer not to, since it more clearly fits as a yarn
dependency... @icarito would you be able to help here?
I can try downloading it and trying it out too.
…On Thu, Nov 15, 2018 at 1:38 PM Sourav Sahoo ***@***.***> wrote:
Hi @jywarren <https://github.com/jywarren>, I wanted you to show the
changes in the unstable branch but there is an error coming with the yarn
installation. Here is the error:
Integrity check failed for "bootstrap" (computed integrity doesn't match
our records, got "sha1-ITs38caqGm3TiqX7/Mae+fuHCdo=")
Here is the link of the jenkins test:
https://jenkins.laboratoriopublico.org/job/Plots-Unstable/334/console
So now, the thing we can do is to install bootstrap 4 through gems. What
do you think about this?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#3937 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AABfJ05titnSTNl4XafA0TPboJu2_ZMRks5uvcKKgaJpZM4YXkmS>
.
|
|
Yeah thanks for your help @jywarren. |
|
Hi, i'm seeing a similar view to your screenshots above. I think the navbar structure will need to be reorganized in the new bootstrap 4 html structure. But I don't think anything is too far wrong here, besides the need to go through the checklist and upgrade all the css classes... I'd work on the navbar first as you've started to. I think there may be structural changes to the HTML as well to read through the Bootstrap docs and upgrade notes on. Once you complete the navbar, other areas will start to be easier too. See for example /wiki doesn't look too bad. |
|
Hi, it's really nice to see that you jumped in. So, I will try to point out where I have changed some of the classes but the bootstrap simply didn't respond. |
app/views/layouts/_header.html.erb
Outdated
| @@ -7,15 +7,12 @@ | |||
| <%= stylesheet_link_tag "I18n" %> | |||
| <% end %> | |||
|
|
|||
| <nav id="header" class="navbar navbar-inverse navbar-fixed-top"> | |||
| <div class="container"> | |||
| <nav id="header" class="navbar navbar-expand-sm navbar-inverse bg-inverse"> | |||
There was a problem hiding this comment.
Here, navbar-expand-sm should have expanded the navbar desktop view. But the navbar remained collapsed.
There was a problem hiding this comment.
Looking... i see Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. -- do we need that plugin added?
There was a problem hiding this comment.
yes maybe, it also says .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
There was a problem hiding this comment.
is popper also needed? not sure for what... https://getbootstrap.com/docs/4.1/getting-started/introduction/#js
There was a problem hiding this comment.
https://getbootstrap.com/docs/4.1/components/collapse/#how-it-works but i can't see where the plugin is included...
There was a problem hiding this comment.
hmm but this says it's all compiled in: https://getbootstrap.com/docs/4.1/getting-started/javascript/#individual-or-compiled
There was a problem hiding this comment.
GOT IT!
https://github.com/publiclab/plots2/blob/master/app/assets/stylesheets/style.css#L116-L154
Overrides over the years as we've tried to customize and tweak. Just be sure we respect the behaviors shown here, or something equivalent! One complaint with the previous navbar was that it was too eager to hide things as the screen got narrower. This gif shows exactly how it was solved; hopefully the new Bootstrap just makes this much easier!!
| </button> | ||
| </div> | ||
| <a class="navbar-brand" id="brand" href="<%= root_path %>">Public Lab</a> | ||
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-navbar-collapse"> |
There was a problem hiding this comment.
This is the button which should have disappeared in large screens, but it didn't.
|
I have kind of limited time today unfortunately -- have you tried feeding the navbar code through: http://upgrade-bootstrap.bootply.com as mentioned in #1716 Also have you checked in the dev console if the styles are actually being applied? I'm reading carefully here: https://getbootstrap.com/docs/4.1/components/navbar/ and here: http://getbootstrap.com/docs/4.0/migration/#navbar |
|
Hi @jywarren, I am currently seeing the navbar changes caused by the style.css. Maybe it makes the navbar looks good. Thanks for your investigation into this. |
|
Hi @jywarren, I think that bootstrap is not reaching to the elements in views. I tried to install bootstrap as is described in https://github.com/rails/webpacker and https://gorails.com/forum/how-do-i-install-bootstrap-v4-via-yarn. But since in our repository yarn install packages in |
|
I tried many things but the navbar is not changing in any way I dont know why. Please take a look on it. |
|
Feeling good here @Souravirus? Shall I click MERGE? |
|
Ok just one thing when should we correct the carousel thing as you told to dump that from the production. |
|
Yes, i'll share a gist right now. We'll have time before it goes to production. Otherwise shall I merge? |
|
Yeah its fine to merge. EXCITED!! |
|
THATS IT!!!!! 🙌🙌🙌🙌 ⚡️⚡️⚡️⚡️ |
|
i'tll build to stable now... |
|
if u want to share a new version of the feature code with me i can put it up on stable for testing. |
|
i mean the carousel |
|
Ok, I will share the updated code of the carousel in a gist in some time. |
* Some changes in homepage related to bootstrap 4 * Removed the comments * changes in _header.html.erb and style.css * Removed the space on the top of the navbar * Changed bootstrap version * Changed the dropdowns on left side according to bootstrap 4 * Changes in navbar bootstrap for large sccreen * Added spacing before public lab label in large screens * Made the dropdowns look more appropriate in large and medium screens * Added padding to body tag * Corrected the btn-default class of social icons buttons * Corrected the positioning of the social icons in sign up page * Fixed the login and signup popups in the home screen * Corrected the notes in the home page * Modified some class * Changes in dashboard * Activity in dashboard sorted * Sidebar sorted * Some changes due to the rebase * Some changes in wiki.html of dashboard * Some modifications in layouts stylesheets which was missed * Legacy editor sorted * fixed the rich editor for asking questions * Fixed the legacy question form * Fixed the header of the wiki page * Modifications in wiki show page * Modified the comment editor accordingly * Changes in wiki editor * Changed the sizing style of show.html of talk * Modified the wiki revision accordingly * Modified the well to card in the editors * Some changes after rebasing * Some changes with tagging editor * Some changes in tag editor * modified some features in map * made the maps modal look good * Some modifications * Some changes in wiki sidebar * Some changes in questions page * Some changes in questions page * Corrected tag index page * Fixed the tag page * Corrected the methods page * modified the users page * Some changes due to rebase * Some important changes after rebase * Some changes in sidebar * some changes in views of subscription page * Changed the subscribe button * Upgraded the bootstrap version to 4.1.0 * Some changes in yarn * Some changes in package.json * Added will_paginate_4 in Gemfile * Removed the rails errors related to will_paginate bootstrap-4 * Some minor changes with the home page * Added typeahead.js package to the javascript assets * Corrected all the bootstrap classes in admin folder * Corrected the bootstrap class in comment and dashboard folder * Corrected bootstrap in editor folder * Corrected the bootstrap in features, grids and home folder * Corrected the bootstrap in notes folder * Changed the bootstrap in questions folder and some mistakes related to img-rounded corrected * Modified the bootstrap class in search class * Corrected all the bootstrap class in sidebar and stats * Initially completed correcting all the bootstrap classes * Auto-complete worked * Added missing </div> in dashboard.html * Some views covered * Some missed views covered * Changed some views at sidebar/author.html.erb * Some minor changes in header layout * Prevented navbar from folding * Some correction with the min-width of the About us link * Corrected the tags being shown as plain text * Corrected another instance of badge default * Changes in cross button of the badge * some changes in rich editor * Corrected the notes page where there were some redundancies * Corrected the tests * Added some space after the search bar in the navbar * semver patch * Corrected the signup page * Added spacing between or and login in sign up page * Smoothened the side dropdown in dashboard * Corrected the subscribe button * Made the creation of tag possible * Corrected the weirdness in comment form * Made the map modal larger * Added caret-down button in the like button group * Corrected the nav-tabs in questions page * Alligned the dropdowns to the right * Corrected the well in comment edit section * Removed the emojis from going down in comments * Added the eye button to the password field in login modal * Adding the eye button to password field * corrected tests related to search button
* Some changes in homepage related to bootstrap 4 * Removed the comments * changes in _header.html.erb and style.css * Removed the space on the top of the navbar * Changed bootstrap version * Changed the dropdowns on left side according to bootstrap 4 * Changes in navbar bootstrap for large sccreen * Added spacing before public lab label in large screens * Made the dropdowns look more appropriate in large and medium screens * Added padding to body tag * Corrected the btn-default class of social icons buttons * Corrected the positioning of the social icons in sign up page * Fixed the login and signup popups in the home screen * Corrected the notes in the home page * Modified some class * Changes in dashboard * Activity in dashboard sorted * Sidebar sorted * Some changes due to the rebase * Some changes in wiki.html of dashboard * Some modifications in layouts stylesheets which was missed * Legacy editor sorted * fixed the rich editor for asking questions * Fixed the legacy question form * Fixed the header of the wiki page * Modifications in wiki show page * Modified the comment editor accordingly * Changes in wiki editor * Changed the sizing style of show.html of talk * Modified the wiki revision accordingly * Modified the well to card in the editors * Some changes after rebasing * Some changes with tagging editor * Some changes in tag editor * modified some features in map * made the maps modal look good * Some modifications * Some changes in wiki sidebar * Some changes in questions page * Some changes in questions page * Corrected tag index page * Fixed the tag page * Corrected the methods page * modified the users page * Some changes due to rebase * Some important changes after rebase * Some changes in sidebar * some changes in views of subscription page * Changed the subscribe button * Upgraded the bootstrap version to 4.1.0 * Some changes in yarn * Some changes in package.json * Added will_paginate_4 in Gemfile * Removed the rails errors related to will_paginate bootstrap-4 * Some minor changes with the home page * Added typeahead.js package to the javascript assets * Corrected all the bootstrap classes in admin folder * Corrected the bootstrap class in comment and dashboard folder * Corrected bootstrap in editor folder * Corrected the bootstrap in features, grids and home folder * Corrected the bootstrap in notes folder * Changed the bootstrap in questions folder and some mistakes related to img-rounded corrected * Modified the bootstrap class in search class * Corrected all the bootstrap class in sidebar and stats * Initially completed correcting all the bootstrap classes * Auto-complete worked * Added missing </div> in dashboard.html * Some views covered * Some missed views covered * Changed some views at sidebar/author.html.erb * Some minor changes in header layout * Prevented navbar from folding * Some correction with the min-width of the About us link * Corrected the tags being shown as plain text * Corrected another instance of badge default * Changes in cross button of the badge * some changes in rich editor * Corrected the notes page where there were some redundancies * Corrected the tests * Added some space after the search bar in the navbar * semver patch * Corrected the signup page * Added spacing between or and login in sign up page * Smoothened the side dropdown in dashboard * Corrected the subscribe button * Made the creation of tag possible * Corrected the weirdness in comment form * Made the map modal larger * Added caret-down button in the like button group * Corrected the nav-tabs in questions page * Alligned the dropdowns to the right * Corrected the well in comment edit section * Removed the emojis from going down in comments * Added the eye button to the password field in login modal * Adding the eye button to password field * corrected tests related to search button
Fixes #1716
Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!
rake test@publiclab/reviewersfor help, in a comment belowIf tests do fail, click on the red
Xto learn why by reading the logs.Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software
Thanks!