Banner

eodiro Banner is a new challenging UI design which is extending the original tile design of previous version of eodiro.

Tiles

A heart of identities of eodiro. It automatically generates the enough number of tiles by calculating the size of the Banner. It is only visible at home.

For more information, read Tiles.

Mini Mode

Apps pages when it is scrolled down and all the chilren pages under the Apps should use mini mode to deliver users a tidy experience.

intersectionObserver and Sentinel

A sentinel element is placed globally at a suitable distance from the top relatively to the Banner. Whenever it appears and disappears, an intersectionObserver observes its visibility and toggles mini mode.

How to apply forced mini mode?

Set an object key bannerMode to 'mini' inside the chilren pages. For these pages, the banner always stays as mini mode. This is necessary for children pages and you must always apply this option for all of them.

export default {
  meta: {
    bannerMode: 'mini'
  }
}

Default	Mini Mode

Sizes

Check _variables.scss partial.