1. Luke Plant
  2. lukeplant_python

Commits

Luke Plant  committed c2c0a14

Fixed positioning of userbars

Previously, resizing browser window would leave the 'Register', 'Logout'
buttons etc. misplaced due to absolute positioning. Worked around this
using relative positioning.

  • Participants
  • Parent commits 66053f1
  • Branches default

Comments (0)

Files changed (3)

File lukeplant_me_uk/bibleverses/templates/base.html

View file
  • Ignore whitespace
       {% endspaceless %}
       <br class="floatclear"/>
     </div>
+    <div id="userbar1" class="hidden offscreenrel">
+      <input name="register1" id="register1" type="submit" value="Register" />
+      <input name="login1" id="login1" type="submit" value="Login" />
+    </div>
+
+    <div id="userbar2" class="hidden offscreenrel">
+      <span id="username"></span>
+      <input name="logout" id="logout" type="submit" value="Logout" />
+    </div>
+
+
   </div>
   <div id="body">
     {% block title %}<h1>{{ title }}</h1>{% endblock %}
  Site by <a href="http://lukeplant.me.uk">Luke Plant</a>
 </div>
 
-<div id="userbar1" class="hidden offscreen">
-  <input name="register1" id="register1" type="submit" value="Register" />
-  <input name="login1" id="login1" type="submit" value="Login" />
-</div>
-
-<div id="userbar2" class="hidden offscreen">
-  <span id="username"></span>
-  <input name="logout" id="logout" type="submit" value="Logout" />
-</div>
-
 <div id="registerblock" class="hidden offscreen">
 <h2>Register</h2>
 <p>Enter your email address and choose a password.  This is used to

File lukeplant_me_uk/bibleverses/web/css/style.css

View file
  • Ignore whitespace
     color: #fff;
 }
 
-#userbar {
-    position: absolute;
-    padding: 4px;
-    
+#userbar1, #userbar2 {
+    text-align: right;
+    width: auto;
+    float:right;
 }
+/*
+#userbar2 #logout {
+    float: right;
+}
+
+#userbar2 #username {
+    float: right;
+    margin-top: 4px;
+    margin-right: 3px;
+}*/
 
 .floatclear {
     clear: both;
     top: -1000px;
 }
 
+.offscreenrel {
+    position: relative;
+    top: -1000px;
+}
+
 .formrow {
     margin-top: 0.5em;
 }

File lukeplant_me_uk/bibleverses/web/js/bibleverses.js

View file
  • Ignore whitespace
 }
 
 function showUserBar(bar) {
-    // easiest way to get layout correct is to absolutely 
+    // easiest way to get layout correct is to relatively
     // position these elements
-    var navbar_pos = getElementPosition($('navbarcont'));
     var navbar_dim = getElementDimensions($('navbarcont'));
     showElement(bar);
-    var bar_dim = getElementDimensions(bar);
-    var bar_pos = 
-	{x: navbar_pos.x + navbar_dim.w - bar_dim.w - 4,
-	 y: navbar_pos.y + 5};
-    logDebug("x: " + bar_pos.x);
-    setElementPosition(bar, bar_pos);
+    bar.style.top = (-navbar_dim.h + 5).toString() + "px";
+    bar.style.right = "4px";
 }
 
 function addUserBar1() {