raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-31 21:37:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add loading state for ProductsTable component

Browse Source
This commit is contained in:
Jean-Baptiste Bellet
2022-03-25 14:26:48 +01:00
parent 3ae5db907a
commit 3e03208cf5
2 changed files with 48 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/products_table_component/products_table_component.html.haml
View File

@@ -1,20 +1,21 @@
= component_controller do
#products_page_form
#filter_results
= component_controller(class: "products-table") do
.products-table-form
.products-table-form_filter_results
= render(SearchInputComponent.new(value: @search_term, data: reflex_data_attributes(:search_term)))
#categories_selector
.products-table-form_categories_selector
= render(SuperSelectorComponent.new(title: "Categories", selected: @categories_selected, items: @categories, data: reflex_data_attributes(:toggle_category)))
#producers_selector
.products-table-form_producers_selector
= render(SuperSelectorComponent.new(title: "Producers", selected: @producers_selected, items: @producers, data: reflex_data_attributes(:toggle_producer)))
#per-page_selector
.products-table-form_per-page_selector
= render(SelectorComponent.new(title: "#{@per_page_selected[0]} items per page", selected: @per_page_selected, items: @per_page, data: reflex_data_attributes(:toggle_per_page)))
#columns_selector
.products-table-form_columns_selector
= render(SelectorComponent.new(title: "Columns", selected: @columns_selected, items: @selectable_columns, data: reflex_data_attributes(:toggle_column)))
#products_table
.products-table_table
%table
= render(TableHeaderComponent.new(columns: @columns, sort: @sort, data: reflex_data_attributes(:click_sort)))
%tbody
= render(ProductComponent.with_collection(@products, columns: @columns))
#pagination
.products-table-form_pagination
= render(PaginationComponent.new(pagy: @pagy, data: reflex_data_attributes(:change_page)))

56
app/components/products_table_component/products_table_component.scss
View File

@@ -1,27 +1,47 @@
#products_page_form {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
grid-gap: 10px;
margin-bottom: 10px;
#filter_results {
.products-table {
.products-table-form {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
grid-gap: 10px;
margin-bottom: 10px;
}
#columns_selector {
.products-table_table {
box-shadow: 0 10px 10px -1px rgb(0 0 0 / 10%);
}
.products-table-form_pagination {
position: relative;
top: -15px;
nav, .pagination {
margin-top: 0;
padding-top: 0;
}
}
}
#products_table {
box-shadow: 0 10px 10px -1px rgb(0 0 0 / 10%);
}
.products-table.loading {
.products-table-form_pagination, .products-table_table {
position: relative;
#pagination {
position: relative;
top: -15px;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
}
nav, .pagination {
margin-top: 0;
padding-top: 0;
.products-table_table {
&:before {
background-position: center;
background-repeat: no-repeat;
background-size: 50px 50px;
background-image: url("../images/spinning-circles.svg");
}
}
}