fix the 'order details' component layout in IE11 (#301)

* fix the 'order details' component layout in IE11

The root cause of the issue is that dom-repeat inside <table> does not work in IE11: Polymer/polymer#1567. And at the moment the order-details component has a dom-repeat inside a <template> (introduced by the PR https://github.com/vaadin/bakery-app-starter-polymer/pull/156).

Fix: replace the table elements with divs having table-like CSS display property values.

Jira: BFF-348

src/main/webapp/src/storefront/order-detail.html

@@ -18,6 +18,24 @@
  height: 100%;
  }
 
+ /*
+ Workaround for non-working dom-repeat inside tables in IE11
+ (https://github.com/Polymer/polymer/issues/1567):
+ use divs with table-like display values instead of the actual
+ <table>, <tr> and <td> elements.
+ */
+ .table {
+ display: table;
+ }
+
+ .tr {
+ display: table-row;
+ }
+
+ .td {
+ display: table-cell;
+ }
+
  .main-row {
  flex: 1;
  }
@@ -51,25 +69,25 @@
  width: 100%;
  }
 
- .products td {
+ .products .td {
  text-align: center;
  vertical-align: middle;
  padding: var(--valo-space-xs);
  border: none;
  border-bottom: 1px solid var(--valo-contrast-10pct);
  }
 
- .products td.product-name {
+ .products .td.product-name {
  text-align: left;
  padding-left: 0;
  width: 100%;
  }
 
- .products td.number {
+ .products .td.number {
  text-align: right;
  }
 
- .products td.money {
+ .products .td.money {
  text-align: right;
  padding-right: 0;
  }
@@ -139,27 +157,27 @@ <h3>[[item.customer.phoneNumber]]</h3>
 
  <vaadin-form-item>
  <label slot="label">Products</label>
- <table class="products">
+ <div class="table products">
  <template is="dom-repeat" items="[[item.items]]" as="item">
  <dom-if if="[[item.product.name]]">
  <template>
- <tr>
- <td class="product-name">
+ <div class="tr">
+ <div class="td product-name">
  <div class="bold">[[item.product.name]]</div>
  <div class="secondary">[[item.comment]]</div>
- </td>
- <td class="number">
+ </div>
+ <div class="td number">
  <span class="count">[[item.quantity]]</span>
- </td>
- <td class="dim">&times;</td>
- <td class="money">
+ </div>
+ <div class="td dim">×</div>
+ <div class="td money">
  [[item.product.price]]
- </td>
- </tr>
+ </div>
+ </div>
  </template>
  </dom-if>
  </template>
- </table>
+ </div>
  </vaadin-form-item>
 
  <vaadin-form-item id="history" label-position="top" hidden="[[review]]">