Sub title tbc...
1
To be defined...
Widget Component Library Suitable for US and V3 Widgets
1
Last Update: 20 Nov 15
About This Document
Component Rules This document offers detailed views of individual components. You should be able to see how components behave in different situations. Most components adhere to the rules specified in the ‘Widget style guidelines’ document. However there are often slight exceptions to these rules, examples of this will appear in this document. Explanations in this document are brief. Detailed explanations about components design can be found in the ‘Opta Widget Styleguide’ document.
2
Last Update: 20 Nov 15
Contents
Widget Title and Header...............................p4
Tooltips.........................................................p24
Table Header Cards.....................................p40
Navigation - Tabs..........................................p5
Match Header...............................................p26
Profile Widget...............................................p42
Navigation - Accordions................................p7
Fixture..........................................................p28
Ticker Widget................................................p43
Navigation - Dropdowns...............................p11
Fixture Widget..............................................p30
Opta Facts....................................................p45
Table Styles..................................................p13
Chart Styles..................................................p31
Form.............................................................p46
Table Column Headers.................................p17
Graph Styles.................................................p32
Timebar........................................................p47
Team Lists....................................................p18
Rankings......................................................p37
Graphical Widget Icons................................p50
Select Boxes................................................p21
3
Last Update: 20 Nov 15
Widget Title and Header
Narrow Mode
Narrow Mode
(using mobile style sheet)
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
1. The Widget Title. 2. Widget Title with tab navigation.
1
3. Widget Title with header dropdown, however tabs are preferred. 2
3
4
Last Update: 20 Nov 15
Navigation - Tabs
Narrow Mode (using mobile style sheet)
1. 2 tabs. 2. 3+ tabs use a ‘•••’ button including the 3rd tab and reveal a dropdown list on click.
1 2
3. Active tab is within the dropdown and revealed when the ‘More’ Button is clicked.
3
5
Last Update: 20 Nov 15
Navigation - Tabs Normal Mode (using desktop style sheet)
1. Tabs are left aligned across 1 row. 2. Tabs split across 2 rows when there are too many to fit on 1 row. 3. When there is a tab with a long name which doesn’t fit on the 1st line, it drops onto a new line.
1 2
3
4. To keep tabs on a single line use a ‘More’ tabs button. 5. Active tab is within the dropdown and revealed when the ‘More’ Button is clicked.
4
5
6
Last Update: 20 Nov 15
Navigation - Accordions
Narrow Mode (using mobile style sheet)
1
1. Standard accordion. 2. Checklist accordion.
2
7
Last Update: 20 Nov 15
Navigation - Accordions 3. A ‘Mini Chevron’ used as a secondary dropdown. 4. ‘Mini Chevron’ when clicked expands to reveal a widget. Depending on which alternate row is expanded this determines the background colour of the revealed widget
3
4
8
Last Update: 20 Nov 15
Navigation - Accordions Normal Mode (using desktop style sheet)
1
1. Standard accordion. 2. Checklist accordion.
2
9
Last Update: 20 Nov 15
Navigation - Accordions 3. A ‘Mini Chevron’ used as a secondary dropdown. 4. ‘Mini Chevron’ when clicked expands to reveal a widget.
3
4
10
Last Update: 20 Nov 15
Navigation - Dropdowns
Narrow Mode (using mobile style sheet)
1
1. Dropdown tabs closed by default. Click to open and show component. 2. When a component opens over another component e.g. a team list over a pitch, the elements (excluding text) will become 90% transparent.
2
11
Last Update: 20 Nov 15
Navigation - Dropdowns Normal Mode (using desktop style sheet)
1
1. Dropdown tabs closed by default. Click to open and show component. 2. When a component opens over another component e.g. a team list over a pitch, the elements (excluding text) will become 90% transparent.
2
12
Last Update: 20 Nov 15
Table Styles
Narrow Mode (using mobile style sheet)
1
3
2
4
1. Standard table. 2. Standard table with sort. 3. Table with primary and secondary text. 4. Table with primary and secondary text, only displaying one stat.
13
Last Update: 20 Nov 15
Table Styles 5. Table with a ‘Change’ stat button. 6. Table with links.
5
8
7. Table with a rankings header. 8. Table with bars and a rankings header.
6
7
14
Last Update: 20 Nov 15
Table Styles Normal Mode (using desktop style sheet)
1
1. Standard table with scrolling. 2. Standard table with sort. 3. Table with left aligned columns. 4. Table with evenly spaced columns.
2
3
4
15
Last Update: 20 Nov 15
Table Styles 5. Table with primary and secondary text. Displaying data both stacked and side by side
5
6. Table with primary and secondary text side by side only. 7. Table with primary and secondary text, player images, links.
6
8. Table with a rankings header.
7
8
16
Last Update: 20 Nov 15
Table Column Headers
Narrow Mode (using mobile style sheet)
1
1. Scrollable table column headers. 2. Scrollable table column headers with sort.
2
3. Header with only one stat column. 4. Header with a ‘Change’ stat button.
3
4
Normal Mode (using desktop style sheet)
1
1. Scrollable table column headers. 2. Left aligned column headers. 3. Evenly spaced table column headers.
2
3 17
Last Update: 20 Nov 15
Team Lists
Narrow Mode (using mobile style sheet)
1
1. Team player check lists with primary and secondary text. 2. Team player check lists with primary text only.
2
18
Last Update: 20 Nov 15
Team Lists 3. Team player lists with primary and secondary text 4. Team match events list.
3
4
19
Last Update: 20 Nov 15
Team Lists Normal Mode (using desktop style sheet)
1
1. Team player check lists with primary and secondary text. 2. Team player check lists with primary text only. 3. Team player lists with primary and secondary text 4. Team match events list. Works both in white and light background grey.
2
3
4
20
Last Update: 20 Nov 15
Select Boxes
Narrow Mode (using mobile style sheet) & Normal Mode (using desktop style sheet)
1
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
1. The button changes on the select box depending on what state it is in. • Active select box: active blue • Clickable select box: inactive grey • Non-clickable select box: 50% opacity • Open select box: Dark background grey Within an open select box, it will appear like the default browser menu dropdown.
21
Last Update: 20 Nov 15
Select Boxes Narrow Mode (using mobile style sheet)
1
1. Select boxes stack when there is more than 1. 2. Select Boxes appear centralised and only 1 can be opened at a time.
22
2
Last Update: 20 Nov 15
Select Boxes Normal Mode (using desktop style sheet)
1
1. 1 select box set at 100 % width. 2. 2 select boxes 50% each with 10px padding between.
2
3. 1 select box open. 1 select box active. 3
23
Last Update: 20 Nov 15
Tooltips
Narrow Mode (using mobile style sheet) & Normal Mode (using desktop style sheet) 1. Basic Tooltip.
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
1
2. Detailed Tooltip. 3. Player card Tooltip.
2
3
24
Last Update: 20 Nov 15
Tooltips 4. ‘Topps’ style cards w/ country flag. 5. ‘Topps’ style cards w/ country name.
4
5
25
Last Update: 20 Nov 15
Match Headers
Narrow Mode (using mobile style sheet)
1
Pre-Match
During/Post-Match
Aggregate and Penalties
1. Match headers. 2. Match header with long names. 3. Match header with information box. 2
3
26
Last Update: 20 Nov 15
Match Headers Normal Mode (using desktop style sheet)
1
Pre-Match
1. Scoreboard with team crests. 2. Scoreboard with no team crests. 3. Scoreboard with team crests and information box.
During/Post-Match
Aggregate and Penalties
2
3
27
Last Update: 20 Nov 15
Fixture
Narrow Mode (using mobile style sheet) & Normal Mode (using desktop style sheet) 1. Mini-scoreboard.
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
1
2. Mini-scoreboard with an information box. 3. Mini-scoreboard card including an information box. 4. Mini-scoreboard card including an information box and events.
2
3
4
28
Last Update: 20 Nov 15
Fixture 5. Mini-scoreboard with aggregate scores and penalties plus the information block.
29
5
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
Last Update: 20 Nov 15
Fixture Widget
Narrow Mode (using mobile style sheet) & Normal Mode (using desktop style sheet)
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
1
1. Fixture strip-view including match page links. Inactive match page links are 50% opacity. 2. Fixture cards.
2
30
Last Update: 20 Nov 15
Chart Styles
Narrow Mode (using mobile style sheet) & Normal Mode (using desktop style sheet)
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
1
1. Big number stats. 2. Pie chart. 3. Horizontal bar chart. 4. Horizontal bar chart 2 teams.
2
3
4
31
Last Update: 20 Nov 15
Graph Styles
Narrow Mode (using mobile style sheet)
1
2
1. 2-way line graph. 2. 2-way bar graph.
32
Last Update: 20 Nov 15
Graph Styles Normal Mode (using desktop style sheet)
1. 2-way line graph. 2. 2-way bar graph.
1
33
2
Last Update: 20 Nov 15
Graph Styles Narrow Mode (using mobile style sheet)
1
3
2
4
1. 2 team bar graph. 2. 2 team bar graph with sections e.g. Basketball match quarters. 3. 2 team line graph. 4. 2 team line graph with sections e.g. Basketball match quarters.
34
Last Update: 20 Nov 15
Graph Styles Normal Mode (using desktop style sheet)
1. 2 team bar graph. 2. 2 team bar graph with sections e.g. Basketball match quarters.
1
35
2
Last Update: 20 Nov 15
Graph Styles Normal Mode (using desktop style sheet)
3. 2 team line graph. 4. 2 team line graph with sections e.g. Basketball match quarters.
3
36
4
Last Update: 20 Nov 15
Rankings
Narrow Mode (using mobile style sheet) & Normal Mode (using desktop style sheet)
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
1
Rankings header Most commonly used in the player rankings widget. Suitable when there is joint top ranked players 1. Feature table header everything switched on. 2. Only primary and secondary text switched on. 3. Only primary text switched on.
2
Team Crest 3
37
Last Update: 20 Nov 15
Rankings Large Rankings header Most commonly used in the player rankings widget. Suitable when there is only one top ranked player.
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
4
4. Everything switched on including links. 5. Player image, primary and secondary text switched on. 6. Only primary and secondary text switched on. 7. Only primary text switched on. 5 Team Crest
6
7
38
Last Update: 20 Nov 15
Rankings 8. Feature header used when the table has more columns.
8
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
9. Bars can be used within a mobile table. The desktop alternative is to use a bar graph with player cards. Team Crest 9
39
Last Update: 20 Nov 15
Table Header Cards
Normal Mode (using mobile style sheet) & Normal Mode (using desktop style sheet)
1
A
4
B
2
A
5
A
3
A
1. 1 player card. 2. 2 player cards. 3. 3 player cards. 4. 6 player cards (max amount) 5. Bar graph with player cards.
A
40
B
Last Update: 20 Nov 15
Table Header Cards 6. 1 player compare. 7. 6 players compare.
6
7
41
Last Update: 20 Nov 15
Profile Widget
Narrow Mode (using mobile style sheet) & Normal Mode (using desktop style sheet)
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
1
1. Team profile component. 2. Player profile component.
2
42
Last Update: 20 Nov 15
Ticker Widget
Narrow Mode (using mobile style sheet) & Normal Mode (using desktop style sheet)
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
1
1. Standard ticker. 2. Standard ticker including league names.
2
43
Last Update: 20 Nov 15
Ticker Widget 3. Strip-view ticker.
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
3
44
Last Update: 20 Nov 15
Opta Facts Widget
Narrow Mode (using mobile style sheet) & Normal Mode (using desktop style sheet)
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
1
1. Opta fact.
45
Last Update: 20 Nov 15
Form
Narrow Mode (using mobile style sheet) & Normal Mode (using desktop style sheet) 1. Clickable form bar.
Narrow Mode
(using mobile style sheet)
Normal Mode
(using desktop style sheet)
1
2. Form displayed within a table. Colours
2
#E20023 #59AB25 #CCCCCC
46
Last Update: 20 Nov 15
Timebar
Narrow Mode (using mobile style sheet)
1
1. The dimensions of the elements within the timeline component. 2. A timebar with no events. 3. A timebar with event icons.
2
3
47
Last Update: 20 Nov 15
Timebar Normal Mode (using desktop style sheet)
1
1. The dimensions of the elements within the timeline component. 2. A timebar with no events. 3. A timebar with event icons. 2
3
48
Last Update: 20 Nov 15
Timebar Narrow Mode (using mobile style sheet) & Normal Mode (using desktop style sheet)
1
Narrow Mode
(using mobile style sheet)
1. Timeline.
Normal Mode
(using desktop style sheet)
49
Last Update: 20 Nov 15
Graphical Widget Icons
Narrow Mode (using mobile style sheet) & Normal Mode (using desktop style sheet) Event icons are used to represent plays. This example shows the event list used within the football chalkboard widget.
50
Last Update: 20 Nov 15