Flex - Responsive Community Portal Theme

Introduction:

Flex is a new theme created by Synergetic, to create a responsive and more usable experience for users on mobile and smaller devices. It provides advanced layout techniques to repaint the current look and feel of the whole website.

Installation

Installation is very simple and can be completed with a few simple steps.  See Flex - Download and Installation

It is recommended you test the installation on a test server first, so that you can confirm the configuration is correct and become accustomed to the look and feel as well as test against a variety of devices to be sure you understand its Limitations

Important: Minimum Synergetic versions of 68.35 or 69.07 are required, to support the inclusion of Flex files for use in Community Portal.

Versioning

The latest release is included in Flex - Download and Installation

To locate the version you are currently using, open the flex.css file, the version information should be at the top of the file.

Release and support

Synergetic have provided Flex as a custom site content option for clients - it is not included as part of the standard product suite and is not covered by Synergetic support.

Updates to the Flex installation files may be sporadic and based on improvements or changes Synergetic decides to incorporate from time to time.

If changes are made by Synergetic to the download set, they will be updated on the page Flex - Download and Installation with Versioning reflecting this. 

It is recommended to watch Flex - Download and Installation as the Wiki will notify you of any updates so you can consider and incorporate in your Synergetic environment.

Feedback

Feel free to raise feedback or comments via our Discourse site - we want Flex to be a powerful and positive benefit for your implementation of our Community Portal and we may seek to incorporate some additional changes on occasion to maintain its value for our clients.

Customisation

Note: It is recommended that changes be made by someone at your site familiar with editing CSS content.

The Flex content makes use of a set of variables to determine the colour of the various aspects of the page.

If you wish to make further changes to either the colours, or to add additional CSS changes, you may do so to the file 'flex-custom.css' contained in the ..\Flex folder.  This file when downloaded contains a copy of the variables used for setting the colours in Flex.  By changing the colour values you can change the look and feel.

You will need to include the 'flex-custom.css' file in the Community Portal configuration (as a second entry after the flex.js entry).

While you can modify any of the files we have provided with Flex, it is recommended to not change the main files if possible - if there are any updates to the main files from Synergetic, you would be required to do a file compare against your versions to determine what changes were made and merge these with your own edits.

It is also recommended to confirm whether you have a custom CSS file in ..\Site\CSS as this could generate a clash in display behaviours.  

Limitations

Flex has been built as an overlay to the existing Community Portal pages, to allow a rapid delivery of a responsive style to clients without requiring significant changes to the Community Portal itself.  

Flex does therefore have some known limitations, either due to the nature of content as generated by the current Community Portal and/or due to technical capability of some browsers.

The following are the known limitations:

• Flex is not supported for Internet Explorer and Edge browsers (due to use of certain CSS features that Microsoft browsers have not yet adopted).  It is recommended users use Chrome, Firefox or Safari (Mac/iOS).  
  • When a Community Portal instance using Flex is loaded in Explorer or Edge, the Flex logic will detect this and will disable itself to allow Community Portal to render as per usual.
• Admin mode > Configurations link (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
• 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

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 (Mac/iOS) 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
        
• 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