Adds styles for small screens

diff --git a/web/viewer.css b/web/viewer.css
index 7b0ce0344f04fd133de86b4a4f7104f7d0090ddf..00f8c0ea7b96353591e6a2013ac116f1c2368012 100644 (file)
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -927,3 +927,47 @@ canvas {
 #PDFBug table {
   font-size: 10px;
 }
+
+@media all and (max-width: 770px) {
+  #scaleSelectContainer, #fileInput, #pageNumberLabel {
+    display: none;
+  }
+
+  #sidebarContainer {
+    top: 33px;
+    z-index: 100;
+  }
+  #sidebarContent {
+    top: 33px;
+    background-color: hsla(0,0%,0%,.7);
+  }
+  #thumbnailView, #outlineView {
+    top: 66px;
+  }
+
+  html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer {
+    left: 0px;
+  }
+  html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer {
+    right: 0px;
+  }
+
+  #pageNumber {
+    width: 30px;
+  }
+}
+
+@media all and (max-width: 500px) {
+  #viewBookmark {
+    display: none;
+  }
+
+  html[dir='ltr'] .outerCenter {
+    float: left;
+    left: 180px;
+  }
+  html[dir='rtl'] .outerCenter {
+    float: right;
+    right: 180px;
+  }
+}

diff --git a/web/viewer.html b/web/viewer.html
index 0ec05e031943eb650a87d2cce05accbef8ac4f85..45fb9f0401e2405678f5ca9bf9870297e94804c0 100644 (file)
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -81,7 +81,7 @@
                     <span data-l10n-id="next_label">Next</span>
                   </button>
                 </div>
-                <label class="toolbarLabel" for="pageNumber" data-l10n-id="page_label">Page: </label>
+                <label id="pageNumberLabel" class="toolbarLabel" for="pageNumber" data-l10n-id="page_label">Page: </label>
                 <input type="number" id="pageNumber" class="toolbarField pageNumber" onchange="PDFView.page = this.value;" value="1" size="4" min="1" tabindex="6">
                 </input>
                 <span id="numPages" class="toolbarLabel"></span>
@@ -119,7 +119,7 @@
                       <span data-l10n-id="zoom_in_label">Zoom In</span>
                      </button>
                   </div>
-                  <span class="dropdownToolbarButton">
+                  <span id="scaleSelectContainer" class="dropdownToolbarButton">
                      <select id="scaleSelect" onchange="PDFView.parseScale(this.value);" title="Zoom" oncontextmenu="return false;" tabindex="9" data-l10n-id="zoom">
                       <option id="pageAutoOption" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
                       <option id="pageActualOption" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>