Merge pull request #2220 from SchrodingersGat/flex-wrap

CSS updates
This commit is contained in:
Oliver 2021-11-01 09:41:37 +11:00 committed by GitHub
commit 5de85d893c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 82 additions and 129 deletions

View File

@ -295,8 +295,6 @@
vertical-align: middle;
margin: 1px;
padding: 2px;
background: #eee;
border: 1px solid #eee;
border-radius: 3px;
}
@ -308,7 +306,13 @@
transform: translate(0%, -25%);
}
.filter-list .close:hover {background: #bbb;}
.filter-list .close:hover {
background: #bbb;
}
.filter-list .form-control {
width: initial;
}
.filter-tag {
display: inline-block;
@ -316,8 +320,6 @@
zoom: 1;
padding-left: 3px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #aaa;
border-radius: 3px;
background: #eee;
@ -326,6 +328,12 @@
margin-right: 5px;
}
.filter-button {
padding: 2px;
padding-left: 4px;
padding-right: 4px;
}
.filter-input {
display: inline-block;
*display: inline;

View File

@ -160,9 +160,7 @@
<div class='panel-content'>
<div id='child-button-toolbar'>
<div class='button-toolbar container-fluid float-right'>
<div class='filter-list' id='filter-list-sub-build'>
<!-- Empty div for filters -->
</div>
{% include "filter_list.html" with id='sub-build' %}
</div>
</div>
<table class='table table-striped table-condensed' id='sub-build-table' data-toolbar='#child-button-toolbar'></table>
@ -171,7 +169,7 @@
<div class='panel panel-hidden' id='panel-allocate'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Allocate Stock to Build" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -210,9 +208,7 @@
<button id='allocate-selected-items' class='btn btn-success' title='{% trans "Allocate selected items" %}'>
<span class='fas fa-sign-in-alt'></span>
</button>
<div class='filter-list' id='filter-list-builditems'>
<!-- Empty div for table filters-->
</div>
{% include "filter_list.html" with id='builditems' %}
</div>
</div>
</div>
@ -227,7 +223,7 @@
<div class='panel panel-hidden' id='panel-outputs'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Incomplete Build Outputs" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -276,7 +272,7 @@
<div class='panel panel-hidden' id='panel-attachments'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Attachments" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>

View File

@ -45,9 +45,7 @@
<button class='btn btn-outline-secondary' type='button' id='view-list' title='{% trans "Display list view" %}'>
<span class='fas fa-th-list'></span>
</button>
<div class='filter-list' id='filter-list-build'>
<!-- An empty div in which the filter list will be constructed -->
</div>
{% include "filter_list.html" with id="build" %}
</div>
</div>
</div>

View File

@ -11,7 +11,7 @@
<div class='panel panel-hidden' id='panel-supplier-parts'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Supplier Parts" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -46,9 +46,7 @@
</ul>
</div>
</div>
<div class='filter-list' id='filter-list-supplier-part'>
<!-- Empty div (will be filled out with available BOM filters) -->
</div>
{% include "filter_list.html" with id="supplier-part" %}
</div>
</div>
{% endif %}
@ -60,7 +58,7 @@
<div class='panel panel-hidden' id='panel-manufacturer-parts'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Manufacturer Parts" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -95,9 +93,7 @@
</ul>
</div>
</div>
<div class='filter-list' id='filter-list-supplier-part'>
<!-- Empty div (will be filled out with available BOM filters) -->
</div>
{% include "filter_list.html" with id="supplier-part" %}
</div>
</div>
{% endif %}
@ -117,7 +113,7 @@
<div class='panel panel-hidden' id='panel-purchase-orders'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Purchase Orders" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -132,9 +128,7 @@
<div class='panel-content'>
<div id='po-button-bar'>
<div class='button-toolbar container-fluid' style='float: right;'>
<div class='filter-list' id='filter-list-purchaseorder'>
<!-- Empty div -->
</div>
{% include "filter_list.html" with id="purchaseorder" %}
</div>
</div>
@ -145,7 +139,7 @@
<div class='panel panel-hidden' id='panel-sales-orders'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Sales Orders" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -160,9 +154,7 @@
<div class='panel-content'>
<div id='so-button-bar'>
<div class='button-toolbar container-fluid' style='float: right;'>
<div class='filter-list' id='filter-list-salesorder'>
<!-- Empty div -->
</div>
{% include "filter_list.html" with id="salesorder" %}
</div>
</div>
@ -177,9 +169,7 @@
</div>
<div class='panel-content'>
<div id='assigned-stock-button-toolbar'>
<div class='filter-list' id='filter-list-stock'>
<!-- An empty div in which the filter list will be constructed -->
</div>
{% include "filter_list.html" with id="stock" %}
</div>
<table class='table table-striped table-condensed' id='assigned-stock-table' data-toolbar='#bassigned-stock-utton-toolbar'></table>

View File

@ -104,7 +104,7 @@ src="{% static 'img/blank_image.png' %}"
<div class='panel panel-hidden' id='panel-supplier-parts'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Suppliers" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -133,7 +133,7 @@ src="{% static 'img/blank_image.png' %}"
<div class='panel panel-hidden' id='panel-parameters'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Parameters" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>

View File

@ -143,7 +143,7 @@ src="{% static 'img/blank_image.png' %}"
<div class='panel panel-hidden' id='panel-purchase-orders'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Supplier Part Orders" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -167,7 +167,7 @@ src="{% static 'img/blank_image.png' %}"
<div class='panel panel-hidden' id='panel-pricing'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Pricing Information" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>

View File

@ -14,7 +14,7 @@
<div class='panel panel-hidden' id='panel-order-items'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Purchase Order Items" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -37,9 +37,7 @@
</div>
<div class='panel-content'>
<div id='order-toolbar-buttons' class='btn-group' style='float: right;'>
<div class='filter-list' id='filter-list-purchase-order-lines'>
<!-- An empty div in which the filter list will be constructed-->
</div>
{% include "filter_list.html" with id="order-lines" %}
</div>
<table class='table table-striped table-condensed' id='po-line-table' data-toolbar='#order-toolbar-buttons'>
@ -58,7 +56,7 @@
<div class='panel panel-hidden' id='panel-order-attachments'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Attachments" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>

View File

@ -36,9 +36,7 @@
<button class='btn btn-outline-secondary' type='button' id='view-list' title='{% trans "Display list view" %}'>
<span class='fas fa-th-list'></span>
</button>
<div class='filter-list' id='filter-list-purchaseorder'>
<!-- An empty div in which the filter list will be constructed -->
</div>
{% include "filter_list.html" with id="purchaseorder" %}
</div>
</div>
</div>

View File

@ -14,7 +14,7 @@
<div class='panel panel-hidden' id='panel-order-items'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Sales Order Items" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -29,8 +29,7 @@
<div class='panel-content'>
<div id='order-toolbar-buttons' class='btn-group' style='float: right;'>
<div class='btn-group'>
<div class='filter-list' id='filter-list-sales-order-lines'>
</div>
{% include "filter_list.html" with id="sales-order-lines" %}
</div>
</div>
<table class='table table-striped table-condensed' id='so-lines-table' data-toolbar='#order-toolbar-buttons'>
@ -49,7 +48,7 @@
<div class='panel panel-hidden' id='panel-order-attachments'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Attachments" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>

View File

@ -39,9 +39,7 @@
<button class='btn btn-outline-secondary' type='button' id='view-list' title='{% trans "Display list view" %}'>
<span class='fas fa-th-list'></span>
</button>
<div class='filter-list' id='filter-list-salesorder'>
<!-- An empty div in which the filter list will be constructed -->
</div>
{% include "filter_list.html" with id="salesorder" %}
</div>
</div>
</div>

View File

@ -34,11 +34,8 @@
<li><a class='dropdown-item' href='#' id='bom-item-delete'><span class='fas fa-trash-alt icon-red'></span> {% trans "Delete Items" %}</a></li>
</ul>
</div>
{% endif %}
<div class='filter-list' id='filter-list-bom'>
<!-- Empty div (will be filled out with avilable BOM filters) -->
</div>
{% endif %}
{% include "filter_list.html" with id="bom" %}
</div>
</div>

View File

@ -116,7 +116,7 @@
<div class='panel panel-hidden' id='panel-parts'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Parts" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -146,9 +146,7 @@
<li><a class='dropdown-item' href='#' id='multi-part-export' title='{% trans "Export" %}'>{% trans "Export Data" %}</a></li>
</ul>
</div>
<div class='filter-list' id='filter-list-parts'>
<!-- Empty div -->
</div>
{% include "filter_list.html" with id="parts" %}
</div>
</div>
<div class='panel-content'>
@ -174,9 +172,7 @@
<div class='panel-content'>
<div id='subcategory-button-toolbar'>
<div class='btn-group' role='group'>
<div class='filter-list' id='filter-list-category'>
<!-- An empty div in which the filter list will be constructed -->
</div>
{% include "filter_list.html" with id="category" %}
</div>
</div>

View File

@ -109,7 +109,7 @@
<div class='panel panel-hidden' id='panel-test-templates'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Part Test Templates" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -123,10 +123,8 @@
</div>
<div class='panel-content'>
<div id='test-button-toolbar'>
<div class='button-toolbar container-fluid' style="float: right;">
<div class='filter-list' id='filter-list-parttests'>
<!-- Empty div -->
</div>
<div class='btn-group' role='group'>
{% include "filter_list.html" with id="parttests" %}
</div>
</div>
@ -136,7 +134,7 @@
<div class='panel panel-hidden' id='panel-purchase-orders'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Purchase Orders" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -149,9 +147,7 @@
<div class='panel-content'>
<div id='po-button-bar'>
<div class='button-toolbar container-fluid' style='float: right;'>
<div class='filter-list' id='filter-list-purchaseorder'>
<!-- An empty div in which the filter list will be constructed -->
</div>
{% include "filter_list.html" with id="purchaseorder" %}
</div>
</div>
@ -166,13 +162,8 @@
</div>
<div class='panel-content'>
<div id='so-button-bar'>
<div class='button-toolbar container-fluid' style='float: right;'>
{% if 0 %}
<button class='btn btn-success' type='button' id='part-order2' title='{% trans "New sales order" %}'>{% trans "New Order" %}</button>
{% endif %}
<div class='filter-list' id='filter-list-salesorder'>
<!-- An empty div in which the filter list will be constructed -->
</div>
<div class='btn-group' role='group'>
{% include "filter_list.html" with id="salesorder" %}
</div>
</div>
@ -221,7 +212,7 @@
<div class='panel panel-hidden' id='panel-variants'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Part Variants" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -238,9 +229,7 @@
<div class='button-toolbar container-fluid'>
<div class='btn-group' role='group'>
</div>
<div class='filter-list' id='filter-list-variants'>
<!-- Empty div (will be filled out with available BOM filters) -->
</div>
{% include "filter_list.html" with id="variants" %}
</div>
</div>
@ -251,7 +240,7 @@
<div class='panel panel-hidden' id='panel-part-parameters'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Parameters" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -274,7 +263,7 @@
<div class='panel panel-hidden' id='panel-part-attachments'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Attachments" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -289,7 +278,7 @@
<div class='panel panel-hidden' id='panel-related-parts'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Related Parts" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -303,10 +292,8 @@
</div>
<div class='panel-content'>
<div id='related-button-bar'>
<div class='button-toolbar container-fluid' style='float: left;'>
<div class='filter-list' id='filter-list-related'>
<!-- An empty div in which the filter list will be constructed -->
</div>
<div class='btn-group' role='group'>
{% include "filter_list.html" with id="related" %}
</div>
</div>
@ -342,7 +329,7 @@
<div class='panel panel-hidden' id='panel-bom'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Bill of Materials" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -391,8 +378,8 @@
</div>
<div class='panel-content'>
<div id='assembly-button-toolbar'>
<div class='filter-list' id='filter-list-usedin'>
<!-- Empty div (will be filled out with avilable BOM filters) -->
<div class='btn-group' role='group'>
{% include "filter_list.html" with id="usedin" %}
</div>
</div>
@ -403,7 +390,7 @@
<div class='panel panel-hidden' id='panel-build-orders'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Part Builds" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -419,10 +406,8 @@
</div>
<div class='panel-content'>
<div id='build-button-toolbar'>
<div class='button-toolbar container-fluid' style='float: right';>
<div class='filter-list' id='filter-list-build'>
<!-- Empty div for filters -->
</div>
<div class='btn-group' role='group'>
{% include "filter_list.html" with id="build" %}
</div>
</div>
@ -440,7 +425,7 @@
<div class='panel panel-hidden' id='panel-suppliers'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Part Suppliers" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -467,7 +452,7 @@
</div>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Part Manufacturers" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>

View File

@ -14,7 +14,7 @@
<div class='panel panel-hidden' id='panel-history'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Stock Tracking Information" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -60,7 +60,7 @@
<div class='panel panel-hidden' id='panel-test-data'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Test Data" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -80,12 +80,8 @@
</div>
<div class='panel-content'>
<div id='test-button-toolbar'>
<div class='button-toolbar container-fluid' style="float: right;">
<div class='btn-group' role='group'>
</div>
<div class='filter-list' id='filter-list-stocktests'>
<!-- Empty div -->
</div>
<div class='btn-group' role='group'>
{% include "filter_list.html" with id="stocktests" %}
</div>
</div>
@ -95,7 +91,7 @@
<div class='panel panel-hidden' id='panel-attachments'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Attachments" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>
@ -133,7 +129,7 @@
<div class='panel panel-hidden' id='panel-installed-items'>
<div class='panel-heading'>
<div class='d-flex flex-row'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Installed Stock Items" %}</h4>
{% include "spacer.html" %}
<div class='btn-group' role='group'>

View File

@ -163,9 +163,7 @@
<li><a class='dropdown-item' href='#' id='multi-location-print-label' title='{% trans "Print labels" %}'><span class='fas fa-tags'></span> {% trans "Print labels" %}</a></li>
</ul>
</div>
<div class='filter-list' id='filter-list-location'>
<!-- An empty div in which the filter list will be constructed -->
</div>
{% include "filter_list.html" with id="location" %}
</div>
</div>

View File

@ -1,10 +1,8 @@
{% load i18n %}
<div id='attachment-buttons'>
<div class='btn-group'>
<div class='filter-list' id='filter-list-related'>
<!-- An empty div in which the filter list will be constructed -->
</div>
<div class='btn-group' role='group'>
{% include "filter_list.html" with id="related" %}
</div>
</div>

View File

@ -0,0 +1 @@
<div class='filter-list d-flex flex-row form-row' id='filter-list-{{ id }}'><!-- Empty div for table filters --></div>

View File

@ -281,7 +281,7 @@ function setupFilterList(tableKey, table, target) {
// One blank slate, please
element.empty();
element.append(`<button id='reload-${tableKey}' title='{% trans "Reload data" %}' class='btn btn-outline-secondary filter-tag'><span class='fas fa-redo-alt'></span></button>`);
element.append(`<button id='reload-${tableKey}' title='{% trans "Reload data" %}' class='btn btn-outline-secondary filter-button'><span class='fas fa-redo-alt'></span></button>`);
// Callback for reloading the table
element.find(`#reload-${tableKey}`).click(function() {
@ -293,11 +293,10 @@ function setupFilterList(tableKey, table, target) {
return;
}
// If there are filters currently "in use", add them in!
element.append(`<button id='${add}' title='{% trans "Add new filter" %}' class='btn btn-outline-secondary filter-tag'><span class='fas fa-filter'></span></button>`);
element.append(`<button id='${add}' title='{% trans "Add new filter" %}' class='btn btn-outline-secondary filter-button'><span class='fas fa-filter'></span></button>`);
if (Object.keys(filters).length > 0) {
element.append(`<button id='${clear}' title='{% trans "Clear all filters" %}' class='btn btn-outline-secondary filter-tag'><span class='fas fa-backspace icon-red'></span></button>`);
element.append(`<button id='${clear}' title='{% trans "Clear all filters" %}' class='btn btn-outline-secondary filter-button'><span class='fas fa-backspace icon-red'></span></button>`);
}
for (var key in filters) {
@ -320,7 +319,7 @@ function setupFilterList(tableKey, table, target) {
html += generateAvailableFilterList(tableKey);
html += generateFilterInput(tableKey);
html += `<button title='{% trans "Create filter" %}' class='btn btn-outline-secondary filter-tag' id='${make}'><span class='fas fa-plus'></span></button>`;
html += `<button title='{% trans "Create filter" %}' class='btn btn-outline-secondary filter-button' id='${make}'><span class='fas fa-plus'></span></button>`;
element.append(html);

View File

@ -67,9 +67,7 @@
{% endif %}
{% endif %}
{% endif %}
<div class='filter-list' id='filter-list-stock'>
<!-- An empty div in which the filter list will be constructed -->
</div>
{% include "filter_list.html" with id="stock" %}
</div>
</div>
</div>