Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply flex layout to RSS Rule Manager dialog #2691

Merged
merged 10 commits into from
Jul 18, 2024
37 changes: 28 additions & 9 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,27 @@
* { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0,0,0,1.0); }
html, body {border: 0; margin: 0; padding: 0; cursor: default; overflow: hidden; background-color: #F5F5F5; height: 100%;}
html, body, input,select,button,textarea{font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px;}
input[type=file] {border: solid 1px #676774; border-radius: 3px; width: 100%;}
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
fieldset {
border: 1px solid #D0D0D0;
border-radius:6px;
margin: 0.25rem 0;
padding: 0.25rem 0.5rem;
}
select, input[type=file], input[type=text] {
border: 1px solid #B0B0B0;
border-radius: 3px;
margin: 0.25rem 0;
padding: 0.25rem;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.light-theme { color-scheme: light; }
.dark-theme { color-scheme: dark; }
:root {
Expand Down Expand Up @@ -97,18 +117,16 @@ div#t div#plugins {background: transparent url(../images/plugin.png) no-repeat 0
div#t a#mnu_go {margin: 3px 0 0 0; padding: 3px}
div#t #ind {margin-top: 2px; background: transparent url(../images/ajax-loader.gif) no-repeat 0px center; width: 32px; margin-right: 2px; line-height: 26px; cursor: default; }

input.Textbox, button, input.Button, select {border: 1px solid #B0B0B0; font-size: 11px; padding: 2px}
input.Textbox, button, input.Button {border: 1px solid #B0B0B0; font-size: 11px; padding: 2px}
Input.TextboxShort {border: 1px solid #B0B0B0; font-size: 11px; padding: 2px; width: 50px}
Input.TextboxMid {border: 1px solid #B0B0B0; font-size: 11px; padding: 2px; width: 110px}
Input.TextboxLarge {border: 1px solid #B0B0B0; font-size: 11px; padding: 2px; width: 220px}
Input.TextboxVShort {border: 1px solid #B0B0B0; font-size: 11px; padding: 2px; width: 30px}
button, input.Button {padding: 1px 10px; background: #F0F0F0 url(../images/h.gif) repeat-x center bottom; width: 80px; height: 19px; border: 1px solid #A0A0A0; cursor: pointer }
button[disabled],input.Button[disabled] { opacity: 0.3; cursor: default }
button:not([disabled]):hover, input.Button:not([disabled]):hover { background-color: #F5F5F5; }
button:not([disabled]):hover:active, input.Button:not([disabled]):hover:active { background-color: #FAFAFA; }
#pview_save_view_button { align-self: center; width: 38px; height: 19px; padding: 0px; line-height: 2px; font-size: 19px; }

select {margin-top: 5px}
a {font-size: 11px; color: #686868}
table#maincont {margin: 5px 0 0 0; min-width: 600px;}
table#maincont td.uicell {vertical-align: top; padding: 0 }
Expand Down Expand Up @@ -164,8 +182,6 @@ div.algnright {text-align: right; clear: right}
.ie .lm li a {margin: 0 0 0 -5px; padding: 0}
.stg_con { display: none; float: right; position: relative; width: 450px; height: 500px; margin: 4px; background-color: var(--settings-background-color); }
.ie9 .stg_con {position: static}
fieldset {margin: 4px}
* > fieldset {border: 1px solid #D0D0D0; -moz-border-radius: 6px; -webkit-border-radius:6px; border-radius:6px;}
.stg_con table {width: 100%}
.stg_con td {font-weight: normal; height: 19px}
.stg_con td.alr {text-align: right}
Expand Down Expand Up @@ -362,11 +378,13 @@ div.space {flex-grow: 1;}
/* No media query for `xs` since this is the default in Bootstrap */
/* Custom rules for medium devices */
div#tadd {max-width: 95vw;}
div#tadd .buttons-list {
div.dlg-window .buttons-list {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using this rule to set the buttons lists in all dialog windows.

margin: 0.5rem;
gap: 0.25rem;
display: flex;
flex-direction: column;
flex-direction: row;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change buttons direction from column to row on small screens.

justify-content: start;
flex-wrap: wrap;
}
div.status-row:not(:first-of-type) {
border-bottom: dotted 1px #A0A0A0;
Expand All @@ -381,12 +399,13 @@ div.status-row:not(:first-of-type) {
@media (min-width: 768px) {
/* Custom rules for medium devices */
div#tadd {min-width: 600px;}
div#tadd .buttons-list {
div.dlg-window .buttons-list {
margin: 1rem 0.5rem;
gap: 0.25rem;
display: flex;
flex-direction: row;
justify-content: end;
flex-wrap: nowrap;
}
div.status-row:not(:first-of-type) {
border-bottom: none;
Expand Down
13 changes: 0 additions & 13 deletions plugins/create/create.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,12 @@ div#tcreate textarea {resize: none; height: 8rem;}
/* No media query for `xs` since this is the default in Bootstrap */
/* Custom rules for medium devices */
div#tcreate {min-width: 90vw;}
div#tcreate .buttons-list {
margin: 0.5rem;
gap: 0.25rem;
display: flex;
flex-direction: column;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
/* Custom rules for small devices */
div#tcreate {min-width: 518px;}
div#tcreate textarea {resize: none; height: 16rem;}
div#tcreate .buttons-list {
margin: 1rem 0.5rem;
gap: 0.25rem;
display: flex;
flex-direction: row;
justify-content: end;
}
}

/* Medium devices (tablets, 768px and up) */
Expand Down
14 changes: 0 additions & 14 deletions plugins/extratio/extratio.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ div#dlgEditRatioRules div.dlg-header {background-image: url(../../images/setting
div#dlgEditRatioRules .container {margin: 0.25rem; padding: 0; width: auto;}
div#dlgEditRatioRules .row {margin: 0 0 0.25rem 0; padding: 0;}
div#dlgEditRatioRules .row > div {padding: 0 0.25rem; margin-bottom: 0.1rem;}
div#dlgEditRatioRules fieldset {margin: 0 0 0.25rem 0; padding: 0.25rem 0.5rem;}

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;}
Expand All @@ -19,12 +18,6 @@ ul#rlsul > li input.TextboxNormal {background-color: #FFFFFF }
/* No media query for `xs` since this is the default in Bootstrap */
/* Custom rules for medium devices */
div#dlgEditRatioRules {max-width: 95vw;}
div#dlgEditRatioRules .buttons-list {
margin: 0.5rem 0.25rem;
gap: 0.25rem;
display: flex;
flex-direction: column;
}
div#ratioRuleList {border: solid 1px #A0A0A0; border-radius: 3px; height: 120px; overflow-y: auto;}

/* Small devices (landscape phones, 576px and up) */
Expand All @@ -36,13 +29,6 @@ div#ratioRuleList {border: solid 1px #A0A0A0; border-radius: 3px; height: 120px;
@media (min-width: 768px) {
/* Custom rules for medium devices */
div#dlgEditRatioRules {min-width: 600px;}
div#dlgEditRatioRules .buttons-list {
margin: 1rem 0.5rem;
gap: 0.25rem;
display: flex;
flex-direction: row;
justify-content: end;
}
div#ratioRuleList {border: solid 1px #A0A0A0; border-radius: 3px; height: 260px; overflow-y: auto;}
}

Expand Down
2 changes: 1 addition & 1 deletion plugins/extsearch/extsearch.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ div#tegLoadTorrents div.dlg-header {background-image: url(../../images/world.gif
div#tegLoadTorrents div.content {margin: 5px; padding: 5px; line-height: 16px}
div#tegLoadTorrents div.content input {margin-top: 0px}
div#tegLoadTorrents label {width: 75px; display: block; float: left; margin-top: 0px; margin-bottom: 5px; margin-left: 5px; }
div#tegLoadTorrents input, select {margin-top: 2px; margin-bottom: 2px;}
div#tegLoadTorrents input, div#tegLoadTorrents select {margin-top: 2px; margin-bottom: 2px;}
div#tegLoadTorrents br {clear: left; line-height: 0}

#st_extsearch { overflow: auto }
Expand Down
6 changes: 3 additions & 3 deletions plugins/rss/rss.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ div#dlgAddRSS div.content {width: 330px; margin: 5px; padding: 5px; line-height:
div#dlgAddRSS div.content input {margin-top: 5px}
div#dlgAddRSS label {width: 70px; display: block; float: left; margin-top: 5px; margin-bottom: 5px; margin-left: 10px; }
div#dlgAddRSS label#nomargin { margin-top: 0px; margin-bottom: 0px; }
div#dlgAddRSS input, select {margin-top: 5px; margin-bottom: 5px;}
div#dlgAddRSS input, div#dlgAddRSS select {margin-top: 5px; margin-bottom: 5px;}
div#dlgAddRSS br {clear: left; line-height: 0}

div#dlgEditRSS {width: 355px; height: 132px}
Expand All @@ -15,7 +15,7 @@ div#dlgEditRSS div.content {width: 330px; margin: 5px; padding: 5px; line-height
div#dlgEditRSS div.content input {margin-top: 5px}
div#dlgEditRSS label {width: 70px; display: block; float: left; margin-top: 5px; margin-bottom: 5px; margin-left: 10px; }
div#dlgEditRSS label#nomargin { margin-top: 0px; margin-bottom: 0px; }
div#dlgEditRSS input, select {margin-top: 5px; margin-bottom: 5px;}
div#dlgEditRSS input, div#dlgEditRSS select {margin-top: 5px; margin-bottom: 5px;}
div#dlgEditRSS br {clear: left; line-height: 0}

div#dlgLoadTorrents #RSSBtn {width: 30px;}
Expand All @@ -24,7 +24,7 @@ div#dlgLoadTorrents div.dlg-header {background-image: url(../../images/world.gif
div#dlgLoadTorrents div.content {margin: 5px; padding: 5px; line-height: 16px}
div#dlgLoadTorrents div.content input {margin-top: 0px}
div#dlgLoadTorrents label {width: 75px; display: block; float: left; margin-top: 0px; margin-bottom: 5px; margin-left: 5px; }
div#dlgLoadTorrents input, select {margin-top: 2px; margin-bottom: 2px;}
div#dlgLoadTorrents input, div#dlgLoadTorrents select {margin-top: 2px; margin-bottom: 2px;}
div#dlgLoadTorrents br {clear: left; line-height: 0}

div#dlgEditFilters {width: 690px; height: 360px; font-size: 11px; font-family: Tahoma, Arial, Helvetica, sans-serif; overflow: visible}
Expand Down
104 changes: 67 additions & 37 deletions plugins/rssurlrewrite/init.js
Original file line number Diff line number Diff line change
Expand Up @@ -260,43 +260,73 @@ plugin.onLangLoaded = function()
{
this.registerTopMenu(5);
theDialogManager.make( "dlgEditRules", theUILang.rssRulesManager,
"<div class='fxcaret'>"+
"<div class='lfc_rur'>"+
"<div class='lf_rur' id='ruleList'>"+
"<ul id='rlslist'></ul>"+
"</div>"+
"<div id='RLSchk_buttons'>"+
"<input type='button' class='Button' value='"+theUILang.rssAddRule+"' onclick='theWebUI.addNewRule(); return(false);'/>"+
"<input type='button' class='Button' value='"+theUILang.rssDelRule+"' onclick='theWebUI.deleteCurrentRule(); return(false);'/>"+
"<input type='button' id='chkRuleBtn' class='Button' value='"+theUILang.rssCheckRule+"' onclick='theWebUI.checkCurrentRule(); return(false);'/>"+
"</div>"+
"</div>"+
"<div class='rf_rur' id='ruleProps'>"+
"<fieldset id='rulePropsFieldSet'>"+
"<legend>"+theUILang.rssRulesLegend+"</legend>"+
"<select id='RLS_src'>"+
"<option value='1'>"+theUILang.rssSrcHref+"</option>"+
"<option value='0'>"+theUILang.rssSrcGuid+"</option>"+
"</select><br/>"+
"<input type='text' id='RLS_pattern' class='TextboxLarge'/><br/>"+
"<select id='RLS_dst'>"+
"<option value='1'>"+theUILang.rssDstHref+"</option>"+
"<option value='0'>"+theUILang.rssDstGuid+"</option>"+
"</select><br/>"+
"<input type='text' id='RLS_replacement' class='TextboxLarge'/><br/>"+
"<label>"+theUILang.rssStatus+":</label><select id='RLS_rss'><option value=''>"+theUILang.allFeeds+"</option></select>"+
"</fieldset>"+
"<fieldset id='rulePropsFieldSet'>"+
"<legend>"+theUILang.rssRulesDebug+"</legend>"+
"<label>"+theUILang.rssTestString+":</label><input type='text' id='RLS_test' class='TextboxLarge' value='http://www.mininova.org/get/12345'/><br/>"+
"<label>"+theUILang.rssTestResult+":</label><input type='text' id='RLS_result' class='TextboxLarge'/><br/>"+
"</fieldset>"+
"</div>"+
"</div>"+
"<div id='RLS_buttons' class='aright buttons-list'>"+
"<input type='button' class='OK Button' value='"+theUILang.ok+"' onclick='theDialogManager.hide(\"dlgEditRules\");theWebUI.setRules();return(false);'/>"+
"<input type='button' class='Cancel Button' value='"+theUILang.Cancel+"'/>"+
"</div>");
$("<div>").addClass("cont fxcaret").append(
$("<div>").addClass("row").append(
$("<div>").addClass("col-md-6 d-flex flex-column align-items-center").append(
$("<div>").addClass("lf_rur align-self-stretch").append(
$("<ul>").attr({id: "rlslist"}),
),
$("<div>").addClass("buttons-group-row").append(
$("<button>").attr({onclick: "theWebUI.addNewRule(); return(false);"}).text(theUILang.rssAddRule),
$("<button>").attr({onclick: "theWebUI.deleteCurrentRule(); return(false);"}).text(theUILang.rssDelRule),
$("<button>").attr({id: "chkRuleBtn", onclick: "theWebUI.checkCurrentRule(); return(false);"}).text(theUILang.rssCheckRule),
),
),
$("<div>").addClass("rf_rur col-md-6 d-flex flex-column align-items-stretch").append(
$("<fieldset>").append(
$("<legend>").text(theUILang.rssRulesLegend),
$("<div>").addClass("d-flex flex-column align-items-stretch").append(
$("<select>").attr({id: "RLS_src"}).append(
$("<option>").val(1).text(theUILang.rssSrcHref),
$("<option>").val(0).text(theUILang.rssSrcGuid),
),
$("<input>").attr({type: "text", id: "RLS_pattern"}),
$("<select>").attr({id: "RLS_dst"}).append(
$("<option>").val(1).text(theUILang.rssDstHref),
$("<option>").val(0).text(theUILang.rssDstGuid),
),
$("<input>").attr({type: "text", id: "RLS_replacement"}),
$("<div>").addClass("row align-items-center").append(
$("<div>").addClass("p-0 pe-2 col-md-3 d-flex justify-content-start justify-content-md-end").append(
$("<label>").attr({for: "RLS_rss"}).text(theUILang.rssStatus + ": "),
),
$("<div>").addClass("p-0 col-md-9 d-flex").append(
$("<select>").attr({id: "RLS_rss"}).append(
$("<option>").val("").text(theUILang.allFeeds),
),
),
),
),
),
$("<fieldset>").append(
$("<legend>").text(theUILang.rssRulesDebug),
$("<div>").addClass("row align-items-center").append(
$("<div>").addClass("p-0 pe-2 col-md-3 d-flex justify-content-start justify-content-md-end").append(
$("<label>").attr({for: "RLS_test"}).text(theUILang.rssTestString + ": "),
),
$("<div>").addClass("p-0 col-md-9 d-flex").append(
$("<input>").attr(
{type: "text", id: "RLS_test", placeholder: "http://www.mininova.org/get/12345"}
),
),
),
$("<div>").addClass("row align-items-center").append(
$("<div>").addClass("p-0 pe-2 col-md-3 d-flex justify-content-start justify-content-md-end").append(
$("<label>").attr({for: "RLS_result"}).text(theUILang.rssTestResult + ":"),
),
$("<div>").addClass("p-0 col-md-9 d-flex").append(
$("<input>").attr({type: "text", id: "RLS_result", readonly: ""}),
),
),
),
),
),
)[0].outerHTML +
$("<div>").addClass("buttons-list").append(
$("<button>").addClass("OK").text(theUILang.ok).on("click", () => {theDialogManager.hide("dlgEditRules"); theWebUI.setRules()}),
$("<button>").addClass("Cancel").text(theUILang.Cancel),
)[0].outerHTML,
);
};

plugin.onRemove = function()
Expand Down
91 changes: 69 additions & 22 deletions plugins/rssurlrewrite/rssurlrewrite.css
Original file line number Diff line number Diff line change
@@ -1,28 +1,75 @@
div#dlgEditRules {width: 610px; height: 320px; font-size: 11px; font-family: Tahoma, Arial, Helvetica, sans-serif; overflow: visible}
div#dlgEditRules div.dlg-header {background-image: url(./images/rss.gif)}
div#dlgEditRules .row {
margin: 0 0 0.25rem 0;
padding: 0;
}
div#dlgEditRules .row > div {
padding: 0 0.25rem;
margin-bottom: 0.1rem;
}

.lfc_rur {float: left; }
.lf_rur {width: 245px; height: 200px; margin: 5px; margin-right: 0; padding: 5px; background-color: #FFFFFF; border: 1px solid #D0D0D0; overflow: auto}
.lf_rur ul {width: 100%; margin: 2px; padding: 0; list-style-position: inside; list-style: none; white-space: nowrap}
.lf_rur li input { margin: 0 5px 0 0; padding: 4px; }
.lf_rur li {margin: 0 ; padding: 0}
.lf_rur li input.TextboxFocus { width: 85%; background-color: #CFDEEF; }
.lf_rur li input.TextboxNormal { width: 85%; background-color: #FFFFFF }
.lf_rur li input { border: 0; font-size: 11px; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; cursor: default; font-weight: bold; }
div#RLSchk_buttons {padding-top: 5px; width: 260px; text-align:center}
.rf_rur fieldset {margin: 3px; }
.rf_rur {float: right; margin: 4px; background-color: #FAFAFA}
.rf_rur label {width: 75px; display: block; float: left; margin-top: 5px; margin-bottom: 5px; margin-left: 10px; }
.rf_rur br {clear: left; line-height: 0}
.rf_rur select {width: 305px; margin: 3px; }
.rf_rur input.TextboxLarge {margin: 3px; width: 300px;}
.rf_rur select#RLS_rss { width: 220px;}
.rf_rur input#RLS_test { width: 215px;}
.rf_rur input#RLS_result { width: 215px;}

.rf_rur input.Button {margin: 3px;}
div#RLS_buttons {clear: both}
.lf_rur {
background-color: #FFFFFF;
border: 1px solid #D0D0D0;
border-radius: 3px;
flex: 1 0 160px;
overflow-y: auto;
}
.lf_rur ul {
display: flex;
flex-direction: column;
align-items: stretch;
margin: 0.25rem;
padding: 0.15rem;
list-style-position: inside;
list-style: none;
white-space: nowrap;
}
.lf_rur li {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
.lf_rur input[type=text] {
flex: 1 1 auto;
}
.lf_rur input.TextboxFocus {background-color: #CFDEEF;}
.lf_rur input.TextboxNormal {background-color: #FFFFFF;}

#chkRuleBtn {width: 50px}

/* 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#dlgEditRules {max-width: 95vw;}
#rlslist {max-height: 130px;}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
/* Custom rules for small devices */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
/* Custom rules for medium devices */
div#dlgEditRules {min-width: 600px;}
#rlslist {max-height: 260px;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
/* Custom rules for large devices */
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
/* Custom rules for x-large devices */
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
/* Custom rules for xx-large devices */
}
Loading