Merge pull request #1 from olinpin/MainLayout

main layout and template
This commit is contained in:
TimWijma
2022-10-31 17:38:48 +01:00
committed by GitHub
17 changed files with 44 additions and 697 deletions

View File

Binary file not shown.

View File

@@ -1,48 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Neca Test</title> <meta charset="UTF-8">
<link rel="stylesheet" href="/style/layout.css"/> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/style/theme.css"/> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/lib/jquery-2.1.1.min.js"></script> <title>Twitter sports dashboard</title>
<script src="/lib/jquery.flot.min.js"></script> <link rel="stylesheet" href="./style/style.css">
<script src="/lib/core.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="/lib/charts.js"></script> <script src="./js/code.js"></script>
<script src="/lib/log.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head> </head>
<body class="container_12"> <body>
<h1>ECA Dashboard Template</h1> <div class="container">
<div class="header">
<div class="grid_6 vert_4"> <div class="sports">
<p>This is the dashboard template file. The easiest way to get started is to think up a simple name (let's say we take 'dashboard'). Now copy <code>template.py</code> to <code>{name}.py</code> start a new module (so that's <code>dashboard.py</code>) and copy <code>template_static</code> to <code>{name}_static</code>. <div class="sport baseball"></div>
<p>Now you can run the new project with: <pre>python neca.py -s {name}.py</pre> <div class="sport basketball"></div>
<p>Further documentation on the ECA system can be found at <a href="https://github.com/utwente-db/eca/wiki">github.com/utwente-db/eca/wiki</a>, and demos can be found in the <code>demos/</code> directory. <div class="sport volleyball"></div>
</div> <div class="sport tennis"></div>
<div class="grid_6 vert_4"> <div class="sport cricket"></div>
<p>In the sample <code>template.py</code> (which comes with the dashboard you're looking at right now), you will find the rules that power this example. <div class="sport soccer"></div>
<p>Rules are written in <a href="https://www.python.org/">Python</a> and work as follows: <div class="sport football"></div>
<pre>@event("foo") <div class="sport rugby"></div>
def action(context, event): </div>
print("Event " + event.name + "!") </div>
</pre> <div class="main">
The <code>@event</code> part tells the system to fire the action whenever the event 'foo' occurs. The <code>def action(context, event):</code> part defines a new action that takes two arguments: the context and the event. The rest of the code is the action body. <div class="leftcol"></div>
</div> <div class="centercol"></div>
<div class="rightcol"></div>
<div class="clear"></div> </div>
</div>
<div class="grid_4"> </body>
<p>The graph to the right is continuously filled with data generated by the rules. <!-- <script>
<p>In <code>template.py</code> you can see that an event called 'sample' is fired again and again to create new data points for the graph.
<p>These points are then sent to the browser with:
<pre>emit('sample',{
'action': 'add',
'value': sample
})</pre>
</div>
<div id="graph" class="grid_8 vert_4"></div>
<script>
// create a rolling chart block // create a rolling chart block
block('#graph').rolling_chart({ block('#graph').rolling_chart({
memory: 150, memory: 150,
@@ -59,6 +48,5 @@ block('#graph').rolling_chart({
// connect sample event to graph // connect sample event to graph
events.connect('sample', '#graph'); events.connect('sample', '#graph');
</script> </script> -->
</body> </html>
</html>

View File

View File

@@ -1,374 +0,0 @@
/*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/
Licensed under GPL and MIT.
*/
/*
Forces backgrounds to span full width,
even if there is horizontal scrolling.
Increase this if your layout is wider.
Note: IE6 works fine without this fix.
*/
body {
min-width: 960px;
}
/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11,
.push_12, .pull_12 {
position:relative;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1 {
width:60px;
}
.container_12 .grid_2 {
width:140px;
}
.container_12 .grid_3 {
width:220px;
}
.container_12 .grid_4 {
width:300px;
}
.container_12 .grid_5 {
width:380px;
}
.container_12 .grid_6 {
width:460px;
}
.container_12 .grid_7 {
width:540px;
}
.container_12 .grid_8 {
width:620px;
}
.container_12 .grid_9 {
width:700px;
}
.container_12 .grid_10 {
width:780px;
}
.container_12 .grid_11 {
width:860px;
}
.container_12 .grid_12 {
width:940px;
}
/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 {
padding-left:80px;
}
.container_12 .prefix_2 {
padding-left:160px;
}
.container_12 .prefix_3 {
padding-left:240px;
}
.container_12 .prefix_4 {
padding-left:320px;
}
.container_12 .prefix_5 {
padding-left:400px;
}
.container_12 .prefix_6 {
padding-left:480px;
}
.container_12 .prefix_7 {
padding-left:560px;
}
.container_12 .prefix_8 {
padding-left:640px;
}
.container_12 .prefix_9 {
padding-left:720px;
}
.container_12 .prefix_10 {
padding-left:800px;
}
.container_12 .prefix_11 {
padding-left:880px;
}
/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 {
padding-right:80px;
}
.container_12 .suffix_2 {
padding-right:160px;
}
.container_12 .suffix_3 {
padding-right:240px;
}
.container_12 .suffix_4 {
padding-right:320px;
}
.container_12 .suffix_5 {
padding-right:400px;
}
.container_12 .suffix_6 {
padding-right:480px;
}
.container_12 .suffix_7 {
padding-right:560px;
}
.container_12 .suffix_8 {
padding-right:640px;
}
.container_12 .suffix_9 {
padding-right:720px;
}
.container_12 .suffix_10 {
padding-right:800px;
}
.container_12 .suffix_11 {
padding-right:880px;
}
/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .push_1 {
left:80px;
}
.container_12 .push_2 {
left:160px;
}
.container_12 .push_3 {
left:240px;
}
.container_12 .push_4 {
left:320px;
}
.container_12 .push_5 {
left:400px;
}
.container_12 .push_6 {
left:480px;
}
.container_12 .push_7 {
left:560px;
}
.container_12 .push_8 {
left:640px;
}
.container_12 .push_9 {
left:720px;
}
.container_12 .push_10 {
left:800px;
}
.container_12 .push_11 {
left:880px;
}
/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1 {
left:-80px;
}
.container_12 .pull_2 {
left:-160px;
}
.container_12 .pull_3 {
left:-240px;
}
.container_12 .pull_4 {
left:-320px;
}
.container_12 .pull_5 {
left:-400px;
}
.container_12 .pull_6 {
left:-480px;
}
.container_12 .pull_7 {
left:-560px;
}
.container_12 .pull_8 {
left:-640px;
}
.container_12 .pull_9 {
left:-720px;
}
.container_12 .pull_10 {
left:-800px;
}
.container_12 .pull_11 {
left:-880px;
}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix {
zoom: 1;
}

View File

@@ -1,69 +0,0 @@
/*
** Base layout:
** Grid layout + vertical sizing classes sized to match
*/
/* Grid layout based on (http://960.gs/) */
@import url(grid.css);
/* Vertical classes */
.grid_1, .vert_1,
.grid_2, .vert_2,
.grid_3, .vert_3,
.grid_4, .vert_4,
.grid_5, .vert_5,
.grid_6, .vert_6,
.grid_7, .vert_7,
.grid_8, .vert_8,
.grid_9, .vert_9,
.grid_10, .vert_10,
.grid_11, .vert_11,
.grid_12, .vert_12 {
margin-top: 10px;
margin-bottom: 10px;
}
.container_12 .vert_1 { height:60px; }
.container_12 .vert_2 { height:140px; }
.container_12 .vert_3 { height:220px; }
.container_12 .vert_4 { height:300px; }
.container_12 .vert_5 { height:380px; }
.container_12 .vert_6 { height:460px; }
.container_12 .vert_7 { height:540px; }
.container_12 .vert_8 { height:620px; }
.container_12 .vert_9 { height:700px; }
.container_12 .vert_10 { height:780px; }
.container_12 .vert_11 { height:860px; }
.container_12 .vert_12 { height:940px; }
/* Layout details */
p:first-child {
margin-top: 0;
}
/* Log block */
.block.log {
overflow: auto;
}
/* Tweets block */
.tweet-list * {
margin: 0;
padding: 0;
}
.tweet-list.stream-items {
margin: 0;
padding: 0;
overflow: auto;
width: 100%;
height: 100%;
}

View File

@@ -0,0 +1,11 @@
body, html, .container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
background-color: #292929;
color: white;
}

View File

@@ -1,160 +0,0 @@
/* Basic style & theme*/
body {
font-family: sans-serif;
}
p {
text-align: justify;
}
code {
background-color: #eee;
border: 1px solid #ddd;
border-radius: 2px;
padding: 0 0.2em;
}
pre {
padding: 0.5em 1.5em;
background-color: #eee;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
/* Devevlopment helpers */
.debug_red { background-color: rgba(255,0,0,0.5); }
.debug_green { background-color: rgba(0,255,0,0.5); }
.debug_blue { background-color: rgba(0,0,255,0.5); }
/* Tweets block */
.tweet-list.stream-items {
position: relative;
background-color: #fff;
list-style: none;
color: #333;
font-size: 14px;
line-height: 18px;
font-family: arial, sans-serif;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.tweet-list .stream-item {
background: #fff;
background-clip: padding-box;
}
.tweet-list .stream-item:hover {
background-color: #eee;
}
.tweet-list li.stream-item {
line-height: inherit
}
.tweet-list .tweet {
position: relative;
min-height: 51px;
padding: 9px 12px;
}
.tweet-list .stream-item + .stream-item {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.tweet-list .tweet p {
word-wrap: break-word
}
.tweet-list .tweet .details {
display: inline-block;
margin-right: 2px
}
.tweet-list .tweet .context a {
color: #999
}
.tweet-list .stream-item .content {
margin-left: 58px
}
.tweet-list .stream-item-header .avatar {
float: left;
margin-top: 3px;
margin-left: -58px
}
.tweet-list .account-group {
color: #999
}
.tweet-list a {
color: #0084b4;
text-decoration: none
}
.tweet-list a:focus {
outline: 0
}
.tweet-list a:hover,
.tweet-list a:focus {
color: #0084b4;
text-decoration: underline
}
.tweet-list a.account-group:hover,
.tweet-list a.account-group:focus {
text-decoration: none;
}
.tweet-list a.account-group:hover .fullname,
.tweet-list a.account-group:focus .fullname {
text-decoration: underline;
}
.tweet-list .avatar {
width: 48px;
height: 48px;
border-radius: 5px;
-moz-force-broken-image-icon: 1
}
.tweet-list .fullname {
font-weight: bold;
color: #333;
}
.tweet-list .username {
font-size: 12px;
color: #999
}
.tweet-list .username s {
color: #bbb
}
.tweet-list s {
text-decoration: none
}
.tweet-list b {
font-weight: normal
}
.tweet-list .tweet .time {
position: relative;
float: right;
margin-top: 1px;
color: #bbb
}
.tweet-list .tweet-timestamp {
color: #999
}
.tweet-list .tweet .tweet-text {
white-space: pre-wrap
}

View File

@@ -1,49 +0,0 @@
/* fonts */
div.jqcloud {
font-family: "Helvetica", "Arial", sans-serif;
font-size: 10px;
line-height: normal;
}
div.jqcloud a {
font-size: inherit;
text-decoration: none;
}
div.jqcloud span.w10 { font-size: 550%; }
div.jqcloud span.w9 { font-size: 500%; }
div.jqcloud span.w8 { font-size: 450%; }
div.jqcloud span.w7 { font-size: 400%; }
div.jqcloud span.w6 { font-size: 350%; }
div.jqcloud span.w5 { font-size: 300%; }
div.jqcloud span.w4 { font-size: 250%; }
div.jqcloud span.w3 { font-size: 200%; }
div.jqcloud span.w2 { font-size: 150%; }
div.jqcloud span.w1 { font-size: 100%; }
/* colors */
div.jqcloud { color: #09f; }
div.jqcloud a { color: inherit; }
div.jqcloud a:hover { color: #0df; }
div.jqcloud a:hover { color: #0cf; }
div.jqcloud span.w10 { color: #0cf; }
div.jqcloud span.w9 { color: #0cf; }
div.jqcloud span.w8 { color: #0cf; }
div.jqcloud span.w7 { color: #39d; }
div.jqcloud span.w6 { color: #90c5f0; }
div.jqcloud span.w5 { color: #90a0dd; }
div.jqcloud span.w4 { color: #90c5f0; }
div.jqcloud span.w3 { color: #a0ddff; }
div.jqcloud span.w2 { color: #99ccee; }
div.jqcloud span.w1 { color: #aab5f0; }
/* layout */
div.jqcloud {
overflow: hidden;
position: relative;
}
div.jqcloud span { padding: 0; }

View File

Binary file not shown.

View File

Binary file not shown.

View File

Binary file not shown.

View File

Binary file not shown.

View File

Binary file not shown.

View File

Binary file not shown.

View File

Binary file not shown.

View File

Binary file not shown.

View File

Binary file not shown.