Problems with Polymer's App-Layout

support
1

I’m making a website (or rather porting one from jekyll) with polymer design elements. Since the official polymer theme is a little outdated, I’m currently trying to recreate it myself. However, my knowledge of web design is very limited as I’ve never done it before.

Unfortunately, my problems already start with the header. In all the examples I’ve found, they just create a header in a fairly simple way and it works. Not so for me.

Since I’ve heard from a lot of people that JS in websites can slow them down a lot (apparently especially on the old version of the website), I’m trying to stick as much to html as I can. I’m using the pre-generated baseof.html template from hugo.

This is my head.html:

{{ $baseurl := .Site.BaseURL }}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <title>{{ .Title }}</title>
  <link rel="icon" href="{{$baseurl}}/images/favicon.png" type="image/png; charset=binary" />
  <!--script src="{{$baseurl}}/node_modules/webcomponents.js/webcomponents-lite.js"></script-->
  <script type="module">
    import '{{$baseurl}}/node_modules/@polymer/app-layout/app-layout.js';
    import '{{$baseurl}}/node_modules/@polymer/paper-item/paper-item.js';
    import '{{$baseurl}}/node_modules/@polymer/iron-icon/iron-icon.js';
    import '{{$baseurl}}/node_modules/@polymer/iron-icons/iron-icons.js';
    import '{{$baseurl}}/node_modules/@polymer/paper-icon-button/paper-icon-button.js';
    import '{{$baseurl}}/node_modules/@polymer/paper-fab/paper-fab.js';
    import '{{$baseurl}}/node_modules/@polymer/iron-image/iron-image.js';
    import '{{$baseurl}}/node_modules/@polymer/paper-card/paper-card.js';
    import '{{$baseurl}}/node_modules/@polymer/paper-button/paper-button.js';
    import '{{$baseurl}}/node_modules/@polymer/paper-listbox/paper-listbox.js';
  </script>
  <link rel="stylesheet" href="{{$baseurl}}/css/master.css">
  {{ with .Site.Params.cssPath }}
    <link rel="stylesheet" href="{{$baseurl}}/{{ . }}">
  {{end}}
</head>

Are the modules imported correctly here?

The following is my (not working) header.html:

{{ $baseurl := .Site.BaseURL }}

<app-drawer-layout responsive-width="1280px">
  <app-drawer swipe-open slot="drawer">
    <div class="nav scroll">
      {{ partial "menu.html" . }}
    </div>
  </app-drawer>

  <app-header-layout>
    <app-header effects="resize-title" condenses fixed shadow slot="header">

      <app-toolbar>
        <div class="logo"><img src="{{$baseurl}}{{.Site.Params.logo}}" id="logo_full"></div>
        <div main-title condensed-title spacer id="pagetitle">{{.Title}}</div>
        {{ with .Site.Params.rssPath }}
          <a href="{{$baseurl}}{{ . }}"><paper-icon-button src="{{$baseurl}}/images/feed-dreamstale27.png"></paper-icon-button></a>
        {{end}}
      </app-toolbar>

    </app-header>

For all the examples I’ve seen, this seems to create a navbar on the left and a header on the top of the page. It doesn’t do that for me, however.
The menu is shown first, then the page title, below that the logo and below all this the content of the page.

I’ve also tried giving the app-header a background color, which did not work out. Here is my master.css:

:root {
  display: block;
  --app-primary-color: #009CDA;
  --app-secondary-color: #E5E5E5;
  --app-tertiary-color: #c0c0c0;
}

body {
  font-family: 'RobotoDraft', sans-serif;
}

app-header {
  background-color: var(--app-primary-color);
  --app-header-background-front-layer: {
    background-color: var(--app-primary-color);
  };
  --app-header-background-rear-layer: {
    background-color: var(--app-primary-color);
  };
}

I haven’t added a few things yet like the logo or the nav classes to eliminate possible sources of errors.

Now the question I’m having is: What am I doing wrong? Is there a script I forgot to import? Do I have a typo somewhere that I haven’t found yet? Did I import the polymer elements incorrectly?
Any type of help is appreciated.

2

You could compare the rendered output of your hugo site to the rendered output of the jekyll site and see if loads the polymer components the same way. Just check the html source of the output via “view source” or “inspect element” in your browser developer tools.
Also verify that the {{$baseurl}}/node_modules/@polymer/app-layout/app-layout.js renders to an existing path in your web site directory tree (that the node_modules exists). Additionally, you might need to uncomment the webcomponents.js script in your template.

I don’t know much about polymer (which isn’t related to Hugo at all) so I cannot help you more with this information.

Also, I’m not sure how much you can avoid using javascript while still using polymer (a javascript framework) for UI.

3

Unfortunately, polymer has had a major update since then so the site will not be loading the components in the same way.

This is the case.

That is true and I’m going to look for a better place for this post. I was mainly not sure if there were maybe any interactions with hugo.

Thank you for the tips though

4

@Lithimlin This topic is mostly OT this is not a forum about Polymer.

The only thing that is kind of relevant is how to go about constructing the links to these JS modules in Hugo’s templates.

I suggest that instead of hardcoding these URLs with {{$baseurl}}/node_modules/@polymer/app-layout/app-layout.js make them more portable by using the absURL or relURL functions e.g.
{{ "node_modules/@polymer/app-layout/app-layout.js/" | absURL }}
or
{{ "node_modules/@polymer/app-layout/app-layout.js/" | relURL" }}

Also I’m closing this topic.

1 Like