Make gr-change-list a true HTML table
- Remove all flex attributes from from change list CSS (with the
exception of mobile).
- Add flex properties for change list items with media queries.
- <tr> wrapped around gr-change-list-item doesn't work in the table.
Instead, style <gr-change-list-item> to be display: table-row.
Bug: Issue 5285
Change-Id: I576ddbda3c1697c3476620a5e8ea9db727e08557
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
index 202b1dd..0df017b 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
@@ -26,7 +26,7 @@
<template>
<style>
:host {
- display: flex;
+ display: table-row;
border-bottom: 1px solid #eee;
}
:host([selected]) {
@@ -42,7 +42,6 @@
background-color: #fcfaa6;
}
.cell {
- flex-shrink: 0;
padding: .3em .5em;
}
a {
@@ -71,6 +70,11 @@
.u-gray-background {
background-color: #F5F5F5;
}
+ @media only screen and (max-width: 50em) {
+ :host {
+ display: flex;
+ }
+ }
</style>
<style include="gr-change-list-styles"></style>
<td class="cell keyboard">
