Signin Page
This shall be the initial page presented to the user when they navigate to our URL. It shall remain responsive and centered to the users screen irrespective of platform or screen resolution.
Main Body
background-color: #25282A;
Logo
vertical-align: middle; display: block; margin-left: auto; margin-right: auto; padding-bottom: 20px; width: 120px; height: auto;
Button
Primary Button Rules; width: 120px;
Hyperlinks
color: #0097A9;
Hover State - text-decoration: underline;
Copyright
color: #FFFFFF;
Outages
When MIP Advance is down for maintenance, the Signin Page will not display the Username and Password fields, but instead display a message stating it is down for maintenance.
General Characteristics
The MIP Advance logo, copyright and "Don't have an account?" hyperlink will display with the same background color as the Signin Page.
Main Text
font-size: 18px; font-family: Open Sans Semibold; color: #FFFFFF;
Secondary Text
font-size: 12px; font-family: Open Sans; color: #FFFFFF;
Dashboard
The Dashboard will be the first page that displays when the user logs into the application.
The top KPIs will be static, nothing will be clickable or functional. Tableau will be used to create all charts and graphs on the Dashboards. Any chart can be used, colors will represent the Abila colors. Some charts may have drill down ability to reach additional levels of information.
Multiple KPIs
Single KPI
Left Vertical Navigation
background-color: #383B3F; width: 200px; height: 100%; position: absolute;
Top Section
background-color: #FFFFFF; margin-left: 200px; margin-top: 0; position: fixed; top: 0; right: 0; left: 0; height: 40px; line-height: 3em;
Title Bar
background-color: #E1E4E6; height: 50px; text-align: left; overflow: hidden;
Main Body
background-color: #EDF0F2; padding: 15px; height: calc(100% - 50px); overflow-y: auto; overflow-x: hidden;
Data Entry
This page layout will accomodate data entry for a single item at a time. The Data Entry will be situated at the top, while a summary of any previously entered items will be in the center section.
Left Vertical Navigation
background-color: #383B3F; width: 200px; height: 100%; position: absolute;
Top Section
background-color: #FFFFFF; margin-left: 200px; margin-top: 0; position: fixed; top: 0; right: 0; left: 0; height: 40px; line-height: 3em;
Title Bar
background-color: #E1E4E6; height: 50px; text-align: left; overflow: hidden;
Main Body
background-color: #EDF0F2; padding: 15px; height: 100%; overflow-y: auto; overflow-x: hidden;
Data View Section
background-color: #FFFFFF; padding: 15px 10px; border: 1px solid #D4D8DA; border-radius: 3px; height: calc(100% - 50px); overflow-y: auto; overflow-x: hidden;
Data Entry with List Column
When the data entry piece requires a way to select options from a list the page will present. All options that can be selected will be listed in the Document List.
Left Vertical Navigation
background-color: #383B3F; width: 200px; height: 100%; position: absolute;
Top Section
background-color: #FFFFFF; margin-left: 200px; margin-top: 0; position: fixed; top: 0; right: 0; left: 0; height: 40px; line-height: 3em;
Title Bar
background-color: #E1E4E6; height: 50px; text-align: left; overflow: hidden;
List Column
Top Item - background-color: #FFFFFF; border-radius: 0; border-right: 1px solid #A1A5AB; border-top: 1px solid #A1A5AB; border-bottom: 1px solid #A1A5AB;
Remaining List - background-color: #E1E4E6; border-right: 1px solid #CDD8D8; height: 100%; display: block; position: fixed; width: 240px; padding: 0 0 90px; margin-left: 0;
Main Body
background-color: #EDF0F2; padding: 15px; height: calc(100% - 50px); overflow-y: auto; overflow-x: hidden;
Bottom Footer
height: 70px; border-right: 1px solid #CDD8D8; background-color: #E1E4E6; padding: 25px; position: relative;
Data Entry with Summary
This page will allow a section for a summary of a specified selection of items. Data can be entered or summarized on this page.
Left Vertical Navigation
background-color: #383B3F; width: 200px; height: 100%; position: absolute;
Top Section
background-color: #FFFFFF; margin-left: 200px; margin-top: 0; position: fixed; top: 0; right: 0; left: 0; height: 40px; line-height: 3em;
Title Bar
background-color: #E1E4E6; height: 50px; text-align: left; overflow: hidden;
Main Body
background-color: #EDF0F2; padding: 15px; height: calc(100% - 50px); overflow-y: auto; overflow-x: hidden;
Data View Section
background-color: #FFFFFF; padding: 15px 10px; border: 1px solid #D4D8DA; border-radius: 3px; height: calc(100% - 50px); overflow-y: auto; overflow-x: hidden;
Bottom Footer
height: 70px; border-right: 1px solid #CDD8D8; background-color: #E1E4E6; padding: 25px; position: relative;
Summary
background-color: #FFFFFF; border: 1px solid #e1e4e6; border-radius: 4px; max-width: 400px; height: auto; padding: 10px; position: relative;