plumes/features/layouts/html/pl-layout-platform.html

Flying-fast Metro future vision components

<div class="pl-layout-platform {{screen}}">

  <header
    class="pl-layout-platform-header {{titleEmpty ? 'empty' : ''}} {{titleShowed ? 'show' : ''}}"
    style="
      left: {{titleLeft}}%;
      margin-left: {{titleLeftOffset}}px
    "
  >
    <div
      class="pl-layout-platform-title-bg {{titleOpened ? 'opened' : ''}}"
      style="
        margin-left: -{{titleBgLeftOffset}}px;
        width: {{titleBgWidth}}px;
        height: {{titleBgHeight}}px;"
    ></div>

    <rv-require
      name="pl-dropdown-title"
      class="pl-layout-title {{titleOpened ? 'opened' : ''}}"
      src="../dropdowns/pl-dropdown-title"
      data-placeholder="Apps"
      data-bind-titles="apps"
    ></rv-require>
  </header>

  <div class="pl-layout-platform-context-left" style="width: {{leftContextWidth}};">
    <rv-require
      data-pl-name="context-left"
      name="pl-context-panel"
      src="../context-panel/pl-context-panel"
      class="pl-context-panel-require media-mobile"
      data-use-leftcross="true"
      data-bind-on-cross="crossleftcontext"
      data-bind-title="contextlefttitle"
      data-bind-use-title="contextleftusetitle"
    >
      <rv-partial target="panels">
        {{> context-left-panels}}
      </rv-partial>
    </rv-require>
  </div>

  <div class="pl-layout-platform-context-right" style="width: {{rightContextWidth}};">
    <rv-require
      data-pl-name="context-right"
      name="pl-context-panel"
      src="../context-panel/pl-context-panel"
      class="pl-context-panel-require media-mobile"
      data-use-rightcross="true"
      data-bind-on-cross="crossrightcontext"
      data-bind-title="contextrighttitle"
      data-bind-use-title="contextrightusetitle"
    >
      <rv-partial target="panels">
        {{> context-right-panels}}
      </rv-partial>
    </rv-require>
  </div>

  <div class="pl-layout-platform-flyout-left">
    <rv-require
      data-pl-name="buttons-left"
      name="pl-grouped-buttons"
      src="../grouped-buttons/pl-grouped-buttons"
      data-bind-buttons="buttonsleft"
      data-orientation="left"
    ></rv-require>
  </div>

  <div class="pl-layout-platform-flyout-right">
    <rv-require
      data-pl-name="buttons-right"
      name="pl-grouped-buttons"
      src="../grouped-buttons/pl-grouped-buttons"
      data-bind-buttons="buttonsright"
      data-orientation="right"
    ></rv-require>
  </div>

  <div class="pl-layout-platform-content-template" style="left: {{contentLeft}}; right: {{contentRight}};"></div>

  <div class="pl-layout-platform-content {{contentMedia}}" style="left: {{contentLeft}}; right: {{contentRight}};">
    {{> content}}
  </div>

  {{#if usemask}}
  <div class="pl-layout-mask"></div>
  {{/if}}

  <rv-require
    name="pl-screen-message"
    src="../screen-message/pl-screen-message"
    ondemand="pl-screen-message"
  ></rv-require>
</div>