How to Adapt an Add-on to Work with Responsive Admin Panel

With the rise of mobile device usage, Venddor IO introduced a Responsive Admin Panel [Beta] in its 4.7.3 release. This guide is crafted for developers who have modules that modify the Administration panel, helping them adapt to this new functionality.

While currently the responsive design for the Admin panel is offered as an add-on and isn't a default setting, the intent is to eventually integrate it fully into the Venddor IO core.

Key Changes to Note:

Styles Directory: Styles are compartmentalized into individual files found in the css/tygh directory. The styles.less file serves as a primary index, incorporating various .less files. Numerous subdirectories house specific styles, including icons/, modals/, navbars/, pages/, responsive/, ui_base/, and utils/.
LESS Configuration: A config.less file has been added, serving as a repository for LESS variables. This file is a go-to for understanding available variables.
Screen Width Checking in JS: A new function, matchScreenSize(), has been introduced to detect screen width.

Affected Elements Include:

Tables: A significant aspect of the adaptation pertains to table adjustments.
Titles: On mobile displays, page titles will be abbreviated for clarity and space.
Sidebar: By default, the sidebar is hidden on mobile devices, appearing only when called.
Mobile Menu: This is already responsive, ensuring backward compatibility.

Steps for Adaptation:

Page Titles:

For instance, for a product editing page with the title "Editing product: My Product", on mobile, it should display as "My Product". The action descriptor is eliminated to keep it concise.

Pop-Up Window Titles:

Similar to page titles, the nomenclature remains consistent, but the template to adjust is common/popupbox.tpl.

Tables Adaptation:

Wrapping: Begin by encapsulating your table within a table-responsive-wrapper.
Responsive Class: Integrate the table-responsive class to the <table> tag.
Data Attributes: Each table cell should be furnished with a data-th data attribute to indicate its respective header.

Utilizing the New core.js Function:

Use the $.matchScreenSize function to gauge screen width and respond with the appropriate layouts.

Concluding Notes:

The adoption of the Responsive Admin Panel reflects Venddor IO's commitment to user experience and device versatility. By following the outlined steps, module developers can ensure that their creations seamlessly align with the evolving platform, guaranteeing a cohesive and optimized interface for end-users.