瀏覽代碼

updated layouts

Signed-off-by: Gerald <[email protected]>
Gerald 11 年之前
父節點
當前提交
1bcc161389
共有 5 個文件被更改,包括 108 次插入103 次删除
  1. 3 6
      common.css
  2. 5 0
      confirm.css
  3. 16 12
      confirm.html
  4. 11 6
      options.css
  5. 73 79
      options.html

+ 3 - 6
common.css

@@ -1,11 +1,8 @@
 html,body{background:#eee;font:menu;height:100%;margin:0;padding:0;}
 h1{text-shadow:#999 3px 3px 5px;}
 .hide{display:none;}
-tr{vertical-align:top;padding:0;height:1px;}
-tr.expand{height:auto;}
-.expandr{position:relative;}
-.expanda{position:absolute;width:100%;height:100%;}
 .ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
 .frame{position:fixed;background:lightgray;border-spacing:10px;left:0;right:0;top:0;bottom:0;table-layout:fixed;width:100%;height:100%;}
-.right{text-align:right;}
-.bottom{vertical-align:bottom;}
+.frame>.header{position:relative;padding:1px 1rem;}
+.frame>.header>.buttons{position:absolute;right:1rem;}
+.frame>.body{position:absolute;left:5px;right:5px;}

+ 5 - 0
confirm.css

@@ -0,0 +1,5 @@
+.frame>.header{height:7rem;}
+.frame>.header>.buttons{bottom:3rem;}
+#url{float:left;max-width:50%;}
+#msg{text-align:right;}
+.frame>.body{top:7rem;bottom:5px;}

+ 16 - 12
confirm.html

@@ -4,24 +4,28 @@
 		<meta http-equiv="content-type" content="text/html;charset=utf-8">
 		<link rel="shortcut icon" type="image/png" href="images/icon16.png" />
 		<link rel="stylesheet" type="text/css" href="common.css" />
+		<link rel="stylesheet" type="text/css" href="confirm.css" />
 		<script type="text/javascript" src="load.js"></script>
 		<title data-i18n=extName></title>
 	</head>
 	<body>
-		<table class=frame>
-			<tr>
-				<td><h1><span data-i18n=labelInstall></span> - <span data-i18n=extName></span></h1></td>
-				<td class="right bottom">
+		<div class=frame>
+			<div class=header>
+				<h1><span data-i18n=labelInstall></span> - <span data-i18n=extName></span></h1>
+				<div class=buttons>
 					<input type=checkbox id=cClose><label for=cClose data-i18n=optionClose></label>
 					<button id=bInstall disabled=disabled data-i18n=buttonConfirmInstallation></button>
 					<button id=bClose data-i18n=buttonClose></button>
-				</td>
-			</tr>
-			<tr><td id=url class=ellipsis></td><td id=msg class="ellipsis right">&nbsp;</td></tr>
-			<tr class=expand><td id=eCode colspan=2 class=expandr></td></tr>
-		</table>
+				</div>
+				<div id=url class=ellipsis></div>
+				<div id=msg class=ellipsis></div>
+			</div>
+			<div class=body>
+				<div id=eCode></div>
+			</div>
+		</div>
 	</body>
+	<script src=common.js></script>
+	<script src=editor.js></script>
+	<script src=confirm.js></script>
 </html>
-<script src=common.js></script>
-<script src=editor.js></script>
-<script src=confirm.js></script>

+ 11 - 6
options.css

@@ -11,10 +11,12 @@ textarea,input[type=text]{box-sizing:border-box;width:100%;}
 .controls{height:1px;}
 .controls>div{padding:5px 10px;}
 fieldset.title{border:none;border-top:1px solid silver;margin:20px 0 0;}
+tr{vertical-align:top;padding:0;height:1px;}
 
 /* Installed scripts */
-#tabInstalled{height:100%;width:100%;}
-#sList{height:100%;overflow-y:auto;box-sizing:border-box;padding:0 10px 10px;border-top:1px solid darkgray;}
+#tabInstalled{height:100%;width:100%;margin:0;}
+#tabInstalled>.header{height:2rem;line-height:2rem;}
+#sList{overflow-y:auto;box-sizing:border-box;border-top:1px solid darkgray;position:absolute;top:2rem;bottom:0;width:100%;}
 #sList>div{border-bottom:1px dashed silver;padding:10px;position:relative;}
 #sList>div.disabled{background:lightgray;color:gray;}
 #sList>div.disabled .name{color:blueviolet;}
@@ -31,14 +33,17 @@ fieldset.title{border:none;border-top:1px solid silver;margin:20px 0 0;}
 #sList .panelT{position:absolute;top:10px;right:10px;}
 
 /* Editor */
-#eMeta{max-width:450px;max-height:100%;height:auto;background:lightgray;z-index:10;right:-1px;padding:10px;box-sizing:border-box;overflow-y:auto;box-shadow:gray -2px 4px 4px;}
+#eMeta{max-width:450px;max-height:100%;height:auto;background:lightgray;z-index:10;right:0;top:0;padding:10px;box-sizing:border-box;overflow-y:auto;box-shadow:gray -2px 4px 4px;position:absolute;}
 #eMeta table{width:100%;}
 #eMeta td{width:1px;white-space:nowrap;vertical-align:middle;}
 #eMeta td.expand{width:auto;}
+.frame>.header{height:5rem;}
+.frame>.header>.buttons{bottom:1rem;}
+.frame>.footer{position:absolute;height:3rem;bottom:0;width:100%;line-height:3rem;}
+.frame>.footer>.options{float:left;}
+.frame>.footer>.right{text-align:right;}
+.frame>.body{top:5rem;bottom:3rem;}
 
 /* Settings */
-#tabSettings>table{width:100%;}
-#tabSettings>table td{width:1px;white-space:nowrap;vertical-align:middle;}
-#tabSettings>table td.expand{width:auto;}
 #xList{display:block;width:100%;white-space:normal;min-height:100px;}
 #xList>option{display:inline-block;width:180px;margin:2px;padding:0 5px;border:1px dashed lightgray;}

+ 73 - 79
options.html

@@ -23,22 +23,16 @@
 				</div>
 			</div>
 			<div class=content>
-				<table id=tabInstalled class=hide>
-					<tr>
-						<td>
-							<button id=bNew data-i18n=buttonNew></button>
-							<button id=bUpdate data-i18n=buttonUpdateAll></button>
-							<a href=https://greasyfork.org/scripts target=_blank data-i18n=anchorGetMoreScripts></a>
-						</td>
-					</tr>
-					<tr class=expand>
-						<td class=expandr>
-							<div id=sList class=expanda>
-								<span id=message data-i18n=msgLoading></span>
-							</div>
-						</td>
-					</tr>
-				</table>
+				<div id=tabInstalled class=hide>
+					<div class=header>
+						<button id=bNew data-i18n=buttonNew></button>
+						<button id=bUpdate data-i18n=buttonUpdateAll></button>
+						<a href=https://greasyfork.org/scripts target=_blank data-i18n=anchorGetMoreScripts></a>
+					</div>
+					<div id=sList>
+						<span id=message data-i18n=msgLoading></span>
+					</div>
+				</div>
 				<div id=tabSettings class=hide>
 					<h1 data-i18n=labelSettings></h1>
 					<div><label><input type=checkbox id=cUpdate><span data-i18n=labelAutoUpdate></span></label></div>
@@ -65,71 +59,71 @@
 				</div>
 			</div>
 		</div>
-		<table id=wndEditor class="frame hide">
-			<tr>
-				<td><h2 data-i18n=labelScriptEditor></h2></td>
-				<td class="right bottom"><button id=bCustom><span id=sCustom></span> <span data-i18n=buttonCustomMeta></span></button></td>
-			</tr>
-			<tr class=expand>
-				<td colspan=2 class=expandr>
-					<div id=eCode class=expanda></div>
-					<div id=eMeta class="expanda hide">
-						<table>
-							<tr>
-								<td title="@name" data-i18n=labelName></td><td class=expand><input type=text id=mName></td>
-								<td title="@run-at" data-i18n=labelRunAt></td><td>
-									<select id=mRunAt>
-										<option value=default data-i18n=labelRunAtDefault></option>
-										<option value=start>document-start</option>
-										<option value=idle>document-idle</option>
-										<option value=end>document-end</option>
-									</select>
-								</td>
-							</tr>
-							<tr title="@homepageURL"><td data-i18n=labelHomepageURL></td><td colspan=3 class=expand><input type=text id=mHomepageURL></td></tr>
-						</table>
-						<table>
-							<tr title="@updateURL"><td data-i18n=labelUpdateURL></td><td class=expand><input type=text id=mUpdateURL></td></tr>
-							<tr title="@downloadURL"><td data-i18n=labelDownloadURL></td><td class=expand><input type=text id=mDownloadURL></td></tr>
-						</table>
-						<fieldset title="@include">
-							<legend>
-								<span data-i18n=labelInclude></span>
-								<label><input type=checkbox id=cInclude><span data-i18n=labelKeepInclude></span></label>
-							</legend>
-							<div data-i18n=labelCustomInclude></div>
-							<textarea id=mInclude></textarea>
-						</fieldset>
-						<fieldset title="@match">
-							<legend>
-								<span data-i18n=labelMatch></span>
-								<label><input type=checkbox id=cMatch><span data-i18n=labelKeepMatch></span></label>
-							</legend>
-							<div data-i18n=labelCustomMatch></div>
-							<textarea id=mMatch></textarea>
-						</fieldset>
-						<fieldset title="@exclude">
-							<legend>
-								<span data-i18n=labelExclude></span>
-								<label><input type=checkbox id=cExclude><span data-i18n=labelKeepExclude></span></label>
-							</legend>
-							<div data-i18n=labelCustomExclude></div>
-							<textarea id=mExclude></textarea>
-						</fieldset>
-					</div>
-				</td>
-			</tr>
-			<tr>
-				<td><label><input type=checkbox id=eUpdate><span data-i18n=labelAllowUpdate></span></label></td>
-				<td class=right>
+		<div id=wndEditor class="frame hide">
+			<div class=header>
+				<h2 data-i18n=labelScriptEditor></h2>
+				<div class=buttons><button id=bCustom><span id=sCustom></span> <span data-i18n=buttonCustomMeta></span></button></div>
+			</div>
+			<div class=body>
+				<div id=eCode></div>
+				<div id=eMeta class=hide>
+					<table>
+						<tr>
+							<td title="@name" data-i18n=labelName></td><td class=expand><input type=text id=mName></td>
+							<td title="@run-at" data-i18n=labelRunAt></td><td>
+								<select id=mRunAt>
+									<option value=default data-i18n=labelRunAtDefault></option>
+									<option value=start>document-start</option>
+									<option value=idle>document-idle</option>
+									<option value=end>document-end</option>
+								</select>
+							</td>
+						</tr>
+						<tr title="@homepageURL"><td data-i18n=labelHomepageURL></td><td colspan=3 class=expand><input type=text id=mHomepageURL></td></tr>
+					</table>
+					<table>
+						<tr title="@updateURL"><td data-i18n=labelUpdateURL></td><td class=expand><input type=text id=mUpdateURL></td></tr>
+						<tr title="@downloadURL"><td data-i18n=labelDownloadURL></td><td class=expand><input type=text id=mDownloadURL></td></tr>
+					</table>
+					<fieldset title="@include">
+						<legend>
+							<span data-i18n=labelInclude></span>
+							<label><input type=checkbox id=cInclude><span data-i18n=labelKeepInclude></span></label>
+						</legend>
+						<div data-i18n=labelCustomInclude></div>
+						<textarea id=mInclude></textarea>
+					</fieldset>
+					<fieldset title="@match">
+						<legend>
+							<span data-i18n=labelMatch></span>
+							<label><input type=checkbox id=cMatch><span data-i18n=labelKeepMatch></span></label>
+						</legend>
+						<div data-i18n=labelCustomMatch></div>
+						<textarea id=mMatch></textarea>
+					</fieldset>
+					<fieldset title="@exclude">
+						<legend>
+							<span data-i18n=labelExclude></span>
+							<label><input type=checkbox id=cExclude><span data-i18n=labelKeepExclude></span></label>
+						</legend>
+						<div data-i18n=labelCustomExclude></div>
+						<textarea id=mExclude></textarea>
+					</fieldset>
+				</div>
+			</div>
+			<div class=footer>
+				<div class=options>
+					<label><input type=checkbox id=eUpdate><span data-i18n=labelAllowUpdate></span></label>
+				</div>
+				<div class=right>
 					<button id=eSave data-i18n=buttonSave></button>
 					<button id=eSaveClose data-i18n=buttonSaveClose></button>
 					<button id=eClose data-i18n=buttonClose></button>
-				</td>
-			</tr>
-		</table>
+				</div>
+			</div>
+		</div>
 	</body>
+	<script src="common.js"></script>
+	<script src="editor.js"></script>
+	<script src="options.js"></script>
 </html>
-<script src="common.js"></script>
-<script src="editor.js"></script>
-<script src="options.js"></script>