@@ -1,17 +1,8 @@
-= stylesheet_link_tag 'slides'
+- content_for :head do
+ = stylesheet_link_tag 'slides'
= render 'display', :locals => { :sites => @sites, :mode => :compact }
:javascript
- Event.observe(window,'resize',function() {
- var width = document.viewport.getWidth();
- var watches = $$('.watch');
- var container_margin = 10;
- var watch_width = Math.floor((width / watches.length - 10) - (container_margin / watches.length));
- watches.each(function(element) {
- element.setStyle({'width':watch_width+'px'});
- });
- watches.last().setStyle({'marginLeft':0});
- });
-
- Event.observe(window,'dom:loaded',function() { window.onresize(); });
\ No newline at end of file
+ Event.observe(window,'resize', resizePanels);
+ Event.observe(window,'dom:loaded', resizePanels);
\ No newline at end of file
app/views/dashboard/compact.html.haml
@@ -4,14 +4,14 @@
- warning = false
.name{:onclick => "location.href = '#{edit_watch_path(watch)}'"}
- %span.name
- - if params[:action] == 'slides'
- = watch.site.name
- = watch.name
- - if params[:action] == 'slides' && watch.url.length > 25
- %span.url= link_to(watch.url[0..15] + '...' + watch.url[-10..-1], watch.url)
- - else
- %span.url= link_to(watch.url, watch.url)
+ %span.site_name= watch.site.name
+ %span.name= watch.name
+ %span.url= link_to(watch.url, watch.url)
+ -#
+ - if params[:action] == 'slides' && watch.url.length > 25
+ %span.url= link_to(watch.url[0..15] + '...' + watch.url[-10..-1], watch.url)
+ - else
+ %span.url= link_to(watch.url, watch.url)
- if mode == :extended
.graph
app/views/watches/_watch.html.haml
@@ -16,8 +16,8 @@
<%= f.text_field :warning_time %>
</p>
<p>
- <%= f.label :content %><br />
- <%= f.text_field :content %>
+ <%= f.label :content_match %><br />
+ <%= f.text_field :content_match %>
</p>
<p>
<%= f.label :site_id %><br />
app/views/watches/new.html.erb
@@ -1,3 +1,29 @@
+// Called when the browser is resized to resize each of the slides in the compact dashboard view
+function resizePanels() {
+ var watches = $$('.watch');
+ var container_margin = $('sites').getStyle('marginLeft').match(/\d+/); // how much space we need to reserve for the margins
+ var browser_width = parseInt(document.viewport.getWidth()); // browser width
+ var watch_margin = parseInt(watches.first().getStyle('marginRight').match(/\d+/));
+ var watch_max_width = parseInt(watches.first().getStyle('minWidth').match(/\d+/));
+ var i = watches.length;
+
+ // start counting backwards through the number of total watches until we find a width for each that is greater than the max width
+ do {
+ var watch_width = figureWatchWidth(browser_width, i, watch_margin, container_margin); // how wide one slide should be
+ i--;
+ } while (watch_width < watch_max_width)
+
+ // resize each slide
+ watches.each(function(element) {
+ element.setStyle({'width':watch_width+'px'});
+ });
+
+}
+
+function figureWatchWidth(browser_width,total,watch_margin,container_margin) {
+ return (browser_width / total - watch_margin) - (container_margin /total); // how wide one slide should be
+}
+
function getCookie(c_name) {
if (document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name + "=");
public/javascripts/application.js
@@ -3,6 +3,7 @@ h1
display: none
#sites
margin: 10px 0 10px 10px
+ overflow: hidden
.site
background-color: transparent
margin: 0
@@ -15,16 +16,18 @@ h1
height: 100px
margin: 0 10px 10px 0!important
display: block
- min-width: 250px
+ min-width: 200px
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.2)
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.2)
div
&.name
width: auto
span.name
- font-size: 146.5%
+ font-size: 131% !important
&.status
+ display: none
width: auto
+ font-size: 85% !important
&.graph
display: none
.new_watch
public/stylesheets/sass/slides.sass
@@ -4,6 +4,7 @@ h1 {
#sites {
margin: 10px 0 10px 10px;
+ overflow: hidden;
}
#sites .site {
background-color: transparent;
@@ -19,7 +20,7 @@ h1 {
height: 100px;
margin: 0 10px 10px 0!important;
display: block;
- min-width: 250px;
+ min-width: 200px;
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.2);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.2);
}
@@ -27,10 +28,12 @@ h1 {
width: auto;
}
#sites .site .watch div.name span.name {
- font-size: 146.5%;
+ font-size: 131% !important;
}
#sites .site .watch div.status {
+ display: none;
width: auto;
+ font-size: 85% !important;
}
#sites .site .watch div.graph {
display: none;
public/stylesheets/slides.css
a93d020c7365939a594b69afb6cf9c33b22d6dcc
Rob Cameron
cannikinn@gmail.com
http://github.com/cannikin/owl/commit/a3c4289d52fc447db2edfa92bfdc5358a3ebb424
a3c4289d52fc447db2edfa92bfdc5358a3ebb424
2009-10-31T21:49:22-07:00
2009-10-31T21:49:22-07:00
Compact slides resize with the browser
3740f0963e5ab2feed7a5ef6da7ded77b028c2ff
Rob Cameron
cannikinn@gmail.com