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
diff --git a/polygerrit-ui/app/elements/gr-app.html b/polygerrit-ui/app/elements/gr-app.html
index 1971b14..b0e2099 100644
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -94,7 +94,7 @@
font-weight: bold;
}
gr-search-bar {
- width: auto;
+ display: none;
}
.accountContainer {
margin-left: .5em !important;
diff --git a/polygerrit-ui/app/elements/gr-change-list-item.html b/polygerrit-ui/app/elements/gr-change-list-item.html
index 5099365f..4899b94 100644
--- a/polygerrit-ui/app/elements/gr-change-list-item.html
+++ b/polygerrit-ui/app/elements/gr-change-list-item.html
@@ -26,12 +26,12 @@
<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;
}
diff --git a/polygerrit-ui/app/elements/gr-change-list-view.html b/polygerrit-ui/app/elements/gr-change-list-view.html
index 13959c5..fecba9d 100644
--- a/polygerrit-ui/app/elements/gr-change-list-view.html
+++ b/polygerrit-ui/app/elements/gr-change-list-view.html
@@ -47,8 +47,13 @@
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
diff --git a/polygerrit-ui/app/elements/gr-change-list.html b/polygerrit-ui/app/elements/gr-change-list.html
index df383fb..8b5ae7b 100644
--- a/polygerrit-ui/app/elements/gr-change-list.html
+++ b/polygerrit-ui/app/elements/gr-change-list.html
@@ -26,19 +26,6 @@
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">
diff --git a/polygerrit-ui/app/elements/gr-change-view.html b/polygerrit-ui/app/elements/gr-change-view.html
index f33b661..43a4438 100644
--- a/polygerrit-ui/app/elements/gr-change-view.html
+++ b/polygerrit-ui/app/elements/gr-change-view.html
@@ -162,6 +162,9 @@
.container {
margin: .5em 0 !important;
}
+ .container.loading {
+ margin: 1em var(--default-horizontal-margin) !important;
+ }
.headerContainer {
height: 5.15em;
}
diff --git a/polygerrit-ui/app/elements/gr-dashboard-view.html b/polygerrit-ui/app/elements/gr-dashboard-view.html
index dbfc85d..e6c1eab 100644
--- a/polygerrit-ui/app/elements/gr-dashboard-view.html
+++ b/polygerrit-ui/app/elements/gr-dashboard-view.html
@@ -34,6 +34,14 @@
margin-top: 1em;
width: 100%;
}
+ @media only screen and (max-width: 60em) {
+ :host {
+ margin: 0;
+ }
+ .loading {
+ padding: 0 1.25rem;
+ }
+ }
</style>
<gr-ajax
auto
diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html
index 06d22e9..982ef85 100644
--- a/polygerrit-ui/app/styles/gr-change-list-styles.html
+++ b/polygerrit-ui/app/styles/gr-change-list-styles.html
@@ -16,6 +16,19 @@
<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 @@
: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;
