aboutsummaryrefslogtreecommitdiff
path: root/webgui/data
diff options
context:
space:
mode:
authorGregor Kleen <gkleen@yggdrasil.li>2016-02-24 04:18:03 +0000
committerGregor Kleen <gkleen@yggdrasil.li>2016-02-24 04:18:03 +0000
commitc09c2786d0654f144dab103292c47411ff1afa9a (patch)
tree9a49cf5c1a0502ef7382bb54312097c375666ced /webgui/data
parentc1451ffcbc021e4f25721541538173f24be8f3cc (diff)
downloadthermoprint-c09c2786d0654f144dab103292c47411ff1afa9a.tar
thermoprint-c09c2786d0654f144dab103292c47411ff1afa9a.tar.gz
thermoprint-c09c2786d0654f144dab103292c47411ff1afa9a.tar.bz2
thermoprint-c09c2786d0654f144dab103292c47411ff1afa9a.tar.xz
thermoprint-c09c2786d0654f144dab103292c47411ff1afa9a.zip
Partial GUI prototype
Diffstat (limited to 'webgui/data')
-rw-r--r--webgui/data/index.html77
-rw-r--r--webgui/data/style.css159
-rw-r--r--webgui/data/tabs.js13
3 files changed, 249 insertions, 0 deletions
diff --git a/webgui/data/index.html b/webgui/data/index.html
new file mode 100644
index 0000000..af780bd
--- /dev/null
+++ b/webgui/data/index.html
@@ -0,0 +1,77 @@
1<!doctype html>
2<html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Thermoprint</title>
6 <link rel="stylesheet" type="text/css" href="static/style.css" />
7 <script src="haskell.js"></script>
8 <script src="static/tabs.js"></script>
9 <script type="text/javascript" charset="utf-8">
10 Haskell.initFFI();
11 </script>
12 </head>
13 <body>
14 <p id="javascriptError" class="error fatal">
15 Need javascript to function.
16 </p>
17 <div class="tabs">
18 <ul class="tab-links">
19 <li class="active"><a href="#editor">Editor</a></li>
20 <li><a href="#queue">Queue</a></li>
21 <li id="errors-tab" style="display:none;"><a href="#errors">Errors</a></li>
22 </ul>
23
24 <div class="tab-content">
25 <div class="tab active" id="editor">
26 <div class="table" style="width:100%">
27 <div class="tr">
28 <h1 class="tc">Current Draft</h1>
29 <h1 class="tc">Saved Drafts</h1>
30 </div>
31 <div class="tr">
32 <div id="currentDraft" class="tc">
33 <!-- <label id="titleLabel" for="editorTitle">Title</label> -->
34 <input id="editorTitle" />
35 <textarea id="editorText"></textarea>
36 <span id="bbcodeStatus"></span>
37 <span id="editorStatus">Not connected to server</span>
38 <div class="table">
39 <div class="tr">
40 <div class="editorButtonContainer tc">
41 <button class="editorButton" id="saveButton">Save</button>
42 </div>
43 <div class="editorButtonContainer tc">
44 <button class="editorButton" id="printButton">Print</button>
45 </div>
46 <div class="editorButtonContainer tc">
47 <button class="editorButton" id="discardButton">Discard</button>
48 </div>
49 </div>
50 </div>
51 </div>
52 <div class="tc" style="text-align:center;">
53 <input id="allowDeletion" type="checkbox" /><label for="allowDeletion">Allow Deletion</label>
54 <table id="draftList">
55 <thead>
56 <tr>
57 <td>Id</td>
58 <td>Title</td>
59 <td>Actions</td>
60 </tr>
61 </thead>
62 <tbody id="draftListBody"></tbody>
63 </table>
64 </div>
65 </div>
66 </div>
67 </div>
68
69 <div class="tab" id="queue">
70 Blub.
71 </div>
72
73 <ul class="tab" id="errors">
74 </ul>
75 </div>
76 </body>
77</html>
diff --git a/webgui/data/style.css b/webgui/data/style.css
new file mode 100644
index 0000000..53ddb7a
--- /dev/null
+++ b/webgui/data/style.css
@@ -0,0 +1,159 @@
1.table { display: table; }
2.tr { display: table-row; }
3.tc { display: table-cell; }
4
5.table .table, table .table, .table table, table table { width:100%; height:100%; }
6
7.fatal {
8 z-index:-1;
9 position:fixed;
10 top:50%;
11 left:50%;
12 transform: translate(-50%, -50%);
13 background-color:#fdd;
14 border:2px solid #c00;
15 text-align:center;
16 vertical-align:center;
17 padding:1em;
18 font-weight:600;
19}
20
21h1 {
22 font-size:1.5em;
23 font-weight:normal;
24 text-align:center;
25}
26
27thead td {
28 font-size:1em;
29 font-weight:600;
30 text-align:center;
31}
32
33thead tr:last-child {
34 padding-bottom:0.125em;
35 border-bottom:1px solid #ddd;
36 margin-bottom:0.125em;
37}
38
39.editorButtonContainer {
40 text-align:center;
41}
42
43.editorButton {
44 display:inline-block;
45 width:8em;
46}
47
48#editorTitle {
49 width:100%;
50 box-sizing:border-box;
51 margin:0 0 0.25em 0;
52}
53
54#editorText {
55 width:100%;
56 box-sizing:border-box;
57 margin:0 0 0.25em 0;
58 resize:vertical;
59 min-height:25em;
60}
61
62#editorStatus {
63 display:block;
64 margin:0 0 0.25em 0;
65 font-size:0.75em;
66}
67
68#editorStatus:after {
69 display:block;
70 clear:both;
71 content:'';
72}
73
74#bbcodeStatus {
75 display:block;
76 margin:0 0 0.25em 0;
77 font-size:0.75em;
78 float:right;
79 color:#c00000;
80}
81
82/*----- Tabs -----*/
83.tabs {
84 display:block;
85 width:98%;
86 min-height:98%;
87 position:absolute;
88 left:1%;
89 top:1%;
90}
91
92/*----- Tab Links -----*/
93.tab-links {
94 display:block;
95 height:2.2em;
96 margin:0;
97 padding:0 0.5em;
98 z-index:0;
99}
100
101/* Clearfix */
102.tab-links:after {
103 display:block;
104 clear:both;
105 content:'';
106}
107
108.tab-links li {
109 margin:0px 0.5em;
110 float:left;
111 list-style:none;
112}
113
114.tab-links a {
115 padding:0.5em 1em;
116 display:inline-block;
117 border-radius:3px 3px 0px 0px;
118 background:#fff;
119 font-size:1em;
120 font-weight:600;
121 color:#4c4c4c;
122 transition:all linear 0.15s;
123}
124
125.tab-links a:hover {
126 text-decoration:none;
127}
128
129li.active a, li.active a:hover {
130 background:#f0f0f0;
131 color:#4c4c4c;
132 text-decoration:none;
133 }
134
135#errors-tab a {
136 color:#c00000;
137}
138
139/*----- Content of Tabs -----*/
140.tab-content {
141 padding:0.5em;
142 border:1px solid #ddd;
143 border-radius:3px;
144 box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
145 background:#fff;
146 box-sizing:border-box;
147 width:100%;
148 z-index:1;
149 margin-top:-1px;
150 margin-bottom:1%;
151}
152
153.tab {
154 display:none;
155}
156
157.tab.active {
158 display:block;
159} \ No newline at end of file
diff --git a/webgui/data/tabs.js b/webgui/data/tabs.js
new file mode 100644
index 0000000..1d178d9
--- /dev/null
+++ b/webgui/data/tabs.js
@@ -0,0 +1,13 @@
1jQuery(document).ready(function() {
2 jQuery('.tabs .tab-links a').on('click', function(e) {
3 var currentAttrValue = jQuery(this).attr('href');
4
5 // Show/Hide Tabs
6 jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
7
8 // Change/remove current tab to active
9 jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
10
11 e.preventDefault();
12 });
13});
generated by cgit v1.2.3 (git 2.25.1) at 2024-09-27 22:33:20 +0000