Merge branch 'master' of github.com:ericflo/servertail

media/css/screen-iframe.css

@@ -0,0 +1,20 @@
+*, html, body, div, dl, dt, dd, ul, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
+table {border-collapse:collapse;border-spacing:0;}
+fieldset, img {border:0}
+address, caption, cite, code, dfn, em, strong, th, var {font-style:normal;font-weight:normal;}
+caption, th {text-align:left;}
+h1, h2, h3, h5, h5, h6 {font-size:100%;}
+q:before, q:after {content:'';}
+
+/* Global reset-RESET */
+/* The below restores some sensible defaults */
+strong {font-weight:bold;}
+em {font-style:italic;font-weight:bold;}
+ul, li {list-style-position:outside;list-style:none;}
+ol li {list-style-position:inside;list-style:decimal;}
+* a {position:relative;} /* Gets links displaying over a PNG background */
+a {outline:none;} /* Gets rid of Firefox's dotted borders */
+a img {border:none;} /* Gets rid of IE's blue borders */
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
+
+body {background-color: #eee;margin: 0;padding: 0;font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;font-size: 75%;}

media/css/screen.css

@@ -77,3 +77,65 @@ table#lines tr:nth-child(odd) {background-color:#e9e9e9;}
 table#lines tr:hover {background-color:#d8faff;}
 
 form.delete {display: inline;}
+
+
+/*
+ * Colorbox
+ */
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
+#cboxOverlay{position:fixed; width:100%; height:100%;}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative; overflow:hidden;}
+#cboxLoadedContent{overflow:auto;}
+#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
+#cboxTitle{margin:0;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+
+/* 
+    Example Colorbox user style
+    The following rules are ordered and tabbed in a way that represents the
+    order/nesting of the generated HTML, so that the structure easier to understand.
+*/
+#cboxOverlay{background:url(../images/colorbox/overlay.png) 0 0 repeat;}
+#colorbox{}
+    #cboxTopLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) -100px 0 no-repeat;}
+    #cboxTopRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) -129px 0 no-repeat;}
+    #cboxBottomLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) -100px -29px no-repeat;}
+    #cboxBottomRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) -129px -29px no-repeat;}
+    #cboxMiddleLeft{width:21px; background:url(../images/colorbox/controls.png) left top repeat-y;}
+    #cboxMiddleRight{width:21px; background:url(../images/colorbox/controls.png) right top repeat-y;}
+    #cboxTopCenter{height:21px; background:url(../images/colorbox/border.png) 0 0 repeat-x;}
+    #cboxBottomCenter{height:21px; background:url(../images/colorbox/border.png) 0 -29px repeat-x;}
+    #cboxContent{background:#fff;}
+        #cboxLoadedContent{margin-bottom:28px;}
+        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
+        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
+        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
+        #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(../images/colorbox/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
+        #cboxPrevious.hover{background-position:-75px -25px;}
+        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/colorbox/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
+        #cboxNext.hover{background-position:-50px -25px;}
+        #cboxLoadingOverlay{background:url(../images/colorbox/loading_background.png) center center no-repeat;}
+        #cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) center center no-repeat;}
+        #cboxClose{position:absolute; bottom:0; right:0; background:url(../images/colorbox/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
+        #cboxClose.hover{background-position:-25px -25px;}
+
+/*
+    The following fixes png-transparency for IE6.  
+    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
+    
+    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
+    Colorbox preloads navigation hover classes to account for this.
+    
+    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
+    while regular CSS background images are relative to the CSS document.
+*/
+.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
+.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox//internet_explorer/borderTopCenter.png, sizingMethod='scale');}
+.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox//internet_explorer/borderTopRight.png, sizingMethod='scale');}
+.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox//internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
+.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox//internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
+.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox//internet_explorer/borderBottomRight.png, sizingMethod='scale');}
+.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox//internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
+.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox//internet_explorer/borderMiddleRight.png, sizingMethod='scale');}

media/js/global.js

@@ -7,4 +7,12 @@ $(function() {
             document.location = tailJumpListSelect.val();
         });
     }
+
+    /* Add lightbox intercepter */
+    $('a.tail-create').colorbox({
+        transition: 'none',
+        width: 400,
+        height: 600,
+        iframe: true
+    });
 });

tail/views.py

@@ -6,6 +6,7 @@
 
 from django.shortcuts import render_to_response, get_object_or_404
 from django.http import Http404, HttpResponseRedirect, HttpResponseForbidden
+from django.http import HttpResponse
 from django.template import RequestContext
 
 from django_ext.http import JSONResponse
@@ -55,7 +56,11 @@ def create(request):
     form = ServerTailForm(request.POST or None, user=request.user)
     if form.is_valid():
         st = form.save()
-        return HttpResponseRedirect(st.get_absolute_url())
+        if 'iframe' in request.REQUEST:
+            tmpl = '<script type="text/javascript">parent.location="%s"</script>'
+            return HttpResponse(tmpl % (st.get_absolute_url(),))
+        else:
+            return HttpResponseRedirect(st.get_absolute_url())
     context = {
         'form': form,
     }

templates/base.html

@@ -5,6 +5,7 @@
   <title>{% block title %}ServerTail.com{% endblock %}</title>
   <link href="{{ MEDIA_URL }}css/screen.css" rel="stylesheet" type="text/css" media="screen" />
   <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-1.4.2.min.js" charset="utf-8"></script>
+  <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.colorbox-min.js" charset="utf-8"></script>
   <script type="text/javascript" src="{{ MEDIA_URL }}js/global.js" charset="utf-8"></script>
   <script type="text/javascript" src="{{ MEDIA_URL }}js/tail.js" charset="utf-8"></script>
   {% block extra_head %}{% endblock %}
@@ -21,7 +22,7 @@
     <nav>
       <ul>
         <li><a href="{% url index %}">Home</a></li>
-        <li><a href="{% url tail_create %}">Create a new Tail</a></li>
+        <li><a href="{% url tail_create %}" class="tail-create">Create a new Tail</a></li>
         {% if user.is_authenticated %}
             <li><a href="{% url tail_tails %}">My Tails</a></li>
             <li id="quickjump">

templates/iframe_base.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>{% block title %}ServerTail.com{% endblock %}</title>
+  <link href="{{ MEDIA_URL }}css/screen-iframe.css" rel="stylesheet" type="text/css" media="screen" />
+  {% block extra_head %}{% endblock %}
+  <!--[if IE]>
+  <script src="{{ MEDIA_URL }}js/html5.js"></script>
+  <![endif]-->
+</head>
+<body id="{% block body_id %}{% endblock %}" class="{% block body_class %}{% endblock %}">
+  {% block content %}{% endblock %}
+  {% block extra_body %}{% endblock %}
+</body>
+</html>

templates/tail/create.html

@@ -1,11 +1,12 @@
-{% extends "base.html" %}
+{% extends "iframe_base.html" %}
 
 {% block content %}
     <form method="POST">
         {% csrf_token %}
         <ul>
             {{ form.as_ul }}
         </ul>
+        <input type="hidden" name="iframe" value="true" />
         <input type="submit" value="Create" />
     </form>
 {% endblock %}

templates/tail/tails.html

@@ -12,7 +12,7 @@
             </li>
         {% empty %}
             <li>You don&rsquo;t seem to have any tails yet, why not
-                <a href="{% url tail_create %}">create one now</a>?</li>
+                <a href="{% url tail_create %}" class="tail-create">create one now</a>?</li>
         {% endfor %}
     </ul>
 {% endblock %}