Problem/Motivation

We can improve handling of views exposed forms and entity browser tabs.
Views exposed forms are a bit of the mess when there is a lot of them.
Entity browser tabs should use Bootstrap nav-tabs CSS classes.

Proposed resolution

Add flex layout CSS rules for views exposed forms.
Add nav-tabs CSS classes for entity browser tabs.

CommentFileSizeAuthor
#11 views-exp-filter-and-entity-browser-tabs-improvements-2998225-11.patch8.46 KBpivica
#11 interdiff-2998225-10-11.txt2.54 KBpivica
#10 interdiff-2998225-9-10.txt1.33 KBpivica
#10 views-exp-filter-and-entity-browser-tabs-improvements-2998225-10.patch7.65 KBpivica
#9 interdiff-2998225-8-9.txt4.59 KBpivica
#9 views-exp-filter-and-entity-browser-tabs-improvements-2998225-9.patch7.5 KBpivica
#8 views-exp-filter-and-entity-browser-tabs-improvements-2998225-8.patch6.28 KBpivica
#8 interdiff-2998225-5-8.txt1 KBpivica
#5 views-exp-filter-and-entity-browser-tabs-improvements-2998225-5.patch6.41 KBsasanikolic
#3 views-exp-filter-and-entity-browser-tabs-improvements-2998225-3.patch8.8 KBpivica
#2 views-exp-filter-and-entity-browser-tabs-improvements-2998225-2.patch8.8 KBpivica

Comments

pivica created an issue. See original summary.

pivica’s picture

pivica commented
StatusFileSize
new views-exp-filter-and-entity-browser-tabs-improvements-2998225-2.patch8.8 KB

Here is a first patch. Also added 'views__pager' helper CSS class to mini pager so you can add CSS layout rules easer to it.

pivica’s picture

pivica commented
StatusFileSize
new views-exp-filter-and-entity-browser-tabs-improvements-2998225-3.patch8.8 KB

Updated patch against latest dev.

pivica’s picture

pivica commented
Issue tags: +next-release-planned
sasanikolic’s picture

sasanikolic commented
StatusFileSize
new views-exp-filter-and-entity-browser-tabs-improvements-2998225-5.patch6.41 KB

Here is the patch against latest dev.

sasanikolic’s picture

sasanikolic commented
Status: Active » Needs review
pivica’s picture

pivica commented
Status: Needs review » Needs work 
  1. +++ b/themes/bs_bootstrap/js/entity-browser.tabs.js
@@ -0,0 +1,46 @@
+ * Navigation bar improvements and tweaks.
+ *
+ * The biggest addition is support for 3 levels of depth for small screens.

    Comments need fixing:

    "Use Bootstrap tabs for EB tabs". 

  2. +++ b/themes/bs_bootstrap/js/entity-browser.tabs.js
@@ -0,0 +1,46 @@
+})(jQuery, Drupal);

    Missing new line. 

  3. +++ b/themes/bs_bootstrap/templates/views/views-exposed-form.html.twig
@@ -0,0 +1,23 @@
+</div>

    Missing new line.

pivica’s picture

pivica commented
Status: Needs work » Reviewed & tested by the community
StatusFileSize
new interdiff-2998225-5-8.txt1 KB
new views-exp-filter-and-entity-browser-tabs-improvements-2998225-8.patch6.28 KB

Here is a new patch based on the latest feedback. I think this is good to go now.

pivica’s picture

pivica commented
Status: Reviewed & tested by the community » Needs review
StatusFileSize
new views-exp-filter-and-entity-browser-tabs-improvements-2998225-9.patch7.5 KB
new interdiff-2998225-8-9.txt4.59 KB

Noticed various problems with datetime field. That is improved. Also increased horizontal gap in inline forms and refactored/improved CSS. Removed new div wrapper and form-inline-group CSS class is now added directly to the form element.

pivica’s picture

pivica commented
StatusFileSize
new views-exp-filter-and-entity-browser-tabs-improvements-2998225-10.patch7.65 KB
new interdiff-2998225-9-10.txt1.33 KB

Added form-item class to datetime-wrapper and apply margin bottom reset for datetime for all screens.

pivica’s picture

pivica commented
StatusFileSize
new interdiff-2998225-10-11.txt2.54 KB
new views-exp-filter-and-entity-browser-tabs-improvements-2998225-11.patch8.46 KB

Added $form-inline-group-gutter SASS variable. Actions should use the same gutter value.

pivica’s picture

pivica commented
Issue tags: -next-release-planned +next-release

  • pivica committed 5bbfc98 on 8.x-1.x 
    Issue #2998225 by pivica, sasanikolic: Visually improve views exposed...
pivica’s picture

pivica commented

Committed.

pivica’s picture

pivica commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.