Design Overview
There are various options available in the Mosino Manager Portal to allow the property admin or marketing team to customize the application, layout and design elements.
The options are broken down into 2 categories: Services and Overall Design.
To access the services feature head to the "General" icon and select the "Services" tab.These are all tiles/services available within the application. These services can be turned on/off and customized in terms of size, position, content etc.
Each services has various properties that can be used to modify it's appearance:
Size: 1, 2, 4 sizes are available.
Background Type
Highlight: this selects the information from the service to design the tile. For example, if the service tile is for restaurants and highlight option is selected, the system will pick the first or the feature restaurant and use it's image, title, and description (Size 4 only) and design the tile.
Color: this simply allows the user to select a static color.
Image: allows the user to select/upload an image to design the tile.
Background Color: this option allows us to user to select whether the tile static color will be a gradient or a simple color only.
Service Large Icon: this is the icon that appears on the tile and any other page when the tile is clicked.
Note: if you remove the icon for any service, the design for the tile will change and center-align the label.
This is an example of a tile with the icon and one without.
Various other options exists, including which service tile will be enabled on each device. For example, if a tile "Account" is to appear on a mobile device but not on the intercom, simply selecting "No" for "Allow On Intercom" will disable it on any intercom for that property.
Button Language: this tab in the service information panel allows the user to enter different tile for each language to ensure the customer's language is used when showing the service tile name.
Overall Design
The Manager Portal has various options to customize the design of the application for it to match the the customer's property design or marketing requirements. To set up design feature, Go to the "General" icon and select the "Operator" tab. Proceed to use the scroll wheel at the top of the page and select the "Design" Tab.
Click the Add New or an existing tile to design the application. There are various options/properties for the design. First enter the Name and Description for the design as a user can create multiple designs.
Here are the list of options and what changes they offer.
Start / End Dates
Enter the starting and ending dates allows the user to create different designs and schedule them. These are optional. If no dates are entered, it's assumed to be the main design. In case, a design is made for various events/causes/campaign, Starting and Ending dates should be used to ensure, once the period is finished, the original design automatically becomes the principle design again.
Menu / Menu bar Style
This allows the user to decide if the menu bar should be the hamburger that slides from the side or a more general/traditional menu bar at the bottom of the application. If menu bar is selected, the position of the bar can also be selected between the following options:
Floating Menu bar: a menu bar that follows along the page as you scroll.
Fixed Menu bar: a menu bar that stays fixed on the page.
Side menu bar (Hamburger): a menu bar that is fixed to the side and once selected will show all menu options.
Highlight
This is the section on top of the screen that displays the greeting message and the background image of the property. This can be either placed as fixed or floating or simply turned off which removes it from the screen.
Floating
Fixed
Theme
The application can be 2 themes: light and dark. However, the user can set the value to either light or dark which is used as a default theme for all users that can be changed in the profile menu of the app by the customer. However, a property manager can force one or the other theme. In such cases, the app will not provide an option for the customer.
Font Family
The system currently offers 2 font family options to allow the user to set their own font. The font family is the general font used across the application. The Font Family (Title) is generally used for titles, larger headings in the app.
Important: the font needs to be a hosted link, publicly available as well as it needs to be in the .woff2 format.
Examples where Title Font is used
Examples where general font is used
Button Color (Panels)
This is the color used for any button inside panels or content box.
Button Color (Page)
This the color used for any button embedded inside a page as opposed to be an action button inside a panel or a content box.
Background Color (Page)
This is the color that is used as a background color of the application or any page except for the panels and content box.
Icon Background Color
This is the color used for various icons within the application that shows categories such as issue request groups, smart objects page etc.
Float Button
This is the color used for any button that generally float at the bottom right corner of the application.
Label Color / Label Color (Selected)
This is the color used for various labels within the application, generally for forms labels. The selected color is shown when the label is active or is in focus, generally, when the associated input field is being filled in a form.
Tab Label Color / Tab Label Color (Selected)
This is the color used for all tabs inside the application. Any page with various tabs that sort/separate content, it has 2 colors: the default color and the selected color.
Notification Label Color
This is the color that is used for the notification alert messages to highlight an important message, warning.
Lock Screen
This allows the mobile application to show the Lock screen when the app is loaded or opened. The lock screen shows the general greeting message and the notification count.
Quick link bar
This allows the user to show/hide the the quick link bar in the app. If the option is enabled, it shows the quick link bar and any services marked as Quick link in Services page.
Quick link bar enabled
Quick link bar hidden
