server/src/clientglue.js

@@ -19,23 +19,20 @@ exports.setModel = function (data) {
   let firstSet = ! model;
   model = data;
   model.shot = new AbstractShot(data.backend, data.id, data.shot);
-  render();
   if (firstSet) {
     let timer = setTimeout(function () {
       timer = null;
       isExtInstalled = false;
       render();
     }, 2000);
     let toolbar = document.getElementById("toolbar");
-    let navigateToolbar = document.getElementById("navigate-toolbar");
     let fullPageButton = document.getElementById("full-page-button");
     let fullPageButtonScrollable = document.getElementById("full-page-button-scrollable");
     let frameElement = document.getElementById("frame");
     let offset = (fullPageButtonScrollable.clientHeight / 2);
     window.onscroll = function (e) {
       if (e.pageY > 0) {
         toolbar.style.visibility = "visible";
-        navigateToolbar.style.visibility = "visible";
         let frameOffset = frameElement.getBoundingClientRect().top + window.scrollY;
         let toolbarHeight = toolbar.clientHeight;
         let visibleHeight = window.innerHeight - toolbarHeight;
@@ -45,11 +42,10 @@ exports.setModel = function (data) {
           fullPageButtonScrollable.style.visibility = "visible";
         } else {
           fullPageButton.style.visibility = "visible";
-        fullPageButtonScrollable.style.visibility = "hidden";
+          fullPageButtonScrollable.style.visibility = "hidden";
         }
       } else {
         toolbar.style.visibility = "hidden";
-        navigateToolbar.style.visibility = "hidden";
       }
     };
 
@@ -68,6 +64,7 @@ exports.setModel = function (data) {
     window.addEventListener("hashchange", refreshHash, false);
     refreshHash();
   }
+  render();
 };
 
 function render() {

server/src/views/frame.js

@@ -221,14 +221,16 @@ class Frame extends React.Component {
         <div id="container">
           { this.renderExtRequired() }
           <script src={ this.props.staticLink("js/parent-helper.js") } />
+          <div id="profile-widget">
+            <ProfileButton
+              staticLink={ this.props.staticLink }
+              initialExpanded={ false }
+              avatarurl={ this.props.avatarurl }
+              nickname={ this.props.nickname }
+              email={ this.props.email }
+            />
+          </div>
         <div id="toolbar">
-          <ProfileButton
-            staticLink={ this.props.staticLink }
-            initialExpanded={ false }
-            avatarurl={ this.props.avatarurl }
-            nickname={ this.props.nickname }
-            email={ this.props.email }
-          />
           <div className="shot-title">{ shot.title }</div>
           <div className="shot-subtitle">
             <span>source </span><a className="subheading-link" href={ shot.url }>{ linkTextShort }</a>

static/css/styles.scss

@@ -38,9 +38,10 @@ body {
   position: fixed;
   top: 0px;
   left: 0px;
-  right: 160px;
+  right: 0px;
   height: 35px;
-  padding: 0.5em;
+  padding: 15px;
+  padding-left: 60px;
   /* Causes toolbar to go over comment bubble and other position: relative elements: */
   z-index: 1;
   text-overflow: ellipsis;
@@ -51,17 +52,23 @@ body {
   background-image: url("/static/img/bgtexture.png");
 }
 
+#profile-widget {
+  position: fixed;
+  top: 15px;
+  left: 15px;
+  z-index: 2;
+}
+
 #navigate-toolbar {
-  visibility: hidden;
   position: fixed;
   top: 0px;
   right: 0px;
   padding: 14px;
+  z-index: 2;
   height: 23px;
-  background-color: $primary-color;
-  background-image: url("/static/img/bgtexture.png");
   width: 160px;
   text-align: right;
+  text-shadow: 1px 1px 2px black;
   font-size: 12px;
 }
 
@@ -72,6 +79,7 @@ body {
   bottom: 0px;
   height: 2em;
   text-align: center;
+  z-index: 1001;
 }
 
 #full-page-button-scrollable {