barrow
/
control_panel
mirror of https://github.com/barrowsys/control_panel.git
1
0
Fork 0
Code Issues Releases Wiki Activity

made docs

This commit is contained in:
Ezra Fein 2019-06-22 18:42:59 -04:00
parent 0b02f43dd1
commit e22f8f63cb
4 changed files with 229 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
control_panel.css
View File

@ -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;

29
index.css Normal file
View File

@ -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;
}

155
index.html Normal file
View File

@ -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="&lt;p&gt; elements">
<p>the items</p>
<i>don't have to be &lt;input&gt;'s</i>
<h3>&lt;h3&gt; 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>

30
index.js Normal file
View File

@ -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 = ""
}
}