balki/mail4one
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 5 Wiki Activity

add styles

Browse Source
This commit is contained in:
Balakrishnan Balasubramanian 2023-07-04 23:46:57 -04:00
parent 690484a097
commit b159820f6c
1 changed files with 65 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
jsdev/index.html
View File

@ -65,6 +65,48 @@
] ]
} }
</script> </script>
<style>
.m41-box {
display: grid;
grid-template-columns: 1fr 2fr;
}
#web-cfg-boxes {
display: grid;
grid-template-columns: 1fr ;
width: 1200px;
//justify-content: space-around;
// justify-content: flex-start;
// background-color: blue;
}
.m41-box-info {
display: grid;
grid-template-columns: 3fr 1fr 5fr;
align-items: stretch;
// justify-content: space-around;
}
.button-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: stretch;
// display: inline-flex;
}
.m41-box-rule:only-child div.button-group button{
display: none;
}
.m41-box:only-child div div.button-group button{
display: none;
}
.m41-box-rule {
display: grid;
grid-template-columns: 1fr 3fr 1fr 1fr;
align-items: center;
justify-items: center;
}
</style>
<script type="application/javascript"> <script type="application/javascript">
"use strict" "use strict"
@ -140,9 +182,7 @@
for (const {name:box_name, rules} of boxes_config) { for (const {name:box_name, rules} of boxes_config) {
addBox() addBox()
const box = boxes_ul.lastElementChild const box = boxes_ul.lastElementChild
console.log(box.children) const [{children: [,, header]}, rule_list ] = box.children
const [, header, rule_list ] = box.children
console.log(header)
header.innerText = box_name header.innerText = box_name
for (const {match_name, negate = false, stop_check = false} of rules ) { for (const {match_name, negate = false, stop_check = false} of rules ) {
addRule(rule_list) addRule(rule_list)
@ -169,14 +209,14 @@
} }
function moveUp(button) { function moveUp(button) {
const li = button.parentElement.parentElement const li = button.parentElement.parentElement.parentElement
if (li.previousElementSibling != null) { if (li.previousElementSibling != null) {
li.parentNode.insertBefore(li, li.previousElementSibling) li.parentNode.insertBefore(li, li.previousElementSibling)
} }
} }
function moveDown(button) { function moveDown(button) {
const li = button.parentElement.parentElement const li = button.parentElement.parentElement.parentElement
if (li.nextElementSibling != null) { if (li.nextElementSibling != null) {
li.parentNode.insertBefore(li.nextElementSibling, li) li.parentNode.insertBefore(li.nextElementSibling, li)
} }
@ -214,11 +254,11 @@
</tr> </tr>
</template> </template>
<template id="web-cfg-boxes-rule-li"> <template id="web-cfg-boxes-rule-li">
<li> <div class="m41-box-rule">
<div> <div class="button-group">
<button onClick="this.parentElement.parentElement.remove()">✗</button> <button onClick="this.parentElement.parentElement.remove()">✗</button>
<button onClick="moveUp(this)">UP</button> <button onClick="moveUp(this)">↑</button>
<button onClick="moveDown(this)">DOWN</button> <button onClick="moveDown(this)">↓</button>
</div> </div>
<label> <label>
Match Name Match Name
@ -232,19 +272,22 @@
Stop check Stop check
<input type=checkbox> <input type=checkbox>
</label> </label>
</li> </div>
</template> </template>
<template id="web-cfg-boxes-li"> <template id="web-cfg-boxes-li">
<li> <div class="m41-box">
<div> <div class="m41-box-info">
<button onClick="this.parentElement.parentElement.remove()">✗</button> <div class="button-group">
<button onClick="moveUp(this)">UP</button> <button onClick="this.parentElement.parentElement.parentElement.remove()">✗</button>
<button onClick="moveDown(this)">DOWN</button> <button onClick="moveUp(this)">↑</button>
<button onClick="moveDown(this)">↓</button>
</div>
<button onClick="addRule(this.parentElement.nextElementSibling)">+</button>
<span></span>
</div> </div>
<h4 style="display: inline;"></h4> <div class="m41-box-rules">
<ul style="list-style-type:none"> </div>
</ul> </div>
</li>
</template> </template>
<h1>Mail4one Web config</h1> <h1>Mail4one Web config</h1>
<table border id="web-cfg-matches"> <table border id="web-cfg-matches">
@ -263,9 +306,9 @@
<button onClick="addMatchRow()">Add Match</button> <button onClick="addMatchRow()">Add Match</button>
<button onClick="save()">Save</button> <button onClick="save()">Save</button>
</div> </div>
<h3>Boxes</h3> <h3>Boxes <button onClick="addBox()">+</button></h3>
<ul id="web-cfg-boxes" style="list-style-type:none"> <div id="web-cfg-boxes">
</ul> </div>
<hr> <hr>
<h3>Before</h3> <h3>Before</h3>
<pre id="before"></pre> <pre id="before"></pre>