diff --git a/.gitignore b/.gitignore index 92b0407..ea34033 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .DS_Store .sass-cache/ +CoffeeScript.wdgt/ diff --git a/sass/style.scss b/sass/style.scss index eb04ab8..b6c3ae5 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -2,25 +2,37 @@ @import 'compass/utilities'; $padding: 10px; -$width: 1000px - ($padding * 2); -$height: 460px - ($padding * 2); - -$textarea-width: ($width - $padding) / 2; -$textarea-height: $height - image_height('logo.png') - $padding; body { - form { - background-color: #181A3A; - @include border-radius($padding); - padding: $padding; + position: relative; + width: 100%; + height: 100%; + opacity: 0.85; - width: $width; - height: $height; - @include clearfix; + #resize { + position: absolute; + bottom: $padding + 22px; + right: 16px; + + -apple-dashboard-region: dashboard-region(control rectangle); + } + + form { + position: absolute; + background: url('banding.png') repeat #181A3A; + @include border-radius($padding); + + top: $padding; + left: $padding; + bottom: $padding; + right: $padding; header { margin-bottom: $padding; - position: relative; + position: absolute; + top: $padding; + left: $padding; + right: $padding; @include background( linear-gradient(#eee, #f8f8f8) @@ -43,9 +55,10 @@ body { #error { position: absolute; right: 0; - width: $width - image_width('logo.png') - $padding; - height: image_height('logo.png') - ($padding * 2); - margin-left: $padding; + top: 0; + bottom: 0; + left: image_width('logo.png') + $padding; + @include border-right-radius($padding / 2); padding: $padding 0; @@ -72,20 +85,33 @@ body { } } - textarea { - @include float-left; - border: none; - background: transparent; - font: { - family: Monaco, Consolas, "Lucida Console", monospace; - size: 10px; - } - color: #DEF; - width: $textarea-width; - height: $textarea-height; + div { + position: absolute; + bottom: $padding; + right: $padding; + left: $padding; + top: ($padding * 2) + image_height('logo.png'); - &#javascript { - margin-left: $padding + textarea { + position: absolute; + + border: none; + background: transparent; + font: { + family: Monaco, Consolas, "Lucida Console", monospace; + size: 10px; + } + color: #DEF; + height: 100%; + width: 49%; + + &#coffee-script { + left: 0; + } + + &#javascript { + right: 0; + } } } } diff --git a/src/banding.png b/src/banding.png new file mode 100644 index 0000000..f7b6862 Binary files /dev/null and b/src/banding.png differ diff --git a/src/index.html b/src/index.html index c11b1d7..6748d39 100644 --- a/src/index.html +++ b/src/index.html @@ -19,20 +19,41 @@ jQuery(-> recompile() $('a').click(-> widget.openURL($(this).attr('href'))) + + growboxInset = null + + mouseUp = -> + $(document).unbind('mousemove mouseup') + false + + mouseMove = (event) -> + x = event.pageX + growboxInset.x + y = event.pageY + growboxInset.y + + window.resizeTo(x, y) + false + + $('#resize').mousedown (event) -> + $(document).mousemove(mouseMove).mouseup(mouseUp) + growboxInset = {x:(window.innerWidth - event.pageX), y:(window.innerHeight - event.pageY)} + false )
- +
- - + +
+ diff --git a/src/style.css b/src/style.css index c37ef76..e249fc8 100644 --- a/src/style.css +++ b/src/style.css @@ -1,20 +1,35 @@ +body { + position: relative; + width: 100%; + height: 100%; + opacity: 0.85; +} +body #resize { + position: absolute; + bottom: 32px; + right: 16px; + -apple-dashboard-region: dashboard-region(control rectangle); +} body form { - background-color: #181A3A; + position: absolute; + background: url("banding.png") repeat #181a3a; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; - padding: 10px; - width: 980px; - height: 440px; - overflow: hidden; - *zoom: 1; + top: 10px; + left: 10px; + bottom: 10px; + right: 10px; } body form header { margin-bottom: 10px; - position: relative; + position: absolute; + top: 10px; + left: 10px; + right: 10px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #f8f8f8)); background: -webkit-linear-gradient(#eeeeee, #f8f8f8); background: -moz-linear-gradient(#eeeeee, #f8f8f8); @@ -44,9 +59,9 @@ body form header a { body form header #error { position: absolute; right: 0; - width: 745px; - height: 30px; - margin-left: 10px; + top: 0; + bottom: 0; + left: 235px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -o-border-top-right-radius: 5px; @@ -76,17 +91,26 @@ body form header #error span { color: #D00; padding-right: 10px; } -body textarea { - display: inline; - float: left; +body div { + position: absolute; + bottom: 10px; + right: 10px; + left: 10px; + top: 70px; +} +body div textarea { + position: absolute; border: none; background: transparent; font-family: Monaco, Consolas, "Lucida Console", monospace; font-size: 10px; color: #DEF; - width: 485px; - height: 380px; + height: 100%; + width: 49%; } -body textarea#javascript { - margin-left: 10px; +body div textarea#coffee-script { + left: 0; +} +body div textarea#javascript { + right: 0; }