Bläddra i källkod

fixed rendering issues on Firefox mobile

Gildas 7 år sedan
förälder
incheckning
79eaa8f5e2
2 ändrade filer med 111 tillägg och 114 borttagningar
  1. 8 9
      extension/ui/pages/options.css
  2. 103 105
      extension/ui/pages/options.html

+ 8 - 9
extension/ui/pages/options.css

@@ -1,5 +1,7 @@
 body {
     box-sizing: border-box;
+    padding: 0px;
+    margin: 0px;
     background-color: #fff;
     margin-left: auto;
     margin-right: auto;
@@ -9,10 +11,6 @@ body {
     height: auto;
 }
 
-main {
-    padding: 10px;
-}
-
 button {
     background: white;
     border-color: rgb(191, 191, 191);
@@ -30,7 +28,7 @@ button:active {
 input[type="checkbox"] {
     margin-left: 30px;
     position: relative;
-    top: -2px;
+    align-self: flex-start;
 }
 
 input[type="number"] {
@@ -48,8 +46,8 @@ h3 {
 }
 
 details {
-    padding-left: 12px;
-    padding-right: 12px;
+    margin-left: 12px;
+    margin-right: 12px;
     border-top: gray 1px dashed;
 }
 
@@ -60,7 +58,7 @@ details:last-of-type {
 details>summary {
     margin-bottom: 10px;
     margin-top: 10px;
-    min-width: 350px;
+    min-width: 340px;
     cursor: pointer;
 }
 
@@ -81,7 +79,7 @@ a {
     display: flex;
     justify-content: space-between;
     margin-top: 5px;
-    padding-left: 12px;
+    padding-left: 12px;    
 }
 
 .option:last-of-type {
@@ -94,4 +92,5 @@ a {
 
 .option.bottom {
     padding-top: 24px;
+    padding-right: 12px;
 }

+ 103 - 105
extension/ui/pages/options.html

@@ -9,111 +9,109 @@
 
 <body>
 	<h3>Options</h3>
-	<main>
-		<details>
-			<summary>User interface</summary>
-			<div class="option">
-				<label for="contextMenuEnabledInput">add entry in the context menu</label>
-				<input type="checkbox" id="contextMenuEnabledInput">
-			</div>
-			<div class="option">
-				<label for="shadowEnabledInput">overlay a shadow on the page during processing</label>
-				<input type="checkbox" id="shadowEnabledInput">
-			</div>
-			<div class="option">
-				<label for="displayInfobarInput">display an infobar when viewing archives</label>
-				<input type="checkbox" id="displayInfobarInput">
-			</div>
-			<div class="option">
-				<label for="displayStatsInput">display stats in the console after processing</label>
-				<input type="checkbox" id="displayStatsInput">
-			</div>
-		</details>
-		<details>
-			<summary>File name</summary>
-			<div class="option">
-				<label for="appendSaveDateInput">append the save date to the file name</label>
-				<input type="checkbox" id="appendSaveDateInput">
-			</div>
-			<div class="option">
-				<label for="confirmFilenameInput">confirm file name before saving the page</label>
-				<input type="checkbox" id="confirmFilenameInput">
-			</div>
-		</details>
-		<details>
-			<summary>Page content</summary>
-			<div class="option">
-				<label for="compressHTMLInput">compress HTML</label>
-				<input type="checkbox" id="compressHTMLInput">
-			</div>
-			<div class="option">
-				<label for="removeImportsInput">remove HTML imports</label>
-				<input type="checkbox" id="removeImportsInput">
-			</div>
-			<div class="option">
-				<label for="removeFramesInput">remove frames</label>
-				<input type="checkbox" id="removeFramesInput">
-			</div>
-			<div class="option">
-				<label for="removeHiddenElementsInput">remove hidden elements</label>
-				<input type="checkbox" id="removeHiddenElementsInput">
-			</div>
-			<div class="option">
-				<label for="saveRawPageInput">save raw page</label>
-				<input type="checkbox" id="saveRawPageInput">
-			</div>
-		</details>
-		<details>
-			<summary>Pages resources</summary>
-			<div class="option">
-				<label for="removeScriptsInput">remove scripts</label>
-				<input type="checkbox" id="removeScriptsInput">
-			</div>
-			<div class="option">
-				<label for="removeVideoSrcInput">remove video sources</label>
-				<input type="checkbox" id="removeVideoSrcInput">
-			</div>
-			<div class="option">
-				<label for="removeAudioSrcInput">remove audio sources</label>
-				<input type="checkbox" id="removeAudioSrcInput">
-			</div>
-			<div class="option">
-				<label for="compressCSSInput">compress CSS</label>
-				<input type="checkbox" id="compressCSSInput">
-			</div>
-			<div class="option">
-				<label for="removeUnusedCSSRulesInput">remove unused CSS rules</label>
-				<input type="checkbox" id="removeUnusedCSSRulesInput">
-			</div>
-			<div class="option">
-				<label for="lazyLoadImagesInput">save lazy loaded images</label>
-				<input type="checkbox" id="lazyLoadImagesInput">
-			</div>
-			<div class="option">
-				<label for="maxResourceSizeEnabledInput">set a maximum size for embedded resources</label>
-				<input type="checkbox" id="maxResourceSizeEnabledInput">
-			</div>
-			<div class="option second-level">
-				<label for="maxResourceSizeInput">maximum size (Mb)</label>
-				<input type="number" id="maxResourceSizeInput" min="1">
-			</div>
-		</details>
-		<details>
-			<summary>Misc.</summary>
-			<div class="option">
-				<label for="backgroundSaveInput">save pages in background</label>
-				<input type="checkbox" id="backgroundSaveInput">
-			</div>
-			<div class="option">
-				<label for="autoSaveDelayInput">auto-save wait delay (sec.)</label>
-				<input type="number" id="autoSaveDelayInput" min="0">
-			</div>
-		</details>
-		<div class="option bottom">
-			<a href="help.html" target="SingleFileHelpPage">help</a>
-			<button id="resetButton" title="Reset all the options to default values">Reset</button>
-		</div>
-	</main>
+	<details>
+		<summary>User interface</summary>
+		<div class="option">
+			<label for="contextMenuEnabledInput">add entry in the context menu</label>
+			<input type="checkbox" id="contextMenuEnabledInput">
+		</div>
+		<div class="option">
+			<label for="shadowEnabledInput">overlay a shadow on the page during processing</label>
+			<input type="checkbox" id="shadowEnabledInput">
+		</div>
+		<div class="option">
+			<label for="displayInfobarInput">display an infobar when viewing archives</label>
+			<input type="checkbox" id="displayInfobarInput">
+		</div>
+		<div class="option">
+			<label for="displayStatsInput">display stats in the console after processing</label>
+			<input type="checkbox" id="displayStatsInput">
+		</div>
+	</details>
+	<details>
+		<summary>File name</summary>
+		<div class="option">
+			<label for="appendSaveDateInput">append the save date to the file name</label>
+			<input type="checkbox" id="appendSaveDateInput">
+		</div>
+		<div class="option">
+			<label for="confirmFilenameInput">confirm file name before saving the page</label>
+			<input type="checkbox" id="confirmFilenameInput">
+		</div>
+	</details>
+	<details>
+		<summary>Page content</summary>
+		<div class="option">
+			<label for="compressHTMLInput">compress HTML</label>
+			<input type="checkbox" id="compressHTMLInput">
+		</div>
+		<div class="option">
+			<label for="removeImportsInput">remove HTML imports</label>
+			<input type="checkbox" id="removeImportsInput">
+		</div>
+		<div class="option">
+			<label for="removeFramesInput">remove frames</label>
+			<input type="checkbox" id="removeFramesInput">
+		</div>
+		<div class="option">
+			<label for="removeHiddenElementsInput">remove hidden elements</label>
+			<input type="checkbox" id="removeHiddenElementsInput">
+		</div>
+		<div class="option">
+			<label for="saveRawPageInput">save raw page</label>
+			<input type="checkbox" id="saveRawPageInput">
+		</div>
+	</details>
+	<details>
+		<summary>Pages resources</summary>
+		<div class="option">
+			<label for="removeScriptsInput">remove scripts</label>
+			<input type="checkbox" id="removeScriptsInput">
+		</div>
+		<div class="option">
+			<label for="removeVideoSrcInput">remove video sources</label>
+			<input type="checkbox" id="removeVideoSrcInput">
+		</div>
+		<div class="option">
+			<label for="removeAudioSrcInput">remove audio sources</label>
+			<input type="checkbox" id="removeAudioSrcInput">
+		</div>
+		<div class="option">
+			<label for="compressCSSInput">compress CSS</label>
+			<input type="checkbox" id="compressCSSInput">
+		</div>
+		<div class="option">
+			<label for="removeUnusedCSSRulesInput">remove unused CSS rules</label>
+			<input type="checkbox" id="removeUnusedCSSRulesInput">
+		</div>
+		<div class="option">
+			<label for="lazyLoadImagesInput">save lazy loaded images</label>
+			<input type="checkbox" id="lazyLoadImagesInput">
+		</div>
+		<div class="option">
+			<label for="maxResourceSizeEnabledInput">set a maximum size for embedded resources</label>
+			<input type="checkbox" id="maxResourceSizeEnabledInput">
+		</div>
+		<div class="option second-level">
+			<label for="maxResourceSizeInput">maximum size (Mb)</label>
+			<input type="number" id="maxResourceSizeInput" min="1">
+		</div>
+	</details>
+	<details>
+		<summary>Misc.</summary>
+		<div class="option">
+			<label for="backgroundSaveInput">save pages in background</label>
+			<input type="checkbox" id="backgroundSaveInput">
+		</div>
+		<div class="option">
+			<label for="autoSaveDelayInput">auto-save wait delay (sec.)</label>
+			<input type="number" id="autoSaveDelayInput" min="0">
+		</div>
+	</details>
+	<div class="option bottom">
+		<a href="help.html" target="SingleFileHelpPage">help</a>
+		<button id="resetButton" title="Reset all the options to default values">Reset</button>
+	</div>
 	<script type="text/javascript" src="/lib/browser-polyfill/custom-browser-polyfill.js"></script>
 	<script type="text/javascript" src="../bg/options.js"></script>
 </body>