Table of Contents
Installation
Installation is very simple and can be completed by yourself. See Flex - Responsive Community Portal skin
It is recommended that installation on a test server be completed first so that you can become accustomed to the look and feel as well as test against numerous devices to understand its Flex - Documentation
Important: Minimum versions of 68.35 or 69.07 are required.
Versioning
The latest release is included in Flex - Responsive Community Portal skin
To locate the version you are currently using, open the flex.css file, the version information should be at the top of the file.
Releases
There is no intention to have regular updates to these files.
If any are required they will be updated on the page Flex - Responsive Community Portal skin with Flex - Documentation reflecting this.
It is recommended to watch Flex - Responsive Community Portal skin as the Wiki will notify you of any updates.
Customisation
If you wish to make further changes to this you may do so to the file 'flex-custom.css' contained in the ..\Flex folder.
While you can modify any of the files contained, if there are any updated files from Synergetic you would be required to do a file compare to determine what changes were made and merge these with your own.
It is also recommended to confirm whether you have a custom CSS file in ..\Site\CSS as this will most likely clash.
Limitations
The following are the known limitations without making wholesale changes to the Community Portal code itself.
- Flex is not supported for Internet Explorer and Edge browsers. It is recommended users use Chrome, Firefox or Safari.
- Admin mode > Configurations (for Administrator logins)
- Recommended to use tablet or desktop browser
- If using a mobile phone, use landscape mode
- My Details page
- Custom HTML, both top and bottom appear at bottom of page
- Keys
- CommunityPortal|CustomHTML|MyDetails|Top
- CommunityPortal|CustomHTML|MyDetails|Bottom
- Keys
- Custom HTML, both top and bottom appear at bottom of page
- Custom page(s)
- Any custom pages will not inherit the Flex look and feel
- If you have any custom pages these will need to be updated manually
- Grid/Table implementation
- The following grids/tables may not be responsive and may require the user to scroll the screen to see all detail
- In most cases it is due to the size of the screen, e.g. when using a mobile phone
- The following grids/tables may not be responsive and may require the user to scroll the screen to see all detail
| Page | Comment |
|---|---|
| Results | Flexible, scrolling required due to size of data |
| Timetable | Flexible, scrolling required due to size of data |
Absences | Flexible, scrolling required due to size of data |
| Attendances | Flexible, scrolling required due to size of data Recommend landscape mode if using a phone |
Attendances Ext | Some tables are not flexible and data could be cut off |
| Finance | Flexible, scrolling required due to size of data |
Payment Plans - Partially | Flexible, scrolling required due to size of data Some information, e.g. Voluntary Contributions could be missed due to having to scroll |
| Manage Stored Cards | Flexible, scrolling required due to size of data |
| Make An Account Payment | Flexible, scrolling only required when selecting to pay by a stored card |
| Events | Flexible, scrolling required due to size of data |
| Interviews | Flexible, scrolling required due to size of data |
| Docs | Flexible, scrolling required due to size of data |
| Parent Contacts | Flexible, scrolling required due to size of data |
| Applications | Flexible, scrolling required due to size of data |
| Action Centre | Flexible, scrolling required due to size of data Recommend landscape mode if using a phone |
Recommendations
- Upgrade to a minimum version of 68.35 or 69.07
- Remove or test any additional site CSS changes you have made (..\Site\CSS)
- Use Chrome, Firefox or Safari web browsers
- Student Results page
- If displaying Markbook, check configuration key (CommunityPortal | Students | Results | Markbook | DisplayMode)
- Best look is DisplayMode: 2
- It is NOT recommended to have the following keys as TRUE due to display on phone/tables
- CommunityPortal | Students | Results | Markbook | ShowMarkOutOfFlag
- CommunityPortal | Students | Results | Markbook | ShowResultTypeFlag
- CommunityPortal | Students | Results | Markbook | ShowWeightingFlag
- If displaying Markbook, check configuration key (CommunityPortal | Students | Results | Markbook | DisplayMode)
- Events page
If pagination active, when attempting to select a button (right side of grid) in most cases the screen will select the next page
- Recommendation to increase size of paging (CommunityPortal|Events|Paging|Size)
FAQ
| Question | Answer | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| How is this supported? | At present, this is treated as customised functionality and will be supported using the same model. Feedback can be provided to support@synergetic.net.au for review and potential inclusion in future revisions. See Flex - Responsive Community Portal skin for updates | ||||||||||||||||||||
Why is there an initial display of the original Portal then the new Flex skin applied? | This is due to the Flex CSS being a skin on top of the original Community Portal. It was implemented this way to provide clients with a responsive Portal in rapid time, without requiring a high degree of change to the original code. | ||||||||||||||||||||
Why is this placed in the ..\Site\Flex folder and not in ..\Site\CSS folder to avoid the initial load of the non-flexible? | Due to some browsers code base not supporting this (for example Internet Explorer/Edge) detection of the browser is required. If it was placed in the Site\CSS folder it would apply to all browsers. | ||||||||||||||||||||
Can I make further changes to this? | Yes, see Flex - Documentation | ||||||||||||||||||||
I have the Pacific - A Community Portal CSS Theme applied? | It is highly recommended to remove this theme as there will be clashes between the two.
| ||||||||||||||||||||
What testing was completed on this? | Each page was tested against Functionality and Usability
| ||||||||||||||||||||
Is there an easy way to see how it would look on most devices? | Many browsers can emulate the look and feel of multiple devices. Below is one way to do this using the Chrome browser Please note: This is emulation and not exactly true to how the actual device will operate
|
