Permalink
Browse files

make panels vertical, sized with JS

  • Loading branch information...
alexch committed Jun 13, 2012
1 parent 0749c87 commit 86a1be51d6cc202dbe0e46e706fbfd35cadf79ca
Showing with 122 additions and 84 deletions.
  1. +0 −1 learn_ruby/hello/hello_spec.rb
  2. +122 −83 web/live.rb
@@ -113,7 +113,6 @@
# "Hello, #{who}!"
# end
#
-# <!-- -->
require "hello"
describe "the hello function" do
View
@@ -2,6 +2,84 @@
require 'erector_scss'
require 'rdiscount'
+class Panels < Erector::Widget
+ external :js, "/jquery-1.7.2.min.js"
+
+ external :script, <<-JAVASCRIPT
+function resizePanels() {
+ var panels = $('.panels');
+ var allPanels = panels.find('.panel');
+ var panelCount = allPanels.size();
+ var unitWidth = panels.innerWidth() / panelCount - 8;
+ var unitHeight = $(window).innerHeight() -
+ $('.controls').outerHeight() - 20;
+32;
+
+ allPanels.each(function(i) {
+ $(this).width(unitWidth);
+ $(this).find('.panel_contents').width(unitWidth - 32);
+ $(this).height(unitHeight);
+ $(this).find('.panel_contents').height(unitHeight - 20);
+ });
+}
+
+$(document).ready(resizePanels);
+$(window).resize(resizePanels);
+
+
+ JAVASCRIPT
+
+ external :style, scss(<<-CSS)
+
+ $panel_border: #559;
+ $panel_title_bg: #EEE;
+
+ .panels {
+ background: #DDE;
+ margin: 0;
+ padding: 0;
+
+ .panel {
+ display: inline-block;
+ border: 1px solid $panel_border;
+ @include border-radius(6px);
+ margin: 0;
+ width: 40em;
+ text-align: center;
+ position: relative; /* to get the title contained */
+
+ .title {
+ position: absolute;
+ right: 2px;
+ @include border-radius(6px);
+ padding: 2px .25em;
+ border: 1px solid black;
+ margin: .25em;
+ background-color: $panel_title_bg;
+ }
+
+ .panel_contents {
+ font-size: 14px;
+ width: 95%;
+ height: 20em;
+ margin: 4px 8px;
+ overflow: auto;
+ display: inline-block;
+ vertical-align: top;
+ text-align: left;
+ }
+ }
+ }
+
+ CSS
+
+ def content
+ div.panels do
+ super
+ end
+ end
+end
+
class Live < Erector::Widgets::Page
external :js, "/jquery-1.7.2.min.js"
@@ -11,13 +89,12 @@ class Live < Erector::Widgets::Page
$control_bar: #08253B;
$button_bg: #E6EFF5;
$button_hover: #00AEEF;
- $panel_border: #559;
- $panel_title_bg: #EEE;
$error_border: #F33;
$test_failed_bg: #F99;
$test_exception_bg: #FDD;
$test_passed_bg: #9F9;
$code_border: #DEDEDE;
+ $toggleable_border: #DEDEEE;
body {
padding: 0;
@@ -32,7 +109,7 @@ class Live < Erector::Widgets::Page
}
.controls {
- width: 100%;
+ width: auto; /* 100% is a smidge too wide */
margin: 0;
font-size: 12px;
text-align: center;
@@ -49,11 +126,6 @@ class Live < Erector::Widgets::Page
}
}
- .panel.wide {
- height: 20em;
- width: 81em;
- }
-
#notes {
text-align: left;
padding: 1em;
@@ -70,7 +142,7 @@ class Live < Erector::Widgets::Page
margin: 0 1em;
- border: 2px solid $panel_border;
+ border: 2px solid $toggleable_border;
@include border-radius(6px);
h2 {
@@ -84,77 +156,46 @@ class Live < Erector::Widgets::Page
}
}
- .panel {
- display: inline-block;
- border: 2px solid $panel_border;
- @include border-radius(6px);
- margin: .25em;
- width: 40em;
- text-align: center;
- position: relative; /* to get the title contained */
+ .error {
+ border: 4px solid $error_border;
+ padding: .5em;
+ font-size: 200%;
+ h2 {
+ padding: 0 .25em .1em;
+ border-bottom: 1px solid black;
- .title {
- position: absolute;
- right: 2px;
- @include border-radius(6px);
- padding: 2px .25em;
- border: 1px solid black;
- margin: .25em;
- background-color: $panel_title_bg;
+ -webkit-margin-before: 0;
+ -webkit-margin-after: 0;
+ -webkit-margin-start: 0;
+ -webkit-margin-end: 0;
}
-
- .panel_contents {
- font-size: 14px;
- width: 95%;
- height: 20em;
- margin: 4px 8px;
- overflow: auto;
- display: inline-block;
- vertical-align: top;
- text-align: left;
-
- .error {
- border: 4px solid $error_border;
- padding: .5em;
- font-size: 200%;
- h2 {
- padding: 0 .25em .1em;
- border-bottom: 1px solid black;
-
- -webkit-margin-before: 0;
- -webkit-margin-after: 0;
- -webkit-margin-start: 0;
- -webkit-margin-end: 0;
- }
- }
- div.test {
- margin: 1px 0 4px;
- div.description {
- padding: 2px 2px 2px 1em;
- }
- span.description {
- font-weight: bold;
- }
- }
- div.test.failed {
- background-color: $test_failed_bg;
- .exception {
- background-color: $test_exception_bg;
- padding: 1em 0 1em 6em;
- }
- }
- div.test.passed {
- background-color: $test_passed_bg;
- }
+ }
+ div.test {
+ margin: 1px 0 4px;
+ div.description {
+ padding: 2px 2px 2px 1em;
}
-
- .code_box {
- border: 2px solid $code_border;
- padding: 4px;
- font-family: "Courier New", Courier, Monaco, monospace;
- font-size: 12px;
+ span.description {
+ font-weight: bold;
+ }
+ }
+ div.test.failed {
+ background-color: $test_failed_bg;
+ .exception {
+ background-color: $test_exception_bg;
+ padding: 1em 0 1em 6em;
}
}
+ div.test.passed {
+ background-color: $test_passed_bg;
+ }
+
+ .code_box {
+ border: 2px solid $code_border;
+ padding: 4px;
+ font-family: "Courier New", Courier, Monaco, monospace;
+ font-size: 12px;
+ }
CSS
needs :course, :lab_name => "hello"
@@ -243,14 +284,12 @@ def body_content
labs_panel
- div.panels {
- div.user {
- panel "Tests", :code => File.read(@course.lab_dir(@lab_name) + "/#{@lab_name}_spec.rb").
- gsub(/require [\"\'].*[\"\'].*\n/, '') # todo: allow some requires
- panel "Source", :code => ""
- panel "Results", :wide => true
- }
- }
+ widget Panels do
+ panel "Tests", :code => File.read(@course.lab_dir(@lab_name) + "/#{@lab_name}_spec.rb").
+ gsub(/require [\"\'].*[\"\'].*\n/, '') # todo: allow some requires
+ panel "Source", :code => ""
+ panel "Results", :wide => true
+ end
}
javascript <<-JAVASCRIPT

0 comments on commit 86a1be5

Please sign in to comment.