Initial work to make viewing change on mobile more manageable

Some specificity is needed via !important due to bugs that appear to be fixed in the latest version of Polymer[1]. An update of those libs will come in a later change. [1] https://github.com/Polymer/polymer/issues/2531 Bug: Issue 3908 Change-Id: I384b27143471da266f752b247e87ab53886ff6c5
2016-02-17 17:10:51 -05:00
parent e5a79a772f
commit 814c03283d
6 changed files with 106 additions and 26 deletions
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -47,8 +47,9 @@ limitations under the License.
        padding: .5rem 1.25rem;
      }
      header {
-        display: flex;
        align-items: center;
+        display: flex;
+        overflow: hidden;
      }
      main {
        flex: 1;
@@ -67,6 +68,7 @@ limitations under the License.
        justify-content: flex-end;
      }
      gr-search-bar {
+        margin-left: .5em;
        width: 500px;
      }
      .accountContainer:not(.loggedIn):not(.loggedOut) .loginButton,
@@ -79,10 +81,25 @@ limitations under the License.
        align-items: center;
        display: flex;
        margin-left: var(--default-horizontal-margin);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
      }
      .feedback {
        color: #b71c1c;
      }
+      @media screen and (max-width: 60em) {
+        .bigTitle {
+          font-size: 14px;
+          font-weight: bold;
+        }
+        gr-search-bar {
+          width: auto;
+        }
+        .accountContainer {
+          margin-left: .5em !important;
+        }
+      }
    </style>
    <gr-ajax auto url="/accounts/self/detail" last-response="{{account}}"></gr-ajax>
    <gr-ajax auto url="/config/server/info" last-response="{{config}}"></gr-ajax>
--- a/polygerrit-ui/app/elements/gr-change-view.html
+++ b/polygerrit-ui/app/elements/gr-change-view.html
@@ -150,7 +150,8 @@ limitations under the License.
        .changeInfo {
          flex-wrap: wrap;
        }
-        .changeInfo-column {
+        .changeInfo-column,
+        .changeInfo-column:not(:last-of-type) {
          margin-right: 0;
        }
        .changeInfo-column:not(:first-of-type) {
@@ -158,6 +159,49 @@ limitations under the License.
        }
      }
      @media screen and (max-width: 60em) {
+        .container {
+          margin: .5em 0 !important;
+        }
+        .headerContainer {
+          height: 5.15em;
+        }
+        .header {
+          align-items: flex-start;
+          flex-direction: column;
+          padding: .5em 1.25rem !important;
+        }
+        gr-change-star {
+          vertical-align: middle;
+        }
+        .header-title,
+        .header-actions,
+        .header.pinned {
+          width: 100% !important;
+        }
+        .header-title {
+          font-size: 1.1em;
+        }
+        .header-actions {
+          align-items: center;
+          display: flex;
+          justify-content: space-between;
+          margin-top: .5em;
+        }
+        .download {
+          display: none;
+        }
+        .patchSelectLabel {
+          margin-left: 0 !important;
+          margin-right: .5em;
+        }
+        .header select {
+          margin-left: 0 !important;
+          margin-right: .5em;
+        }
+        .header gr-reply-dropdown {
+          margin-left: 0 !important;
+          margin-right: .5em;
+        }
        .changeInfo {
          flex-direction: column;
          flex-wrap: nowrap;
@@ -193,24 +237,28 @@ limitations under the License.
            <span>[[_change.subject]]</span>
            <span class="changeStatus">[[_computeChangeStatus(_change.status)]]</span>
          </span>
-          <gr-reply-dropdown id="replyDropdown"
-              change-num="[[_changeNum]]"
-              patch-num="[[_patchNum]]"
-              labels="[[_change.labels]]"
-              permitted-labels="[[_change.permitted_labels]]"
-              on-send="_handleReplySent"
-              hidden$="[[!_loggedIn]]">Reply</gr-reply-dropdown>
-          <gr-button link class="download" on-tap="_handleDownloadTap">Download</gr-button>
-          <label class="patchSelectLabel" for="patchSetSelect">Patch set</label>
-          <select id="patchSetSelect" on-change="_handlePatchChange">
-            <template is="dom-repeat" items="{{_allPatchSets}}" as="patchNumber">
-              <option value$="[[patchNumber]]" selected$="[[_computePatchIndexIsSelected(index, _patchNum)]]">
-                <span>[[patchNumber]]</span>
-                /
-                <span>[[_computeLatestPatchNum(_change)]]</span>
-              </option>
-            </template>
-          </select>
+          <span class="header-actions">
+            <gr-reply-dropdown id="replyDropdown"
+                change-num="[[_changeNum]]"
+                patch-num="[[_patchNum]]"
+                labels="[[_change.labels]]"
+                permitted-labels="[[_change.permitted_labels]]"
+                on-send="_handleReplySent"
+                hidden$="[[!_loggedIn]]">Reply</gr-reply-dropdown>
+            <gr-button link class="download" on-tap="_handleDownloadTap">Download</gr-button>
+            <span>
+              <label class="patchSelectLabel" for="patchSetSelect">Patch set</label>
+              <select id="patchSetSelect" on-change="_handlePatchChange">
+                <template is="dom-repeat" items="{{_allPatchSets}}" as="patchNumber">
+                  <option value$="[[patchNumber]]" selected$="[[_computePatchIndexIsSelected(index, _patchNum)]]">
+                    <span>[[patchNumber]]</span>
+                    /
+                    <span>[[_computeLatestPatchNum(_change)]]</span>
+                  </option>
+                </template>
+              </select>
+            </span>
+          </span>
        </div>
      </div>
      <section class="changeInfo">
--- a/polygerrit-ui/app/elements/gr-file-list.html
+++ b/polygerrit-ui/app/elements/gr-file-list.html
@@ -57,10 +57,23 @@ limitations under the License.
      .status {
        width: 20px;
      }
+      .reviewed input[type="checkbox"] {
+        display: inline-block;
+        vertical-align: baseline;
+      }
      .drafts {
        color: #C62828;
        font-weight: bold;
      }
+      @media screen and (max-width: 60em) {
+        tr[selected] {
+          background-color: transparent;
+        }
+        .positionIndicator,
+        .stats {
+          display: none;
+        }
+      }
    </style>
    <gr-ajax id="filesXHR"
        url="[[_computeFilesURL(changeNum, patchNum)]]"
@@ -75,12 +88,12 @@ limitations under the License.
    <div class="tableContainer">
      <table>
        <tr>
-          <th></th>
+          <th class="positionIndicator"></th>
          <th></th>
          <th hidden$="[[!_loggedIn]]" hidden></th>
          <th>Path</th>
          <th>Comments</th>
-          <th>Stats</th>
+          <th class="stats">Stats</th>
        </tr>
        <template is="dom-repeat" items="{{files}}" as="file">
          <tr class="fileRow" selected$="[[_computeFileSelected(index, selectedIndex)]]">
@@ -98,7 +111,7 @@ limitations under the License.
              <span class="drafts">[[_computeDraftsString(_drafts, file.__path)]]</span>
              <span class="comments">[[_computeCommentsString(comments, patchNum, file.__path)]]</span>
            </td>
-            <td>
+            <td class="stats">
              +<span>[[file.lines_inserted]]</span> lines,
              -<span>[[file.lines_deleted]]</span> lines
            </td>
--- a/polygerrit-ui/app/elements/gr-message.html
+++ b/polygerrit-ui/app/elements/gr-message.html
@@ -68,6 +68,9 @@ limitations under the License.
      .name {
        font-weight: bold;
      }
+      .content {
+        font-family: var(--monospace-font-family);
+      }
      .collapsed .name,
      .collapsed .content,
      .collapsed .message {
--- a/polygerrit-ui/app/elements/gr-search-bar.html
+++ b/polygerrit-ui/app/elements/gr-search-bar.html
@@ -23,11 +23,10 @@ limitations under the License.
  <template>
    <style>
      :host {
-        display: block;
+        display: inline-block;
      }
      form {
        display: flex;
-        margin-left: 3em;
      }
      input {
        border: 1px solid #d1d2d3;
--- a/polygerrit-ui/app/index.html
+++ b/polygerrit-ui/app/index.html
@@ -18,7 +18,7 @@ limitations under the License.
 <html lang="en">
 <meta charset="utf-8">
 <meta name="description" content="Gerrit Code Review">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

 <link rel="stylesheet" href="/styles/main.css">
 <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>