Merge pull request #1703 from yurydelendik/small-ui

Adds styles for small screens

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;
+  }
+}

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>