started mithril.js based webui

This commit is contained in:
electron128 2016-01-02 15:52:17 +01:00
parent 4953324a3c
commit 363c4e0b14
9 changed files with 1360 additions and 0 deletions

2
libresapi/src/webui-src/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules/*
public/*

View File

@ -0,0 +1,71 @@
.chat
$color: lightblue
$header_height: 50px
$left_width: 200px
$right_width: 200px
$input_height: 100px
padding: 15px
&.container
height: 100%
padding: 0px
position: relative
&.header
position: absolute
top: 0px
left: 0px
right: 0px
height: $header_height
background-color: $color
border-bottom: solid 1px gray
box-sizing: border-box
&.left
position: absolute
top: $header_height
bottom: 0px
left: 0px
width: $left_width
border-right: solid 1px gray
box-sizing: border-box
background-color: lightgray
&.right
position: absolute
top: $header_height
right: 0px
bottom: 0px
width: $right_width
box-sizing: border-box
border-left: solid 1px gray
&.middle
//background-color: blue
position: absolute
top: $header_height
left: $left_width
right: $right_width
box-sizing: border-box
padding-top: 0px
padding-left: 0px
padding-right: 0px
&.msg
padding: 0px
$author_width: 100px
&.container
position: relative
border-bottom: solid 1px lightgray
padding: 10px
//background-color: lime
&.from
position: absolute
width: $author_width
top: 10px
left: 0px
color: gray
text-align: right
&.when
float: right
color: lightgray
margin-bottom: 10px
&.text
padding-left: $author_width
top: 0px
left: $author_width

View File

@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

View File

@ -0,0 +1,21 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>rswebui5</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="main">if app does not load, enable JavaScript!</div>
<script src="app.js"></script>
<script type="text/javascript">
function load_ui(){
var m = require("mithril");
var ui = require("chat");
var main = document.getElementById("main");
m.mount(main, ui);
}
load_ui();
</script>
</body>
</html>

View File

@ -0,0 +1,27 @@
"use strict";
var m = require("mithril");
function msg(from, when, text){
return m(".chat.msg.container",[
m(".chat.msg.from", from),
m(".chat.msg.when", when),
m(".chat.msg.text", text),
]);
}
module.exports = {
view: function(){
return m(".chat.container", [
m(".chat.header", "headerbar"),
m(".chat.left", "left"),
m(".chat.right", "right"),
m(".chat.middle", [
msg("Andi", "now", "Hallo"),
msg("Test", "now", "Hallo back"),
msg("Somebody", "now", "Hallo back, sfjhfu dsjkchsd wehfskf sdjksdf sjdnfkjsf sdjkfhjksdf jksdfjksdnf sjdefhsjkn cesjdfhsjk fskldcjhsklc ksdj"),
]),
m(".chat.clear", ""),
]);
}
}

View File

@ -0,0 +1,9 @@
@import "reset"
html, body, #main
height: 100%
body
font-family: "Sans-serif"
@import "chat"

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,12 @@
module.exports = {
config:{
files:{
javascripts:{
joinTo: 'app.js'
},
stylesheets:{
joinTo: 'app.css'
}
}
}
};

View File

@ -0,0 +1,11 @@
{
"name": "webui_neu",
"scripts": {
"watch": "brunch watch --server"
},
"devDependencies": {
"auto-reload-brunch": "^1.8.0",
"brunch": "^1.8.5",
"sass-brunch": "^1.9.1"
}
}