designer

designer.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-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="../paper-input/paper-input.html">
<link rel="import" href="../core-media-query/core-media-query.html">

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

  <template>
    <style>    
      :host {
        
      }
      #core_animated_pages {
        
      }
      #section, #section1 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background:"yellow";
      }
      .red
      { 
        font-size:20px;
      }
      .blue
      { font-size:20px;
      }
    </style>
    <core-media-query query="min-width: 640px" queryMatches={{media1Active}} on-core-media-change="{{phoneScreen}}"></core-media-query>
    <paper-icon-button icon="menu" id="paper_icon_button" on-tap="{{ myFunc1 }}"></paper-icon-button>
    <core-animated-pages selectedindex="0" notap id="core_animated_pages" one flex class={{(media1Active==false?"red":"blue")}} transitions="slide-up slide-down">
      <section id="section" active vertical layout one flex >
        <core-card slide-down height="100%">
        <ul>
          <template repeat="{{s in myData}}">
            <core-card id="card1" layout>
            <Label one flex>{{s.name}}</Label>
            <paper-input label="Type something..." willvalidate id="paper_input" layout vertical value="{{s.value}}"  one flex style="overflow:hidden"></paper-input>
            </core-card>
          </template>
        </ul>
        </core-card>
      </section>
      <section id="section1"   vertical layout one flex>
        <table style="width:100%" slide-up>
          <template id="template1" repeat="{{c in myData}}">
            <tr  layout horizontal>
                <td one flex>{{c.name}}</td>
                <td one flex>{{c.value}}</td>
            </tr>
          </template>
        </table>
      </section>
    </core-animated-pages>
  </template>

  <script>

      Polymer('my-app1', {
        media1Active:false,
          myFunc1: function () {
              if (this.$.core_animated_pages.selected==0)
                  this.$.core_animated_pages.selected = 1;
              else {
                  this.$.core_animated_pages.selected = 0;
              }
          },
        myData:[
        {
            "name": "One",
            "value": "-"
        },
        {
            "name": "Two",
            "value": "-"
        },
        {
            "name": "Three",
            "value": "-"
        },
        {
            "name": "Four",
            "value": "-"
        }],
        phoneScreen:function(){
          var elements = this.$.section.querySelectorAll("#card1")
          if(this.media1Active == false){
            for(var i=0 ;i<elements.length;i++){
          		elements[i].removeAttribute("horizontal");
            }
          }
          else{
            for(var i=0 ;i<elements.length;i++){
          		elements[i].setAttribute("horizontal", "horizontal");
            }
          }
        }
      });

  </script>

</polymer-element>