Open Source Monorail

appengine/monorail/static/css/ph_mobile.css

Index: appengine/monorail/static/css/ph_mobile.css
diff --git a/appengine/monorail/static/css/ph_mobile.css b/appengine/monorail/static/css/ph_mobile.css
new file mode 100644
index 0000000000000000000000000000000000000000..baf7f235944ecb284b2fc41a0c71657f45b04083
--- /dev/null
+++ b/appengine/monorail/static/css/ph_mobile.css
@@ -0,0 +1,122 @@
+/* Copyright 2016 The Chromium Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file or at
+ * https://developers.google.com/open-source/licenses/bsd
+ */
+
+@media (max-width: 425px) {
+
+  body {
+    min-width: 0; /* get rid of hardcoded width */
+  }
+
+
+  /* Top navigation bar */
+
+  #monobar .toptabs {
+    display: none; /* hide most of the options to save some space */
+  }
+
+  #userbar {
+    padding: 5px;
+  }
+
+  #userbar > span {
+    display: inline-flex;
+    flex-wrap: wrap;
+  }
+
+
+  /* Search toolbar */
+
+  .subt {
+    padding: 5px;
+  }
+
+  .subt .inIssueEntry, .subt .inIssueList {
+    display: block;
+    margin: 10px 0 !important;
+  }
+
+  .subt label[for="searchq"], .subt label[for="can"], #can {
+    display: none; /* hide some labels and search scope helper field to save some space */
+  }
+
+
+  /* Main content */
+
+  #maincol > div > form > table > tbody > tr {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #maincol > div > form > table > tbody > tr > td {
+    display: block;
+  }
+
+  #maincol table.rowmajor {
+    display: flex;
+    flex-direction: column;
+    width: auto; /* get rid of hardcoded width */
+    max-width: 100%;
+  }
+
+  #maincol table.rowmajor tbody {
+    flex-grow: 1;
+  }
+
+  #maincol table.rowmajor tr {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #maincol table.rowmajor tr > th {
+    text-align: left;
+  }
+
+  #maincol table.rowmajor tr > td {
+    display: block;
+    width: 90%;
+  }
+
+  #maincol input, #maincol select, #maincol textarea {
+    font-size: 100%;
+    width: 100%;
+    margin-bottom: 8px;
+  }
+
+  #maincol .labelediting input {
+    max-width: 19%;
+  }
+
+  #maincol div.tip {
+    display: none;
+  }
+
+
+  /* Others */
+
+  #footer {
+    display: flex;
+    margin: 0 5px 5px 5px ;
+    text-align: left;
+  }
+
+  #attachprompt {
+    display: block;
+    padding: 10px 0;
+  }
+
+  input[type="button"], input[type="submit"], a.buttonify { /* make all types of buttons easier to click */
+    padding: 5px;
+  }
+
+  table#meta-container,
+  table#meta-container > tbody > tr,
+  table#meta-container > tbody > tr> td {
+    display: block;
+    width: 100%;
+  }
+
+}