Mobilify the change list result and dashboard views

+ Clean up some CSS in the change list views.
+ Make it so that it’s usable on small screens.
+ The search bar is hidden for now on mobile, but will
  re-appear in a later change.
+ Other elements in a change list item are hidden and
  we’ll use feedback from usage to determine what
  should be shown.

Bug: Issue 3908
Change-Id: I8b54a8c2ab663239a9a749e64a3de2198abe117f

polygerrit-ui/app/elements/gr-app.html

@@ -94,7 +94,7 @@ limitations under the License.
           font-weight: bold;
         }
         gr-search-bar {
-          width: auto;
+          display: none;
         }
         .accountContainer {
           margin-left: .5em !important;

polygerrit-ui/app/elements/gr-change-list-item.html

@@ -26,12 +26,12 @@ limitations under the License.
     <style>
       :host {
         display: flex;
+        border-bottom: 1px solid #eee;
       }
       :host([selected]) {
         background-color: #ebf5fb;
       }
       .cell {
-        border-bottom: 1px solid #eee;
         flex-shrink: 0;
         padding: .3em .5em;
       }

polygerrit-ui/app/elements/gr-change-list-view.html

@@ -47,8 +47,13 @@ limitations under the License.
       nav a:first-of-type {
         margin-right: .5em;
       }
-      [hidden] {
-        display: none !important;
+      @media only screen and (max-width: 60em) {
+        :host {
+          margin: 0;
+        }
+        .loading {
+          padding: 0 1.25rem;
+        }
       }
     </style>
     <gr-ajax

polygerrit-ui/app/elements/gr-change-list.html

@@ -26,19 +26,6 @@ limitations under the License.
         display: flex;
         flex-direction: column;
       }
-      .headerRow {
-        display: flex;
-      }
-      .topHeader,
-      .groupHeader {
-        border-bottom: 1px solid #eee;
-        font-weight: bold;
-        padding: .3em .5em;
-      }
-      .topHeader {
-        background-color: #ddd;
-        flex-shrink: 0;
-      }
     </style>
     <style include="gr-change-list-styles"></style>
     <div class="headerRow">

polygerrit-ui/app/elements/gr-change-view.html

@@ -162,6 +162,9 @@ limitations under the License.
         .container {
           margin: .5em 0 !important;
         }
+        .container.loading {
+          margin: 1em var(--default-horizontal-margin) !important;
+        }
         .headerContainer {
           height: 5.15em;
         }

polygerrit-ui/app/elements/gr-dashboard-view.html

@@ -34,6 +34,14 @@ limitations under the License.
         margin-top: 1em;
         width: 100%;
       }
+      @media only screen and (max-width: 60em) {
+        :host {
+          margin: 0;
+        }
+        .loading {
+          padding: 0 1.25rem;
+        }
+      }
     </style>
     <gr-ajax
         auto

polygerrit-ui/app/styles/gr-change-list-styles.html

@@ -16,6 +16,19 @@ limitations under the License.
 <dom-module id="gr-change-list-styles">
   <template>
     <style>
+      .headerRow {
+        display: flex;
+      }
+      .topHeader,
+      .groupHeader {
+        border-bottom: 1px solid #eee;
+        font-weight: bold;
+        padding: .3em .5em;
+      }
+      .topHeader {
+        background-color: #ddd;
+        flex-shrink: 0;
+      }
       .keyboard,
       .star {
         align-items: center;
@@ -65,6 +78,42 @@ limitations under the License.
       :host {
         font-size: 11px;
       }
+      @media only screen and (max-width: 60em) {
+        :host {
+          font-size: 14px;
+        }
+        gr-change-list-item {
+          flex-wrap: wrap;
+          justify-content: space-between;
+          padding: .25em .5em;
+        }
+        gr-change-list-item[selected] {
+          background-color: transparent;
+        }
+        .topHeader,
+        .keyboard,
+        .status,
+        .project,
+        .branch,
+        .updated,
+        .label {
+          display: none;
+        }
+        .star {
+          align-items: flex-start;
+          padding-left: .35em
+          padding-top: .4em;
+        }
+        .subject {
+          margin-bottom: .25em;
+          text-decoration: underline;
+          width: calc(100% - 2em);
+        }
+        .owner,
+        .size {
+          width: auto;
+        }
+      }
       @media only screen and (min-width: 1240px) {
         :host {
           font-size: 12px;