Fixed pushstate handling in IE <=9

2026-02-24 08:54:01 +00:00 · 2013-04-18 10:34:28 +01:00
parent 90fe4f4cad
commit bb951a8f28
12 changed files with 220 additions and 187 deletions
--- a/dss/settings.py
+++ b/dss/settings.py
@@ -131,7 +131,7 @@ MIDDLEWARE_CLASSES = (
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'django.middleware.gzip.GZipMiddleware',
    'spa.middleware.uploadify.SWFUploadMiddleware',
-    'spa.middleware.sqlprinter.SqlPrintingMiddleware',
+    #'spa.middleware.sqlprinter.SqlPrintingMiddleware',
    #'debug_toolbar.middleware.DebugToolbarMiddleware',
 )

--- a/spa/urls.py
+++ b/spa/urls.py
@@ -39,5 +39,5 @@ urlpatterns = django.conf.urls.patterns(
    url(r'^audio/', include(audio.urls)),
    url(r'^api/', include(v1_api.urls)),
    url(r'^comments/', include('django.contrib.comments.urls')),
-    (r'^.*/$', 'spa.views.default')
+    (r'^.*/$', 'spa.views.app')
 )
--- a/spa/views.py
+++ b/spa/views.py
@@ -24,16 +24,16 @@ def app(request):
        "inc/app.html",
        context_instance=RequestContext(request))

-
+"""
 def default(request):
    if 'HTTP_USER_AGENT' in request.META:
        if request.META['HTTP_USER_AGENT'].startswith('facebookexternalhit'):
            logger.debug("Redirecting facebook hit")
            return social_redirect(request)

-    backbone_url = "http://%s/#%s" % (request.get_host(), rreplace(lreplace(request.path, '/', ''), '/', ''))
+    backbone_url = "http://%s/%s" % (request.get_host(), rreplace(lreplace(request.path, '/', ''), '/', ''))
    return redirect(backbone_url)
-
+"""

 def upload(request):
    return render_to_response("inc/upload.html", context_instance=RequestContext(request))
--- a/static/css/deepsouthsounds.css
+++ b/static/css/deepsouthsounds.css
@@ -354,3 +354,6 @@ div.event-content td {
 #sidebar-content-activity {
    font-size: 85%;
 }
+.no-click{
+    cursor: pointer;
+}
--- a/static/js/app/app.js
+++ b/static/js/app/app.js
@@ -7,42 +7,42 @@

 */
 var AppRouter = Backbone.Router.extend({
-    routes:{
-        "mixes":"mixList",
-        "mixes/:type":"mixList",
-        "mix/upload":"mixUpload",
-        "mix/:id":"mixDetails",
-        "mix/edit/:id":"mixEdit",
-        "releases":"releaseList",
-        "release/add":"releaseAdd",
-        "release/edit/:id":"releaseEdit",
-        "release/:id":"releaseDetails",
-        "events":"eventList",
-        "event/add":"eventAdd",
-        "event/:id":"eventDetails",
-        "accounts/social/connections/":"connectAccounts",
-        "accounts/facebook/login":"loginRedirect",
-        "accounts/twitter/login":"loginRedirect",
-        "accounts/login/":"login",
-        "accounts/logout/":"logout",
-        "user/:id":"user",
-        "upload/":"defaultRoute",
-        "me":"userDetails",
-        "*path":"defaultRoute"
+    root: '/',
+    routes: {
+        "mixes": "mixList",
+        "mixes/:type": "mixList",
+        "mix/upload": "mixUpload",
+        "mix/:id": "mixDetails",
+        "mix/edit/:id": "mixEdit",
+        "releases": "releaseList",
+        "release/add": "releaseAdd",
+        "release/edit/:id": "releaseEdit",
+        "release/:id": "releaseDetails",
+        "events": "eventList",
+        "event/add": "eventAdd",
+        "event/:id": "eventDetails",
+        //"accounts/social/connections/": "connectAccounts",
+        //"accounts/facebook/login": "loginRedirect",
+        //"accounts/twitter/login": "loginRedirect",
+        //"accounts/login/": "login",
+        //"accounts/logout/": "logout",
+        "user/:id": "user",
+        "upload/": "defaultRoute",
+        "me": "userDetails",
+        "*path": "defaultRoute"
    },
-    initialize:function () {
+    initialize: function () {
        this.headerView = new HeaderView();
        $('#header').html(this.headerView.el);
        $('#site-content-fill').html('');
        this.bind('all', this.trackPageView);
-
    },
-    trackPageView:function () {
+    trackPageView: function () {
        var url;
        url = Backbone.history.getFragment();
        return com.podnoms.utils.trackPageView(url);
    },
-    defaultRoute:function (path) {
+    defaultRoute: function (path) {
        if (path == undefined || path == "" || path == "/")
            this.mixList('latest');
        else {
@@ -52,23 +52,23 @@ var AppRouter = Backbone.Router.extend({

        }
    },
-    user:function (user) {
-        this._renderMixList('latest', { "user":user });
+    user: function (user) {
+        this._renderMixList('latest', { "user": user });
    },
-    mixList:function (type) {
+    mixList: function (type) {
        this._renderMixList(type);
    },
-    _renderMixList:function (type, data) {
+    _renderMixList: function (type, data) {
        var mixList = new MixCollection();
        mixList.type = type || 'latest';
        $('#site-content-fill').html('');

-        var payload = $.extend(type != undefined ? {type:type} : null, data);
+        var payload = $.extend(type != undefined ? {type: type} : null, data);
        mixList.fetch({
-            data:payload,
-            success:function () {
+            data: payload,
+            success: function () {
                var mixes = new MixListView({
-                    collection:mixList
+                    collection: mixList
                });
                var content = mixes.el;
                $('#content').html(content);
@@ -85,14 +85,14 @@ var AppRouter = Backbone.Router.extend({
            $('#status', this.sidebarView.el),
            $('#header-profile-edit').text());
    },
-    mixDetails:function (id) {
+    mixDetails: function (id) {
        var mix = new Mix({
-            id:id
+            id: id
        });
        mix.fetch({
-            success:function () {
+            success: function () {
                var html = new MixView({
-                    model:mix
+                    model: mix
                });
                $('#content').html(html.el);
                $('#site-content-fill').html('');
@@ -103,137 +103,123 @@ var AppRouter = Backbone.Router.extend({
            }
        });
    },
-    mixUpload:function () {
+    mixUpload: function () {
        var html = new MixCreateView({
-            model:new Mix()
+            model: new Mix()
        });
        $('#content').html(html.el);
        $('#site-content-fill').html('');
    },
-    mixEdit:function (id) {
+    mixEdit: function (id) {
        var mix = new Mix({
-            id:id
+            id: id
        });
        mix.fetch({
-            success:function () {
+            success: function () {
                var html = new MixCreateView({
-                    model:mix
+                    model: mix
                });
                $('#content').html(html.el);
                $('#site-content-fill').html('');
            }
        });
    },
-    releaseList:function (page) {
+    releaseList: function (page) {
        var releaseList = new ReleaseCollection();
        releaseList.fetch({
-            success:function () {
+            success: function () {
                var content = new ReleaseListView({
-                    collection:releaseList
+                    collection: releaseList
                }).el;
                $('#content').html(content);
            }
        });
    },
-    releaseDetails:function (id) {
+    releaseDetails: function (id) {
        var release = new Release({
-            id:id
+            id: id
        });
        $('#site-content-fill').html('');
        release.fetch({
-            success:function () {
+            success: function () {
                var content = new ReleaseView({
-                    model:release
+                    model: release
                }).el;
                $('#content').html(content);
            }
        });
    },
-    releaseAdd:function () {
+    releaseAdd: function () {
        var html = new ReleaseCreateView({
-            model:new Release({
-                release_date:com.podnoms.utils.getDateAsToday()
+            model: new Release({
+                release_date: com.podnoms.utils.getDateAsToday()
            })
        });
        $('#content').html(html.el);
        $('#site-content-fill').html('');
    },
-    releaseEdit:function (id) {
+    releaseEdit: function (id) {
        var release = new Release({
-            id:id
+            id: id
        });
        release.fetch({
-            success:function () {
+            success: function () {
                var html = new ReleaseCreateView({
-                    model:release
+                    model: release
                });
                $('#content').html(html.el);
                $('#site-content-fill').html('');
            }
        });
    },
-    eventList:function (page) {
+    eventList: function (page) {
        var eventList = new EventCollection();
        eventList.fetch({
-            success:function () {
+            success: function () {
                var content = new EventListView({
-                    collection:eventList
+                    collection: eventList
                }).el;
                $('#content').html(content);
            }
        });
    },
-    eventDetails:function (id) {
+    eventDetails: function (id) {
        var event = new Event({
-            id:id
+            id: id
        });
        $('#site-content-fill').html('');
        event.fetch({
-            success:function () {
+            success: function () {
                var content = new EventView({
-                    model:event
+                    model: event
                }).el;
                $('#content').html(content);
            }
        });
    },
-    eventAdd:function () {
+    eventAdd: function () {
        var html = new EventCreateView({
-            model:new Event({
-                event_date:com.podnoms.utils.getDateAsToday()
+            model: new Event({
+                event_date: com.podnoms.utils.getDateAsToday()
            })
        });
        $('#content').html(html.el);
        $('#site-content-fill').html('');
    },
-    loginRedirect:function () {
+    loginRedirect: function () {
        com.podnoms.utils.showAlert("Success", "Thank you for logging in.", "alert-success", true);
        this.defaultRoute();
    },
-    login:function () {
-        $.colorbox({
-            href:"/tpl/LoginView/",
-            onClosed:function () {
-                Backbone.history.navigate('/', {
-                    trigger:true
-                });
-            }
-        })
-
-    },
-    logout:function () {
-        com.podnoms.utils.showAlert("Success", "You are now logged out", "alert-success", true);
-    },
-    connectAccounts:function () {
+    connectAccounts: function () {
        alert("Connecting accounts");
    },
-    userDetails:function () {
+    userDetails: function () {
        var user = new User();
        $('#site-content-fill').html('');
        user.fetch({
-            success:function () {
+            success: function () {
                var content = new UserView({
-                    model:user
+                    model: user
                }).el;
                $('#content').html(content);
            }
@@ -243,15 +229,33 @@ var AppRouter = Backbone.Router.extend({

 com.podnoms.utils.loadTemplate(['HeaderView', 'SidebarView', 'UserView', 'MixListView', 'MixListItemView', 'MixView', 'MixCreateView', 'CommentListView', 'CommentListItemView', 'ActivityListView', 'ActivityListItemView', 'ReleaseListView', 'ReleaseListItemView', 'ReleaseItemView', 'ReleaseView', 'ReleaseCreateView', 'ReleaseAudioListView', 'ReleaseAudioItemView', 'EventCreateView', 'EventListView', 'EventListItemView', 'EventView', 'EventItemView'], function () {
    window.app = new AppRouter();
-    $(document).on('click', 'a:internal:not(.no-click)', function (event) {
-        Backbone.history.navigate($(this).attr('href'), {
-            trigger:true
-        });
-        return false;
-    });
-    Backbone.history = Backbone.history || new Backbone.History({});
-    Backbone.history.start({
-        pushState:true
+    // Trigger the initial route and enable HTML5 History API support, set the
+    // root folder to '/' by default.  Change in app.js.
+    var enablePushState = true;
+    // Disable for older browsers
+    var pushState = !!(enablePushState && window.history && window.history.pushState);
+    Backbone.history.start({ pushState: pushState, root: app.root, hashChange: true });
+
+    // All navigation that is relative should be passed through the navigate
+    // method, to be processed by the router. If the link has a `data-bypass`
+    // attribute, bypass the delegation completely.
+    $(document).on("click", "a[href]:not([data-bypass])", function (evt) {
+        // Get the absolute anchor href.
+        var href = { prop: $(this).prop("href"), attr: $(this).attr("href") };
+        // Get the absolute root.
+        var root = location.protocol + "//" + location.host + app.root;
+
+        // Ensure the root is part of the anchor href, meaning it's relative.
+        if (href.prop.slice(0, root.length) === root) {
+            // Stop the default event to ensure the link will not cause a page
+            // refresh.
+            evt.preventDefault();
+
+            // `Backbone.history.navigate` is sufficient for all Routers and will
+            // trigger the correct events. The Router's internal `navigate` method
+            // calls this anyways.  The fragment is sliced from the root.
+            Backbone.history.navigate(href.attr, true);
+        }
    });
 });
 var _eventAggregator = _.extend({}, Backbone.Events);
--- a/static/js/app/views/header.js
+++ b/static/js/app/views/header.js
@@ -9,6 +9,7 @@
 window.HeaderView = Backbone.View.extend({
    events:{
        "click #header-play-pause-button":"togglePlayState",
+        "click #header-login-button":"login",
        "click #header-live-button":"playLive"
    },
    initialize:function () {
@@ -20,6 +21,21 @@ window.HeaderView = Backbone.View.extend({
        _eventAggregator.bind("track_playing", this.trackPlaying);
        _eventAggregator.bind("track_paused", this.trackPaused);
    },
+    login: function () {
+        com.podnoms.utils.modal('tpl/LoginView');
+        return;
+        $.colorbox({
+            href: "/tpl/LoginView/",
+            onClosed: function () {
+                Backbone.history.navigate('/', {
+                    trigger: true
+                });
+            }
+        });
+    },
+    logout: function () {
+        com.podnoms.utils.showAlert("Success", "You are now logged out", "alert-success", true);
+    },
    trackChanged:function (data) {
        $(this.el).find('#track-description').text(data.title);
        $(this.el).find('#track-description').attr("href", "#" + data.item_url);
--- a/static/js/com.podnoms.utils.js
+++ b/static/js/com.podnoms.utils.js
@@ -47,6 +47,22 @@ com.podnoms.utils = {
        controlGroup.removeClass('error');
        $('.help-inline', controlGroup).html('');
    },
+    modal: function (url) {
+        if (url.indexOf("#") == 0) {
+            $(url).modal('open');
+        } else {
+            $.get(url,function (data) {
+                $('<div class="modal hide fade">' + data + '</div>')
+                    .modal()
+                    .on('hidden', function () {
+                        $(this).remove();
+                    }
+                );
+            }).success(function () {
+                $('input:text:visible:first').focus();
+            });
+        }
+    },
    showError: function (title, message) {
        this.showAlert(title, message, 'alert-error', true);
    },
@@ -63,7 +79,7 @@ com.podnoms.utils = {
            this.hideAlert();
        });
    },
-    showAlertModal: function(title, message){
+    showAlertModal: function (title, message) {
        $('#alert-proxy-title').text(title);
        $('#alert-proxy-message').html(message);
        $('#alert-proxy').modal();
@@ -98,16 +114,16 @@ com.podnoms.utils = {
            return v.toString(16);
        });
    },
-    checkPlayCount: function(){
-        if (document.cookie.indexOf('sessionId')){
+    checkPlayCount: function () {
+        if (document.cookie.indexOf('sessionId')) {
            $.getJSON('/ajax/session_play_count', function (data) {
-                if ((data.play_count != 0) && (data.play_count % 5) == 0){
+                if ((data.play_count != 0) && (data.play_count % 5) == 0) {
                    com.podnoms.utils.showAlertModal(
                        "Hey There!",
                        "We've noticed you've been playing a few mixes now.<br />" +
-                        "This is cool and we're happy you're enjoying the site but we would love it " +
-                        "if you would consider logging in.<br />" +
-                        "This will let you comment on mixes and even download them.");
+                            "This is cool and we're happy you're enjoying the site but we would love it " +
+                            "if you would consider logging in.<br />" +
+                            "This will let you comment on mixes and even download them.");
                }
            });
        }
--- a/static/js/libs/backbone/backbone.mine.js
+++ b/static/js/libs/backbone/backbone.mine.js
@@ -9,7 +9,7 @@ Backbone.Validate = function (model, changedAttributes) {
        });

        this.validators = {
-            required:function (fields) {
+            required: function (fields) {
                _.each(fields, function (field) {
                    if (_.isEmpty(this.attributes[field]) === true) {
                        this.addError(field, I18n.t('errors.form.required'));
@@ -30,24 +30,24 @@ Backbone.Validate = function (model, changedAttributes) {
 };

 window.TastypieModel = Backbone.Model.extend({
-    base_url:function () {
+    base_url: function () {
        var temp_url = Backbone.Model.prototype.url.call(this);
        return (temp_url.charAt(temp_url.length - 1) == '/' ? temp_url : temp_url + '/');
    },
-    url:function () {
+    url: function () {
        return this.base_url();
    }
 });

 window.TastypieCollection = Backbone.Collection.extend({
-    parse:function (response) {
+    parse: function (response) {
        this.recent_meta = response.meta || {};
        return response.objects || response;
    }
 });

 window.DSSModel = window.TastypieModel.extend({
-    addError:function (field, message) {
+    addError: function (field, message) {
        if (_.isUndefined(this.errors[field])) {
            this.errors[field] = [];
        }
@@ -57,11 +57,11 @@ window.DSSModel = window.TastypieModel.extend({
 });

 window.DSSEditableView = Backbone.View.extend({
-    events:{
-        "change input":"changed",
-        "change textarea":"changed"
+    events: {
+        "change input": "changed",
+        "change textarea": "changed"
    },
-    changeSelect:function (evt) {
+    changeSelect: function (evt) {
        var changed = evt.currentTarget;
        if (!com.podnoms.utils.isEmpty(changed.id)) {
            var value = $(evt.currentTarget).val();
@@ -70,7 +70,7 @@ window.DSSEditableView = Backbone.View.extend({
            this.model.set(objInst);
        }
    },
-    changed:function (evt) {
+    changed: function (evt) {
        var changed = evt.currentTarget;
        //$("#" + changed.id)
        if (!com.podnoms.utils.isEmpty(changed.id)) {
@@ -86,16 +86,16 @@ window.DSSEditableView = Backbone.View.extend({
            this.model.set(objInst);
        }
    },
-    _bakeForm:function (el, lookups) {
+    _bakeForm: function (el, lookups) {
        //TODO extend lookups to be a list
        //TODO this way we can initialise more than one lookup per page
        var model = this.model;
        var labels, mapped;
        $('.typeahead', el).typeahead({
-            source:function (query, process) {
+            source: function (query, process) {
                $.get(
                    '/ajax/lookup/' + lookups + '/',
-                    { query:query },
+                    { query: query },
                    function (data) {
                        labels = []
                        mapped = {}
@@ -106,7 +106,7 @@ window.DSSEditableView = Backbone.View.extend({
                        process(labels);
                    }, 'json');
            },
-            updater:function (item) {
+            updater: function (item) {
                this.$element.val(mapped[item][0]);
                model.set(this.$element.attr('id'), mapped[item][0]);
                return item;
@@ -114,33 +114,33 @@ window.DSSEditableView = Backbone.View.extend({
        });
        $('.datepicker', el).datepicker(
            {
-                'format':'dd/mm/yyyy'
+                'format': 'dd/mm/yyyy'
            }
        );
        $('.timepicker', el).timepicker();
        $('textarea.tinymce', this.el).tinymce({
-            script_url:"/static/js/libs/tiny_mce/tiny_mce.js",
-            mode:"textareas",
-            theme:"advanced",
-            theme_advanced_toolbar_location:"top",
-            theme_advanced_toolbar_align:"left",
-            theme_advanced_buttons1:"fullscreen,media,tablecontrols,separator,link,unlink,anchor,separator,preview,separator,bold,italic,underline,strikethrough,separator,bullist,numlist,outdent,indent,separator,undo,redo,separator,image,cleanup,help,separator,code",
-            theme_advanced_buttons2:"",
-            theme_advanced_buttons3:"",
-            auto_cleanup_word:true,
-            plugins:"media, table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,print,contextmenu,fullscreen,preview,searchreplace",
-            plugin_insertdate_dateFormat:"%m/%d/%Y",
-            plugin_insertdate_timeFormat:"%H:%M:%S",
-            extended_valid_elements:"a[name|href|target=_blank|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
-            fullscreen_settings:{
-                theme_advanced_path_location:"top",
-                theme_advanced_buttons1:"fullscreen,media, separator,preview,separator,cut,copy,paste,separator,undo,redo,separator,search,replace,separator,code,separator,cleanup,separator,bold,italic,underline,strikethrough,separator,forecolor,backcolor,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,help",
-                theme_advanced_buttons2:"removeformat,styleselect,formatselect,fontselect,fontsizeselect,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor",
-                theme_advanced_buttons3:"sub,sup,separator,image,insertdate,inserttime,separator,tablecontrols,separator,hr,advhr,visualaid,separator,charmap,emotions,iespell,flash,separator,print"
+            script_url: "/static/js/libs/tiny_mce/tiny_mce.js",
+            mode: "textareas",
+            theme: "advanced",
+            theme_advanced_toolbar_location: "top",
+            theme_advanced_toolbar_align: "left",
+            theme_advanced_buttons1: "fullscreen,media,tablecontrols,separator,link,unlink,anchor,separator,preview,separator,bold,italic,underline,strikethrough,separator,bullist,numlist,outdent,indent,separator,undo,redo,separator,image,cleanup,help,separator,code",
+            theme_advanced_buttons2: "",
+            theme_advanced_buttons3: "",
+            auto_cleanup_word: true,
+            plugins: "media, table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,print,contextmenu,fullscreen,preview,searchreplace",
+            plugin_insertdate_dateFormat: "%m/%d/%Y",
+            plugin_insertdate_timeFormat: "%H:%M:%S",
+            extended_valid_elements: "a[name|href|target=_blank|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
+            fullscreen_settings: {
+                theme_advanced_path_location: "top",
+                theme_advanced_buttons1: "fullscreen,media, separator,preview,separator,cut,copy,paste,separator,undo,redo,separator,search,replace,separator,code,separator,cleanup,separator,bold,italic,underline,strikethrough,separator,forecolor,backcolor,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,help",
+                theme_advanced_buttons2: "removeformat,styleselect,formatselect,fontselect,fontsizeselect,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor",
+                theme_advanced_buttons3: "sub,sup,separator,image,insertdate,inserttime,separator,tablecontrols,separator,hr,advhr,visualaid,separator,charmap,emotions,iespell,flash,separator,print"
            }
        });
    },
-    _saveChanges:function () {
+    _saveChanges: function () {
        var args = arguments;
        if (this.model.isValid() != "") {
            if (this.model.errors) {
@@ -153,10 +153,10 @@ window.DSSEditableView = Backbone.View.extend({
            this.model.save(
                null,
                {
-                    success:args[0].success,
-                    error:args[0].error
+                    success: args[0].success,
+                    error: args[0].error
                }
            );
        }
    }
-});
+});
--- a/templates/account/login.html
+++ b/templates/account/login.html
@@ -1,17 +1,9 @@
 {% extends "account/base.html" %}
-
-{% load i18n %}
 {% load account_tags %}
-{% load url from future %}
-
-{% block head_title %}{% trans "Sign In" %}{% endblock %}
-
-
+{% block head_title %}"Sign In"{% endblock %}
 {% block content %}
-
    <div class="well">
        <h3>Login to Deep South Sounds</h3>
-
        <div>
            <div id="social-login-buttons" class="social_login_providers row-fluid">
                <div class="social_login_provider">
@@ -35,5 +27,4 @@
            </div>
        </div>
    </div>
-
 {% endblock %}
--- a/templates/base.html
+++ b/templates/base.html
@@ -20,14 +20,6 @@
        <link rel="stylesheet" href="{{ STATIC_URL }}css/com.podnoms.player.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}css/emoticons.css">
    {% endcompress %}
-    <script type="text/javascript">
-        if (window.location.hash == '#_=_') {
-            window.location.hash = '';
-        }
-        if (window.location.hash == 'upload#') {
-            Backbone.history.navigate("/");
-        }
-    </script>
    {% block headerscripts %}
    {% endblock %}
 </head>
@@ -97,7 +89,6 @@
    <script src="{{ STATIC_URL }}js/libs/backbone/backbone.mine.js"></script>
    <script src="{{ STATIC_URL }}js/libs/backbone/backbone.infiniscroll.js"></script>
    <script src="{{ STATIC_URL }}js/libs/globalize.js"></script>
-    <script src="{{ STATIC_URL }}js/libs/clickify.js"></script>
    <script src="{{ STATIC_URL }}js/libs/jquery.colorbox.js"></script>
    <script src="{{ STATIC_URL }}js/com.podnoms.utils.js"></script>
    <script src="{{ STATIC_URL }}js/com.podnoms.storage.js"></script>
@@ -124,5 +115,14 @@
 {% endcompress %}
 {% block footerscripts %}
 {% endblock %}
+    <script type="text/javascript">
+        if (window.location.hash == '#_=_') {
+            window.location.hash = '';
+        }
+        if (window.location.hash == 'upload#') {
+            Backbone.history.navigate("/");
+        }
+    </script>
+<div id="proxy"></div>
 </body>
 </html>
--- a/templates/views/HeaderView.html
+++ b/templates/views/HeaderView.html
@@ -17,13 +17,12 @@
                            <form id="logout-form" method="post" action="{% url "account_logout" %}" style="display: none">
                                {% csrf_token %}
                            </form>
-                            <a class="no-click" style="cursor: hand; cursor: pointer;" id="logout" onclick="document.getElementById('logout-form').submit();">Logout&nbsp;<i class="icon-eject icon-black"></i>
+                            <a class="no-click" style="cursor: hand; cursor: pointer;" id="header-logout-button" onclick="document.getElementById('logout-form').submit();">Logout&nbsp;<i class="icon-eject icon-black"></i>
                            </a>
                        </li>
                    {% else %}
                        <li>
-                            <a href="{% url "account_login" %}" class="no-click" id="login">Login/Signup&nbsp;<i
-                                    class="icon-music icon-black"></i></a>
+                            <a data-bypass="true" class="no-click" id="header-login-button">Login/Signup&nbsp;<i class="icon-music icon-black"></i></a>
                        </li>
                    {% endif %}
                </ul>
--- a/templates/views/LoginView.html
+++ b/templates/views/LoginView.html
@@ -1,26 +1,30 @@
 {% load account %}
 {% load socialaccount %}
-
-<div class="well">
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Login to Deep South Sounds</h3>
-    <div>
-        <div id="social-login-buttons">
-            <ul class="social_login_providers">
-                <li>
-                    <a class='no-click signin_button' href='{% provider_login_url "twitter" %}' id='twitter_button'>Twitter
-                    </a>
-                </li>
-                <li>
-                    <a class='no-click signin_button' id='facebook_button'
-                       href="{% provider_login_url "facebook" method="oauth2" %}">Facebook
-                    </a>
-                </li>
-            </ul>
+</div>
+<div class="modal-body">
+    <div id="social-login-buttons" class="social_login_providers row-fluid">
+        <div class="social_login_provider">
+            <a href="/accounts/facebook/login/?method=oauth2" id="facebook_button"
+               data-bypass="true" class="no-click social_login_provider_button">Facebook
+            </a>
        </div>
-        <br />
-        <div id="social-login-disclaimer">
-            Please note that using a social account<br/>
-            does not give us access to your private information
+        <div class="social_login_provider">
+            <a href="/accounts/twitter/login/" id="twitter_button"
+               data-bypass="true" class="no-click social_login_provider_button">Twitter
+            </a>
+        </div>
+        <div class="social_login_provider">
+            <a href="/accounts/google/login/?method=oauth2" id="google_button"
+               data-bypass="true" class="no-click social_login_provider_button">Google
+            </a>
        </div>
    </div>
-</div>
+    <div id="social-login-disclaimer" class="row-fluid">
+        <h5>Please note that using a social account<br/> does not give us access to your private information</h5>
+    </div>
+</div>
+
+