Skip to content

Bootstrap4 migration

Sunil Mohan Adapa requested to merge sunilmohan/freedombox:bootstrap4-migration into master

This is continuation of the work done in !1407 (closed). Additional changes:

  • Rebase to latest code.
  • Fix a lot of incomplete changes.
  • Perform a lot of ignored migration steps.
  • Adopt Bootstrap 4 styling instead of just the code. This brings:
    • Bigger font: 16px instead of 15px
    • Many components such as tables, buttons etc are larger.
    • Use rem instead of px as the base unit.
    • New, simplified table styling
  • Other related styling changes

Issues:

  • It introduces one major regression that forms with errors don't get styled in red properly. This requires changes to django-bootstrap-form library. I will create a separate issue for it.
  • Some functional tests failed but none seem related to the changes made.

Tests:

  • Checked the style of each page while making/reviewing changes.
  • Ran functional tests.

I believe that overall it is in very good shape and we handle any issues that come up after merge.

Here are my notes while working on the issue:

  • DONE: Core
    • DONE: jQuery 3.x or higher is recommended.
    • DONE: Non-responsive usage is no longer supported.
    • DONE: Dropped glyphicons
    • DONE: Dropped panels
    • DONE: Dropped thumbnails
    • DONE: Dropped wells
    • DONE: Dropped Affix jQuery plugin
    • DONE: Dropped pager
    • DONE: Dropped .page-header
    • DONE: Dropped .dl-horizontal
    • DONE: All components were refactored
    • DONE: blockquote changed
    • DONE: List inline changed
    • DONE: Changed components:
      • DONE: List groups
      • DONE: Modal dialogs
      • DONE: Pagination
      • DONE: Breadcrumbs
      • DONE: Panels
      • DONE: Carousel
  • DONE: Utilities
    • DONE: .hidden utilities have changed
    • DONE: .hidden and .show have been removed
    • DONE: Display utilities are responsive
    • DONE: .visible-* clases are not recommended
    • DONE: .floats are now responsive
    • DONE: .pull-left and .pull-right are removed
    • DONE: .text-left etc. are now responsive
    • DONE: Dropped .center-block
  • FAIL: Forms
    • DONE: NONE: .form-control-label is removed.
    • DONE: Horizontal forms overhauled, form-horizontal is not available
    • DONE: Input groups structure changed
    • DONE: Custom form support added
    • DONE: NONE: .form-control-static renamed
    • DONE: NONE: input-lg and input-sm renamed
    • DONE: .control-label is no longer needed on labels
    • DONE: .form-group-* classes renamed
    • DONE: NONE: .radio-inline and .checkbox-inline dropped
    • DONE: STYLED: .help-block is replaced
    • FAIL: Replaced .has-error, .has-warning, .has-success classes
    • LATER: Help text needs ARIA attributes
    • LATER: .checkbox and .radio renamed
    • LATER: Form elements structure may have changed
  • DONE: Dropdowns
    • DONE: Dropdowns structure has changed
    • DONE: Dropdowns don't have arrows
    • DONE: Dropdowns can be built with divs or uls now
    • DONE: CHANGED: .divider renamed to .dropdown-divider
    • DONE: Dropdown items require .dropdown-item
    • DONE: Dropdown toggles no longer require
  • DONE: Reset
    • DONE: Switched from px to rem.
    • DONE: Font size increased from 14px to 16px.
    • DONE: Moved to box-sizing: border-box;
  • DONE: Navbar
    • DONE: Uses flexbox
    • DONE: Responsive behaviour can be changed with class
    • DONE: .navbar-default is now .navbar-light
    • DONE: Navbars require background declaration
    • DONE: .navbar-toggle is now .navbar-toggler
    • DONE: .navbar-form dropped
    • DONE: Navbars don't have margin bottom or border radius
  • DONE: Grid
    • DONE: Grid sizes are different. xs is smaller, sm is earlier xs, others are bumped.
    • DONE: xs has no infix.
    • DONE: Container widths have changed.
    • DONE: All .col-* classes have changed
    • DONE: Dropped push and pull modifier clases
  • DONE: Table
    • DONE: NONE: Nested tables styling changed
    • DONE: CHANGED: Tables can be responsive.
    • DONE: REMOVED: table-condensed changed to table-sm
    • DONE: NONE: .table.active is now .table-active etc.
  • DONE: Button
    • DONE: .btn-default renamed to .btn-secondary
    • DONE: .btn-xs dropped. .btn-sm is much smaller than before.
    • DONE: Stateful button dropped
    • DONE: Toggle buttons have changed
  • DONE: Labels and badges
    • DONE: .label is now .badge
    • DONE: Added .badge-pill
    • DONE: Badges no longer float in list groups
    • DONE: .badge-default is removed
  • DONE: Issues fixed
    • DONE: help-menu.html navigation needs to be updated
    • DONE: Don't change <h3> to <h4>
    • DONE: Remove all striped and bordered table styling
    • DONE: Nav dropdown incorrect at exactly 768px
    • DONE: Too much space between logo and "Home"
    • DONE: Menu collapse at incorrect size
    • DONE: Xs menu collapse is wrong
    • DONE: app-titles h3 should be of lower priority
    • DONE: Launch web client button text color is incorrect during installation.
    • DONE: Number of items per row in the system page
    • DONE: Home page underline expanded too much when collapsed
    • DONE: Notifications not expanding to the full container width
    • DONE: GNU/Linux in samba clients table is big
    • DONE: Check for all progress-bar-danger and replace with bg-danger
    • DONE: Review all existing badges, especially for notifications
    • DONE: App options menu not expanding
    • DONE: Fix browser console issues
    • DONE: Firewall show ports not expanding
    • DONE: Closes bugs related to drop down menu in small screens
    • DONE: No pointer cursor on the form message close button
    • DONE: Should navbar be inside a container?
    • DONE: button rows don't have proper top/bottom margins, perhaps button toolbar?
    • DONE: Networks connections section buttons too close
    • DONE: Bind button and warning are too close to each other
    • DONE: Snapshots manage buttons are attached to the table below
    • DONE: Remove raquos
    • DONE: #clients is a duplicate
    • DONE: Check for relevance of all older styling
    • DONE: Enable some applications message is too big
    • DONE: Existing backups collapsed by default
    • DONE: One line gap between notifications and main-header
    • DONE: Migrate JSXC page
    • DONE: 8 fail, unrelated: Run all functional tests
    • LATER: User menu getting cut off at smaller sizes, bootstrap 4 behavior
    • LATER: Actions in list group needs to be handled in a consistent way
    • LATER: Add power back into system page
    • LATER: Use btn-secondary instead of btn-default
    • LATER: pull-left and pull-right are being provided by ForkAwesome
    • LATER: Horizontal forms don't have "row" class

Merge request reports