Opta: Widget Component Library

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