Skip to content

Instantly share code, notes, and snippets.

@zek

zek/designer.html

Last active August 29, 2015 14:16
Download ZIP

Revisions

  1. zek revised this gist Mar 12, 2015. 1 changed file with 20 additions and 12 deletions.
    32 changes: 20 additions & 12 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    <link rel="import" href="../core-icon-button/core-icon-button.html">
    <link rel="import" href="../core-toolbar/core-toolbar.html">
    <link rel="import" href="../paper-tabs/paper-tabs.html">
    <link rel="import" href="../paper-tabs/paper-tab.html">

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

    @@ -23,21 +23,29 @@
    top: 170px;
    position: absolute;
    }
    #core_toolbar {
    right: 0px;
    left: 0px;
    color: rgb(255, 255, 255);
    fill: rgb(255, 255, 255);
    #section1 {
    width: 420px;
    height: 630px;
    border: 5px solid rgb(204, 204, 204);
    left: 160px;
    top: 0px;
    position: absolute;
    background-color: rgb(79, 125, 201);
    }
    #paper_tabs {
    color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
    background-color: rgb(0, 188, 212);
    }
    </style>
    <section id="section"></section>
    <core-toolbar id="core_toolbar">
    <core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
    <div id="div" flex>Toolbar</div>
    </core-toolbar>
    <section id="section1" layout vertical>
    <paper-tabs noink nobar selected="1" selectedindex="1" id="paper_tabs" horizontal center layout>
    <paper-tab id="paper_tab" inline flex center-center horizontal layout>ITEM ONE</paper-tab>
    <paper-tab id="paper_tab1" inline flex center-center horizontal layout active>ITEM TWO</paper-tab>
    </paper-tabs>
    <section id="section2" flex relative>
    </section>
    </section>
    </template>

    <script>
  2. zek revised this gist Mar 12, 2015. No changes.
  3. zek revised this gist Mar 12, 2015. 1 changed file with 28 additions and 1 deletion.
    29 changes: 28 additions & 1 deletion designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    <link rel="import" href="../polymer/polymer.html">
    <link rel="import" href="../core-icon-button/core-icon-button.html">
    <link rel="import" href="../core-toolbar/core-toolbar.html">

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

    @@ -10,7 +11,33 @@
    height: 100%;
    box-sizing: border-box;
    }
    #google_map {
    width: 400px;
    height: 400px;
    display: block;
    left: 1010px;
    top: 540px;
    }
    #section {
    left: 310px;
    top: 170px;
    position: absolute;
    }
    #core_toolbar {
    right: 0px;
    left: 0px;
    color: rgb(255, 255, 255);
    fill: rgb(255, 255, 255);
    top: 0px;
    position: absolute;
    background-color: rgb(79, 125, 201);
    }
    </style>
    <section id="section"></section>
    <core-toolbar id="core_toolbar">
    <core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
    <div id="div" flex>Toolbar</div>
    </core-toolbar>
    </template>

    <script>
  4. zek revised this gist Mar 12, 2015. 1 changed file with 1 addition and 19 deletions.
    20 changes: 1 addition & 19 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,4 @@
    <link rel="import" href="../topeka-elements/theme.html">
    <link rel="import" href="../topeka-elements/topeka-resources.html">
    <link rel="import" href="../topeka-elements/topeka-app.html">
    <link rel="import" href="../polymer/polymer.html">

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

    @@ -12,23 +10,7 @@
    height: 100%;
    box-sizing: border-box;
    }
    #google_map {
    width: 400px;
    height: 400px;
    display: block;
    left: 1010px;
    top: 540px;
    }
    #topeka_app {
    width: 300px;
    height: 300px;
    min-height: 450px;
    left: 260px;
    top: 60px;
    position: absolute;
    }
    </style>
    <topeka-app selected="profile" disableleaderboard id="topeka_app" categories="[]" vertical layout></topeka-app>
    </template>

    <script>
  5. zek revised this gist Mar 12, 2015. 1 changed file with 10 additions and 51 deletions.
    61 changes: 10 additions & 51 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,6 @@
    <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="../paper-tabs/paper-tabs.html">
    <link rel="import" href="../paper-tabs/paper-tab.html">
    <link rel="import" href="../topeka-elements/theme.html">
    <link rel="import" href="../topeka-elements/topeka-resources.html">
    <link rel="import" href="../topeka-elements/topeka-app.html">

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

    @@ -18,58 +12,23 @@
    height: 100%;
    box-sizing: border-box;
    }
    #core_scaffold {
    position: absolute;
    top: 10px;
    right: 0px;
    bottom: 0px;
    left: 10px;
    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;
    }
    #google_map {
    width: 400px;
    height: 400px;
    display: block;
    left: 1010px;
    top: 540px;
    }
    #paper_tabs {
    width: 480px;
    color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
    left: 250px;
    top: 70px;
    #topeka_app {
    width: 300px;
    height: 300px;
    min-height: 450px;
    left: 260px;
    top: 60px;
    position: absolute;
    background-color: rgb(0, 188, 212);
    }
    </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 selected="Item1" valueattr="label" id="core_menu" theme="core-light-theme">
    <core-item id="core_item1" icon="settings" label="Item2" horizontal center layout></core-item>
    </core-menu>
    </core-header-panel>
    <div id="div" tool>Title</div>
    <paper-tabs selected="0" selectedindex="0" id="paper_tabs" horizontal center layout>
    <paper-tab id="paper_tab" inline flex center-center horizontal layout active>ITEM ONE</paper-tab>
    <paper-tab id="paper_tab1" inline flex center-center horizontal layout>ITEM TWO</paper-tab>
    <paper-tab id="paper_tab2" inline flex center-center horizontal layout>ITEM THREE</paper-tab>
    <paper-tab id="paper_tab3" inline flex center-center horizontal layout>ITEM FOUR</paper-tab>
    <paper-tab id="paper_tab4" inline flex center-center horizontal layout>ITEM FIVE</paper-tab>
    </paper-tabs>
    </core-scaffold>
    <topeka-app selected="profile" disableleaderboard id="topeka_app" categories="[]" vertical layout></topeka-app>
    </template>

    <script>
  6. zek revised this gist Mar 12, 2015. 1 changed file with 18 additions and 24 deletions.
    42 changes: 18 additions & 24 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,8 @@
    <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="../paper-tabs/paper-tabs.html">
    <link rel="import" href="../paper-tabs/paper-tab.html">

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

    @@ -18,10 +20,10 @@
    }
    #core_scaffold {
    position: absolute;
    top: 0px;
    top: 10px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    left: 10px;
    width: 100%;
    height: 100%;
    }
    @@ -42,13 +44,14 @@
    left: 1010px;
    top: 540px;
    }
    #google_map1 {
    width: 100%;
    height: 100%;
    display: block;
    left: 0px;
    top: 0px;
    #paper_tabs {
    width: 480px;
    color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
    left: 250px;
    top: 70px;
    position: absolute;
    background-color: rgb(0, 188, 212);
    }
    </style>
    <core-scaffold id="core_scaffold">
    @@ -59,22 +62,13 @@
    </core-menu>
    </core-header-panel>
    <div id="div" tool>Title</div>
    <div id="google_map1"></div>
    <script>
    // create a map in the "map" div, set the view to a given place and zoom
    var map = L.map('google_map1').setView([51.505, -0.09], 13);

    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // add a marker in the given location, attach some popup content to it and open the popup
    L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
    .openPopup();

    </script>
    <paper-tabs selected="0" selectedindex="0" id="paper_tabs" horizontal center layout>
    <paper-tab id="paper_tab" inline flex center-center horizontal layout active>ITEM ONE</paper-tab>
    <paper-tab id="paper_tab1" inline flex center-center horizontal layout>ITEM TWO</paper-tab>
    <paper-tab id="paper_tab2" inline flex center-center horizontal layout>ITEM THREE</paper-tab>
    <paper-tab id="paper_tab3" inline flex center-center horizontal layout>ITEM FOUR</paper-tab>
    <paper-tab id="paper_tab4" inline flex center-center horizontal layout>ITEM FIVE</paper-tab>
    </paper-tabs>
    </core-scaffold>
    </template>

  7. zek revised this gist Mar 12, 2015. 1 changed file with 16 additions and 2 deletions.
    18 changes: 16 additions & 2 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,6 @@
    <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="../google-map/google-map.html">

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

    @@ -60,7 +59,22 @@
    </core-menu>
    </core-header-panel>
    <div id="div" tool>Title</div>
    <google-map latitude="37.467646275286995" longitude="-121.47390913574219" id="google_map1"></google-map>
    <div id="google_map1"></div>
    <script>
    // create a map in the "map" div, set the view to a given place and zoom
    var map = L.map('google_map1').setView([51.505, -0.09], 13);

    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // add a marker in the given location, attach some popup content to it and open the popup
    L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
    .openPopup();

    </script>
    </core-scaffold>
    </template>

  8. zek revised this gist Mar 12, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -72,4 +72,4 @@

    </script>

    </polymer-element><google-map id="google_map" class="drag-element"></google-map>
    </polymer-element>
  9. zek created this gist Mar 12, 2015.
    75 changes: 75 additions & 0 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@
    <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="../google-map/google-map.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;
    }
    #google_map {
    width: 400px;
    height: 400px;
    display: block;
    left: 1010px;
    top: 540px;
    }
    #google_map1 {
    width: 100%;
    height: 100%;
    display: block;
    left: 0px;
    top: 0px;
    position: absolute;
    }
    </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 selected="Item1" valueattr="label" id="core_menu" theme="core-light-theme">
    <core-item id="core_item1" icon="settings" label="Item2" horizontal center layout></core-item>
    </core-menu>
    </core-header-panel>
    <div id="div" tool>Title</div>
    <google-map latitude="37.467646275286995" longitude="-121.47390913574219" id="google_map1"></google-map>
    </core-scaffold>
    </template>

    <script>

    Polymer({

    });

    </script>

    </polymer-element><google-map id="google_map" class="drag-element"></google-map>