Adjust dialog window structure

css/style.css

@@ -99,6 +99,8 @@ span {
   --settings-background-color: #fafafa;
 
   --btn-bg-color: #F0F0F0;
+  --header-bg-color: #F0F0F0;
+  --header-border-color: #909090;
 }
 category-list.rightalign-labelsize panel-label::part(size) {
   margin-left: auto;
@@ -136,14 +138,6 @@ div.dlg-window {
   max-width: 95vw;
   max-height: 95vh;
 }
-div.dlg-window > div:first-child {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  position: sticky;
-  top: 0;
-}
 div.dlg-window div.row {
   margin: 0.5rem 0;
   padding: 0;
@@ -156,21 +150,29 @@ div.dlg-window div.row > div {
   margin-bottom: 0.1rem;
 }
 div.fxcaret {overflow: auto}
-div.dlg-header {
-  line-height: 20px;
-  background: #F0F0F0 url(../images/blank.gif) no-repeat scroll 4px center;
-  border-bottom: 1px solid #909090;
+.dlg-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  padding: 0.5rem;
+  background-color: var(--header-bg-color);
+  border-bottom: 1px solid var(--header-border-color);
   border-radius: 10px 10px 0 0;
+}
+.dlg-header > div:first-child {
+  line-height: 2rem;
   font-weight: bold;
-  padding: 0.25rem 0.25rem 0.25rem 3rem;
-  flex-grow: 1;
+  padding-left: 2rem;
+  background: no-repeat scroll 0.15rem center;
 }
 a.dlg-close:link, a.dlg-close:visited {
   display: block;
-  position: absolute;
-  right: 5px;
   height: 14px;
   width: 14px;
+  margin: auto 0.5rem;
   background: transparent url(../images/close.png) no-repeat scroll left center;
 }
 a.dlg-close:hover {background-position-x: -14px;}
@@ -272,7 +274,7 @@ div#plugins {background: url(../images/plugin.png) 0px center}
 #pview_save_view_button { align-self: center; width: 38px; height: 19px; padding: 0px; line-height: 2px; font-size: 19px;  }
 
 a {color: #686868;}
-#maincont {height: calc(100vh - 36px - 5px - 25px - 5px);}
+#maincont {height: calc(100dvh - 36px - 5px - 25px - 5px);}
 .offcanvas-header .btn-close {background-color: var(--btn-bg-color);}
 #offcanvas-sidepanel {
   background-color: #FFFFFF;
@@ -316,7 +318,7 @@ div#stg-pages {
   flex-direction: column;
   overflow-x: auto;
 }
-div#stg-header { background-image: url(../images/settings.gif); }
+#stg-header {background-image: url(../images/settings.gif);}
 
 div#stg .lm {
   flex: 0 0 auto;
@@ -459,24 +461,24 @@ div.cont {padding: 6px;}
   color: unset;
 }
 
-div#dlgLabel {max-width: 350px;}
-div#dlgLabel div.dlg-header {background-image: url(../images/label.gif)}
-div#padd {width: 250px;}
-div#padd div.dlg-header {background-image: url(../images/props.gif)}
-div#dlgAbout {max-width: 300px;}
-div#dlgAbout div.dlg-header {background-image: url(../images/about.gif)}
-div#dlgHelp {max-width: 300px;}
-div#dlgHelp div.dlg-header {background-image: url(../images/about.gif)}
+#dlgLabel {max-width: 350px;}
+#dlgLabel-header {background-image: url(../images/label.gif)}
+#padd {width: 250px;}
+#padd-header {background-image: url(../images/props.gif)}
+#dlgAbout {max-width: 300px;}
+#dlgAbout-header {background-image: url(../images/about.gif)}
+#dlgHelp {max-width: 300px;}
+#dlgHelp-header {background-image: url(../images/about.gif)}
 
-div#dlgProps {max-width: 450px;}
-div#dlgProps div.dlg-header {background-image: url(../images/props.gif)}
-div#dlgProps textarea#prop-trackers {width: 100%; height: 70px; background: #FFFFFF; border: 1px solid #D0D0D0}
-input#prop-seed_ratio {width: 40px}
+#dlgProps {max-width: 450px;}
+#dlgProps-header {background-image: url(../images/props.gif)}
+#prop-trackers {width: 100%; height: 70px; background: #FFFFFF; border: 1px solid #D0D0D0}
+#prop-seed_ratio {width: 40px}
 
-div#yesnoDlg {width: 280px; height: auto; min-height: 100px}
-div#yesnoDlg div.dlg-header {background-image: url(../images/error.gif)}
-div#yesnoDlg div.content {width: 260px; margin: 5px; padding: 5px; line-height: 16px}
-div#yesnoDlg div.content input {margin-top: 5px}
+#yesnoDlg {width: 280px; height: auto; min-height: 100px}
+#yesnoDlg-header {background-image: url(../images/error.gif)}
+#yesnoDlg div.content {width: 260px; margin: 5px; padding: 5px; line-height: 16px}
+#yesnoDlg div.content input {margin-top: 5px}
 
 span#loadimg {padding: 20px; background: transparent url(../images/ajax-loader.gif) no-repeat center center; }
 .webkit div#msg {position: fixed;}
@@ -486,14 +488,15 @@ span#loadimg {padding: 20px; background: transparent url(../images/ajax-loader.g
 .Icon_Dir {background: transparent url(../images/dir.gif) no-repeat left center}
 .Icon_Share {background: transparent url(../images/share.gif) no-repeat left center}
 
-div#tadd-header {background-image: url(../images/world.gif)}
+#tadd-header {background-image: url(../images/world.gif)}
 
 .konqueror div#tadd label { width: 80px; }
 .konqueror div#tadd { height: 290px; }
 .konqueror #st_con { height: 340px; overflow: auto; }
 
 #StatusBar {
   position: absolute;
+  z-index: 2;
   left: 0;
   bottom: 0;
   border-top: 1px solid #A0A0A0;

js/common.js

@@ -202,28 +202,34 @@ function ir(val)
 	return(isNaN(v) ? 0 : v);
 }
 
-function linked(obj, _33, lst)
-{
-	var tn = obj.tagName.toLowerCase();
-	if((tn == "input") && (obj.type == "checkbox"))
+/**
+ * Link the enabled status of a series of HTML elements
+ * with a checkbox or a dropdown select.
+ * @param {HTMLInputElement | HTMLSelectElement} obj The HTML element
+ * to be linked to.
+ * @param {boolean | string} _33 An additional option when linking.
+ * 
+ * (1) When linking to a checkbox, a falsey value will enable the linked
+ * objects when the checkbox is checked on.
+ * 
+ * (2) When linking to a dropdown select, it should be one of the values
+ * from the options, which will disable the linked elements when selected.
+ * @param {string[]} lst An array of HTML `id`s of elements to be linked.
+ */
+function linked(obj, _33, lst) {
+	const tn = obj.tagName.toLowerCase();
+	if ((tn === "input") && (obj.type === "checkbox"))
 		var d = _33 ? obj.checked : !obj.checked;
-	else
-		if(tn == "select")
-		{
-			var v = obj.options[obj.selectedIndex].value;
-			var d = (v == _33) ? true : false;
-		}
-	for(var i = 0; i < lst.length; i++)
-	{
-		var o = $$(lst[i]);
-		if(o)
-		{
-			o.disabled = d;
-			o = $$("lbl_" + lst[i]);
-			if(o)
-				o.className = (d) ? "disabled" : "";
-		}
-   	}
+	else if (tn === "select") {
+		var v = obj.options[obj.selectedIndex].value;
+		var d = (v === _33) ? true : false;
+	} else {
+		return;
+	}
+	lst.forEach(id => {
+		$(`#${id}`).prop({disabled:d});
+		d ? $(`#lbl_${id}`).addClass("disabled") : $(`#lbl_${id}`).removeClass("disabled");
+	});
 }
 
 function escapeHTML(str)

js/objects.js

@@ -35,6 +35,8 @@ class DnD {
 	start(e) {
 		// allow dnd only for medium-sized screens and up
 		if ($(window).width() < 768) return false;
+		// disallow dnd on links
+		if (e.target.tagName === "A") return false;
 
 		const self = e.data;
 		if (self.options.onStart(e)) {
@@ -123,8 +125,8 @@ var theDialogManager = {
 		}
 		$("#dialog-container").append(
 			$("<div>").attr("id",id).addClass("dlg-window").append(
-				$("<div>").append(
-					$("<div>").attr({id:`${id}-header`}).addClass("dlg-header").text(name),
+				$("<div>").addClass("dlg-header").append(
+					$("<div>").attr({id:`${id}-header`}).text(name),
 					$("<a>").attr({href:"#"}).addClass("dlg-close"),
 				),
 				content,
@@ -141,6 +143,7 @@ var theDialogManager = {
 			nokeyclose: noClose,
 		});
 		if (!noClose)
+			// prevent dragging on close button
 			obj.find(".dlg-close").on("click", () => theDialogManager.hide(id));
 		var self = this;
 		var checkForButtons = function me(val) {

plugins/_task/_task.css

@@ -16,7 +16,7 @@
 #tskcmderrors {
   height: 12rem;
 }
-div#tsk_btns {background: transparent url(./images/ajax-loader.gif) no-repeat 5px 7px;}
-div#tskConsole div.dlg-header {background-image: url(../../images/settings.gif)}
+#tsk_btns {background: transparent url(./images/ajax-loader.gif) no-repeat 5px 7px;}
+#tskConsole-header {background-image: url(../../images/settings.gif)}
 
 .konqueror div.tskconsole { height: 546px }

plugins/bulk_magnet/bulk_magnet.css

@@ -1,6 +1,6 @@
-div#dlgBulkAdd {width: 395px}
-div#dlgBulkAdd div.dlg-header {background-image: url(../../images/world.gif)}
-div#dlgBulkAdd textarea {
+#dlgBulkAdd {width: 395px}
+#dlgBulkAdd-header {background-image: url(../../images/world.gif)}
+#dlgBulkAdd textarea {
   height: 200px;
   white-space: nowrap;
 }

plugins/create/create.css

@@ -1,6 +1,6 @@
-div#create {background: url(../../images/toolbar.png) -48px center}
-div#tcreate div.dlg-header {background-image: url(./images/create16.gif)}
-div#tcreate textarea {resize: none; height: 8rem;}
+#create {background: url(../../images/toolbar.png) -48px center}
+#tcreate-header {background-image: url(./images/create16.gif)}
+#tcreate textarea {resize: none; height: 8rem;}
 
 #recentTrackers {width: 130px;}
 #deleteFromRecentTrackers {text-align: left;}
@@ -10,13 +10,13 @@ div#tcreate textarea {resize: none; height: 8rem;}
 /* X-Small devices (portrait phones, less than 576px) */
 /* No media query for `xs` since this is the default in Bootstrap */
 /* Custom rules for medium devices */
-div#tcreate {min-width: 90vw;}
+#tcreate {min-width: 90vw;}
 
 /* Small devices (landscape phones, 576px and up) */
 @media (min-width: 576px) { 
   /* Custom rules for small devices */
-  div#tcreate {min-width: 518px;}
-  div#tcreate textarea {height: 16rem;}
+  #tcreate {min-width: 518px;}
+  #tcreate textarea {height: 16rem;}
 }
 
 /* Medium devices (tablets, 768px and up) */

plugins/create/konqueror.css

@@ -1 +1 @@
-div#tcreate {height: 365px}
+#tcreate {height: 365px}

plugins/datadir/datadir.css

@@ -1,11 +1,11 @@
-div#dlg_datadir div.dlg-header {background-image: url(../../images/settings.gif)}
+#dlg_datadir-header {background-image: url(../../images/settings.gif)}
 
 /* Custom break point settings for responsiveness */
 
 /* X-Small devices (portrait phones, less than 576px) */
 /* No media query for `xs` since this is the default in Bootstrap */
 /* Custom rules for medium devices */
-div#dlg_datadir {max-width: 95vw;}
+#dlg_datadir {max-width: 95vw;}
 
 /* Small devices (landscape phones, 576px and up) */
 @media (min-width: 576px) { 
@@ -15,7 +15,7 @@ div#dlg_datadir {max-width: 95vw;}
 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) { 
   /* Custom rules for medium devices */
-  div#dlg_datadir {max-width: 600px;}
+  #dlg_datadir {max-width: 600px;}
 }
 
 /* Large devices (desktops, 992px and up) */

plugins/edit/edit.css

@@ -1,12 +1,10 @@
-div#tedit div.dlg-header {
-  background-image: url(../../images/settings.gif);
-}
+#tedit-header {background-image: url(../../images/settings.gif);}
 
 /* X-Small devices (portrait phones, less than 576px) */
 /* No media query for `xs` since this is the default in Bootstrap */
 /* Custom rules for medium devices */
-div#tedit {max-width: 95vw;}
-textarea#etrackers {
+#tedit {max-width: 95vw;}
+#etrackers {
   line-height: 1.2rem;
   height: 12rem;
   word-break: break-all;
@@ -20,8 +18,8 @@ textarea#etrackers {
 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) { 
   /* Custom rules for medium devices */
-  div#tedit {min-width: 500px;}
-  textarea#etrackers {
+  #tedit {min-width: 500px;}
+  #etrackers {
     height: 24rem;
   }
 }

plugins/extratio/extratio.css

@@ -1,14 +1,12 @@
-div#dlgEditRatioRules {font-size: 11px; font-family: Tahoma, Arial, Helvetica, sans-serif; overflow: visible}
-div#dlgEditRatioRules div.dlg-header {background-image: url(../../images/settings.gif)}
-div#dlgEditRatioRules .row {margin: 0 0 0.25rem 0; padding: 0;}
+#dlgEditRatioRules-header {background-image: url(../../images/settings.gif)}
 
 ul#rlsul {margin: 0.25rem; padding: 0.25rem; list-style: none; white-space: nowrap;}
 ul#rlsul > li {margin: 0.2rem 0; display: flex; flex-direction: row;}
 ul#rlsul > li input[type="text"] {border: solid 1px #000000; border-radius: 3px; flex-grow: 1;}
 ul#rlsul > li input.TextboxFocus {background-color: #CFDEEF; }
 ul#rlsul > li input.TextboxNormal {background-color: #FFFFFF }
 
-#exratio_buttons1 input.Button {width: 57px;}
+#exratio_buttons1 button {width: 57px;}
 
 /* Custom break point settings for responsiveness */
 

plugins/extratio/init.js

@@ -75,7 +75,7 @@ plugin.loadRules = function( rle )
 	plugin.curRule = null;
 	var list = $("#rlsul");
 	list.empty();
-	plugin.rules = rle;
+	plugin.rules = rle || [];
 	plugin.maxRuleNo = 0;
 	for(var i=0; i<plugin.rules.length; i++)
 	{
@@ -174,13 +174,19 @@ theWebUI.downRatioRule = function()
 	}	
 }
 
-theWebUI.addNewRatioRule = function()
-{
-	var list = $("#rlsul");
+theWebUI.addNewRatioRule = function() {
+	const list = $("#rlsul");
 	plugin.maxRuleNo++;
 	var f = { name: theUILang.ratioNewRule, enabled: 1, pattern: "mininova.org", reason: 1, ratio: "", channel: "", no: plugin.maxRuleNo };
-	var i = plugin.rules.length;
-	list.append( $("<li>").html("<input type='checkbox' id='_rre"+i+"'/><input type='text' class='TextboxNormal' onfocus=\"theWebUI.selectRatioRule(this);\" id='_rrn"+i+"'/>"));
+	var i = plugin.rules?.length ?? 0;
+	list.append(
+		$("<li>").append(
+			$("<input>").attr({type:"checkbox", id:`_rre${i}`}),
+			$("<input>").attr({type:"text", id:`_rrn${i}`})
+				.addClass("TextboxNormal")
+				.on("focus", (ev) => theWebUI.selectRatioRule(ev.target)),
+		),
+	);
 	plugin.rules.push(f);
 	$("#_rrn"+i).val( f.name );
 	if(f.enabled)
@@ -322,13 +328,15 @@ plugin.onLangLoaded = function() {
 				),
 				$("<div>").attr({id: "exratio_buttons1"}).addClass("buttons-group-row").append(
 					...[
-						["ratAddRule", theUILang.ratAddRule, "addNewRatioRule"],
-						["ratDelRule", theUILang.ratDelRule, "deleteCurrentRatioRule"],
-						["ratUpRule", theUILang.ratUpRule, "upRatioRule"],
-						["ratDownRule", theUILang.ratDownRule, "downRatioRule"],
-					].map(([id, value, onclick]) => $("<input>").attr(
-						{type: "button", id: id, onclick: "theWebUI." + onclick + "(); return(false);"}
-					).addClass("Button").val(value)),
+						["ratAddRule", theUILang.ratAddRule, theWebUI.addNewRatioRule],
+						["ratDelRule", theUILang.ratDelRule, theWebUI.deleteCurrentRatioRule],
+						["ratUpRule", theUILang.ratUpRule, theWebUI.upRatioRule],
+						["ratDownRule", theUILang.ratDownRule, theWebUI.downRatioRule],
+					].map(([id, value, onclick]) => $("<button>")
+						.attr({type:"button", id:id})
+						.addClass("Button")
+						.on("click", onclick)
+						.text(value)),
 				),
 			),
 			$("<div>").addClass("col-md-6 flex-column align-items-stretch").append(