Skip to content

Instantly share code, notes, and snippets.

@c0d3rm0nk3y

c0d3rm0nk3y/designer.html

Created July 14, 2014 22:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save c0d3rm0nk3y/d262377fb0f55a4ab9b5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save c0d3rm0nk3y/d262377fb0f55a4ab9b5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. c0d3rm0nk3y revised this gist Jul 14, 2014. 1 changed file with 20 additions and 5 deletions.
    25 changes: 20 additions & 5 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@
    <link rel="import" href="../paper-progress/paper-progress.html">
    <link rel="import" href="../paper-button/paper-button.html">

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

    <template>
    <style>
    @@ -65,6 +65,14 @@
    height: 24px;
    width: 24px;
    }
    #cWord {
    width: 100%;
    height: 100%;
    margin: 7px;
    }
    #paper_progress {
    margin: 10px;
    }
    </style>
    <core-scaffold id="core_scaffold">
    <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
    @@ -93,11 +101,11 @@
    <h2>title</h2>
    <paper-progress id="paper_progress"></paper-progress>
    <div id="cContainer" layout horizontal center>
    <paper-button label="Faster" id="btnFaster"></paper-button>
    <paper-button label="Slower" id="btnSlower"></paper-button>
    <paper-button label="Faster" id="btnFaster" on-tap="{{ onFaster }}"></paper-button>
    <paper-button label="Slower" id="btnSlower" on-tap="{{ onSlower }}"></paper-button>
    </div>
    <div id="cWord" center vertical layout center-justified>
    <p id="pWord" on-tap="{{toggleViewState}}">{{word}}</p>
    <p id="pWord" on-tap="{{ onToggleViewState }}">{{ word }}</p>
    </div>
    </core-card>
    <core-icon-button icon="chevron-right" id="btnNext" theme="core-light-theme"></core-icon-button>
    @@ -109,7 +117,14 @@ <h2>title</h2>
    <script>

    Polymer('my-element', {

    word: 'monkey',
    speed: 200,
    ready: function () {},
    counterChanged: function () {},
    attributeChanged: function () {},
    onFaster: function () {},
    onslower: function () {},
    onToggleViewState: function () {}
    });

    </script>
  2. c0d3rm0nk3y revised this gist Jul 14, 2014. 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
    @@ -97,7 +97,7 @@ <h2>title</h2>
    <paper-button label="Slower" id="btnSlower"></paper-button>
    </div>
    <div id="cWord" center vertical layout center-justified>
    <p id="pWord" on-touch
    <p id="pWord" on-tap="{{toggleViewState}}">{{word}}</p>
    </div>
    </core-card>
    <core-icon-button icon="chevron-right" id="btnNext" theme="core-light-theme"></core-icon-button>
  3. c0d3rm0nk3y revised this gist Jul 14, 2014. 1 changed file with 35 additions and 7 deletions.
    42 changes: 35 additions & 7 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,8 +4,13 @@
    <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-field/core-field.html">
    <link rel="import" href="../core-icon/core-icon.html">
    <link rel="import" href="../core-input/core-input.html">
    <link rel="import" href="../core-icons/core-icons.html">
    <link rel="import" href="../core-menu/core-submenu.html">
    <link rel="import" href="../paper-progress/paper-progress.html">
    <link rel="import" href="../paper-button/paper-button.html">

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

    @@ -39,9 +44,6 @@
    #core_menu1 {
    font-size: 16px;
    }
    #core_input {
    padding: 15px;
    }
    #core_card {
    width: 300px;
    height: 300px;
    @@ -52,12 +54,25 @@
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
    background-color: rgb(255, 255, 255);
    }
    #card_container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    margin: 15px;
    }
    #core_icon {
    height: 24px;
    width: 24px;
    }
    </style>
    <core-scaffold id="core_scaffold">
    <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
    <core-toolbar id="core_toolbar">
    <core-input placeholder="Type something..." id="core_input"></core-input>
    <core-icon-button icon="search" id="core_icon_button" theme="core-light-theme"></core-icon-button>
    <core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
    <core-icon icon="search" id="core_icon"></core-icon>
    <core-input placeholder="text input" id="core_input" flex></core-input>
    </core-field>
    </core-toolbar>
    <core-menu selected="Item2" valueattr="label" id="core_menu" theme="core-light-theme">
    </core-menu>
    @@ -72,8 +87,21 @@
    </core-header-panel>
    <div id="div" tool>Chrome News</div>
    <div id="card_container" center vertical layout center-justified>


    <div id="hContainer" layout horizontal center>
    <core-icon-button icon="chevron-left" id="btnPrevious" theme="core-light-theme"></core-icon-button>
    <core-card id="core_card" layout vertical center>
    <h2>title</h2>
    <paper-progress id="paper_progress"></paper-progress>
    <div id="cContainer" layout horizontal center>
    <paper-button label="Faster" id="btnFaster"></paper-button>
    <paper-button label="Slower" id="btnSlower"></paper-button>
    </div>
    <div id="cWord" center vertical layout center-justified>
    <p id="pWord" on-touch
    </div>
    </core-card>
    <core-icon-button icon="chevron-right" id="btnNext" theme="core-light-theme"></core-icon-button>
    </div>
    </div>
    </core-scaffold>
    </template>
  4. c0d3rm0nk3y revised this gist Jul 14, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -71,10 +71,10 @@
    </core-menu>
    </core-header-panel>
    <div id="div" tool>Chrome News</div>
    <div id='card_container' center vertical layout center-justified>
    <core-card id="core_card" >
    <div id="card_container" center vertical layout center-justified>


    </div>
    </core-card>
    </core-scaffold>
    </template>

  5. c0d3rm0nk3y revised this gist Jul 14, 2014. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -71,8 +71,9 @@
    </core-menu>
    </core-header-panel>
    <div id="div" tool>Chrome News</div>
    <core-card id="core_card" center vertical layout center-justified>

    <div id='card_container' center vertical layout center-justified>
    <core-card id="core_card" >
    </div>
    </core-card>
    </core-scaffold>
    </template>
  6. c0d3rm0nk3y created this gist Jul 14, 2014.
    88 changes: 88 additions & 0 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    <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-input/core-input.html">
    <link rel="import" href="../core-menu/core-submenu.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;
    }
    #core_menu1 {
    font-size: 16px;
    }
    #core_input {
    padding: 15px;
    }
    #core_card {
    width: 300px;
    height: 300px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
    background-color: rgb(255, 255, 255);
    }
    </style>
    <core-scaffold id="core_scaffold">
    <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
    <core-toolbar id="core_toolbar">
    <core-input placeholder="Type something..." id="core_input"></core-input>
    <core-icon-button icon="search" id="core_icon_button" theme="core-light-theme"></core-icon-button>
    </core-toolbar>
    <core-menu selected="Item2" valueattr="label" id="core_menu" theme="core-light-theme">
    </core-menu>
    <core-menu selected="1" selectedindex="1" id="core_menu1">
    <core-submenu label="News" icon="settings" valueattr="name" id="core_submenu">
    <core-item label="Google News" size="24" id="core_item" horizontal center layout></core-item>
    </core-submenu>
    <core-submenu active selected="0" label="Podcasts" icon="settings" valueattr="name" id="core_submenu1">
    <core-item label="SGU" size="24" id="core_item2" horizontal center layout active></core-item>
    </core-submenu>
    </core-menu>
    </core-header-panel>
    <div id="div" tool>Chrome News</div>
    <core-card id="core_card" center vertical layout center-justified>

    </core-card>
    </core-scaffold>
    </template>

    <script>

    Polymer('my-element', {

    });

    </script>

    </polymer-element>