reacts to resizing to reflow text

tienshiao · Jul 29, 2012 · 2ca6e9d · 2ca6e9d
1 parent ae7651a
commit 2ca6e9d
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/inject.js b/inject.js
@@ -60,6 +60,8 @@ function initBar() {
             var element = document.getElementsByTagName('rebar')[0];
             element.parentNode.removeChild(element);
             document.getElementsByTagName('html')[0].style.marginTop = 0;
+        } else if (e.name === 'setHeight') {
+            document.getElementsByTagName('rebar')[0].style.height = e.message;
         }
     }, false);
     safari.self.tab.dispatchMessage('getLink', null);

diff --git a/rebar.css b/rebar.css
@@ -4,7 +4,7 @@ rebar {
     top: 0;
     right: 0;
     left: 0;
-    height: 30px;
+    min-height: 30px;
     z-index: 999999999;
 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2F2F2), color-stop(100%,#AAA));

diff --git a/template.css b/template.css
@@ -16,8 +16,8 @@ body {
     background: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#aaa));
     border-top: 1px solid #ccc;
     border-bottom: 1px solid #4b4b4b;
-    height: 28px;
     width: 100%;
+    min-height: 28px;
 }
 
 .inactive .bar {
@@ -56,6 +56,7 @@ a {
 #title {
     display: -webkit-box;
     margin-top: 4px;
+    margin-bottom: 4px;
     text-decoration: none;
     -webkit-box-flex: 1;
 }

diff --git a/template.js b/template.js
@@ -29,6 +29,12 @@ function displayBar(link) {
     document.getElementById('subreddit').setAttribute('href', 'http://www.reddit.com/r/' + link.subreddit);
     document.getElementById('subreddit').innerHTML = '/r/' + link.subreddit;
     document.getElementById('comment-count').innerHTML = link.comments;
+
+    var title = document.getElementById('title');
+    safari.self.tab.dispatchMessage('setHeight', parseInt(window.getComputedStyle(title,"").getPropertyValue('height')) + 10 + 'px');
+    window.addEventListener('resize', function(e) {
+        safari.self.tab.dispatchMessage('setHeight', parseInt(window.getComputedStyle(title,"").getPropertyValue('height')) + 10 + 'px');
+    }, false);
 
     document.getElementById('close').addEventListener('click', function(e) {
         safari.self.tab.dispatchMessage('close', null);