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>
<html>
<html lang="en">
<head>
<title>Neca Test</title>
<link rel="stylesheet" href="/style/layout.css"/>
<link rel="stylesheet" href="/style/theme.css"/>
<script src="/lib/jquery-2.1.1.min.js"></script>
<script src="/lib/jquery.flot.min.js"></script>
<script src="/lib/core.js"></script>
<script src="/lib/charts.js"></script>
<script src="/lib/log.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter sports dashboard</title>
<link rel="stylesheet" href="./style/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="./js/code.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body class="container_12">
<h1>ECA Dashboard Template</h1>
<div class="grid_6 vert_4">
<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>.
<p>Now you can run the new project with: <pre>python neca.py -s {name}.py</pre>
<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.
<body>
<div class="container">
<div class="header">
<div class="sports">
<div class="sport baseball"></div>
<div class="sport basketball"></div>
<div class="sport volleyball"></div>
<div class="sport tennis"></div>
<div class="sport cricket"></div>
<div class="sport soccer"></div>
<div class="sport football"></div>
<div class="sport rugby"></div>
</div>
<div class="grid_6 vert_4">
<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.
<p>Rules are written in <a href="https://www.python.org/">Python</a> and work as follows:
<pre>@event("foo")
def action(context, event):
print("Event " + event.name + "!")
</pre>
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>
<div class="clear"></div>
<div class="grid_4">
<p>The graph to the right is continuously filled with data generated by the rules.
<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 class="main">
<div class="leftcol"></div>
<div class="centercol"></div>
<div class="rightcol"></div>
</div>
<div id="graph" class="grid_8 vert_4"></div>
<script>
</div>
</body>
<!-- <script>
// create a rolling chart block
block('#graph').rolling_chart({
memory: 150,
@@ -59,6 +48,5 @@ block('#graph').rolling_chart({
// connect sample event to graph
events.connect('sample', '#graph');
</script>
</body>
</script> -->
</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.