Allow to click on toggle text to update it

This commit is contained in:
Guillaume Gomez 2022-05-23 23:06:36 +02:00
parent 7f997f589f
commit 1ebf0d9c72
3 changed files with 39 additions and 36 deletions

View File

@ -1415,30 +1415,6 @@ pre.rust {
#settings-menu.rotate > a img {
animation: rotating 2s linear infinite;
}
#settings-menu #settings {
position: absolute;
right: 0;
z-index: 1;
display: block;
margin-top: 7px;
border-radius: 3px;
border: 1px solid;
}
#settings-menu #settings .setting-line {
margin: 0.6em;
}
/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
#settings-menu #settings::before {
content: '';
position: absolute;
right: 11px;
border: solid;
border-width: 1px 1px 0 0;
display: inline-block;
padding: 4px;
transform: rotate(-45deg);
top: -5px;
}
#help-button {
font-family: "Fira Sans", Arial, sans-serif;

View File

@ -46,9 +46,12 @@
.toggle {
position: relative;
display: inline-block;
width: 45px;
width: 100%;
height: 27px;
margin-right: 20px;
display: flex;
align-items: center;
cursor: pointer;
}
.toggle input {
@ -57,12 +60,12 @@
}
.slider {
position: absolute;
position: relative;
width: 45px;
display: block;
height: 28px;
margin-right: 20px;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .3s;
}
@ -95,3 +98,28 @@ input:checked + .slider:before {
width: 100%;
display: block;
}
div#settings {
position: absolute;
right: 0;
z-index: 1;
display: block;
margin-top: 7px;
border-radius: 3px;
border: 1px solid;
}
#settings .setting-line {
margin: 1.2em 0.6em;
}
/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
div#settings::before {
content: '';
position: absolute;
right: 11px;
border: solid;
border-width: 1px 1px 0 0;
display: inline-block;
padding: 4px;
transform: rotate(-45deg);
top: -5px;
}

View File

@ -130,12 +130,11 @@
} else {
// This is a toggle.
const checked = setting["default"] === true ? " checked" : "";
output += `
<label class="toggle">
<input type="checkbox" id="${js_data_name}"${checked}>
<span class="slider"></span>
</label>
<div>${setting_name}</div>`;
output += `<label class="toggle">\
<input type="checkbox" id="${js_data_name}"${checked}>\
<span class="slider"></span>\
<span class="label">${setting_name}</span>\
</label>`;
}
output += "</div>";
}