designer

designer.html

<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.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-menu/core-submenu.html">
<link rel="import" href="../core-pages/core-pages.html">
<link rel="import" href="../core-animated-pages/core-animated-pages.html">
<link rel="import" href="../core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="../core-animated-pages/transitions/slide-down.html">
<link rel="import" href="../core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../core-animated-pages/transitions/tile-cascade.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/av-icons.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_scaffold {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
      }
      #core_header_panel {
        background-color: rgb(255, 255, 255);
      }
      #core_toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
      }
      #core_menu {
        font-size: 16px;
      }
      #topeka_profile {
        width: 300px;
        height: 300px;
      }
      #div3 {
        padding: 20px 16px;
      }
      #paper_checkbox {
        left: 1770px;
        top: 700px;
      }
      #div7 {
        width: 300px;
      }
      #check {
        color: rgb(240, 240, 240);
        background-color: rgb(79, 125, 201);
      }
      #max_attends_collapse {
        overflow: hidden;
      }
      #pages {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
      }
      .indent {
        padding: 3px 20px;
      }
      .page-card {
        width: 300px;
      }
      #core_animated_pages {
        width: 420px;
        height: 582px;
        overflow: hidden;
        background-color: rgb(238, 238, 238);
      }
    </style>
    <core-scaffold id="core_scaffold">
      <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
        <core-toolbar id="core_toolbar"></core-toolbar>
        <core-menu id="core_menu" valueattr="page" theme="core-light-theme" on-core-select="{{ selectPage }}">
          <core-item id="core_item" page="0" icon="home" label="Übersicht" horizontal center layout active></core-item>
          <core-item id="core_item1" page="1" icon="today" label="Kurse" horizontal center layout active></core-item>
          <core-item id="core_item2" page="2" icon="account-box" label="Teilnehmer" horizontal center layout></core-item>
          <core-item id="core_item3" page="3" icon="store" label="Orte" horizontal center layout></core-item>
          <core-item id="core_item4" page="4" icon="trending-up" label="Statistik" horizontal center layout></core-item>
        </core-menu>
      </core-header-panel>
      <div tool>Title</div>
      <div class="main" flex layout vertical>
        <core-pages id="pages" selected="1" notap>
          <div class="page-card card" layout vertical cross-fade="true" active>
            <div layout vertical flex>
              <div class="indent" layout vertical>
                <div class="header">Home</div>
              </div>
            </div>
          </div>
          <div class="page-card card" layout vertical cross-fade="true" active>
            <core-animated-pages id="course_pages" notap>
              <div id="div1" layout vertical flex active>
                <core-menu theme="core-light-theme" on-core-select="{{selectCourse}}">
                  <core-item id="core_item5" icon="today" label="Ein Kurs ein Kurs!" horizontal center layout hero hero-id="course"></core-item>
                  <core-item id="core_item6" icon="today" label="Lorem Kursm delendam esse" horizontal center layout hero hero-id="course"></core-item>
                  <core-item id="core_item7" icon="today" label="Kuchenbacken Anfänger 3" horizontal center layout hero hero-id="course" active></core-item>
                  <core-item id="core_item8" icon="today" label="Oberhemden Bügeln" horizontal center layout hero hero-id="course"></core-item>
                  <core-item id="core_item9" icon="today" label="Kochen 3" horizontal center layout hero hero-id="course"></core-item>
                </core-menu>
                <div id="div" horizontal center layout>
                  <div flex></div>
                  <paper-fab icon="add-circle-outline" id="paper_fab" on-tap="{{ newCourse }}"></paper-fab>
                </div>
              </div>
              <div layout vertical flex>
                <div class="header" hero hero-id="course">Der Kurstitel ist der Titel</div>
                <div horizontal center layout>
                  <div flex></div>
                  <paper-fab icon="check" on-tap="{{ newCourse }}"></paper-fab>
                </div>
              </div>
              <div layout vertical flex>
                <div class="indent" layout vertical>
                  <div class="header">Create new course</div>
                  <paper-input id="title" label="Course Title" floatinglabel></paper-input>
                  <paper-input multiline id="description" label="Enter a description" floatinglabel></paper-input>
                  <div left horizontal layout>
                    <div flex>Limit number of attendents</div>
                    <paper-toggle-button id="paper_toggle_button" on-change="{{ toggleMaxAttends }}"></paper-toggle-button>
                  </div>
                  <core-collapse id="max_attends_collapse" class="core-collapse-closed">
                    <paper-input type="number" min="1" id="max_attends" label="Maximum number of attendents" floatinglabel></paper-input>
                  </core-collapse>
                </div>
                <div horizontal center layout>
                  <div flex></div>
                  <paper-fab icon="check" id="check" on-tap="{{ saveCourse }}"></paper-fab>
                </div>
              </div>
            </core-animated-pages>
          </div>
        </core-pages>
      </div>
    </core-scaffold>
  </template>

  <script>

    Polymer('my-element', {
      toggleMaxAttends: function () {
        this.$.max_attends_collapse.toggle();
      },
      selectPage: function () {
        console.log(this.$.core_menu.selected);
        this.$.pages.selected = this.$.core_menu.selected;
      },
      selectCourse: function () {
        this.$.course_pages.selected = 1;
      },
      newCourse: function () {
        this.$.course_pages.selected = 2;
      },
      saveCourse: function () {
        this.$.course_pages.selected = 0;
      },
    });

  </script>

</polymer-element>