D.T Home Screen Migration Into Core Theme

[kodinkat]

[kodinkat]

[kodinkat]

[kodinkat]

[kodinkat]

[kodinkat]

[kodinkat]

[kodinkat]

[cairocoder01]

• After editing an app (to disable it), the page reloads and that app's icon is blue but all the others are white, which makes them hard to see. It seems that icons are white by default, but the edit modal shows blue as the color selection by default, so the color is changed any time you make a different edit.

• Unable to set role-based permissions. Opened app to edit. Select "Limit access by Role". Select Multiplier and Dispatcher. Save. No change is saved.

  • "Enable Role-Based Access" is already checked. It was checked by default, but I tried this again after clicking save below that option in case there was an issue with the default setting. Same behavior.
  • Works when creating a new app though

• Can't reset color. If I change the color of an app to purple and then want to reset it to the default, I select white to match what all of the default icons show. It shows white in both light and dark mode instead of switching between black/white for light/dark modes. There should probably be a way to reset the color to default.

• Apps seem to overlap the side of the screen, but won't side-scroll:

  • I suggest using auto-fit columns in CSS grid: grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important;

• In the CSS, !important is used almost 800 times, which is bad practice. Overrides of base styles should use more specific selectors in the majority of cases. The important keyword should only be used in rare circumstances when more specific selectors aren't possible. It forces all other styles to also use it to override, even when using more specific selectors.

• Inconsistent icon colors

  • Default icon colors on the home screen are black/white
  • Default icon colors on the Apps List from the bottom nav are blue (but not DT blue).
  • Overriding the color from the admin changes it in both places, but both don't have the same default

• There seems to be an extra "Save Settings" button at the bottom of the admin screen. I'm not clear what it's saving.

[kodinkat]

[kodinkat]

@cairocoder01 pls see latest updates and feel free to take it for a test-drive and let me know if you encounter any further issues.

[cairocoder01]

@kodinkat Looks like all of the bugs were fixed from my last review. Thanks! I'd still love to see a cleanup of the CSS important stuff.

A few more things I just found:

• I can't seem to edit the icon color of an app added from the ML plugin. For example, a post connections template I created. It seems to be consistent across the other templates I've used from there. I select a color and save, but it doesn't save. It fails for templates Post Connections, List Sub-assigned, and Single Record but succeeds for Create Record
• I think there's some layout/padding cleanup to do: (see image below)
  • There is body padding as well as an extra 2rem padding on each section. I think we may be able to remove the body padding if we're padding each child section
  • The welcome section doesn't line up with the Apps/Link sections. Header is 1.5rem padding and apps are 2rem. Those should be consistent and line up
  • I think we should be able to fit 4 icons wide on a large mobile device (~425px). Minimum recommended touch target size is about 1cm, which comes to about 50px. 90px is really comfortable for a touch target, but maybe we can decrease that to fit another icon. If we knocked overall padding to 1.5rem, that leaves 380px in the center. If we count on 1rem gap (currently 1.5rem) between 4 items, that's 335px for the icons, or 83.75px per icon. So we could go to 80px per icon to fit 4 wide on a large mobile device. If we went to 70px, we could fit 4 wide down to a medium mobile device too (375px). So I think it would be great to reduce the icon size to somewhere between 70-80px.

[kodinkat]

@cairocoder01 thank you for the feedback - pls see latest updates and let me know if anything. :)

[corsacca]

Thanks @kodinkat

home-srceen.css has 2000+ lines of css, with 300+ uses of !important, and some duplication. I think we can simplify and reduce.

One win might be to add $allowed_css = []; This would mean we don't have to fight the theme CSS.

Do that for the js too and we'll just be loading what this Magic Link needs.

[kodinkat]

@corsacca latest updates now pushed. The remaining 70 !important declarations are for critical layout and positioning properties that need to override browser defaults or ensure proper functionality.

The CSS is now cleaner and more maintainable, with !important used only where necessary.

[corsacca]

@kodinkat brilliant work!!! Thank you. Awesome Job.