git @ Cat's Eye Technologies Pixley / c3fb636
Better HTML UI, using flexboxes. Chris Pressey 6 years ago
2 changed file(s) with 32 addition(s) and 18 deletion(s). Raw diff Collapse all Expand all
3636 var selectPanel = yoob.makeDiv(container);
3737 var selectElem = yoob.makeSelect(selectPanel, "example source:", []);
3838
39 var rowFluid = yoob.makeDiv(container);
40 rowFluid.className = "row-fluid";
41 var column1 = yoob.makeDiv(rowFluid);
42 column1.className = "span6";
43 var animationPanel = yoob.makeDiv(column1);
39 var flexContainer = yoob.makeDiv(container);
40 flexContainer.className = "flex-container";
41 var executionPanel = yoob.makeDiv(flexContainer);
42 executionPanel.className = "execution-panel";
4443
45 yoob.makeParagraph(animationPanel, "Status:");
46 var status = yoob.makePre(animationPanel);
47 status.id = "status";
44 yoob.makeParagraph(executionPanel, "Status:");
45 var status = yoob.makePre(executionPanel);
4846
49 yoob.makeParagraph(animationPanel, "Result:");
50 var output = yoob.makePre(animationPanel);
47 yoob.makeParagraph(executionPanel, "Result:");
48 var output = yoob.makePre(executionPanel);
5149
52 yoob.makeParagraph(animationPanel, "Program:");
53 var display = yoob.makePre(animationPanel);
50 yoob.makeParagraph(executionPanel, "Program:");
51 var display = yoob.makePre(executionPanel);
52 var editor = yoob.makeTextArea(executionPanel);
5453
55 var column2 = yoob.makeDiv(rowFluid);
56 column2.className = "span6";
57 yoob.makeParagraph(column2, "Depiction:");
58 var depictionCanvas = yoob.makeCanvas(column2);
59 depictionCanvas.id = "canvas";
54 var depictionPanel = yoob.makeDiv(flexContainer);
55 depictionPanel.className = "depiction-panel";
6056
61 var editor = yoob.makeTextArea(container);
57 yoob.makeParagraph(depictionPanel, "Depiction:");
58 var depictionCanvas = yoob.makeCanvas(depictionPanel);
59
6260
6361 /* --- Make Controller --- */
6462
22 <meta charset="utf-8">
33 <title>Pixley</title>
44 </head>
5 <style>
6 .flex-container {
7 display: flex;
8 }
9 .execution-panel {
10 display: inline-block;
11 flex: 1 1 auto;
12 }
13 .execution-panel pre {
14 white-space: pre-wrap;
15 }
16 .depiction-panel {
17 display: inline-block;
18 flex: 1 1 auto;
19 }
20 </style>
521 <body>
622
723 <p id="info">