bracketryjs

Visualize a knockout tournament in the browser

Layout for small screens

Here's how you can tweak the Bracketry options for mobile devices.

Example "mobile" options

...
const options = {
    navButtonsPosition: 'beforeTitles',
    visibleRoundsCount: 1,
    leftNavButtonHTML: `
< PREV ROUND
`,
    rightNavButtonHTML: `
NEXT ROUND >
`,
    roundTitlesFontSize: 26,
    roundTitlesVerticalPadding: 4,
    matchFontSize: 14,
    matchHorMargin: 14,
    distanceBetweenScorePairs: 10,
    getEntryStatusHTML: () => '',
    disableHighlight: true,
    verticalScrollMode: 'mixed',
    scrollButtonPadding: 0px,
    maxMatchWidth: 360
}

createBracket(your_data, your_wrapper_element, options)

Adjust options depending on screen size

A. The most straighforward and practical approach is to initialize Bracketry with different options depending on the screen size:

const isNarrow = window.innerWidth < 700
const options = isNarrow ? yourMobileOptions : yourDesktopOptions
const bracket = createBracket(your_data, your_wrapper_element, options)

This is of course imperfect; later changes to the viewport size won't change Bracketry layout.

B. If you need more responsiveness, use applyNewOptions method to adjust the options whenever necessary. In this scenario getUserOptions can also be useful.

Provide flexible styles

No matter which layout you choose, it's always a good idea to make your wrapper element flexible. First of all, make sure that this element (that in which bracket is installed) has a style of { max-width: 100vw } or something of this sort. By default Bracketry will take 100% of your wrapper's width and height so it will shrink on a narrow screen (if your wrapper is flexible).