FlexView API - Layout and Responsive Design ∞
The FlexView API uses a responsive layout for all overviews and all detail views.
Update (18th February 2016)The FlexView uses responsive Layouts for desktop and mobile.
The views are grouped by the following definition:
- the overview shows a set of tours, pois, huts, etc. and let’s the user filter it
- the detail view shows details to one object, e.g. a tour, a poi, etc.
- the fullscreen view is a mode of the overview or detail view that uses the whole viewport of the current browser window
The overview is available as gallery, list, map and map/list view:
The FlexView API lets you decide which views are used in your integration and which view is chosen on page load. The user may switch between all available views using the view buttons in the top left corner.
The detail view (both for “on page” or “detailpage” integration) uses a responsive layout.
The exact layout depends on the width of the surrounding HTML container (dom id ‘oax-top-cont’).
The FlexView API offers a fullscreen button in every view. The overview or detail view is expanded to the full size of the page’s browser window:
The fullscreen version of the detail view shows the chosen tour, POI, hut etc. on a map including additional information like an interactive elevation profile:
The FlexView API layout is based on a 12-column grid with a column width of 6,33% and a gap of 2%:
All layouts are based on this grid using areas with a different count of columns where it is necessary.
Goals and future development
The FlexView API is one of our most important components widely used in our products and by our partners and customers. We permanently put development and conception energy into FlexView API to improve usability and flexibility. A clear representation of object details like the length, duration and elevation information of a tour is an important goal.