made docs
This commit is contained in:
parent
0b02f43dd1
commit
e22f8f63cb
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
.control-panel > .module {
|
||||
background-color: var(--module-bg, silver);
|
||||
border: 1px var(--module-border, solid black);
|
||||
border: var(--module-border-size, 1px) var(--module-border, solid black);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
|
@ -19,21 +19,24 @@
|
|||
.control-panel > .module[title] {
|
||||
border-radius: 0 10px 10px 10px;
|
||||
}
|
||||
.control-panel > .module.half-controls {
|
||||
.control-panel > .module.even-controls {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.control-panel > .module.auto-controls {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
.control-panel > .module > div:not(:last-child) {
|
||||
border-radius: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.control-panel > .module[title]::before {
|
||||
background-color: var(--module-bg, silver);
|
||||
border: 1px var(--module-border, solid black);
|
||||
border-bottom: 0px;
|
||||
border: var(--module-border-size, 1px) var(--module-border, solid black);
|
||||
border-bottom: 0;
|
||||
content: attr(title);
|
||||
font-size: 20px;
|
||||
margin-top: -30px;
|
||||
margin-left: -6px;
|
||||
margin-top: calc(var(--module-border-size, 1px) * -1 - 29px);
|
||||
margin-left: calc(var(--module-border-size, 1px) * -1 - 5px);
|
||||
padding: 0 15px;
|
||||
padding-bottom: 1px;
|
||||
display: block;
|
||||
|
@ -48,8 +51,8 @@
|
|||
border-radius: 12px;
|
||||
column-gap: 1px;
|
||||
row-gap: 1px;
|
||||
border: 1px solid var(--border-color, black);
|
||||
background-color: var(--border-color, black);
|
||||
border: 1px solid var(--button-border-color, black);
|
||||
background-color: var(--button-border-color, black);
|
||||
}
|
||||
.four_buttons > button {
|
||||
font-size: 15px;
|
||||
|
@ -74,7 +77,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-color, black);
|
||||
border: 1px solid var(--button-border-color, black);
|
||||
}
|
||||
.buttons_v > button {
|
||||
margin: 0px;
|
||||
|
@ -84,7 +87,7 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
.buttons_v > button:not(:last-child) {
|
||||
border-bottom: var(--spacing, 1px) solid var(--border-color, black);
|
||||
border-bottom: var(--button-spacing, 1px) solid var(--button-border-color, black);
|
||||
}
|
||||
.buttons_v > button:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
|
@ -98,7 +101,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-color, black);
|
||||
border: 1px solid var(--button-border-color, black);
|
||||
}
|
||||
.buttons_h > button {
|
||||
margin: 0px;
|
||||
|
@ -107,7 +110,7 @@
|
|||
border: 0px;
|
||||
}
|
||||
.buttons_h > button:not(:last-child) {
|
||||
border-right: var(--spacing, 1px) solid var(--border-color, black);
|
||||
border-right: var(--button-spacing, 1px) solid var(--button-border-color, black);
|
||||
}
|
||||
.buttons_h > button:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
|
|
|
@ -0,0 +1,29 @@
|
|||
div.module[hidden] {
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
font-size: 15px;
|
||||
}
|
||||
style[contenteditable] {
|
||||
display: block;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
#horizontal-buttons::before {
|
||||
text-orientation: mixed;
|
||||
writing-mode: vertical-lr;
|
||||
line-height: 20px;
|
||||
max-height: 15px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
pizza {
|
||||
background-color: peru;
|
||||
}
|
||||
pizza:hover {
|
||||
background-color: yellow;
|
||||
}
|
||||
pizza:active {
|
||||
background-color: red;
|
||||
}
|
|
@ -0,0 +1,155 @@
|
|||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="control_panel.css">
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
<script src="index.js"></script>
|
||||
</head>
|
||||
<body class="control-panel">
|
||||
<div title="Welcome" class="module">
|
||||
<div>
|
||||
This is a module!<br>
|
||||
Actually, this is the content div of a module<br>
|
||||
A module has two divs: a content div and a control div.<br>
|
||||
There's nothing to tag, just make two divs.<br>
|
||||
They're just the first and second div in a .module<br>
|
||||
</div>
|
||||
<div class="buttons_v">
|
||||
<button onclick="unhide(1)">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div title="even-controls" class="module even-controls" hidden>
|
||||
<div>
|
||||
By default, the content div<br>
|
||||
is 3 times wider than<br>
|
||||
the control div.<br>
|
||||
A .module.even-controls<br>
|
||||
divides the space evenly<br>
|
||||
</div>
|
||||
<div class="buttons_v">
|
||||
<button onclick="unhide(2)">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="module" hidden>
|
||||
<div>
|
||||
The title bar displays the title attribute<br>
|
||||
of the .module. If the .module does not<br>
|
||||
have a title attribute, the title bar<br>
|
||||
does not appear<br>
|
||||
</div>
|
||||
<div class="buttons_v">
|
||||
<button onclick="unhide(3)">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Colors" class="module" hidden>
|
||||
<div>
|
||||
The colors of the panels are assigned to<br>
|
||||
CSS variables. Go ahead and change<br>
|
||||
them around, this style tag is editable!<br>
|
||||
<pre><style id="color_style" contenteditable="">.module[title=Colors] {
|
||||
--module-bg: silver;
|
||||
--module-border-size: 1px;
|
||||
--module-border: solid black;
|
||||
}</style></pre>
|
||||
</div>
|
||||
<div class="buttons_v">
|
||||
<button onclick="unhide(4)">Next</button>
|
||||
<button onclick="reset_color_style()">Reset CSS</button>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Button(s)" class="module" hidden>
|
||||
<div>
|
||||
Hold on! That module had two buttons! The<br>
|
||||
control div of each module has actually been<br>
|
||||
a div.buttons_v, aka a vertical button group.<br>
|
||||
You can add as many buttons as you want!<br>
|
||||
(click <button onclick="reset_buttons('add_button_v', 5)">here</button> to reset)
|
||||
</div>
|
||||
<div id="add_button_v" class="buttons_v">
|
||||
<button onclick="unhide(5)">Next</button>
|
||||
<button onclick="add_button('add_button_v', 5)">Add Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- s n o t t u B -->
|
||||
<div title="B u t t o n s" class="module auto-controls" hidden id="horizontal-buttons">
|
||||
<div>
|
||||
You can also use .buttons_h to make a<br>
|
||||
horizontal button group. Changing your<br>
|
||||
.module to a .module.auto-controls lets<br>
|
||||
the content and control divs change their<br>
|
||||
width independantly. (<button onclick="reset_buttons('add_button_h', 6)">reset</button>)
|
||||
</div>
|
||||
<div id="add_button_h" class="buttons_h">
|
||||
<button onclick="unhide(6)">Next</button>
|
||||
<button onclick="add_button('add_button_h', 6)">Add Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Bu tt on s" class="module even-controls" hidden>
|
||||
<div>
|
||||
Vertical and horizontal button<br>
|
||||
groups are great, and have the<br>
|
||||
advantage of adapting to any<br>
|
||||
amount of buttons automatically.<br>
|
||||
A .four_buttons must have four<br>
|
||||
buttons, but it organizes them<br>
|
||||
in a 2x2 pattern.<br>
|
||||
</div>
|
||||
<div class="four_buttons">
|
||||
<button onclick="unhide(7)">Next</button>
|
||||
<button onclick="hide(6)">Previous</button>
|
||||
<button onclick="red(true)">Red</button>
|
||||
<button onclick="red(false)">Not Red</button>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Linebox" class="module" hidden>
|
||||
<div class="linebox">
|
||||
<pizza>A .linebox places each child</pizza>
|
||||
<pizza>element on its own line. The</pizza>
|
||||
<pizza>child elements can be anything</pizza>
|
||||
<pizza>you'd like, they'll probably work.</pizza>
|
||||
<pizza>These are pizza! Special, clickable,</pizza>
|
||||
<pizza>color changing pizza! The first and</pizza>
|
||||
<pizza>last elements will match the </pizza>
|
||||
<pizza>border-radius of the .linebox.</pizza>
|
||||
</div>
|
||||
<div class="buttons_v">
|
||||
<button onclick="unhide(8)">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Gridform" class="module" hidden>
|
||||
<div class="gridform">
|
||||
<p>Gridform</p>
|
||||
<input type="text" value="was meant for forms">
|
||||
<p>but it's</p>
|
||||
<input type="text" value="just a grid">
|
||||
<p>labels are</p>
|
||||
<input type="text" value="<p> elements">
|
||||
<p>the items</p>
|
||||
<i>don't have to be <input>'s</i>
|
||||
<h3><h3> elements</h3>
|
||||
<p>are for</p>
|
||||
<input type="text" value="section headers">
|
||||
</div>
|
||||
<div class="buttons_v">
|
||||
<button onclick="unhide(9)">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Final Thoughts" class="module auto-controls" hidden>
|
||||
<div>
|
||||
I wrote this css because i wanted<br>
|
||||
to build localhost web interfaces<br>
|
||||
rather than learning tkinter, but<br>
|
||||
they always turned out ugly. I<br>
|
||||
hope it can help you.<br>
|
||||
</div>
|
||||
<div class="buttons_v">
|
||||
<button onclick="hide_all()">Start Over</button>
|
||||
<button onclick="window.location = 'https://github.com/BobbyBobson4888/control_panel'">View on Github</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
// for (i = 0; i < document.body.children.length-1; i++) {
|
||||
// unhide(i)
|
||||
// }
|
||||
</script>
|
||||
</html>
|
|
@ -0,0 +1,30 @@
|
|||
function unhide(i) {
|
||||
document.body.children[i].hidden = false
|
||||
}
|
||||
function toggle(id) {
|
||||
document.getElementById(id).hidden = !document.getElementById(id).hidden
|
||||
}
|
||||
function hide(i) {
|
||||
document.body.children[i].hidden = true
|
||||
}
|
||||
function hide_all() {
|
||||
for (i = 1; i < document.body.children.length-1; i++) {
|
||||
hide(i)
|
||||
}
|
||||
}
|
||||
function reset_color_style() {
|
||||
document.getElementById("color_style").innerHTML = ".module[title=Colors] {\n --module-bg: silver;\n --module-border-size: 1px;\n --module-border: solid black;\n}"
|
||||
}
|
||||
function add_button(id, i) {
|
||||
document.getElementById(id).innerHTML += "\n<button onclick=\"add_button(\'" + id + "\', " + i + ")\">Add Button</button>"
|
||||
}
|
||||
function reset_buttons(id, i) {
|
||||
document.getElementById(id).innerHTML = " <button onclick=\"unhide(" + i + ")\">Next<\/button>\r\n <button onclick=\"add_button(\'" + id + "\', " + i + ")\">Add Button<\/button>"
|
||||
}
|
||||
function red(red) {
|
||||
if (red) {
|
||||
document.body.style.backgroundColor = "red"
|
||||
} else {
|
||||
document.body.style.backgroundColor = ""
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue