Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Updated List View #7

Closed
emersonbottero opened this issue Aug 4, 2015 · 1 comment
Closed

Updated List View #7

emersonbottero opened this issue Aug 4, 2015 · 1 comment

Comments

@emersonbottero
Copy link

I tried to make a New List Layout base on 1.0.3 and looks nice but the screen refreshes and the routing is lost.

Can someone fix it and make it avaiable as a layout?
I will pass the changed code, and to use ir you just need to replaces and add some files.

index.html

<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="Polymer Starter Kit" />
  <title>Polymer Starter Kit</title>

  <link rel="import" href="elements/elements.html">

</head>

<!--
Left Nav + List + Detail
 -->
<html lang="">
<body unresolved class="layout vertical">
  <span id="browser-sync-binding"></span>
  <template is="dom-bind" id="app">

    <paper-drawer-panel id="paperDrawerPanel" responsive-width="1280px">

      <div class="nav" drawer>
        <!-- Nav Content -->

        <!-- Drawer Toolbar -->
        <paper-toolbar id="drawerToolbar">
          <span class="paper-font-title">Menu</span>
        </paper-toolbar>

        <!-- Drawer Content -->
        <paper-menu class="list" attr-for-selected="data-route" selected="{{route}}" on-iron-select="onMenuSelect">
          <a data-route="list" href="/list">
            <iron-icon icon="list"></iron-icon>
            <span>List View</span>
          </a>

          <a data-route="home" href="/">
            <iron-icon icon="home"></iron-icon>
            <span>Home</span>
          </a>

          <a data-route="users" href="/users">
            <iron-icon icon="info"></iron-icon>
            <span>Users</span>
          </a>

          <a data-route="contact" href="/contact">
            <iron-icon icon="mail"></iron-icon>
            <span>Contact</span>
          </a>
        </paper-menu>
      </div>

      <paper-drawer-panel id="mainDrawerPanel" class="main-drawer-panel" main responsive-width="600px"
          drawer-width="[[_computeListWidth(_isMobile)]]" drawer-toggle-attribute="list-toggle"
          narrow="{{_isMobile}}"
          right-drawer>

        <paper-scroll-header-panel class="list-panel" main 
        condenses keep-condensed-header>

          <!-- List Toolbar -->
          <paper-toolbar id="mainToolbar" class="tall">
            <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
            <span class="flex"></span>

            <!-- Toolbar icons -->
            <paper-icon-button icon="refresh"></paper-icon-button>
            <paper-icon-button icon="search"></paper-icon-button>

            <!-- Application name -->
            <div class="middle middle-container center horizontal layout">
              <div class="app-name">Polymer Starter Kit</div>
            </div>

            <!-- Application sub title -->
            <div class="bottom bottom-container center horizontal layout">
              <div class="bottom-title paper-font-subhead">The future of the web today</div>
            </div>
          </paper-toolbar>

          <!-- Main Content -->
          <div class="content">
            <iron-pages attr-for-selected="data-route" selected="{{route}}">

              <section data-route="list">

                <paper-menu class="list" on-iron-activate="_listTap">
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                  <paper-item></paper-item>
                </paper-menu>
              </section>

              <section data-route="home">
                <paper-material elevation="1">
                  <my-greeting></my-greeting>

                  <p class="paper-font-subhead">You now have:</p>
                  <my-list></my-list>

                  <p class="paper-font-body2">Looking for more Web App layouts? Check out our <a href="https://github.com/PolymerElements/app-layout-templates">layouts</a> collection. You can also <a href="http://polymerelements.github.io/app-layout-templates/">preview</a> them live.</p>
                </paper-material>
                <paper-material elevation="1">
                  <p class="paper-font-body2">This is another card.</p>
                </paper-material>

                <paper-material elevation="1" class="paper-font-body2">
                  <h1 id="license">License</h1>
                  <p>Everything in this repo is BSD style license unless otherwise specified.</p>
                </paper-material>
              </section>

              <section data-route="users">
                <paper-material elevation="1">
                  <h2 class="paper-font-display2">Users</h2>
                  <p>This is the users section</p>
                  <a href="/users/Rob">Rob</a>
                </paper-material>
              </section>

              <section data-route="user-info">
                <paper-material elevation="1">
                  <h2 class="paper-font-display2">
                  User:<span>{{params.name}}</span>
                  </h2>
                  <div>This is <span>{{params.name}}</span>'s section</div>
                </paper-material>
              </section>

              <section data-route="contact">
                <paper-material elevation="1">
                  <h2 class="paper-font-display2">Contact</h2>
                  <p>This is the contact section</p>
                </paper-material>
              </section>

            </iron-pages>
          </div>

        </paper-scroll-header-panel>

        <paper-header-panel class="content-panel" drawer>

          <!-- Main Toolbar -->
          <paper-toolbar>
            <paper-icon-button icon="arrow-back" list-toggle></paper-icon-button>
          </paper-toolbar>

          <!-- Main Content -->
          <div class="content">

          </div>
        </paper-header-panel>

      </paper-drawer-panel>

    </paper-drawer-panel>

  </template>

  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>
  <script src="scripts/app-list.js"></script>
  <!-- endbuild-->



</body>

</html>

app-list.js

/*
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/

(function(document) {
  'use strict';

  // Grab a reference to our auto-binding template
  // and give it some initial binding values
  // Learn more about auto-binding templates at http://goo.gl/Dx1u2g
  var app = document.querySelector('#app');


  app._computeListWidth = function(isMobile) {
    // when in mobile screen size, make the list be 100% width to cover the whole screen
    return isMobile ? '100%' : '66%';
  };

  app._listTap = function() {
    this.$.mainDrawerPanel.openDrawer();
  };

})(document);

routing.html


<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<script src="../../bower_components/page/page.js"></script>
<script>
  window.addEventListener('WebComponentsReady', function() {

    // We use Page.js for routing. This is a Micro
    // client-side router inspired by the Express router
    // More info: https://visionmedia.github.io/page.js/
    page('/', function () {
      app.route = 'home';
    });

    page('/users', function () {
      app.route = 'users';
    });

    page('/list', function () {
      app.route = 'list';
    });

    page('/users/:name', function (data) {
      app.route = 'user-info';
      app.params = data.params;
    });

    page('/contact', function () {
      app.route = 'contact';
    });

    // add #! before urls
    page({
      hashbang: true
    });

  });
</script>
@cdata
Copy link

cdata commented Jan 28, 2016

Hi, can you provide a reduced test case in a JSBin and re-open the issue?

For more details, please refer to our contributing guidelines.

@cdata cdata closed this as completed Jan 28, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cdata @emersonbottero