Timeline Module in RC4 still "buggy"

I really love the "outline" format of the timeline module (especially public); where you can see two lines of small posts. However, whenever, we incorporate this in the site problems start to happen (I already listed a few in this forum, examples: https://unacms.com/d/rc4-time-line-design-issue-item-actions).

Issues encountered are largely related to the appearance of the actions items (.e.g, sticking our of order), but more importantly, the "scroll" function get missed up and the "loading" button get stuck with no further scrolling (image below).

image_transcoder.php?o=sys_images_editor&h=1226&dpx=2&t=1682434871

I hope UNA team tweak this module better to clean this buggy behavior @Alex T⚜️ @LeonidS

  • View
    772
  • More
Replies (5)

    • Hello

      I just tested the Public Feed (Outline) on this site and 'Loading' button is working fine. It's also working correctly when 'Infinite Scroll' is enabled.

      The button uses JavaScript to load more content. So, if you have any JavaScript error on the page it will break the 'Loading' button's work.

      • Thanks for the clarification. Can you kindly show me how to find out if I have "JavaScript errors" on my UNA page and how to fix them (troubleshoot it)? Thank you so much

        • I noted this box on my site (image below), but not sure what it means...

          image_transcoder.php?o=sys_images_editor&h=1246&dpx=2&t=1682997152

          • You need to open developer console in the browser and look for any errors in "Console" tab.

            • Here is the errors on the "console" tab: (likely the last couple of items are the pertinent ones):

              element.style {

              1. transform: none;

              }

              gzip_loader…2061.css:25

              .bx-media-phone .bx-def-page-width {

              1. width: auto;

              }

              bx_templ_le…s?rev=314:5

              .bx-def-page-width {

              1. max-width: 1280px;
              2. width: 100%;

              }

              gzip_loader…2061.css:25

              .bx-def-page-width {

              1. max-width: 1280px;
              2. width: 100%;

              }

              gzip_loader…2061.css:23

              .px-3 {

              1. padding-left: 0.75rem;
              2. padding-right: 0.75rem;

              }

              gzip_loader…2061.css:23

              .box-border {

              1. box-sizing: border-box;

              }

              gzip_loader…2061.css:23

              .mx-auto {

              1. margin-left: auto;
              2. margin-right: auto;

              }

              gzip_loader…2061.css:23

              *, ::backdrop, :after, :before {

              1. --tw-border-spacing-x: 0;
              2. --tw-border-spacing-y: 0;
              3. --tw-translate-x: 0;
              4. --tw-translate-y: 0;
              5. --tw-rotate: 0;
              6. --tw-skew-x: 0;
              7. --tw-skew-y: 0;
              8. --tw-scale-x: 1;
              9. --tw-scale-y: 1;
              10. --tw-pan-x: ;
              11. --tw-pan-y: ;
              12. --tw-pinch-zoom: ;
              13. --tw-scroll-snap-strictness: proximity;
              14. --tw-ordinal: ;
              15. --tw-slashed-zero: ;
              16. --tw-numeric-figure: ;
              17. --tw-numeric-spacing: ;
              18. --tw-numeric-fraction: ;
              19. --tw-ring-inset: ;
              20. --tw-ring-offset-width: 0px;
              21. --tw-ring-offset-color: ;
              22. --tw-ring-color: #3b82f680;
              23. --tw-ring-offset-shadow: 0 0 #0000;
              24. --tw-ring-shadow: 0 0 #0000;
              25. --tw-shadow: 0 0 #0000;
              26. --tw-shadow-colored: 0 0 #0000;
              27. --tw-blur: ;
              28. --tw-brightness: ;
              29. --tw-contrast: ;
              30. --tw-grayscale: ;
              31. --tw-hue-rotate: ;
              32. --tw-invert: ;
              33. --tw-saturate: ;
              34. --tw-sepia: ;
              35. --tw-drop-shadow: ;
              36. --tw-backdrop-blur: ;
              37. --tw-backdrop-brightness: ;
              38. --tw-backdrop-contrast: ;
              39. --tw-backdrop-grayscale: ;
              40. --tw-backdrop-hue-rotate: ;
              41. --tw-backdrop-invert: ;
              42. --tw-backdrop-opacity: ;
              43. --tw-backdrop-saturate: ;
              44. --tw-backdrop-sepia: ;

              }

              gzip_loader…2061.css:23

              *, :after, :before {

              1. box-sizing: border-box;
              2. border: 0 solid ;

              }

              user agent stylesheet

              div {

              1. display: block;

              }

              Inherited from body.bx-artificer.bx-page-home.bx-def-font.bx-def-color-bg-page.bx-def-image-bg-page.bx-user-authorized

              gzip_loader…2061.css:23

              .bx-def-color-bg-page {

              1. --tw-bg-opacity: 1;
              2. background-color: rgb(243 244 246/var(--tw-bg-opacity));

              }

              gzip_loader…2061.css:23

              .bx-artificer .bx-def-font-inputs:not(.bx-btn), .bx-def-font {

              1. font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
              2. --tw-text-opacity: 1;
              3. color: rgb(107 114 128/var(--tw-text-opacity));

              }

              gzip_loader…2061.css:23

              body {

              1. margin: 0;
              2. line-height: inherit;

              }

              Inherited from html.bx-media-phone.bx-media-phone2

              gzip_loader…2061.css:25

              html.bx-media-phone {

              1. font-size: 100%;

              }

              gzip_loader…2061.css:23

              html {

              1. line-height: 1.5;
              2. -webkit-text-size-adjust: 100%;
              3. -moz-tab-size: 4;
              4. -o-tab-size: 4;
              5. tab-size: 4;
              6. font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
              7. font-feature-settings: normal;

              }

              Pseudo ::before element

              gzip_loader…2061.css:23

              *, ::backdrop, :after, :before {

              1. --tw-border-spacing-x: 0;
              2. --tw-border-spacing-y: 0;
              3. --tw-translate-x: 0;
              4. --tw-translate-y: 0;
              5. --tw-rotate: 0;
              6. --tw-skew-x: 0;
              7. --tw-skew-y: 0;
              8. --tw-scale-x: 1;
              9. --tw-scale-y: 1;
              10. --tw-pan-x: ;
              11. --tw-pan-y: ;
              12. --tw-pinch-zoom: ;
              13. --tw-scroll-snap-strictness: proximity;
              14. --tw-ordinal: ;
              15. --tw-slashed-zero: ;
              16. --tw-numeric-figure: ;
              17. --tw-numeric-spacing: ;
              18. --tw-numeric-fraction: ;
              19. --tw-ring-inset: ;
              20. --tw-ring-offset-width: 0px;
              21. --tw-ring-offset-color: ;
              22. --tw-ring-color: #3b82f680;
              23. --tw-ring-offset-shadow: 0 0 #0000;
              24. --tw-ring-shadow: 0 0 #0000;
              25. --tw-shadow: 0 0 #0000;
              26. --tw-shadow-colored: 0 0 #0000;
              27. --tw-blur: ;
              28. --tw-brightness: ;
              29. --tw-contrast: ;
              30. --tw-grayscale: ;
              31. --tw-hue-rotate: ;
              32. --tw-invert: ;
              33. --tw-saturate: ;
              34. --tw-sepia: ;
              35. --tw-drop-shadow: ;
              36. --tw-backdrop-blur: ;
              37. --tw-backdrop-brightness: ;
              38. --tw-backdrop-contrast: ;
              39. --tw-backdrop-grayscale: ;
              40. --tw-backdrop-hue-rotate: ;
              41. --tw-backdrop-invert: ;
              42. --tw-backdrop-opacity: ;
              43. --tw-backdrop-saturate: ;
              44. --tw-backdrop-sepia: ;

              }

              gzip_loader…2061.css:23

              :after, :before {

              1. --tw-content: "";

              }

              gzip_loader…2061.css:23

              *, :after, :before {

              1. box-sizing: border-box;
              2. border: 0 solid ;

              }

              Pseudo ::after element

              gzip_loader…2061.css:23

              *, ::backdrop, :after, :before {

              1. --tw-border-spacing-x: 0;
              2. --tw-border-spacing-y: 0;
              3. --tw-translate-x: 0;
              4. --tw-translate-y: 0;
              5. --tw-rotate: 0;
              6. --tw-skew-x: 0;
              7. --tw-skew-y: 0;
              8. --tw-scale-x: 1;
              9. --tw-scale-y: 1;
              10. --tw-pan-x: ;
              11. --tw-pan-y: ;
              12. --tw-pinch-zoom: ;
              13. --tw-scroll-snap-strictness: proximity;
              14. --tw-ordinal: ;
              15. --tw-slashed-zero: ;
              16. --tw-numeric-figure: ;
              17. --tw-numeric-spacing: ;
              18. --tw-numeric-fraction: ;
              19. --tw-ring-inset: ;
              20. --tw-ring-offset-width: 0px;
              21. --tw-ring-offset-color: ;
              22. --tw-ring-color: #3b82f680;
              23. --tw-ring-offset-shadow: 0 0 #0000;
              24. --tw-ring-shadow: 0 0 #0000;
              25. --tw-shadow: 0 0 #0000;
              26. --tw-shadow-colored: 0 0 #0000;
              27. --tw-blur: ;
              28. --tw-brightness: ;
              29. --tw-contrast: ;
              30. --tw-grayscale: ;
              31. --tw-hue-rotate: ;
              32. --tw-invert: ;
              33. --tw-saturate: ;
              34. --tw-sepia: ;
              35. --tw-drop-shadow: ;
              36. --tw-backdrop-blur: ;
              37. --tw-backdrop-brightness: ;
              38. --tw-backdrop-contrast: ;
              39. --tw-backdrop-grayscale: ;
              40. --tw-backdrop-hue-rotate: ;
              41. --tw-backdrop-invert: ;
              42. --tw-backdrop-opacity: ;
              43. --tw-backdrop-saturate: ;
              44. --tw-backdrop-sepia: ;

              }

              gzip_loader…2061.css:23

              :after, :before {

              1. --tw-content: "";

              }

              gzip_loader…2061.css:23

              *, :after, :before {

              1. box-sizing: border-box;
              2. border: 0 solid ;

              }

              Pseudo ::backdrop element

              gzip_loader…2061.css:23

              *, ::backdrop, :after, :before {

              1. --tw-border-spacing-x: 0;
              2. --tw-border-spacing-y: 0;
              3. --tw-translate-x: 0;
              4. --tw-translate-y: 0;
              5. --tw-rotate: 0;
              6. --tw-skew-x: 0;
              7. --tw-skew-y: 0;
              8. --tw-scale-x: 1;
              9. --tw-scale-y: 1;
              10. --tw-pan-x: ;
              11. --tw-pan-y: ;
              12. --tw-pinch-zoom: ;
              13. --tw-scroll-snap-strictness: proximity;
              14. --tw-ordinal: ;
              15. --tw-slashed-zero: ;
              16. --tw-numeric-figure: ;
              17. --tw-numeric-spacing: ;
              18. --tw-numeric-fraction: ;
              19. --tw-ring-inset: ;
              20. --tw-ring-offset-width: 0px;
              21. --tw-ring-offset-color: ;
              22. --tw-ring-color: #3b82f680;
              23. --tw-ring-offset-shadow: 0 0 #0000;
              24. --tw-ring-shadow: 0 0 #0000;
              25. --tw-shadow: 0 0 #0000;
              26. --tw-shadow-colored: 0 0 #0000;
              27. --tw-blur: ;
              28. --tw-brightness: ;
              29. --tw-contrast: ;
              30. --tw-grayscale: ;
              31. --tw-hue-rotate: ;
              32. --tw-invert: ;
              33. --tw-saturate: ;
              34. --tw-sepia: ;
              35. --tw-drop-shadow: ;
              36. --tw-backdrop-blur: ;
              37. --tw-backdrop-brightness: ;
              38. --tw-backdrop-contrast: ;
              39. --tw-backdrop-grayscale: ;
              40. --tw-backdrop-hue-rotate: ;
              41. --tw-backdrop-invert: ;
              42. --tw-backdrop-opacity: ;
              43. --tw-backdrop-saturate: ;
              44. --tw-backdrop-sepia: ;

              }

              margin

              ‒

              ‒border

              ‒

              ‒padding

              ‒

              12552×58280.40012

              ‒‒

              ‒‒

              ‒

              Console

              What's New

              top

              Default levels

              49 Issues:

              1

              48

              4 hidden

              

              gzip_loader.php?file…1046ffb643e59.js:10

              JQMIGRATE: Migrate is installed, version 3.4.0

              ServiceWorkerManager.js:341

              [Service Worker Installation] Installing service worker failed SecurityError: Failed to register a ServiceWorker for scope ('https://tajrebatee.com/') with script ('https://tajrebatee.com/OneSignalSDKWorker.js?appId=6e4c05f0-48eb-4e8f-a6fb-520c16ec7eef&sdkVersion=151601'): The script resource is behind a redirect, which is disallowed.

              (anonymous)@ServiceWorkerManager.js:341

              all.f9336692.js:8

              Allow attribute will take precedence over 'allowfullscreen'.

              media@all.f9336692.js:8

              platform.js:8

              Uncaught TypeError: Cannot read properties of undefined (reading 'length')

              at e.fullHash (platform.js:8:29460)

              at e.hash (platform.js:8:29609)

              at j.url (platform.js:8:17682)

              at j.buttons.facebook (platform.js:8:18476)

              at platform.js:8:17956

              at Array.forEach (<anonymous>)

              at e.each (platform.js:8:25747)

              at j.buttons (platform.js:8:17815)

              at platform.js:8:20461

              at HTMLLinkElement.e (platform.js:8:14693)

              /onesignalsdkworker.…sdkVersion=151601:1

              Failed to load resource: the server responded with a status of 404 (Not Found)

              ServiceWorkerManager.js:350

              Uncaught (in promise) rt: Registration of a Service Worker failed.

              at Vt.<anonymous> (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151601:1:178003)

              at Generator.next (<anonymous>)

              at r (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151601:1:716)

              www-widgetapi.js:1128

              Unrecognized feature: 'web-share'.

              Lp@www-widgetapi.js:1128

              16

              Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'.

              dotcom-bootstrap.js:1

              Uncaught (in promise) DOMException: Blocked a frame with origin "https://www.bbc.com" from accessing a cross-origin frame.

              at https://gn-web-assets.api.bbc.com/ngas/dotcom-bootstrap.js:1:53733

              at U (https://gn-web-assets.api.bbc.com/ngas/dotcom-bootstrap.js:1:53773)

              at Me (https://gn-web-assets.api.bbc.com/ngas/dotcom-bootstrap.js:1:69150)

              at https://gn-web-assets.api.bbc.com/ngas/dotcom-bootstrap.js:1:71463

              platform.js:7

              Uncaught TypeError: Cannot read properties of null (reading 'document')

              at c.sandbox.m.__appended (platform.js:7:21431)

              at n.init (platform.js:7:26908)

              at new n (platform.js:7:26157)

              at platform.js:7:27779

              at Array.reduce (<anonymous>)

              at e.reduce (platform.js:8:26229)

              at m.fetch (platform.js:7:27748)

              at m.one (platform.js:7:30793)

              at A (platform.js:9:557)

              at N (platform.js:9:3681)

              DevTools failed to load source map: Could not load content for https://tajrebatee.com/quill.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

              DevTools failed to load source map: Could not load content for https://tajrebatee.com/plyr.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

              Login or Join to comment.