Improve notifications and separate them from profile.

ttsirkia · Aug 7, 2015 · 864f57c · 864f57c
1 parent 1d4c116
commit 864f57c
Show file tree

Hide file tree

Showing 24 changed files with 388 additions and 212 deletions.
diff --git a/a-plus/urls.py b/a-plus/urls.py
@@ -2,8 +2,8 @@
 from django.contrib import admin
 
 import shibboleth_login.urls, userprofile.urls, course.urls, exercise.urls, \
-    edit_course.urls, deviations.urls, external_services.urls, apps.urls, \
-    api.urls, redirect_old_urls.urls
+    edit_course.urls, deviations.urls, notification.urls, \
+    external_services.urls, apps.urls, api.urls, redirect_old_urls.urls
 
 
 admin.autodiscover()
@@ -19,6 +19,7 @@
     url(r'^', include(external_services.urls)),
     url(r'^', include(deviations.urls)),
     url(r'^', include(edit_course.urls)),
+    url(r'^', include(notification.urls)),
     url(r'^', include(exercise.urls)),
     url(r'^', include(course.urls)),
 ]
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -5,9 +5,18 @@
 dl > dt {
     margin-top: 0.5em;
 }
-.pull-right {
+.pre {
+    white-space: pre;
+}
+.unread {
+    font-weight: bold;
+}
+.panel-title .pull-right {
     margin-left: 0.5em;
 }
+.alert .pull-left {
+    margin-right: 0.5em;
+}
 .nav .navbar-btn {
     margin-top: 10px;
     margin-bottom: 0;
@@ -95,6 +104,17 @@ html, body {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+.menu-exercise, .menu-submission {
+    max-width: 50%;
+    text-overflow: ellipsis;
+}
+@media (min-width: 768px) {
+    .col-sm-2 .nav a {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
 
 /* index thumbnails */
 .course-thumbnail {
@@ -121,14 +141,14 @@ html, body {
     width: 100%;
 }
 
-/* module panels */
+/* panels */
 .module-panel .panel-heading {
     display: block;
 }
 .module-panel .panel-title .caret {
     margin-right: 0.5em;
 }
-.module-panel .collapsed .panel-title .caret {
+.collapsed .caret {
     border-left: 4px dashed;
     border-top: 4px solid transparent;
     border-bottom: 4px solid transparent;

diff --git a/assets/js/aplus.js b/assets/js/aplus.js
@@ -6,8 +6,72 @@ $(function() {
         $(".menu-" + tag).addClass("active");
     }
 
-    // Activate tooltips.
     $('[data-toggle="tooltip"]').tooltip();
+    $('.ajax-tail-list').aplusListTail();
+});
 
 
-});
+/**
+ * Ajax loaded list tail.
+ */
+ ;(function($, window, document, undefined) {
+ 	"use strict";
+
+ 	var pluginName = "aplusListTail";
+ 	var defaults = {
+ 		per_page_attr: "data-per-page",
+        entry_selector: ".list-entry",
+        more_selector: ".more-link",
+        link_selector: "a",
+        loader_selector: ".progress",
+        link_page_arg: "?page=",
+ 	};
+
+ 	function AplusListTail(element, options) {
+ 		this.element = $(element);
+ 		this.settings = $.extend({}, defaults, options);
+ 		this.init();
+ 	}
+
+ 	$.extend(AplusListTail.prototype, {
+
+ 		init: function() {
+            var settings = this.settings;
+            var perPage = this.element.attr(settings.per_page_attr);
+            if (this.element.find(settings.entry_selector).size() >= perPage) {
+                var tail = this.element.find(settings.more_selector);
+                tail.removeClass("hide").on("click", function(event) {
+                    event.preventDefault();
+                    var link = tail.find(settings.link_selector)
+                        .hide();
+                    var loader = tail.find(settings.loader_selector)
+                        .removeClass("hide").show();
+                    var url = link.attr("href");
+                    $.get(url, function(html) {
+                        loader.hide();
+                        tail.before(html);
+                        if ($(html).filter(settings.entry_selector).size() >= perPage) {
+                            var i = url.indexOf(settings.link_page_arg) + settings.link_page_arg.length;
+                            if (i >= settings.link_page_arg.length) {
+                                var page = parseInt(url.substr(i));
+                                link.attr("href", url.substr(0, i) + (page + 1));
+                                link.show();
+                            }
+                        } else {
+                            tail.hide();
+                        }
+                    });
+                });
+            }
+        }
+ 	});
+
+ 	$.fn[pluginName] = function(options) {
+ 		return this.each(function() {
+ 			if (!$.data(this, "plugin_" + pluginName)) {
+ 				$.data(this, "plugin_" + pluginName, new AplusListTail(this, options));
+ 			}
+ 		});
+ 	};
+
+ })(jQuery, window, document);
diff --git a/course/templates/course/_course_menu.html b/course/templates/course/_course_menu.html
@@ -5,20 +5,20 @@
 <li role="presentation" class="header"><h4>{% trans "Course" %}</h4></li>
 <li role="presentation" class="menu-home">
 	<a href="{{ instance|url }}">
-        <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
+        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
         {{ course.code }}
 	</a>
 </li>
 <li role="presentation" class="menu-results">
 	<a href="{{ instance|url:'results' }}">
-        <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
+        <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
         {% trans "My results" %}
     </a>
 </li>
 <li role="presentation" class="menu-profile">
-    <a href="{{ instance|url:'profile' }}">
-        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
-        {{ user.userprofile.shortname }}
+    <a href="{{ instance|url:'notifications' }}">
+        <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
+        {% trans "Notifications" %}
     </a>
 </li>
 {% if logout and user.is_authenticated %}

diff --git a/course/templates/course/profile.html b/course/templates/course/profile.html
@@ -1,95 +1,57 @@
-{% extends "course/course_base.html" %}
+{% extends "base.html" %}
 {% load i18n %}
 {% load course %}
-{% load exercise %}
-{% load notification %}
 
-{% block title %}{{ block.super }}: {% trans "Profile" %}{% endblock %}
+{% block title %}A+ {% trans "Profile" %}{% endblock %}
 {% block view_tag %}profile{% endblock %}
 
-{% block breadcrumblist %}
-{{ block.super }}
-<li class="active">{% trans "Profile" %}</li>
-{% endblock %}
-
-{% block columns %}
-<div class="col-md-2">
-    <div class="thumbnail">
-        <img src="{{ profile.avatar_url }}" alt="avatar" />
-    </div>
-    <dl>
-        {% trans "[Missing]" as miss %}
-    	<dt>{% trans "Student ID" %}</dt>
-        <dd>{% firstof profile.student_id miss %}</dd>
-        <dt>{% trans "E-mail" %}</dt>
-        <dd>{% firstof user.email miss %}</dd>
-        <dt>{% trans "Username" %}</dt>
-        <dd>{% firstof user.username miss %}</dd>
-    </dl>
-    {# TODO: check the user type and show editing options/help #}
-    <div class="alert alert-info">
-        {% blocktrans %}
-        To change your settings, such as <strong>e-mail</strong>
-        address or <strong>password</strong>, you must update
-        them on your identity provider.
-        {% endblocktrans %}
-    </div>
-    <div class="alert alert-info">
-        {% blocktrans with email=user.email %}
-        You can change your avatar icon
-        at <a href="http://gravatar.com">gravatar.com</a>.
-        Use your e-mail address <strong>{{ email }}</strong>
-        when registering your account.
-        {% endblocktrans %}
-    </div>
-</div>
-<div class="col-md-6">
-    <div class="page-header">
-        <h1>
-            {% if user.first_name or user.last_name %}
-            {{ user.first_name }} {{ user.last_name }}
-            {% else %}
-            {% trans "[Unknown name]" %}
-            {% endif %}
-        </h1>
-    </div>
-    <div>
-        {% old_course_notifications instance user as read %}
-    	{% new_course_notifications instance user as unread %}
-        <h3>{% trans "Unread notifications" %}</h3>
-        {% if unread.count > 0 %}
-        <ul>
-        	{% for notification in unread.notifications %}
-            <li>
-            	<strong>{% trans "Sent by:" %}</strong>
-            	{{ notification.sender.user.get_full_name }} ({{ notification.timestamp }})<br/>
-                <strong>{{ notification.subject }}</strong><br/>
-                {{ notification.notification|safe }}
-            </li>
-        	{% endfor %}
-        </ul>
+{% block content %}
+<div class="page-header">
+    <h1>
+        {% if user.first_name or user.last_name %}
+        {{ user.first_name }} {{ user.last_name }}
         {% else %}
-        <p>{% trans "No unread notifications." %}</p>
+        {% trans "[Unknown name]" %}
         {% endif %}
+    </h1>
+</div>
+<div class="row">
+    <div class="col-md-2">
+        <div class="thumbnail">
+            <img src="{{ profile.avatar_url }}" alt="avatar" />
+        </div>
+        <dl>
+            {% trans "[Missing]" as miss %}
+        	<dt>{% trans "Student ID" %}</dt>
+            <dd>{% firstof profile.student_id miss %}</dd>
+            <dt>{% trans "E-mail" %}</dt>
+            <dd>{% firstof user.email miss %}</dd>
+            <dt>{% trans "Username" %}</dt>
+            <dd>{% firstof user.username miss %}</dd>
+        </dl>
+    </div>
+    <div class="col-md-6">
+        <div class="alert alert-info">
+            {% blocktrans with email=user.email %}
+            You can change your avatar icon
+            at <a href="http://gravatar.com">gravatar.com</a>.
+            Use your e-mail address <strong>{{ email }}</strong>
+            when registering your account.
+            {% endblocktrans %}
+        </div>
 
-        <h3>{% trans "Older notifications" %}</h3>
-        {% if read.count > 0 %}
-        <ul>
-        	{% for notification in read.notifications %}
-            <li>
-                <strong>{% trans "Sent by:" %}</strong>
-                {{ notification.sender.user.get_full_name }} ({{ notification.timestamp }})<br/>
-                <strong>{{ notification.subject }}</strong><br/>
-                {{ notification.notification|safe }}
-            </li>
-        	{% endfor %}
-        </ul>
-        {% else %}
-        <p>{% trans "No older notifications." %}</p>
-        {% endif %}
+        {# TODO: check the user type and show editing options/help #}
+        <div class="alert alert-info">
+            {% blocktrans %}
+            To change your settings, such as <strong>e-mail</strong>
+            address or <strong>password</strong>, you must update
+            them on your identity provider.
+            {% endblocktrans %}
+        </div>
+    </div>
+    <div class="col-md-4">
+
+        {# TODO: list enrolled courses #}
     </div>
-</div>
-<div class="col-md-4">
-    {% latest_submissions %}
 </div>
 {% endblock %}
diff --git a/course/urls.py b/course/urls.py
@@ -15,15 +15,15 @@
     url(r'^archive/$',
         views.ArchiveView.as_view(),
         name="archive"),
+    url(r'^accounts/$',
+        views.ProfileView.as_view(),
+        name="profile"),
     url(COURSE_URL_PREFIX + r'$',
         views.CourseView.as_view(),
         name="course-instances"),
     url(INSTANCE_URL_PREFIX + r'$',
         views.InstanceView.as_view(),
         name="course"),
-    url(USER_URL_PREFIX + r'$',
-        views.ProfileView.as_view(),
-        name="profile"),
     url(USER_URL_PREFIX + r'export-calendar/$',
         views.CalendarExport.as_view(),
         name='export-calendar'),

diff --git a/course/views.py b/course/views.py
@@ -33,6 +33,10 @@ class ArchiveView(UserProfileView):
     template_name = "course/archive.html"
 
 
+class ProfileView(UserProfileView):
+    template_name = "course/profile.html"
+
+
 class CourseView(CourseBaseView):
     template_name = "course/course.html"
 
@@ -46,10 +50,6 @@ class InstanceView(CourseInstanceBaseView):
     template_name = "course/toc.html"
 
 
-class ProfileView(CourseInstanceBaseView):
-    template_name = "course/profile.html"
-
-
 class ModuleView(CourseModuleBaseView):
     template_name = "course/module.html"