clinical-meteor/active-layout

clinical:active-layout

Layout templates with keybindings and animations.

===============================

Installation

meteor add clinical:active-layout

===============================

Design Tutorial

See the tutorial to get started!
Designing a Card UI for Universal Apps

===============================

Configuration

Meteor.startup(function (){
  ActiveLayout.configure({
    help: {
      link: "/menu",
      text: "Menu"
    },
    classes: {
      header: "",
      title: "",
      links: ""
    },
    text: {
      title: "",
      logout: "Logout"
    },
    fence: {
      north: 50,
      south: 0,
      east: 270,
      west: 270
    },
    defaults: {
      showNavbars: true,
      showSidebar: true,
      showSearchbar: false,
      useHierarchicalLayout: false,
      mainPanelIsCard: false,
      wideCard: true,
      useCardLayout: false,
      hasPagePadding: false,
      symmatricalPadding: false,
      hasPageVerticalPadding: false,
      useHorizontalFences: false,
      useVerticalFences: true,
      navIsFullscreen: true,
      fullscreenNavbars: false,
      fullscreen: false,
      secondPanelEnabled: false,
      appSurfaceOffset: true,
      useEastFence: true,
      pageWhite: true
    }
  });
});

Router.configure({
  layoutTemplate: 'appLayout',
  yieldTemplates: {
    'sidebar': {
      to: 'westPanel'
    },
    'searchBar': {
      to: 'globalInput'
    },
    'configListModal': {
      to: 'modalA'
    }
  }
});

===============================

Default Properties

showNavbars Slide the NavbarHeader and NavbarFooter into the ViewPort and display their respective contents. This simply adjusts the top/bottom location of the navbars. If you don't want a navbars rendered at all, you can omit them from the Router map.

showSearchbar Slide the Searchbar into the ViewPort and display it's contents.

showSidebar Slide the WestPanel into the ViewPort and display it's contents. This simply adjusts the left location of the sidebar. If you don't want a sidebar rendered at all, you can omit it from the Router map.

useHierarchicalLayout
When set, the second page will be offset by 50px, creating a hierarchical layout. Used for Star Trek and Minority Report layouts.

useHorizontalFences
Override the default layout logic, and use the East/West fence settings.

useVerticalFences Override the default layout logic, and use the North/South fence settings.

===============================