From c09c2786d0654f144dab103292c47411ff1afa9a Mon Sep 17 00:00:00 2001 From: Gregor Kleen Date: Wed, 24 Feb 2016 04:18:03 +0000 Subject: Partial GUI prototype --- webgui/data/index.html | 77 ++++++++++++++++++++++++ webgui/data/style.css | 159 +++++++++++++++++++++++++++++++++++++++++++++++++ webgui/data/tabs.js | 13 ++++ 3 files changed, 249 insertions(+) create mode 100644 webgui/data/index.html create mode 100644 webgui/data/style.css create mode 100644 webgui/data/tabs.js (limited to 'webgui/data') 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 @@ + + + + + Thermoprint + + + + + + +

+ Need javascript to function. +

+
+ + +
+
+
+
+

Current Draft

+

Saved Drafts

+
+
+
+ + + + + Not connected to server +
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + + + + + + + + +
IdTitleActions
+
+
+
+
+ +
+ Blub. +
+ +
    +
+
+ + 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 @@ +.table { display: table; } +.tr { display: table-row; } +.tc { display: table-cell; } + +.table .table, table .table, .table table, table table { width:100%; height:100%; } + +.fatal { + z-index:-1; + position:fixed; + top:50%; + left:50%; + transform: translate(-50%, -50%); + background-color:#fdd; + border:2px solid #c00; + text-align:center; + vertical-align:center; + padding:1em; + font-weight:600; +} + +h1 { + font-size:1.5em; + font-weight:normal; + text-align:center; +} + +thead td { + font-size:1em; + font-weight:600; + text-align:center; +} + +thead tr:last-child { + padding-bottom:0.125em; + border-bottom:1px solid #ddd; + margin-bottom:0.125em; +} + +.editorButtonContainer { + text-align:center; +} + +.editorButton { + display:inline-block; + width:8em; +} + +#editorTitle { + width:100%; + box-sizing:border-box; + margin:0 0 0.25em 0; +} + +#editorText { + width:100%; + box-sizing:border-box; + margin:0 0 0.25em 0; + resize:vertical; + min-height:25em; +} + +#editorStatus { + display:block; + margin:0 0 0.25em 0; + font-size:0.75em; +} + +#editorStatus:after { + display:block; + clear:both; + content:''; +} + +#bbcodeStatus { + display:block; + margin:0 0 0.25em 0; + font-size:0.75em; + float:right; + color:#c00000; +} + +/*----- Tabs -----*/ +.tabs { + display:block; + width:98%; + min-height:98%; + position:absolute; + left:1%; + top:1%; +} + +/*----- Tab Links -----*/ +.tab-links { + display:block; + height:2.2em; + margin:0; + padding:0 0.5em; + z-index:0; +} + +/* Clearfix */ +.tab-links:after { + display:block; + clear:both; + content:''; +} + +.tab-links li { + margin:0px 0.5em; + float:left; + list-style:none; +} + +.tab-links a { + padding:0.5em 1em; + display:inline-block; + border-radius:3px 3px 0px 0px; + background:#fff; + font-size:1em; + font-weight:600; + color:#4c4c4c; + transition:all linear 0.15s; +} + +.tab-links a:hover { + text-decoration:none; +} + +li.active a, li.active a:hover { + background:#f0f0f0; + color:#4c4c4c; + text-decoration:none; + } + +#errors-tab a { + color:#c00000; +} + +/*----- Content of Tabs -----*/ +.tab-content { + padding:0.5em; + border:1px solid #ddd; + border-radius:3px; + box-shadow:-1px 1px 1px rgba(0,0,0,0.15); + background:#fff; + box-sizing:border-box; + width:100%; + z-index:1; + margin-top:-1px; + margin-bottom:1%; +} + +.tab { + display:none; +} + +.tab.active { + display:block; +} \ 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 @@ +jQuery(document).ready(function() { + jQuery('.tabs .tab-links a').on('click', function(e) { + var currentAttrValue = jQuery(this).attr('href'); + + // Show/Hide Tabs + jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); + + // Change/remove current tab to active + jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); + + e.preventDefault(); + }); +}); -- cgit v1.2.3