Add a small, minimal popup tray for future expansion.

static/css/interact.css

@@ -0,0 +1,20 @@
+#server-interaction {
+  position:fixed;
+  bottom: 0%;
+  right: 0%;
+}
+
+#server-interaction .drawer {
+  background-color: #000;
+  color: #fff;
+  float: right;
+}
+
+#server-interaction .canvas {
+  display: none;
+}
+
+#server-interaction .drawer .drawer-label {
+  font-weight: bold;
+  padding: 10px;
+}

static/js/interactive.js

@@ -0,0 +1,9 @@
+$(document).ready(function() {
+  $('#server-interaction .drawer').each(function() {
+    console.log(this);
+    var canvas = $(this).children('.canvas');
+    $(this, '.drawer-label').click(function() {
+      canvas.slideToggle("blind");
+    });
+  });
+});

static/js/lockScroll.js

@@ -0,0 +1,61 @@
+/**
+ * lockScroll plugin for JQuery
+ * @author Anthony McLin
+ * @website http://anthonymclin.com
+ * Allows you to make an element toggle between fixed and absolute layouts
+ * This exposes far more options than the original
+ * 
+ * Based on FixedScroll JQuery plugin
+ * by Dan Bentley with example at http://csswizardry.com/
+ * 
+ *  @options
+ *   triggerElement : Optional element that will be the threshold that triggers change in scrolling behavior
+ *   triggerPosition: If no triggerElement is provided, an exact pixel value is necessary for how far the page scrolls before triggering the change in scrolling behavior
+ *   triggerThreshold : Override the calculated point where the scrolling page elements trigger the change in scrolling behavior
+ *   offsetTop : Optionally force the distance from the top of the window for positioning the moving element
+**/
+(function($) {
+	$.fn.lockScroll = function( settings ) {
+		//Configuration
+		var options = $.extend({
+			triggerElement : null,
+			triggerPosition: null,
+			triggerThreshold : null,
+			offsetTop : null
+		}, settings);
+
+		return this.each(function() {
+			//Grab the element to speed up dom acess
+			var el = $(this);
+			
+			//Make sure things can actually run
+			if( options.triggerElement.length == 0 && options.triggerPosition == null ) $.error('Threshold scrolling element or value required');	//We don't have element or distance to trigger the behavior change
+			if( el.css('position') != 'fixed') $.error('The element to be locked must have position:fixed');									//This won't work if the locked element isn't fixed to begin with
+	
+			//Get the offset of the locked element
+			options.offsetTop = (!options.offsetTop) ? el.offset().top : options.offsetTop;
+					
+			//Find the top of the element that triggers the change
+			if(!options.triggerPosition) {
+				options.triggerPosition = $(options.triggerElement).offset().top;
+			};
+			
+			//Set the threshold where the change happens
+			if(!options.triggerThreshold) {
+				options.triggerThreshold = options.triggerPosition - el.outerHeight();
+			};
+			
+			//Bind to the window scroll event
+			$(window).bind('load scroll', function(e) {
+				if($(window).scrollTop() + options.offsetTop >= options.triggerThreshold) {
+					//threshold object is above the bottom of our locked element
+					el.css({ position: "absolute", top: options.triggerThreshold });
+				} else {
+					//threshold object is below the bottom of our locked element
+					el.css({ position: "fixed", top: options.offsetTop });
+				}
+			});
+		
+		});
+	};	
+})(jQuery);

templates/base_full.html

@@ -14,6 +14,7 @@
 <link rel="stylesheet" type="text/css" href="{{ STATIC_PREFIX }}/css/jquery-ui.css"/>
 <link rel="stylesheet" type="text/css" href="{{ STATIC_PREFIX }}/css/main.css?{{app_version}}"/>
 <link rel="stylesheet" type="text/css" href="{{ STATIC_PREFIX }}/css/badges.css?{{app_version}}"/>
+<link rel="stylesheet" type="text/css" href="{{ STATIC_PREFIX }}/css/interact.css?{{app_version}}"/>
 <link rel="icon" type="image/png" href="{{ STATIC_PREFIX }}/images/logo.png"/>
 {% block extracss %}{% endblock extracss %}
 <script type="text/javascript">
@@ -35,6 +36,7 @@ s.parentNode.insertBefore(po, s);
 <script type="text/javascript" language="javascript" src="{{STATIC_PREFIX}}/js/jquery-ui.js"></script>
 <script type="text/javascript" language="javascript" src="{{STATIC_PREFIX}}/js/poll.js"></script>
 <script type="text/javascript" language="javascript" src="{{STATIC_PREFIX}}/js/notifications.js"></script>
+<script type="text/javascript" language="javascript" src="{{STATIC_PREFIX}}/js/interactive.js"></script>
 {% block extrahead %}{% endblock %}
 <script type="text/javascript">
 
@@ -165,6 +167,23 @@ s.parentNode.insertBefore(po, s);
     </div>
     {% endif %}
 </div>
+<div id="server-interaction">
+  <div class="drawer">
+    <div class="drawer-label">
+      Online Players
+    </div>
+    <div class="canvas">
+      <ul>
+        {% for server in minecraft_servers %}
+          {% for player in server.online_players %}
+            <li><a href="{{player.user.get_absolute_url}}"><span class="avatar">
+              {% avatar player.user 16 %}</span>{{player}}</a></li>
+          {% endfor %}
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+</div>
 </body>
 </html>
 

templates/forums/reply.html

@@ -27,7 +27,7 @@ $(function() {
 {% endif %}
 <div class="item">
 {% block form %}
-<form method="POST" action="{%url forums.views.reply post.id %}">
+<form method="POST" action="{%url forums.views.reply parent.id %}">
 {% csrf_token %}
 {{form.as_p}}
 <input type="submit" value="Submit"/>

templates/forums/topic.html

@@ -2,6 +2,18 @@
 {% load minecraft %}
 {% load mptt_tags %}
 
+{% block extrahead %}
+<script type="text/javascript" language="javascript"
+  src="{{STATIC_PREFIX}}/js/lockScroll.js"></script>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $('topic-header').lockScroll({
+        'triggerElement': $('topic.item:first'),
+    });
+  });
+</script>
+{% endblock %}
+
 {% block sectiontitle %}Forums{% endblock %}
 
 {% block localnav %}
@@ -34,7 +46,7 @@ Home
 {%endblock%}
 
 {%block content %}
-<div class="topic item">
+<div class="topic item" id="topic-header">
 <div class="avatar">{% avatar topic.rootPost.user 32 %}</div>
 <h2>{{topic.title}}</h2>
 <div class="byline">Started by <span itemprop="author">{{topic.rootPost.user}}</span> {{ topic.created|timesince }} ago.<br />Last updated {{topic.updated|timesince}} ago.</div>