vaadin/vaadin-board

Web Component for creating flexible responsive layouts and building nice looking dashboards.

vaadin-board's Issues

Make component P3 compatible

Dom-repeat does not work properly inside vaadin-board-row

Dom-repeat does not work properly inside vaadin-board-row. When adding items to the board via dom-repeat, dom-repeat is counted as a child element of the road so you can not add for elements via dom-repeat only 3 or less.

Here is the complete example:

<link rel="import" href="../../polymer/polymer-element.html">
<link rel="import" href="../vaadin-board.html">
<dom-module id="board-element">
  <template>
    <style>
    </style>
    <vaadin-board>
        <vaadin-board-row>
          <dom-repeat items="{{items}}">
            <template>
              <div>{{item}}</div>
            </template>
          </dom-repeat>
        </vaadin-board-row>
    </vaadin-board>

  </template>

  <script>
    class BoardElement extends Polymer.Element {
      static get is() {
        return 'board-element';
      }

      static get properties() {
        return {
          items: {
            type: Array,
            value: ["Foo", "Bar", "Faz", "Foo"]
          }
        }
      }

    }
    customElements.define(BoardElement.is, BoardElement);
  </script>
</dom-module>

When using media query for other elements resize event is not called for vaadin board.

If you have a media query and it changes the style of a component, the resize event is not fired, so vaadin board doesn't change it's appearance. The problem comes is similar to when you set width or height for board from CSS you need to call a redraw method.

Release 2.1.0-alpha1 and update release checklist for npm release

Disable SauceLabs tests for external pull requests

Currently, the TravisCI build will always fail for external PRs.

Take a look at our configuration: https://github.com/vaadin/vaadin-element-skeleton/blob/master/wct.conf.js#L16-L20

We are testing in SauceLabs only in case of push event, for pull_request we are testing only in Chrome and Firefox via Selenium.

Getting started uses charts even if they are not installed

https://github.com/vaadin/board/blob/master/documentation/webcomponents-api/board-basic-use.asciidoc

Getting started documentation has these steps:

1. run bower install vaadin-board
2. <link rel="import" href="bower_components/vaadin-board/vaadin-board.html">
3. use code

<vaadin-board>
  <vaadin-board-row>
      <vaadin-line-chart>
        <chart-title>Sales</chart-title>
        <!-- Configuration omitted -->
      </vaadin-line-chart>
      <vaadin-column-chart>
        <chart-title>Overall sales by region</chart-title>
      </vaadin-column-chart>
      <vaadin-column-chart>
        <chart-title>Services sales by region</chart-title>
      </vaadin-column-chart>
  </vaadin-board-row>
</vaadin-board>

Problem is that I have never installed charts so they did not render. The example was also so simple that I was not sure if board is working or is just text flowing as it should.

How to target styles for a specific vaadin-board?

I tried to specify large, medium, small classes for only 1 vaadin-board (code below). Is there a way to do this?

    <style>
      #first.large {
          font-size:20px;
      }
      #first.medium {
          font-size:16px;
      }
      #first.small {
          font-size:10px;
      }
    </style>
    <vaadin-board id="first">
      <vaadin-board-row>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
      </vaadin-board-row>
      <vaadin-board-row>
        <div class="item">1</div>
        <div class="item">2</div>
      </vaadin-board-row>
    </vaadin-board>

    <vaadin-board id="second">
      <vaadin-board-row>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
      </vaadin-board-row>
      <vaadin-board-row>
        <div class="item">1</div>
        <div class="item">2</div>
      </vaadin-board-row>
    </vaadin-board>

Convert to Polymer 3

There are no custom events (except the resize events which are considered internal) so this is only about conversion itself.

Documentation for colspan is missing

Ensure Polymer 3 Modulizer compatibility

See “Generic steps” at vaadin/components-team-tasks#326

Dumb Question - paid component?

Quick question - If I'm only using this web component and not the java Vaadin Framework, is here still a license code for this?

Board layout behaves badly inside a Details in 14.0.2

Expected layout:

After opening another Details:

Then after resizing the browser, the layout returns to normal:

Is there a workaround that I can use meanwhile? For example to force a repaint/resize?

ES5 compiled version doesn't load in safari 10

There's a known issue in webcomponentsjs with transpiled code and safari 10

One-third wide columns don’t match two-thirds wide column

When defining a row with 1/3 + 1/3 + 1/3 items and another row with 2/3 + 1/3 items the last items in the rows don’t match vertically.

Screenshot from @emarc’s demo:

Screenshot from the team’s internal demo:

Generate TypeScript definitions for P3

Child of vaadin/vaadin-core#186