leave room for twins so page doesn't jump

WardCunningham · Feb 17, 2013 · 280b518 · 280b518
1 parent 223903d
commit 280b518
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 17 deletions.
diff --git a/client/client.js b/client/client.js
@@ -1758,7 +1758,7 @@ require.define("/lib/refresh.coffee",function(require,module,exports,__dirname,_
     return "<h1 title=\"" + tooltip + "\"><a href=\"" + header_href + "\"><img src=\"" + favicon_src + "\" height=\"32px\" class=\"favicon\"></a> " + title + "</h1>";
   };
 
-  emitHeader = function($page, page) {
+  emitHeader = function($header, $page, page) {
     var date, header, isRemotePage, pageHeader, rev, site, viewHere;
     site = $page.data('site');
     isRemotePage = (site != null) && site !== 'local' && site !== 'origin' && site !== 'view';
@@ -1775,7 +1775,7 @@ require.define("/lib/refresh.coffee",function(require,module,exports,__dirname,_
       favicon_src: "/favicon.png",
       title: page.title
     });
-    $page.append(pageHeader);
+    $header.append(pageHeader);
     if (!isRemotePage) {
       $('img.favicon', $page).error(function(e) {
         return plugin.get('favicon', function(favicon) {
@@ -1852,7 +1852,7 @@ require.define("/lib/refresh.coffee",function(require,module,exports,__dirname,_
   };
 
   renderPageIntoPageElement = function(pageData, $page, siteFound) {
-    var $footer, $journal, $story, $twins, action, addContext, context, emitItem, page, site, slug, _i, _j, _len, _len1, _ref, _ref1, _ref2;
+    var $footer, $header, $journal, $story, $twins, action, addContext, context, emitItem, page, site, slug, _i, _j, _len, _len1, _ref, _ref1, _ref2;
     page = $.extend(util.emptyPage(), pageData);
     $page.data("data", page);
     slug = $page.attr('id');
@@ -1872,10 +1872,10 @@ require.define("/lib/refresh.coffee",function(require,module,exports,__dirname,_
       addContext(action.site);
     }
     wiki.resolutionContext = context;
-    emitHeader($page, page);
-    _ref1 = ['twins', 'story', 'journal', 'footer'].map(function(className) {
+    _ref1 = ['twins', 'header', 'story', 'journal', 'footer'].map(function(className) {
       return $("<div />").addClass(className).appendTo($page);
-    }), $twins = _ref1[0], $story = _ref1[1], $journal = _ref1[2], $footer = _ref1[3];
+    }), $twins = _ref1[0], $header = _ref1[1], $story = _ref1[2], $journal = _ref1[3], $footer = _ref1[4];
+    emitHeader($header, $page, page);
     emitItem = function(i) {
       var $item, item;
       if (i >= page.story.length) {

diff --git a/client/lib/refresh.coffee b/client/lib/refresh.coffee
@@ -68,7 +68,7 @@ createFactory = ($page) ->
 buildPageHeader = ({title,tooltip,header_href,favicon_src})->
   """<h1 title="#{tooltip}"><a href="#{header_href}"><img src="#{favicon_src}" height="32px" class="favicon"></a> #{title}</h1>"""
 
-emitHeader = ($page, page) ->
+emitHeader = ($header, $page, page) ->
   site = $page.data('site')
   isRemotePage = site? and site != 'local' and site != 'origin' and site != 'view'
   header = ''
@@ -88,7 +88,7 @@ emitHeader = ($page, page) ->
       favicon_src: "/favicon.png"
       title: page.title
 
-  $page.append( pageHeader )
+  $header.append( pageHeader )
 
   unless isRemotePage
     $('img.favicon',$page).error (e)->
@@ -153,11 +153,11 @@ renderPageIntoPageElement = (pageData,$page, siteFound) ->
 
   wiki.resolutionContext = context
 
-  emitHeader $page, page
-
-  [$twins, $story, $journal, $footer] = ['twins', 'story', 'journal', 'footer'].map (className) ->
+  [$twins, $header, $story, $journal, $footer] = ['twins', 'header', 'story', 'journal', 'footer'].map (className) ->
     $("<div />").addClass(className).appendTo($page)
 
+  emitHeader $header, $page, page
+
   emitItem = (i) ->
     return if i >= page.story.length
     item = page.story[i]

diff --git a/client/style.css b/client/style.css
@@ -84,6 +84,18 @@ header {
 footer {
   bottom: 0; }
 
+.twins,
+.journal,
+.footer {
+  min-height: 1em;
+  opacity: 1;
+}
+.twins:hover,
+.journal:hover,
+.footer:hover {
+  opacity: 1;
+}
+
 .story {
   padding-bottom: 5px; }
 

diff --git a/client/test/testclient.js b/client/test/testclient.js
@@ -1534,7 +1534,7 @@ require.define("/lib/refresh.coffee",function(require,module,exports,__dirname,_
     return "<h1 title=\"" + tooltip + "\"><a href=\"" + header_href + "\"><img src=\"" + favicon_src + "\" height=\"32px\" class=\"favicon\"></a> " + title + "</h1>";
   };
 
-  emitHeader = function($page, page) {
+  emitHeader = function($header, $page, page) {
     var date, header, isRemotePage, pageHeader, rev, site, viewHere;
     site = $page.data('site');
     isRemotePage = (site != null) && site !== 'local' && site !== 'origin' && site !== 'view';
@@ -1551,7 +1551,7 @@ require.define("/lib/refresh.coffee",function(require,module,exports,__dirname,_
       favicon_src: "/favicon.png",
       title: page.title
     });
-    $page.append(pageHeader);
+    $header.append(pageHeader);
     if (!isRemotePage) {
       $('img.favicon', $page).error(function(e) {
         return plugin.get('favicon', function(favicon) {
@@ -1628,7 +1628,7 @@ require.define("/lib/refresh.coffee",function(require,module,exports,__dirname,_
   };
 
   renderPageIntoPageElement = function(pageData, $page, siteFound) {
-    var $footer, $journal, $story, $twins, action, addContext, context, emitItem, page, site, slug, _i, _j, _len, _len1, _ref, _ref1, _ref2;
+    var $footer, $header, $journal, $story, $twins, action, addContext, context, emitItem, page, site, slug, _i, _j, _len, _len1, _ref, _ref1, _ref2;
     page = $.extend(util.emptyPage(), pageData);
     $page.data("data", page);
     slug = $page.attr('id');
@@ -1648,10 +1648,10 @@ require.define("/lib/refresh.coffee",function(require,module,exports,__dirname,_
       addContext(action.site);
     }
     wiki.resolutionContext = context;
-    emitHeader($page, page);
-    _ref1 = ['twins', 'story', 'journal', 'footer'].map(function(className) {
+    _ref1 = ['twins', 'header', 'story', 'journal', 'footer'].map(function(className) {
       return $("<div />").addClass(className).appendTo($page);
-    }), $twins = _ref1[0], $story = _ref1[1], $journal = _ref1[2], $footer = _ref1[3];
+    }), $twins = _ref1[0], $header = _ref1[1], $story = _ref1[2], $journal = _ref1[3], $footer = _ref1[4];
+    emitHeader($header, $page, page);
     emitItem = function(i) {
       var $item, item;
       if (i >= page.story.length) {