playbook_ui_docs 13.21.0.pre.alpha.PLAY120322465 → 13.21.0.pre.alpha.pbntr220improveexpansionspeed2415

Sign up to get free protection for your applications and to get access to all the features.
Files changed (26) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +7 -7
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +1 -1
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
  16. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -2
  17. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -1
  18. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +0 -2
  19. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -51
  20. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +11 -62
  21. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb +2 -7
  22. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +4 -0
  23. data/dist/playbook-doc.js +7 -7
  24. metadata +5 -7
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.html.erb +0 -7
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.jsx +0 -41
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f124b730cdc02e434205a9a3b25d822dd89d7e9fabda25b04c63f7c07fc51fac
4
- data.tar.gz: 8c24fc6448e11c29af55fb36e9f3a783833100dc8caa14b25b72204652727505
3
+ metadata.gz: 5c3db57b248cc1eb40fdc3c2604a68665b3f6e0413881b1c8f7872641d666c87
4
+ data.tar.gz: 28cea87c80315e95f2c0262d6065cb7687eb3bd1352dd3bb10146d81eacefa10
5
5
  SHA512:
6
- metadata.gz: 35a8d533b2ec3d97ea3bb1e5203db2775f7bbf73ca3f1993670da61fc1588d38d904dd1f43d426dd9b93039ac70f828941469cc3621d63ed925f8c9e81dd583c
7
- data.tar.gz: 6bb117a5010a8cc862ffaa7479406a04b1269c59a6c0616d9f08ed73ab99a77f37f6c4085c474ec12ccfc663bcc3dc600697f388721ba1fbddb970e54d56d6e7
6
+ metadata.gz: 7268fcb8222374415f9944525b6c1c68b2bff2e0d15f75bf842a33cdc306fa50806d3a9a3fca69c0f38340935469271c7a4aaf8b0cd4d4b6739b83f94a1730ae
7
+ data.tar.gz: de5be228219071faaff57f50cff4ed82100b64247b7912fadb203a594475a4eb74480b769445997b822e7f60cee93ec63f5c040972c33fed509d9765da21c3cf
@@ -1,6 +1,6 @@
1
- import React from "react"
2
- import { AdvancedTable } from "../../"
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React from "react";
2
+ import { AdvancedTable } from "../../";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableCollapsibleTrail = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableCollapsibleTrail = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  return (
39
39
  <div>
@@ -46,7 +46,7 @@ const AdvancedTableCollapsibleTrail = (props) => {
46
46
  <AdvancedTable.Body collapsibleTrail={false} />
47
47
  </AdvancedTable>
48
48
  </div>
49
- )
50
- }
49
+ );
50
+ };
51
51
 
52
- export default AdvancedTableCollapsibleTrail
52
+ export default AdvancedTableCollapsibleTrail;
@@ -1,6 +1,6 @@
1
- import React from "react"
2
- import { AdvancedTable } from "../../"
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React from "react";
2
+ import { AdvancedTable } from "../../";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableDefault = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableDefault = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  return (
39
39
  <div>
@@ -43,7 +43,7 @@ const AdvancedTableDefault = (props) => {
43
43
  {...props}
44
44
  />
45
45
  </div>
46
- )
47
- }
46
+ );
47
+ };
48
48
 
49
- export default AdvancedTableDefault
49
+ export default AdvancedTableDefault;
@@ -1,6 +1,6 @@
1
- import React, { useState } from "react"
2
- import { AdvancedTable } from "../../"
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React, { useState } from "react";
2
+ import { AdvancedTable } from "../../";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableExpandedControl = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableExpandedControl = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  //State for manually effecting what is expanded
39
39
  const [expanded, setExpanded] = useState({'0': true, '0.0': true, '0.0.1': true})
@@ -53,7 +53,7 @@ const AdvancedTableExpandedControl = (props) => {
53
53
  {...props}
54
54
  />
55
55
  </div>
56
- )
57
- }
56
+ );
57
+ };
58
58
 
59
- export default AdvancedTableExpandedControl
59
+ export default AdvancedTableExpandedControl;
@@ -1,6 +1,6 @@
1
- import React from "react"
2
- import { AdvancedTable } from "../.."
3
- import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
1
+ import React from "react";
2
+ import { AdvancedTable } from "../..";
3
+ import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading";
4
4
 
5
5
  const AdvancedTableInlineRowLoading = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableInlineRowLoading = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  //Render the subRow header rows
39
39
  const subRowHeaders = ["Quarter", "Month", "Day"]
@@ -52,7 +52,7 @@ const AdvancedTableInlineRowLoading = (props) => {
52
52
  <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
53
53
  </AdvancedTable>
54
54
  </div>
55
- )
56
- }
55
+ );
56
+ };
57
57
 
58
- export default AdvancedTableInlineRowLoading
58
+ export default AdvancedTableInlineRowLoading;
@@ -1,4 +1,4 @@
1
- As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
1
+ As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
2
2
 
3
3
  In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows.
4
4
 
@@ -1,7 +1,7 @@
1
- import React, { useState } from "react"
2
- import { AdvancedTable } from "../../"
1
+ import React, { useState } from "react";
2
+ import { AdvancedTable } from "../../";
3
3
  import { Button } from "../../"
4
- import { MOCK_DATA } from "./_mock_data"
4
+ import { MOCK_DATA } from "./_mock_data";
5
5
 
6
6
  const AdvancedTableLoading = (props) => {
7
7
 
@@ -37,7 +37,7 @@ const [isloading, setIsLoading] = useState(true)
37
37
  accessor: "graduatedStudents",
38
38
  label: "Graduated Students",
39
39
  },
40
- ]
40
+ ];
41
41
 
42
42
  return (
43
43
  <div>
@@ -54,7 +54,7 @@ const [isloading, setIsLoading] = useState(true)
54
54
  {...props}
55
55
  />
56
56
  </div>
57
- )
58
- }
57
+ );
58
+ };
59
59
 
60
- export default AdvancedTableLoading
60
+ export default AdvancedTableLoading;
@@ -1,6 +1,6 @@
1
- import React from "react"
2
- import { AdvancedTable } from "../.."
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React from "react";
2
+ import { AdvancedTable } from "../..";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableSort = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSort = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  return (
39
39
  <div>
@@ -46,7 +46,7 @@ const AdvancedTableSort = (props) => {
46
46
  <AdvancedTable.Body />
47
47
  </AdvancedTable>
48
48
  </div>
49
- )
50
- }
49
+ );
50
+ };
51
51
 
52
- export default AdvancedTableSort
52
+ export default AdvancedTableSort;
@@ -1,6 +1,6 @@
1
- import React, { useState } from "react"
2
- import { AdvancedTable } from "../.."
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React, { useState } from "react";
2
+ import { AdvancedTable } from "../..";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableSortControl = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSortControl = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  //State for sort direction
39
39
  const [isSortDesc, setIsSortDesc] = useState({desc: false})
@@ -57,7 +57,7 @@ const AdvancedTableSortControl = (props) => {
57
57
  <AdvancedTable.Body />
58
58
  </AdvancedTable>
59
59
  </div>
60
- )
61
- }
60
+ );
61
+ };
62
62
 
63
- export default AdvancedTableSortControl
63
+ export default AdvancedTableSortControl;
@@ -1,6 +1,6 @@
1
- import React from "react"
2
- import { AdvancedTable } from "../.."
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React from "react";
2
+ import { AdvancedTable } from "../..";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableSubrowHeaders = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSubrowHeaders = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  //Render the subRow header rows
39
39
  const subRowHeaders = ["Quarter", "Month", "Day"]
@@ -51,7 +51,7 @@ const AdvancedTableSubrowHeaders = (props) => {
51
51
  <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
52
52
  </AdvancedTable>
53
53
  </div>
54
- )
55
- }
54
+ );
55
+ };
56
56
 
57
- export default AdvancedTableSubrowHeaders
57
+ export default AdvancedTableSubrowHeaders;
@@ -1,6 +1,6 @@
1
- import React from "react"
2
- import { AdvancedTable } from "../../"
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React from "react";
2
+ import { AdvancedTable } from "../../";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableTableOptions = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableTableOptions = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  const tableOptions = {
39
39
  initialState: {
@@ -55,7 +55,7 @@ const AdvancedTableTableOptions = (props) => {
55
55
  {...props}
56
56
  />
57
57
  </div>
58
- )
59
- }
58
+ );
59
+ };
60
60
 
61
- export default AdvancedTableTableOptions
61
+ export default AdvancedTableTableOptions;
@@ -1,6 +1,6 @@
1
- import React from "react"
2
- import { AdvancedTable } from "../../"
3
- import { MOCK_DATA } from "./_mock_data"
1
+ import React from "react";
2
+ import { AdvancedTable } from "../../";
3
+ import { MOCK_DATA } from "./_mock_data";
4
4
 
5
5
  const AdvancedTableTableProps = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableTableProps = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ]
36
+ ];
37
37
 
38
38
  const tableProps = {
39
39
  container: false,
@@ -49,7 +49,7 @@ const AdvancedTableTableProps = (props) => {
49
49
  {...props}
50
50
  />
51
51
  </div>
52
- )
53
- }
52
+ );
53
+ };
54
54
 
55
- export default AdvancedTableTableProps
55
+ export default AdvancedTableTableProps;
@@ -275,4 +275,4 @@ export const MOCK_DATA = [
275
275
  },
276
276
  ],
277
277
  },
278
- ]
278
+ ];
@@ -196,5 +196,5 @@ export const MOCK_DATA_INLINE_LOADING = [
196
196
  },
197
197
  ],
198
198
  },
199
- ]
199
+ ];
200
200
 
@@ -1,6 +1,4 @@
1
1
  examples:
2
- # rails:
3
- # - advanced_table_default: Default (Required Props)
4
2
  react:
5
3
  - advanced_table_default: Default (Required Props)
6
4
  - advanced_table_loading: Loading State
@@ -20,7 +20,6 @@ examples:
20
20
  - date_picker_hooks: Hooks
21
21
  - date_picker_year_range: Year Range
22
22
  - date_picker_anti_patterns: Anti-Patterns
23
- - date_picker_margin_bottom: Margin Bottom
24
23
  - date_picker_inline: Inline
25
24
  - date_picker_month_and_year: Month & Year Only
26
25
  - date_picker_week: Week
@@ -49,7 +48,6 @@ examples:
49
48
  - date_picker_flatpickr_methods: Flatpickr Methods
50
49
  - date_picker_hooks: Hooks
51
50
  - date_picker_year_range: Year Range
52
- - date_picker_margin_bottom: Margin Bottom
53
51
  - date_picker_inline: Inline
54
52
  - date_picker_month_and_year: Month & Year Only
55
53
  - date_picker_week: Week
@@ -19,7 +19,6 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
19
19
  export { default as DatePickerPositions } from './_date_picker_positions.jsx'
20
20
  export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
21
21
  export { default as DatePickerAllowInput } from './_date_picker_allow_input'
22
- export { default as DatePickerMarginBottom} from './_date_picker_margin_bottom'
23
22
  export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
24
23
  export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
25
24
  export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
@@ -1,7 +1,6 @@
1
1
  <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
2
2
 
3
3
  <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
4
- <form>
5
4
  <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
6
5
  <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
7
6
  <% end %>
@@ -13,5 +12,4 @@
13
12
 
14
13
  <% end %>
15
14
  <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
16
- </form>
17
15
  <% end %>
@@ -1,55 +1,5 @@
1
- <%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { multitoast: "#toast-short" } }) %>
2
-
3
1
  <%= pb_rails("fixed_confirmation_toast", props: {
4
- classname: "multitoast-to-hide",
5
- closeable: true,
6
- id: "toast-short",
7
2
  multi_line: true,
8
- text: "Multi-line is used when the given text will not fit on one line.",
3
+ text: "Scan to Assign Selected Items. Click here to generate report",
9
4
  status: "tip",
10
- vertical: "top",
11
- horizontal: "center"
12
5
  }) %>
13
-
14
- <%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { multitoast: "#toast-long" } }) %>
15
-
16
- <%= pb_rails("fixed_confirmation_toast", props: {
17
- classname: "multitoast-to-hide",
18
- closeable: true,
19
- id: "toast-long",
20
- multi_line: true,
21
- text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
22
- status: "tip",
23
- vertical: "top",
24
- horizontal: "center"
25
- }) %>
26
-
27
-
28
- <script type="text/javascript">
29
- const multitoasts = document.querySelectorAll(".multitoast-to-hide")
30
- const multibuttons = document.querySelectorAll("button[data-multitoast]")
31
-
32
- const hideMultiToasts = () => {
33
- multitoasts.forEach((toast) => {
34
- toast.style.display = "none"
35
- })
36
- }
37
-
38
- multibuttons.forEach((button) => {
39
- button.onclick = () => {
40
- hideMultiToasts()
41
- let toast = document.querySelector(button.getAttribute("data-multitoast"))
42
-
43
- if (toast) {
44
- toast.style.display = "flex"
45
- }
46
- }
47
- })
48
- </script>
49
-
50
- <!-- hiding toast on page load -->
51
- <style>
52
- #toast-long, #toast-short {
53
- display: none;
54
- }
55
- </style>
@@ -1,69 +1,18 @@
1
- import React, { useState } from 'react'
1
+ import React from 'react'
2
2
 
3
- import Button from '../../pb_button/_button'
4
3
  import FixedConfirmationToast from '../_fixed_confirmation_toast'
5
4
 
6
5
  const FixedConfirmationToastMultiLine = (props) => {
7
-
8
- const [openShort, setOpenShort] = useState(false)
9
- const [openLong, setOpenLong] = useState(false)
10
-
11
- const handleClickShort = () => {
12
- setOpenShort(true)
13
- }
14
- const handleClickLong= () => {
15
- setOpenLong(true)
16
- }
17
-
18
- const handleCloseShort = () => {
19
- setOpenShort(false)
20
- }
21
-
22
- const handleCloseLong= () => {
23
- setOpenLong(false)
24
- }
25
-
26
- return (
27
- <>
28
- <Button
29
- onClick={handleClickShort}
30
- text="Short Multiline"
31
- variant="secondary"
32
- {...props}
33
- />
34
- {' '}
35
- <Button
36
- onClick={handleClickLong}
37
- text="Long Multiline"
38
- variant="secondary"
39
- {...props}
40
- />
41
-
42
- <FixedConfirmationToast
43
- closeable
44
- horizontal='center'
45
- multiLine
46
- onClose={handleCloseShort}
47
- open={openShort}
48
- status='tip'
49
- text='Multi-line is used when the given text will not fit on one line.'
50
- vertical='top'
51
- {...props}
52
- />
53
-
54
- <FixedConfirmationToast
55
- closeable
56
- horizontal='center'
57
- multiLine
58
- onClose={handleCloseLong}
59
- open={openLong}
60
- status='tip'
61
- text='Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.'
62
- vertical='top'
63
- {...props}
64
- />
65
- </>
66
- )
6
+ return (
7
+ <div>
8
+ <FixedConfirmationToast
9
+ multiLine
10
+ status="tip"
11
+ text="Scan to Assign Selected Items. Click here to generate report"
12
+ {...props}
13
+ />
14
+ </div>
15
+ )
67
16
  }
68
17
 
69
18
  export default FixedConfirmationToastMultiLine
@@ -75,6 +75,8 @@
75
75
  })
76
76
  }
77
77
 
78
+ hideToasts()
79
+
78
80
  buttons.forEach((button) => {
79
81
  button.onclick = () => {
80
82
  hideToasts()
@@ -86,10 +88,3 @@
86
88
  }
87
89
  })
88
90
  </script>
89
-
90
- <!-- hiding toast on page load -->
91
- <style>
92
- #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
93
- display: none;
94
- }
95
- </style>
@@ -46,3 +46,7 @@
46
46
  <%= pb_rails("flex/flex_item") do %>4<% end %>
47
47
  <% end %>
48
48
  </div>
49
+
50
+
51
+
52
+ </div>