designer

designer.html

<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-icons/iconsets/av-icons.html">
<link rel="import" href="../paper-fab/paper-fab.html">

<polymer-element name="my-element" attributes="mainToolbarClass">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      }
      #core_drawer_panel {
        position: absolute;
        top: 0px;
        left: 0px;
      }
      #main_section {
        background-color: rgb(250, 250, 250);
      }
      #main_toolbar {
        right: 0px;
        color: rgb(255, 255, 255);
        fill: rgb(255, 255, 255);
        background-color: rgb(44, 168, 244);
      }
      #main_header {
        font-size: 32px;
        margin-bottom: 60px;
      }
      #drawer_section {
        box-sizing: border-box;
        background-color: rgb(235, 235, 235);
      }
      #drawer_toolbar {
        right: 0px;
        color: rgb(255, 255, 255);
        fill: rgb(255, 255, 255);
        background-color: rgb(25, 155, 222);
      }
      #drawer_header {
        margin-bottom: 60px;
      }
      #sprint_selector {
        font-size: 13px;
        opacity: 0.7;
      }
      #new_story_button {
        left: 0px;
        top: 160px;
        position: absolute;
        z-index: 1000;
        background-color: rgb(44, 254, 254);
      }
      .my_hidden {
        display: none;
      }
    </style>
    <core-media-query query="max-height: 600px" id="mini_media"></core-media-query>
    <core-drawer-panel selected="main" id="core_drawer_panel" class="right-drawer" flex>
      <section id="main_section" main horizontal layout>
        <core-header-panel mode="waterfall-tall" id="main_header_panel" flex>
          <core-toolbar id="main_toolbar" class="tall animate">
            <paper-icon-button icon="menu" id="core_icon_button"></paper-icon-button>
            <div id="main_icon_group" flex horizontal layout reverse>
              <paper-icon-button icon="help" id="help_button"></paper-icon-button>
              <paper-icon-button icon="view-module" id="view_button"></paper-icon-button>
              <paper-icon-button icon="search" id="search_button"></paper-icon-button>
            </div>
            <div id="main_header" class="bottom indent" flex horizontal layout center>
              <paper-icon-button icon="star-outline" id="star"></paper-icon-button>
              <span>Q3 OKRs</span>
              <core-icon size="42" icon="chevron-right"></core-icon>
              <span>Wipeout</span>
            </div>
            <paper-fab icon="add" id="new_story_button" on-click="{{clickHandler}}"></paper-fab>
          </core-toolbar>
          <div id="stuff" flex>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
            <p>backlog goes here</p>
          </div>
        </core-header-panel>
      </section>
      <section id="drawer_section" drawer horizontal layout>
        <core-header-panel id="drawer_header_panel" mode="waterfall-tall" flex>
          <core-toolbar id="drawer_toolbar" class="tall animate">
            <div id="drawer_icon_group" flex horizontal layout reverse>
              <paper-icon-button icon="more-vert" id="core_icon_button"></paper-icon-button>
            </div>
            <div id="drawer_header" flex class="bottom indent">
              <span>Code Monkeys</span>
              <div id="sprint_selector">
                <span>Sprint 76</span>
                <core-icon icon="arrow-drop-down"></core-icon>
              </div>
            </div>
          </core-toolbar>
          <div id="more_stuff" flex>
            <p>sprint goes here</p>
          </div>
        </core-header-panel>
      </section>
    </core-drawer-panel>
  </template>

  <script>

    Polymer('my-element', {
    });

  </script>

</polymer-element>