Permalink
Browse files

Merge pull request #2 from modilabs/html-structure

Html structure
  • Loading branch information...
2 parents bc90bcd + f780e66 commit 76ec5de30ed5c71fa33b18908db53ed68858762c @myf committed Jul 16, 2012
View
@@ -2,36 +2,36 @@ bamboo-meteor-client
====================
A basic bamboo client built on meteor.js
-v0.1: emulate /static/bar_graphs.html on bamboo (see example at http://optimus.modilabs.org:9000/static/bar_graphs.html)
+v0.1: emulate /static/bar_graphs.html on bamboo
installation
============
Install meteor and packages:
- curl install.meteor.com | /bin/sh
- meteor add coffeescript
- meteor add jquery
+run with meteor:
-Install node (download from http://nodejs.org) and request package:
-
- npm install request
+ if you are running Mac, Ubuntu, Debian Centos of Fedora:
+ > curl install.meteor.com | /bin/sh
+ else:
+ > git clone http://github.com/meteor/meteor.git
+ > cd meteor
+ > ./install
+ then:
+ > git clone https://github.com/modilabs/bamboo-meteor-client.git
+ > cd /bamboo-meteor-client/bamboo-meteor/
+ > meteor
+ go to localhost:3000 you'll see
-Run meteor, in your bamboo-meteor-client directory:
+ you can also run with node after you compiled the bundle with meteor:
- meteor
+Install node (download from http://nodejs.org)
-Browse to localhost:3000
+please see details at http://docs.meteor.com/#deploying
deployment
==========
Currently it is deployed at
http://bamboo.meteor.com
Please check this testing site for the newest deployment before we migrate it to bamboo site
->
- _ _ _
-| |__ ___| | | ___
-| '_ \ / _ \ | |/ _ \
-| | | | __/ | | (_) |
-|_| |_|\___|_|_|\___/
@@ -50,3 +50,22 @@ input{
}
/*myf's color 74E01B*/
/*nanzhu's color CCE89B*/
+
+.box {
+ border:1px solid;
+}
+.control .row {
+ margin-left:20px;
+}
+.mainbody {
+ margin:50px;
+}
+
+.borderset {
+ opacity: 0.9;
+ stroke: grey;
+ stroke-width: 2px;
+ -webkit-box-shadow: 0 0 5px 5px #888888;
+ box-shadow: 0 0 5px 5px #888888;
+}
+
@@ -7,24 +7,31 @@
<div class="container-fluid">
{{> url_entry}}
</div>
- {{> processing}}
- {{> body_render}}
- <div id="d3select"></div>
+ <div class="mainbody">
+ {{> processing}}
+ {{> body_render}}
+ <div id="d3select"></div>
+ </div>
</body>
+
<template name="body_render">
{{#if show}}
{{> introduction}}
- <div class="hero-unit span8 offset1">
+ {{> graphing_block}}
+ {{> add_new_graph}}
+{{/if}}
+</template>
+
+<template name="graphing_block">
+ <div class="well span8 offset1">
<div class="control">
{{> control_panel}}
</div>
<div class="graphing">
{{> graph}}
</div>
</div>
-{{/if}}
</template>
-
<template name="url_entry">
{{#if current_dataset_url}}
@@ -55,15 +62,51 @@
{{/if}}
</template>
+<template name="processing">
+{{#if ready}}
+ <div class="well span8 offset1">
+ <h1>Preparing your dataset, just a split second..</h1>
+ <img src="drop.gif">
+ </div>
+{{/if}}
+</template>
+
+<template name="introduction">
+{{#if ready}}
+<div class="well span8 offset1">
+ <p>You are accessing the dataset from {{url}}</p>
+ <p>There are {{num_cols}} fields you can choose to chart</p>
+ {{#if show_all}}
+ {{#each schema}}
+ <p><a href="http://www.google.com?id={{label}}"> {{label}} {{simpletype}} </a></p>
+ {{/each}}
+ {{#if long}}
+ <div class="btn pull-right" id="hideBtn">
+ hide
+ </div>
+ {{/if}}
+ {{else}}
+ <p> show 5 entries, or click the button to show all </p>
+ {{#each schema_less}}
+ <p><a href="http://www.google.com?id={{label}}"> {{label}} {{simpletype}} </a></p>
+ {{/each}}
+ <div class="btn pull-right" id="moreBtn">
+ more
+ </div>
+ {{/if}}
+</div>
+{{/if}}
+</template>
+
<template name="control_panel">
{{#if show}}
<div class="page-header">
- <h3>Control Panel</h3>
+ <h3>Graphing Control Panel</h3>
</div>
- <div class="row offset1">
+ <div class="row">
<b>View</b>
{{chosen}}
- <select class="chosen" id="view">
+ <select class="chosen" id="view" >
{{#each fields}}
<option>{{this}}</option>
{{/each}}
@@ -78,47 +121,39 @@
Generate
{{num_graph}}
graphs
- </div>
- <div class="btn pull-right" id="chartBtn">
- Chart
+ <div class="btn pull-right" id="chartBtn">
+ Chart
+ </div>
</div>
{{/if}}
</template>
-<template name="graph">
-{{#if show}}
- {{>waiting_graph}}
- {{charting}}
- <div class="d3_graph" id="{{field}}_graph"></div>
-{{/if}}
-</template>
-
<template name="waiting_graph">
{{#if exist}}
- Graphs:
+ <h3> {{titles}} </h3>
{{else}}
Proccessing the graphs, waiting a split second...
<img src="drop.gif">
{{/if}}
</template>
-
-<template name="introduction">
-{{#if ready}}
-<div class="hero-unit span11">
- <p>You are accessing the dataset from {{url}}</p>
- <p>There are {{num_cols}} fields you can choose to chart</p>
- {{#each schema}}
- <p>{{label}} ({{simpletype}})</p>
- {{/each}}
-</div>
+
+<template name="graph">
+{{#if show}}
+ {{>waiting_graph}}
+ {{charting}}
+ <div class="d3_graph" id="{{field}}_graph"></div>
{{/if}}
</template>
-<template name="processing">
-{{#if ready}}
- <div class="hero-unit span8 offset1">
- <h1>Preparing your dataset, just a split second..</h1>
- <img src="drop.gif">
+
+
+
+<template name="add_new_graph">
+{{#if show}}
+ <div class="well span8 offset1">
+ <div class="btn pull-right" id="addGraphBtn">
+ Add A Graph
+ </div>
</div>
{{/if}}
</template>
Oops, something went wrong.

0 comments on commit 76ec5de

Please sign in to comment.