search

Polymer / polymer-starter-kit

A starting point for Polymer apps
2.46k stars 660 forks source link

Moving contents of index.html to seperate element fails to use app theme. #743

Closed mwinters-stuff closed 8 years ago

mwinters-stuff commented 8 years ago

I like to keep the index fairly clean, and use a main element that encapsulates the "app", If I take the contents of the index.html and place them in an element - in this case "test-element.html" then the app theme does not get applied, I cant find a way to make it work.. Here are my files.

index.html (header removed)


  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild-->

  <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <!-- endbuild -->

  <!-- Because this project uses vulcanize this should be your only html import
       in this file. All other imports should go in elements.html -->
  <link rel="import" href="elements/elements.html">

  <!-- For shared styles, shared-styles.html import in elements.html -->
  <style is="custom-style" include="shared-styles"></style>
</head>

<body unresolved>
  <span id="browser-sync-binding"></span>
  <template is="dom-bind" id="app">

    <test-element></test-element>
    <paper-toast id="toast">
  </template>

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

</html>

elements.html

<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">

<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">

<!-- Uncomment next block to enable Service Worker Support (2/2) -->

<link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html">

<!-- Configure your routes here -->
<link rel="import" href="routing.html">

<!-- Add your elements here -->
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="test-element.html">

and test-element.html

<link rel="import" href="../bower_components/polymer/polymer.html">

<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">

<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">

<!-- Uncomment next block to enable Service Worker Support (2/2) -->

<!-- <link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html"> -->

<!-- Configure your routes here -->
<!-- <link rel="import" href="routing.html"> -->

<!-- Add your elements here -->
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="../styles/shared-styles.html">

<dom-module id="test-element">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
      }

    </style>
    <paper-drawer-panel id="paperDrawerPanel">
      <!-- Drawer Scroll Header Panel -->
      <paper-scroll-header-panel drawer fixed>

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

        <!-- Drawer Content -->
        <paper-menu attr-for-selected="data-route" selected="[[route]]">
          <a data-route="home" href="{{baseUrl}}">
            <iron-icon icon="home"></iron-icon>
            <span>Home</span>
          </a>

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

          <a data-route="contact" href="{{baseUrl}}contact">
            <iron-icon icon="mail"></iron-icon>
            <span>Contact</span>
          </a>
        </paper-menu>
      </paper-scroll-header-panel>

      <!-- Main Area -->
      <paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
        <!-- Main Toolbar -->
        <paper-toolbar id="mainToolbar" class="tall">
          <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>

          <span class="space"></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">
            <div class="app-name">Polymer Starter Kit</div>
          </div>

          <!-- Application sub title -->
          <div class="bottom bottom-container">
            <div class="bottom-title">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="home">
              <paper-material elevation="1">
                <my-greeting></my-greeting>

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

                <p>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>This is another card.</p>
              </paper-material>

              <paper-material elevation="1">
                <h1 id="license">License</h1>
                <p>Everything in this repo is BSD style license unless otherwise specified.</p>
                <p>Copyright (c) 2015 The Polymer Authors. All rights reserved.</p>
                <p>Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:</p>
                <ul>
                <li>Redistributions of source code must retain the above copyright
                notice, this list of conditions and the following disclaimer.</li>
                <li>Redistributions in binary form must reproduce the above
                copyright notice, this list of conditions and the following disclaimer
                in the documentation and/or other materials provided with the
                distribution.</li>
                <li>Neither the name of Google Inc. nor the names of its
                contributors may be used to endorse or promote products derived from
                this software without specific prior written permission.</li>
                </ul>
                <p>TsdadasdasdE.</p>
              </paper-material>
            </section>

            <section data-route="users">
              <paper-material elevation="1">
                <h2 class="page-title">Users</h2>
                <p>This is the users section</p>
                <a href$="{{baseUrl}}users/Addy">Addy</a><br>
                <a href$="{{baseUrl}}users/Rob">Rob</a><br>
                <a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
                <a href$="{{baseUrl}}users/Sam">Sam</a>
              </paper-material>
            </section>

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

            <section data-route="contact">
              <paper-material elevation="1">
                <h2 class="page-title">Contact</h2>
                <p>This is the contact section</p>
              </paper-material>
            </section>
          </iron-pages>
        </div>
      </paper-scroll-header-panel>
    </paper-drawer-panel>

  </template>
  <script>
    (function() {
      Polymer({
        is: 'test-element',
    });
    })();
</script>
</dom-module>

The result is.. image

vguillou commented 8 years ago

Can you try to make those changes to see if it get's better ?

In test-element.html:

<style is="custom-style" include="app-theme"></style>
<style include="shared-styles">
  :host {
    display: block;
  }

</style>

Also, just FYI (I don't think it has anything to do with the issue here) the imports are not in the right place: In every .html file, you should only import the elements that you are directly using in the file. I believe that to fix that you should follow those steps:

Then there is also the app.js (and probaby routing.html) that I think should be imported by test-element.html and tweaked to use this element's scope instead of app, but again, that's not strictly related to this styling issue.

felixzapata commented 8 years ago

hi, another issue not related with the style:

  <template is="dom-bind" id="app">
    <test-element></test-element>
    <paper-toast id="toast">
  </template>

The <paper-toast id="toast"> is not closed ;)

mwinters-stuff commented 8 years ago

@vguillou No different.. Except the error "Could not find style data in module named app-theme" looks the same as the screen shot.. I also just used code direct from a fresh PSK just extracting the required code and generally left it as-is.. (not a representation of the actual web-app I am developing).

@felixzapata Woops - I was deleting from the paste irrelevant bits, must have forgot to delete the whole toast.. :)

mwinters-stuff commented 8 years ago

I have figured it out - there is a mention in bold in the styling local dom document where it says the app theme is only for the main document - ie index.html.

Copying the styles from there to the shared-styles.html makes it work when the <style include="shared-styles"></style> is in the element.