diff options
Diffstat (limited to 'templates')
38 files changed, 364 insertions, 84 deletions
diff --git a/templates/dashboard/%name%.erb.tt b/templates/dashboard/%name%.erb.tt index d96e164..aa735d6 100644 --- a/templates/dashboard/%name%.erb.tt +++ b/templates/dashboard/%name%.erb.tt @@ -1,4 +1,3 @@ -<% content_for(:title) { "My super sweet dashboard" } %> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> diff --git a/templates/project/Gemfile b/templates/project/Gemfile index 7724b81..75cc574 100644 --- a/templates/project/Gemfile +++ b/templates/project/Gemfile @@ -1,3 +1,3 @@ source :rubygems -gem 'dashing', '0.1.0', :git => 'git@github.com:Shopify/dashing.git'
\ No newline at end of file +gem 'dashing'
\ No newline at end of file diff --git a/templates/project/README.md b/templates/project/README.md index e69de29..260ac2a 100644 --- a/templates/project/README.md +++ b/templates/project/README.md @@ -0,0 +1 @@ +Check out http://shopify.github.com/dashing for more information.
\ No newline at end of file diff --git a/templates/project/assets/images/logo.png b/templates/project/assets/images/logo.png Binary files differnew file mode 100644 index 0000000..aabf199 --- /dev/null +++ b/templates/project/assets/images/logo.png diff --git a/templates/project/assets/javascripts/application.coffee b/templates/project/assets/javascripts/application.coffee index c84aa05..be030e1 100644 --- a/templates/project/assets/javascripts/application.coffee +++ b/templates/project/assets/javascripts/application.coffee @@ -8,17 +8,17 @@ console.log("Yeah! The dashboard has started!") Dashing.on 'ready', -> - widget_margins = [5, 5] - widget_base_dimensions = [240, 330] - numColumns = 4 + Dashing.widget_margins ||= [5, 5] + Dashing.widget_base_dimensions ||= [300, 360] + Dashing.numColumns ||= 4 - contentWidth = (widget_base_dimensions[0] + widget_margins[0] * 2) * numColumns + contentWidth = (Dashing.widget_base_dimensions[0] + Dashing.widget_margins[0] * 2) * Dashing.numColumns Batman.setImmediate -> $('.gridster').width(contentWidth) $('.gridster ul:first').gridster - widget_margins: widget_margins - widget_base_dimensions: widget_base_dimensions + widget_margins: Dashing.widget_margins + widget_base_dimensions: Dashing.widget_base_dimensions avoid_overlapped_widgets: !Dashing.customGridsterLayout draggable: stop: Dashing.showGridsterInstructions diff --git a/templates/project/assets/stylesheets/application.scss b/templates/project/assets/stylesheets/application.scss index 7c5f300..ea2cd86 100644 --- a/templates/project/assets/stylesheets/application.scss +++ b/templates/project/assets/stylesheets/application.scss @@ -95,11 +95,11 @@ h1 { margin-bottom: 12px; text-align: center; font-size: 30px; - font-weight: 300; + font-weight: 400; } h2 { text-transform: uppercase; - font-size: 80px; + font-size: 76px; font-weight: 700; color: $text-color; } @@ -116,6 +116,16 @@ h3 { margin: 0px auto; } +.icon-background { + width: 100%!important; + height: 100%; + position: absolute; + left: 0; + top: 0; + opacity: 0.1; + font-size: 275px; +} + .list-nostyle { list-style: none; } @@ -146,7 +156,7 @@ h3 { display: inline-block; } - .title, .text-moreinfo { + .title, .more-info { color: $text-warning-color; } } @@ -160,14 +170,25 @@ h3 { display: inline-block; } - .title, .text-moreinfo { + .title, .more-info { color: $text-danger-color; } } -.text-moreinfo { - margin-top: 12px; +.more-info { font-size: 15px; + position: absolute; + bottom: 32px; + left: 0; + right: 0; +} + +.updated-at { + font-size: 15px; + position: absolute; + bottom: 12px; + left: 0; + right: 0; } #save-gridster { @@ -220,10 +241,15 @@ h3 { display: none; } +#container { + padding-top: 5px; +} + // ---------------------------------------------------------------------------- // Clearfix // ---------------------------------------------------------------------------- .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } -.clearfix { zoom: 1; }
\ No newline at end of file +.clearfix { zoom: 1; } + diff --git a/templates/project/dashboards/sample.erb b/templates/project/dashboards/sample.erb index 453a969..ab5cb00 100644 --- a/templates/project/dashboards/sample.erb +++ b/templates/project/dashboards/sample.erb @@ -10,15 +10,15 @@ </li> <li data-row="1" data-col="1" data-sizex="1" data-sizey="2"> - <div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords"></div> + <div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords" data-moreinfo="# of times said around the office"></div> </li> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> - <div data-id="valuation" data-view="Number" data-title="Current Valuation" data-moreinfo="In billions"></div> + <div data-id="valuation" data-view="Number" data-title="Current Valuation" data-moreinfo="In billions" data-prefix="$"></div> </li> <li data-row="1" data-col="1" data-sizex="2" data-sizey="1"> - <div data-id="convergence" data-view="Graph" data-title="Convergence" style="background-color:#ff9618;"></div> + <div data-id="convergence" data-view="Graph" data-title="Convergence" style="background-color:#ff9618"></div> </li> </ul> <center><div style="font-size: 12px">Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' \http://localhost:3000/widgets/welcome</div></center> diff --git a/templates/project/dashboards/sampletv.erb b/templates/project/dashboards/sampletv.erb new file mode 100644 index 0000000..b52eed7 --- /dev/null +++ b/templates/project/dashboards/sampletv.erb @@ -0,0 +1,56 @@ +<script type='text/javascript'> +$(function() { + // These settings override the defaults set in application.coffee. You can do this on a per dashboard basis. + Dashing.gridsterLayout('[{"col":2,"row":1},{"col":1,"row":1},{"col":3,"row":1},{"col":2,"row":2},{"col":3,"row":2},{"col":1,"row":2},{"col":5,"row":1},{"col":4,"row":2},{"col":2,"row":3}]') + Dashing.widget_base_dimensions = [370, 340] + Dashing.numColumns = 5 +}); +</script> + + +<% content_for(:title) { "1080p dashboard" } %> + +<div class="gridster"> + <ul> + <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> + <div data-view="Clock"></div> + <i class="icon-time icon-background"></i> + </li> + + <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> + <div data-view="Image" data-image="/logo.png"></div> + </li> + + <li data-row="1" data-col="1" data-sizex="2" data-sizey="1"> + <div data-id="welcome" data-view="Text" data-title="Hello" data-text="This is your shiny new 1080p dashboard." data-moreinfo="Protip: You can drag the widgets around!"></div> + </li> + + <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> + <div data-id="synergy" data-view="Meter" data-title="Synergy" data-min="0" data-max="100"></div> + </li> + + <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> + <div data-id="synergy" data-view="Meter" data-moreinfo="In sync with my neighbour!" data-title="Synergy" data-min="0" data-max="100"></div> + </li> + + <li data-row="1" data-col="1" data-sizex="1" data-sizey="2"> + <div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords" data-moreinfo="# of times said around the office"></div> + </li> + + <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> + <div data-id="karma" data-view="Number" data-title="Karma" style="background-color:#96bf48;"></div> + <i class="icon-heart icon-background"></i> + </li> + + <li data-row="1" data-col="1" data-sizex="2" data-sizey="2"> + <div data-id="convergence" data-view="Graph" data-title="Convergence" style="background-color:#47bbb3;" data-moreinfo="poop" ></div> + </li> + + <li data-row="1" data-col="1" data-sizex="2" data-sizey="1"> + <div data-id="twitter_mentions" data-view="Comments" style="background-color:#ff9618;" data-moreinfo="Tweets tagged with #todayilearned"></div> + <i class="icon-twitter icon-background"></i> + </li> + + </ul> + <center><div style="font-size: 12px">Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' \http://localhost:3000/widgets/welcome</div></center> +</div>
\ No newline at end of file diff --git a/templates/project/jobs/buzzwords.rb b/templates/project/jobs/buzzwords.rb index 109dc60..2668d5a 100644 --- a/templates/project/jobs/buzzwords.rb +++ b/templates/project/jobs/buzzwords.rb @@ -3,7 +3,7 @@ buzzword_counts = Hash.new({ value: 0 }) SCHEDULER.every '2s' do random_buzzword = buzzwords.sample - buzzword_counts[random_buzzword] = { label: random_buzzword, value: buzzword_counts[random_buzzword][:value] + 1 } + buzzword_counts[random_buzzword] = { label: random_buzzword, value: (buzzword_counts[random_buzzword][:value] + 1) % 30 } send_event('buzzwords', { items: buzzword_counts.values }) end
\ No newline at end of file diff --git a/templates/project/jobs/convergence.rb b/templates/project/jobs/convergence.rb index f66b6a5..1da2a5b 100644 --- a/templates/project/jobs/convergence.rb +++ b/templates/project/jobs/convergence.rb @@ -1,3 +1,4 @@ +# Populate the graph with some random points points = [] (1..10).each do |i| points << { x: i, y: rand(50) } diff --git a/templates/project/jobs/sample.rb b/templates/project/jobs/sample.rb index 2314dc2..1fe008d 100644 --- a/templates/project/jobs/sample.rb +++ b/templates/project/jobs/sample.rb @@ -1,9 +1,13 @@ current_valuation = 0 +current_karma = 0 SCHEDULER.every '2s' do last_valuation = current_valuation + last_karma = current_karma current_valuation = rand(100) + current_karma = rand(200000) send_event('valuation', { current: current_valuation, last: last_valuation }) + send_event('karma', { current: current_karma, last: last_karma }) send_event('synergy', { value: rand(100) }) end
\ No newline at end of file diff --git a/templates/project/jobs/twitter.rb b/templates/project/jobs/twitter.rb new file mode 100644 index 0000000..9359a89 --- /dev/null +++ b/templates/project/jobs/twitter.rb @@ -0,0 +1,17 @@ +require 'net/http' +require 'json' + +search_term = URI::encode('#todayilearned') + +SCHEDULER.every '10m', :first_in => 0 do |job| + http = Net::HTTP.new('search.twitter.com') + response = http.request(Net::HTTP::Get.new("/search.json?q=#{search_term}")) + tweets = JSON.parse(response.body)["results"] + if tweets + tweets.map! do |tweet| + { name: tweet['from_user'], body: tweet['text'], avatar: tweet['profile_image_url_https'] } + end + + send_event('twitter_mentions', comments: tweets) + end +end
\ No newline at end of file diff --git a/templates/project/public/.empty_directory b/templates/project/public/.empty_directory deleted file mode 100644 index 3da7f49..0000000 --- a/templates/project/public/.empty_directory +++ /dev/null @@ -1 +0,0 @@ -.empty_directory
\ No newline at end of file diff --git a/templates/project/widgets/clock/clock.coffee b/templates/project/widgets/clock/clock.coffee new file mode 100644 index 0000000..cd6b116 --- /dev/null +++ b/templates/project/widgets/clock/clock.coffee @@ -0,0 +1,18 @@ +class Dashing.Clock extends Dashing.Widget + + ready: -> + setInterval(@startTime, 500) + + startTime: => + today = new Date() + + h = today.getHours() + m = today.getMinutes() + s = today.getSeconds() + m = @formatTime(m) + s = @formatTime(s) + @set('time', h + ":" + m + ":" + s) + @set('date', today.toDateString()) + + formatTime: (i) -> + if i < 10 then "0" + i else i
\ No newline at end of file diff --git a/templates/project/widgets/clock/clock.html b/templates/project/widgets/clock/clock.html new file mode 100644 index 0000000..06759d4 --- /dev/null +++ b/templates/project/widgets/clock/clock.html @@ -0,0 +1,2 @@ +<h1 data-bind="date"></h1> +<h2 data-bind="time"></h2>
\ No newline at end of file diff --git a/templates/project/widgets/clock/clock.scss b/templates/project/widgets/clock/clock.scss new file mode 100644 index 0000000..831ea94 --- /dev/null +++ b/templates/project/widgets/clock/clock.scss @@ -0,0 +1,13 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #dc5945; + +// ---------------------------------------------------------------------------- +// Widget-clock styles +// ---------------------------------------------------------------------------- +.widget-clock { + + background-color: $background-color; + +}
\ No newline at end of file diff --git a/templates/project/widgets/comments/comments.coffee b/templates/project/widgets/comments/comments.coffee new file mode 100644 index 0000000..1e81b56 --- /dev/null +++ b/templates/project/widgets/comments/comments.coffee @@ -0,0 +1,24 @@ +class Dashing.Comments extends Dashing.Widget + + @accessor 'quote', -> + "“#{@get('current_comment')?.body}”" + + ready: -> + @currentIndex = 0 + @commentElem = $(@node).find('.comment-container') + @nextComment() + @startCarousel() + + onData: (data) -> + @currentIndex = 0 + + startCarousel: -> + setInterval(@nextComment, 8000) + + nextComment: => + comments = @get('comments') + if comments + @commentElem.fadeOut => + @currentIndex = (@currentIndex + 1) % comments.length + @set 'current_comment', comments[@currentIndex] + @commentElem.fadeIn()
\ No newline at end of file diff --git a/templates/project/widgets/comments/comments.html b/templates/project/widgets/comments/comments.html new file mode 100644 index 0000000..844800f --- /dev/null +++ b/templates/project/widgets/comments/comments.html @@ -0,0 +1,7 @@ +<h1 class="title" data-bind="title"></h1> +<div class="comment-container"> + <h3><img data-bind-src='current_comment.avatar'/><span data-bind='current_comment.name' class="name"></span></h3> + <p class="comment" data-bind='quote'></p> +</div> + +<p class="more-info" data-bind="moreinfo | raw"></p>
\ No newline at end of file diff --git a/templates/project/widgets/comments/comments.scss b/templates/project/widgets/comments/comments.scss new file mode 100644 index 0000000..40e2a6b --- /dev/null +++ b/templates/project/widgets/comments/comments.scss @@ -0,0 +1,33 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #eb9c3c; + +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.7); + +// ---------------------------------------------------------------------------- +// Widget-comment styles +// ---------------------------------------------------------------------------- +.widget-comments { + + background-color: $background-color; + + .title { + color: $title-color; + margin-bottom: 15px; + } + + .name { + padding-left: 5px; + } + + .comment-container { + display: none; + } + + .more-info { + color: $moreinfo-color; + } + +}
\ No newline at end of file diff --git a/templates/project/widgets/graph/graph.coffee b/templates/project/widgets/graph/graph.coffee index 8b56a87..9b2eeec 100644 --- a/templates/project/widgets/graph/graph.coffee +++ b/templates/project/widgets/graph/graph.coffee @@ -1,22 +1,32 @@ class Dashing.Graph extends Dashing.Widget @accessor 'current', -> + return @get('displayedValue') if @get('displayedValue') points = @get('points') if points points[points.length - 1].y ready: -> + container = $(@node).parent() + # Gross hacks. Let's fix this. + width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1) + height = (Dashing.widget_base_dimensions[1] * container.data("sizey")) @graph = new Rickshaw.Graph( element: @node - width: $(@node).parent().width() + width: width + height: height series: [ { color: "#fff", - data: [{ x: 0, y: 0}] + data: [{x:0, y:0}] } ] ) + + @graph.series[0].data = @get('points') if @get('points') + x_axis = new Rickshaw.Graph.Axis.Time(graph: @graph) + y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT) @graph.render() onData: (data) -> diff --git a/templates/project/widgets/graph/graph.html b/templates/project/widgets/graph/graph.html index 8680efb..d1794db 100644 --- a/templates/project/widgets/graph/graph.html +++ b/templates/project/widgets/graph/graph.html @@ -1,5 +1,5 @@ <h1 class="title" data-bind="title"></h1> -<h2 class="value" data-bind="current | prettyNumber"></h2> +<h2 class="value" data-bind="current | prettyNumber | prepend prefix"></h2> -<p class="text-moreinfo" data-bind="moreinfo"></p>
\ No newline at end of file +<p class="more-info" data-bind="moreinfo"></p>
\ No newline at end of file diff --git a/templates/project/widgets/graph/graph.scss b/templates/project/widgets/graph/graph.scss index f2a1e21..71cd4d4 100644 --- a/templates/project/widgets/graph/graph.scss +++ b/templates/project/widgets/graph/graph.scss @@ -1,13 +1,12 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$background-color: #2e864f; -$value-color: #fff; +$background-color: #dc5945; -$title-color: lighten($background-color, 75%); -$moreinfo-color: lighten($background-color, 45%); +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.3); +$tick-color: rgba(0, 0, 0, 0.4); -$graph_color: lighten($background-color, 75%); // ---------------------------------------------------------------------------- // Widget-graph styles @@ -17,14 +16,13 @@ $graph_color: lighten($background-color, 75%); background-color: $background-color; position: relative; + svg { - color: $graph_color; + position: absolute; opacity: 0.4; fill-opacity: 0.4; - position: absolute; - bottom: 0; - left: 0; - right: 0; + left: 0px; + top: 0px; } .title, .value { @@ -36,7 +34,7 @@ $graph_color: lighten($background-color, 75%); color: $title-color; } - .text-moreinfo { + .more-info { color: $moreinfo-color; font-weight: 600; font-size: 20px; @@ -46,6 +44,22 @@ $graph_color: lighten($background-color, 75%); .x_tick { position: absolute; bottom: 0; + .title { + font-size: 20px; + color: $tick-color; + opacity: 0.5; + padding-bottom: 3px; + } + } + + .y_ticks { + font-size: 20px; + fill: $tick-color; + fill-opacity: 1; + } + + .domain { + display: none; } }
\ No newline at end of file diff --git a/templates/project/widgets/iframe/iframe.coffee b/templates/project/widgets/iframe/iframe.coffee new file mode 100644 index 0000000..4d4ca9a --- /dev/null +++ b/templates/project/widgets/iframe/iframe.coffee @@ -0,0 +1,9 @@ +class Dashing.Iframe extends Dashing.Widget + + ready: -> + # This is fired when the widget is done being rendered + + onData: (data) -> + # Handle incoming data + # You can access the html node of this widget with `@node` + # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
\ No newline at end of file diff --git a/templates/project/widgets/iframe/iframe.html b/templates/project/widgets/iframe/iframe.html new file mode 100644 index 0000000..bfccba4 --- /dev/null +++ b/templates/project/widgets/iframe/iframe.html @@ -0,0 +1 @@ +<iframe data-bind-src="url" frameborder=0></iframe>
\ No newline at end of file diff --git a/templates/project/widgets/iframe/iframe.scss b/templates/project/widgets/iframe/iframe.scss new file mode 100644 index 0000000..7c757bf --- /dev/null +++ b/templates/project/widgets/iframe/iframe.scss @@ -0,0 +1,8 @@ +.widget-iframe { + padding: 3px 0px 0px 0px !important; + + iframe { + width: 100%; + height: 100%; + } +}
\ No newline at end of file diff --git a/templates/project/widgets/image/image.coffee b/templates/project/widgets/image/image.coffee new file mode 100644 index 0000000..418e385 --- /dev/null +++ b/templates/project/widgets/image/image.coffee @@ -0,0 +1,9 @@ +class Dashing.Image extends Dashing.Widget + + ready: -> + # This is fired when the widget is done being rendered + + onData: (data) -> + # Handle incoming data + # You can access the html node of this widget with `@node` + # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
\ No newline at end of file diff --git a/templates/project/widgets/image/image.html b/templates/project/widgets/image/image.html new file mode 100644 index 0000000..cf2b228 --- /dev/null +++ b/templates/project/widgets/image/image.html @@ -0,0 +1 @@ +<img data-bind-src="image | prepend '/assets'" data-bind-width="width"/>
\ No newline at end of file diff --git a/templates/project/widgets/image/image.scss b/templates/project/widgets/image/image.scss new file mode 100644 index 0000000..10ca81d --- /dev/null +++ b/templates/project/widgets/image/image.scss @@ -0,0 +1,13 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #4b4b4b; + +// ---------------------------------------------------------------------------- +// Widget-image styles +// ---------------------------------------------------------------------------- +.widget-image { + + background-color: $background-color; + +}
\ No newline at end of file diff --git a/templates/project/widgets/list/list.coffee b/templates/project/widgets/list/list.coffee index 3ca892b..3cbf7a1 100644 --- a/templates/project/widgets/list/list.coffee +++ b/templates/project/widgets/list/list.coffee @@ -1,13 +1,6 @@ class Dashing.List extends Dashing.Widget - @accessor 'current', Dashing.AnimatedValue - - @accessor 'arrow', -> - if @get('last') - if parseInt(@get('current')) > parseInt(@get('last')) then 'arrow-up' else 'arrow-down' - ready: -> - Batman.setImmediate => - if @get('unordered') - $(@node).find('ol').remove() - else - $(@node).find('ul').remove()
\ No newline at end of file + if @get('unordered') + $(@node).find('ol').remove() + else + $(@node).find('ul').remove()
\ No newline at end of file diff --git a/templates/project/widgets/list/list.html b/templates/project/widgets/list/list.html index cc90d42..86752bf 100644 --- a/templates/project/widgets/list/list.html +++ b/templates/project/widgets/list/list.html @@ -12,4 +12,7 @@ <span class="label" data-bind="item.label"></span> <span class="value" data-bind="item.value"></span> </li> -</ul>
\ No newline at end of file +</ul> + +<p class="more-info" data-bind="moreinfo"></p> +<p class="updated-at" data-bind="updatedAtMessage"></p>
\ No newline at end of file diff --git a/templates/project/widgets/list/list.scss b/templates/project/widgets/list/list.scss index 098200d..90b6c84 100644 --- a/templates/project/widgets/list/list.scss +++ b/templates/project/widgets/list/list.scss @@ -1,12 +1,12 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- - $background-color: #12b0c5; $value-color: #fff; -$title-color: lighten($background-color, 45%); -$label-color: lighten($background-color, 45%); +$title-color: rgba(255, 255, 255, 0.7); +$label-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.7); // ---------------------------------------------------------------------------- // Widget-list styles @@ -49,4 +49,12 @@ $label-color: lighten($background-color, 45%); color: $value-color; } + .updated-at { + color: rgba(0, 0, 0, 0.3); + } + + .more-info { + color: $moreinfo-color; + } + }
\ No newline at end of file diff --git a/templates/project/widgets/meter/meter.html b/templates/project/widgets/meter/meter.html index 6051d2f..7d51b15 100644 --- a/templates/project/widgets/meter/meter.html +++ b/templates/project/widgets/meter/meter.html @@ -2,4 +2,6 @@ <input class="meter" data-angleOffset=-125 data-angleArc=250 data-width=200 data-readOnly=true data-bind-value="value | shortenedNumber" data-bind-data-min="min" data-bind-data-max="max"> -<p class="text-moreinfo" data-bind="moreinfo"></p>
\ No newline at end of file +<p class="more-info" data-bind="moreinfo"></p> + +<p class="updated-at" data-bind="updatedAtMessage"></p>
\ No newline at end of file diff --git a/templates/project/widgets/meter/meter.scss b/templates/project/widgets/meter/meter.scss index dec0cc6..98cf638 100644 --- a/templates/project/widgets/meter/meter.scss +++ b/templates/project/widgets/meter/meter.scss @@ -1,15 +1,12 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- - $background-color: #9c4274; -$value-color: #fff; -$title-color: lighten($background-color, 75%); -$moreinfo-color: lighten($background-color, 45%); +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.3); -$meter-background: darken($background-color, 10%); -$meter-foreground: lighten($background-color, 75%); +$meter-background: darken($background-color, 15%); // ---------------------------------------------------------------------------- // Widget-meter styles @@ -20,18 +17,19 @@ $meter-foreground: lighten($background-color, 75%); input.meter { background-color: $meter-background; - color: $meter-foreground; + color: #fff; } .title { color: $title-color; } - .text-moreinfo { + .more-info { color: $moreinfo-color; - font-weight: 600; - font-size: 20px; - margin-top: 0; + } + + .updated-at { + color: rgba(0, 0, 0, 0.3); } }
\ No newline at end of file diff --git a/templates/project/widgets/number/number.coffee b/templates/project/widgets/number/number.coffee index 78e7523..46cd6c2 100644 --- a/templates/project/widgets/number/number.coffee +++ b/templates/project/widgets/number/number.coffee @@ -8,17 +8,13 @@ class Dashing.Number extends Dashing.Widget if last != 0 diff = Math.abs(Math.round((current - last) / last * 100)) "#{diff}%" + else + "" @accessor 'arrow', -> if @get('last') if parseInt(@get('current')) > parseInt(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down' - @accessor 'statusStyle', -> - "status-#{@get('status')}" - - @accessor 'needsAttention', -> - @get('status') == 'warning' || @get('status') == 'danger' - onData: (data) -> if data.status $(@get('node')).addClass("status-#{data.status}")
\ No newline at end of file diff --git a/templates/project/widgets/number/number.html b/templates/project/widgets/number/number.html index 6e9a03e..d7eeab9 100644 --- a/templates/project/widgets/number/number.html +++ b/templates/project/widgets/number/number.html @@ -1,9 +1,11 @@ -<h1 class="title"><i data-showif="needsAttention" class="icon-warning-sign"></i><span data-bind="title"></span></h1> +<h1 class="title" data-bind="title"></h1> -<h2 class="value" data-bind="current | prettyNumber"></h2> +<h2 class="value" data-bind="current | shortenedNumber | prepend prefix"></h2> <p class="change-rate"> - <i data-bind-class="arrow"></i><span data-bind="difference">50%</span> + <i data-bind-class="arrow"></i><span data-bind="difference"></span> </p> -<p class="text-moreinfo" data-bind="moreinfo">2012-07-26 10:59AM</p>
\ No newline at end of file +<p class="more-info" data-bind="moreinfo | raw"></p> + +<p class="updated-at" data-bind="updatedAtMessage"></p> diff --git a/templates/project/widgets/number/number.scss b/templates/project/widgets/number/number.scss index d134561..608624b 100644 --- a/templates/project/widgets/number/number.scss +++ b/templates/project/widgets/number/number.scss @@ -1,11 +1,11 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$background-color: #00b1a4; +$background-color: #47bbb3; $value-color: #fff; -$title-color: lighten($background-color, 75%); -$moreinfo-color: lighten($background-color, 45%); +$title-color: rgba(255, 255, 255, 0.7);; +$moreinfo-color: rgba(255, 255, 255, 0.7);; // ---------------------------------------------------------------------------- // Widget-number styles @@ -23,13 +23,17 @@ $moreinfo-color: lighten($background-color, 45%); } .change-rate { - font-weight: 300; + font-weight: 500; font-size: 30px; color: $value-color; } - .text-moreinfo { + .more-info { color: $moreinfo-color; } + + .updated-at { + color: rgba(0, 0, 0, 0.3); + } }
\ No newline at end of file diff --git a/templates/project/widgets/text/text.html b/templates/project/widgets/text/text.html index 02bd0f7..45322ca 100644 --- a/templates/project/widgets/text/text.html +++ b/templates/project/widgets/text/text.html @@ -1,5 +1,7 @@ <h1 class="title" data-bind="title"></h1> -<h3 data-bind="text"></h3> +<h3 data-bind="text | raw"></h3> -<p class="text-moreinfo" data-bind="moreinfo">2012-07-26 10:59AM</p>
\ No newline at end of file +<p class="more-info" data-bind="moreinfo | raw"></p> + +<p class="updated-at" data-bind="updatedAtMessage"></p>
\ No newline at end of file diff --git a/templates/project/widgets/text/text.scss b/templates/project/widgets/text/text.scss index 4293602..4e6c6e3 100644 --- a/templates/project/widgets/text/text.scss +++ b/templates/project/widgets/text/text.scss @@ -1,11 +1,10 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$background-color: #ec663c;; -$value-color: #fff; +$background-color: #ec663c; -$title-color: lighten($background-color, 40%); -$moreinfo-color: lighten($background-color, 30%); +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.7); // ---------------------------------------------------------------------------- // Widget-text styles @@ -18,8 +17,16 @@ $moreinfo-color: lighten($background-color, 30%); color: $title-color; } - .text-moreinfo { + .more-info { color: $moreinfo-color; } + + .updated-at { + color: rgba(255, 255, 255, 0.7); + } + + &.large h3 { + font-size: 65px; + } }
\ No newline at end of file |