New UI

8 files changed, 208 insertions, 139 deletions

diff --git a/coip/apps/userprofile/views.py b/coip/apps/userprofile/views.py
index b1be4c1..4153b85 100644
--- a/coip/apps/userprofile/views.py
+++ b/coip/apps/userprofile/views.py
@@ -96,7 +96,7 @@ def home_name(user,short=None,autocreate=False):
 def home(request):
     memberships = []
     try:
-        memberships = Membership.objects.filter(user=request.user,hidden=False)
+        memberships = Membership.objects.filter(user=request.user,hidden=False).order_by('-timecreated')
     except ObjectDoesNotExist:
         pass
     
@@ -108,7 +108,7 @@ def home(request):
             cn = user.username
         profile.home = home_name(user, short=cn, autocreate=True)
     
-    names = [(link.src,link.data) for link in NameLink.objects.filter(dst__memberships__user=request.user,type=NameLink.access_control,data__contains='i').all()]
+    names = [(link.src,link.data) for link in NameLink.objects.filter(dst__memberships__user=request.user,type=NameLink.access_control,data__contains='i').all().order_by('-timecreated')]
     
     return respond_to(request, {'text/html': 'apps/userprofile/home.html'},{'memberships': memberships,'names': names})
 
diff --git a/coip/settings.py b/coip/settings.py
index b1aacc4..d367308 100644
--- a/coip/settings.py
+++ b/coip/settings.py
@@ -66,7 +66,7 @@ ADMIN_MEDIA_PREFIX = '/admin-media/'
 
 # Make this unique, and don't share it with anybody.
 SECRET_KEY = '!=ren*@$dklhfm$3#$h=a2g4r3)ra#+al)9kwi4&rpylr$3xnf'
-SESSION_ENGINE = "django.contrib.sessions.backends.cache"
+#SESSION_ENGINE = "django.contrib.sessions.backends.cache"
 
 # List of callables that know how to import templates from various sources.
 TEMPLATE_LOADERS = (
@@ -83,7 +83,8 @@ MIDDLEWARE_CLASSES = (
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.auth.middleware.RemoteUserMiddleware',
-    #'django.middleware.cache.FetchFromCacheMiddleware'
+    #'django.middleware.cache.FetchFromCacheMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
 )
 
 AUTHENTICATION_BACKENDS = (
diff --git a/dev-django-admin.sh b/dev-django-admin.sh
index 2350dd1..e2fc631 100755
--- a/dev-django-admin.sh
+++ b/dev-django-admin.sh
@@ -1 +1,2 @@
-env PYTHONPATH=`pwd`:$PHTHONPATH DJANGO_SETTINGS_MODULE=coip.settings django-admin.py $*
+#env PYTHONPATH=`pwd`:$PHTHONPATH DJANGO_SETTINGS_MODULE=coip.settings django-admin.py $*
+env PYTHONPATH = `pwd`:$PHTHONPATH DJANGO_SETTINGS_MODULE=coip.settings django-admin.py $*
diff --git a/site-media/css/style2.css b/site-media/css/style2.css
index f641cf6..4c9450d 100644
--- a/site-media/css/style2.css
+++ b/site-media/css/style2.css
@@ -1,12 +1,56 @@
 body {
+    background-color: #fff;
     color: #333;
 }
 
 #header {
-    background: #333;
-    height:45px;
-    padding-top:15px;
-    border-bottom: 5px solid #333;
+    width:100%;
+    height: 60px;
+    background-image: -ms-linear-gradient(top, #4B80AA 0%, #245783 100%);
+    background-image: -moz-linear-gradient(top, #4B80AA 0%, #245783 100%);
+    background-image: -o-linear-gradient(top, #4B80AA 0%, #245783 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4B80AA), color-stop(1, #245783));
+    background-image: -webkit-linear-gradient(top, #4B80AA 0%, #245783 100%);
+    background-image: linear-gradient(to bottom, #4B80AA 0%, #245783 100%);
+    margin-bottom: 20px;
+}
+
+.content {
+    background: #fff;
+}
+
+.login {
+    margin-top:20px;
+}
+
+.logo {
+    color: #f5f5f5;
+    font-weight: 200;
+    line-height: 1;
+    font-family: "Arial Rounded MT Bold",Arial,sans-serif;
+    display: block;
+    padding: 8px 20px 12px;
+    margin-left: -20px;
+    margin-top:10px;
+    font-size: 25px;
+    text-decoration: none;
+}
+
+.logo:hover {
+    color: #f5f5f5;
+    text-decoration: none;
+}
+
+
+.content {
+    padding:20px;
+}
+
+
+.shadow {
+    -moz-box-shadow: 10px 10px 50px #333;
+    -webkit-box-shadow: 10px 10px 50px #333;
+    box-shadow: 1px 1px 20px #333;
 }
 
 .hero-unit.profile {
@@ -47,9 +91,6 @@ textarea {
     color:#999;
 }
 
-.shadow {
-    box-shadow: 1px 1px 3px #888;
-}
 
 .well.comment {
     background:#fff;
diff --git a/templates/apps/name/name.html b/templates/apps/name/name.html
index e366dc1..5dccb60 100644
--- a/templates/apps/name/name.html
+++ b/templates/apps/name/name.html
@@ -17,6 +17,7 @@
 {% endblock %}
 {% block content %}
     {% if name %}
+        <h1>{{ name.short }}</h1>
 	    <div class="ui-widget ui-widget-content ui-helper-reset ui-corner-all infopanel">
 		    {% if name.description  %}
 		    {% autoescape off %}
@@ -29,25 +30,25 @@
 		{% if render.acl or render.edit or render.delete or render.invite or render.join %}
 		<ul class="ilist" style="margin-top: 10px;">
 		  	 {% if render.acl %}
-			 <li class="button"><a href="/name/{{name.id}}/acl/0">Modify Access</a></li>
+			 <li><a class="btn" href="/name/{{name.id}}/acl/0">Modify Access</a></li>
 			 {% endif %}
 		     {% if render.edit %}
-			 <li class="button"><a href="/name/{{name.id}}/edit">Modify</a></li>
+			 <li class="btn"><a href="/name/{{name.id}}/edit">Modify</a></li>
 			 {% endif %}
 			 {% if render.delete %}
-			 <li class="button"><a href="/name/{{name.id}}/delete">Delete</a></li>
+			 <li class="btn"><a href="/name/{{name.id}}/delete">Delete</a></li>
 			 {% endif %}
 			 {% if render.invite %}
-			 <li class="button"><a href="/name/{{name.id}}/invite">Invite</a></li>
+			 <li class="btn"><a href="/name/{{name.id}}/invite">Invite</a></li>
 			 {% endif %}
 			 {% if render.invite %}
-			 <li class="button"><a href="/name/{{name.id}}/join">Add Member</a></li>
+			 <li class="btn"><a href="/name/{{name.id}}/join">Add Member</a></li>
 			 {% endif %}
 			 {% if render.join %}
-			 <li class="button"><a href="/name/{{name.id}}/join/{{user.username}}">Join</a></li>
+			 <li class="btn"><a href="/name/{{name.id}}/join/{{user.username}}">Join</a></li>
 			 {% endif %}	 
 			 {% if render.alias %}
-			 <li class="button"><a href="/user/alias">Add Alias</a></li>
+			 <li class="btn"><a href="/user/alias">Add Alias</a></li>
 			 {% endif %}
 		 </ul>
 	 	{% endif %}
diff --git a/templates/apps/userprofile/home.html b/templates/apps/userprofile/home.html
index 2690f4d..6d4228f 100644
--- a/templates/apps/userprofile/home.html
+++ b/templates/apps/userprofile/home.html
@@ -4,61 +4,85 @@
 {% load tagging_tags %}
 {% block widgets %}
 	$("#gravatar").append($.gravatar($('#email').text()));
-	$("#names").accordion({
-   		header: 'h3',
-   		collapsible: true,
-        active: false,
-        autoHeight: false
-   	});
-   	$("#memberships").accordion({
-   		header: 'h3',
-   		collapsible: true,
-        active: false,
-        autoHeight: false
-   	});
 {% endblock %}
-{% block content %}
-    {% if memberships %}
-	<h3>Memberships</h3>
-	<div id="memberships">
-		{% for m in memberships.all %}
-		<div id="m{{m.id}}" class="{{m.status}}">
-		   <h3 class="listheader">{{m.name.shortname}}</h3>
-		   <div>
-			   <div>
-				    You became a member of <a href="{{m.name.url}}">{{m.name.shortname}}</a> {{m.timecreated|datehumanize}}
-				    {% if m.tags %}<h4>Role{{m.tags|pluralize}}</h4>
-				    <ul class="clist">{% for tag in m.tags %}<li>{{ tag|escape }}</li>{%endfor%}</ul>{%endif%}
-			   </div>
-			   <div class="rlist button">
-		         <ul>
-		            {% if render.edit and m.user %} <!-- only allow roles for users right now -->
-		            <li><a href="/tag/membership/{{m.id}}/modify">Modify Roles</a></li>
-		            {% endif %}
-		            {% if render.kick and m.user %} <!-- only allow removing members for users right now -->
-		            <li><a href="/name/{{name.id}}/leave/{{m.user.username}}">{% if m.user == user %}Leave{% else %}Remove from{% endif %} Group</a></li>
-		            {% endif %}
-		         </ul>
-		      </div>
-		   </div>
-		</div>
-		{% empty %}
-		<p>No members yet...</p>
-		{% endfor %}
-	</div>
-	{% endif %}
 
-<h3>Groups</h3>
-<div id="names">
-	{% for n,p in names %}
-	<div id="n{{n.id}}">
-	   <h3 class="listheader">{{n.shortname}}</h3>
-	   <div>
-		  <a href="{{n.url}}">{{n.shortname}}</a> was created by {{n.creator|userdisplay}} {{n.timecreated|datehumanize}}{% if n.count_members %}and has {{n.count_members}} member{{n.count_members|pluralize}}{%endif%}.
-	   </div>
-	</div>
-	{% empty %}
-	<p>You do not have control over any groups yet...</p>
-	{% endfor %}
+{% block main %}
+<script>
+    $(function () {
+        $('tab a:last').tab('show');
+    })
+</script>
+
+<div class="hero-unit profile">
+        <div class="left" style="margin-right:30px;">
+            <a class="gravatar" href="#" title="{{ user.email }}"></a>
+        </div>
+        <h2>{{ profile.display_name }}</h2>
+        <span class="quiet">You are the owner of {{ names|length }} group{{ names|pluralize }} and member of {{ memberships|length }} group{{ memberships|pluralize }}</span><br>
+        <!-- <a href="/user/alias"><i class="icon-user"></i> Add an alias </a> to your identity -->
+    <br>
+
 </div>
+<ul class="nav nav-tabs" id="tab">
+    <a class="btn right" style="margin-left:30px;margin-right:10px;" href="/name/{{profile.home.id}}/add"><i class="icon-plus"></i> New group</a>
+    <li class="active">
+        <a href="#memberships-tab" data-toggle="tab">Memberships</a>
+    </li>
+    <li><a href="#groups" data-toggle="tab">My groups</a></li>
+</ul>
+
+<div class="tab-content">
+    <div class="tab-pane active" id="memberships-tab">
+        {% if memberships %}
+        <div id="memberships">
+            {% for m in memberships.all %}
+                <div class="well group">
+                    <a href="{{ m.name.url }}"><h3>{{ m.name.shortname }}</h3></a>
+                    <span class="quiet">You became member {{m.timecreated|datehumanize}}</span>
+                    {% if m.tags %}
+                        <h4>Role{{m.tags|pluralize}}</h4>
+                        <ul class="clist">{% for tag in m.tags %}<li>{{ tag|escape }}</li>{%endfor%}</ul>
+                    {%endif%}
+                    <a href="{{ m.name.url }}"><img style="margin-top:-27px;" class="right" src="/site-media/img/right.png"></a>
+                    <!--
+                    <div id="m{{m.id}}" class="{{m.status}}">
+                        <h3 class="listheader">{{m.name.shortname}}</h3>
+                    <div>
+                    <div>
+                        You became a member of <a href="{{m.name.url}}">{{m.name.shortname}}</a> {{m.timecreated|datehumanize}}
+                        {% if m.tags %}<h4>Role{{m.tags|pluralize}}</h4>
+                        <ul class="clist">{% for tag in m.tags %}<li>{{ tag|escape }}</li>{%endfor%}</ul>{%endif%}
+                    </div>
+                    <div class="rlist button">
+                        <ul>
+                            {% if render.edit and m.user %}
+                                <li><a href="/tag/membership/{{m.id}}/modify">Modify Roles</a></li>
+                            {% endif %}
+                            {% if render.kick and m.user %}
+                                <li><a href="/name/{{name.id}}/leave/{{m.user.username}}">{% if m.user == user %}Leave{% else %}Remove from{% endif %} Group</a></li>
+                            {% endif %}
+                         </ul>
+                    </div>
+                        -->
+                </div>
+            {% empty %}
+                <p>No members yet...</p>
+            {% endfor %}
+        </div>
+        {% endif %}
+    </div>
+    <div class="tab-pane" id="groups">
+    <div id="names">
+                {% for n,p in names %}
+                    <div class="well group">
+                        <a href="{{ n.url }}"><h3>{{ n.shortname }}</h3></a>
+                        <span class="quiet">Created {{n.timecreated|datehumanize}}</span>
+                        <a href="{{ n.url }}"><img style="margin-top:-27px;" class="right" src="/site-media/img/right.png"></a>
+                    </div>
+                {% empty %}
+                    <p>You do not have control over any groups yet...</p>
+                {% endfor %}
+        </div>
+    </div>
+    </div>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 2c32c79..0986936 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -2,15 +2,20 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
 <head>
-        <link type="text/css" href="/site-media/css/base/jquery-ui.css" rel="stylesheet" />
+        <!-- <link type="text/css" href="/site-media/css/base/jquery-ui.css" rel="stylesheet" /> -->
         <!-- link type="text/css" href="/site-media/css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" / -->
         <!-- link type="text/css" href="/site-media/css/jquery.jnotify.css" rel="stylesheet" />
         <link type="text/css" href="/site-media/css/jquery.tooltip.css" rel="stylesheet" />
         <link type="text/css" href="/site-media/css/jquery.multiselect2side.css" rel="stylesheet" /-->
         <link type="text/css" href="/site-media/css/jquery.ui.autocomplete.custom.css" rel="stylesheet" />
         <link type="text/css" href="/site-media/css/jquery.wysiwyg.css" rel="stylesheet" />
-        <link type="text/css" href="/site-media/css/coip-style.css" rel="stylesheet"/>
-        <script type="text/javascript" src="/site-media/js/jquery-1.6.2.js"></script>
+        <!-- <link type="text/css" href="/site-media/css/coip-style.css" rel="stylesheet"/> -->
+
+	<link type="text/css" href="/site-media/bootstrap/css/bootstrap.css" rel="stylesheet"/>
+    <link type="text/css" href="/site-media/css/style2.css" rel="stylesheet"/>
+    <script type="text/javascript" src="/site-media/js/jquery-1.7.2.min.js"></script>
+	<script type="text/javascript" src="/site-media/bootstrap/js/bootstrap.js"></script>
+
         <!-- script type="text/javascript" src="/site-media/js/jquery-ui-1.8.13.custom.min.js"></script -->
         <script type="text/javascript" src="/site-media/js/jquery-ui.js"></script>
         <script type="text/javascript" src="/site-media/js/jquery.tooltip.pack.js"></script>
@@ -66,34 +71,41 @@
         {% block js %}{% endblock %}
 </head>
 <body>
-<div id="container">
-	<div id="header">
-		<ul class="ilist">
-			<li id="appname" class="left">
-				<h1>SUNET Groups</h1>
-			</li>
-			<li id="topmenubar" class="right">
-				{% if user.is_authenticated %}
-				<ul class="menubar">
-				   <li>
-				       <a href="#">{{user|userdisplay}}</a>
-					   <ul>
-					   	<li><a href="/user/home">Dashboard</a></li>
-					   	<li><a href="/accounts/logout">Logout</a></li>
-					   </ul>
-				   </li>
-				</ul>
-			    {% else %}
-			   	<div style="float: right;" class="button"><a href="/user/home">Login</a></div>
-			    {% endif %}
-			</li>
-		</ul>
-		<div class="clear"></div>
-	</div>
-	<div id="content">
-	    {% block main %}{% endblock %}
-	</div>
-	<div class="clear"></div>
+
+<div id="header">
+    <div class="container">
+        <div class="row">
+                    <div class="span12">
+                    <a href="/" class="pull-left logo">SUNET Groups</a>
+                    {% if user.is_authenticated %}
+                        <div class="login pull-right">
+                            <a class="white-link" href="/user/home">{{user|userdisplay}}</a>
+                            <a class="white-link" href="/accounts/logout">Logout</a>
+                        </div>
+                    {% else %}
+                        <div class="login pull-right">
+                            <a class="white-link" href="/accounts/login-federated">Login</a>
+                        </div>
+                    {% endif %}
+                    </div>
+        </div>
+        </div>
+</div>
+
+<div class="container">
+        <div class="row">
+                <div class="span12">
+                    {% block main %}{% endblock %}
+                </div>
+                <!--
+                <div class="span3">
+                    {% block sidebar %}hej{% endblock %}
+                </div>
+                -->
+        </div>
+</div>
+
+	<!--
 	<div id="footer">
 		<div class="centered">
 			<ul class="list-of-lists">
@@ -126,5 +138,6 @@
 		</div>
 	</div>
 </div>
+	-->
 </body>
 </html>
diff --git a/templates/tree.html b/templates/tree.html
index 585fc42..670acb0 100644
--- a/templates/tree.html
+++ b/templates/tree.html
@@ -34,38 +34,26 @@ $(function() {
 </script>
 {% endblock %}
 {% block main %}
-
-<ul class="ilist" style="margin-bottom: 10px;">
-	<li id="left">
-		<ul id="sidemenu">
-			{% if user.is_authenticated %}
-			<li><a class="gravatar" href="#" title="{{user.email}}"></a></li>
-			<li><a href="/user/home"><span class="ui-icon ui-icon-home"></span>{{user|userdisplay}}</a></li>
-			{% endif %}
-			<li style="border-top: 1px solid black; width: 100%; margin-top: 5px;">&nbsp;</li>
-			{% if name %}
-			<li><a href="/name/{{name.id}}/add"><span class="ui-icon ui-icon-newwin"></span>Create New Group</a></li>
-			{% else %}
-			<li><a href="/name/{{profile.home.id}}/add"><span class="ui-icon ui-icon-newwin"></span>Create New Group</a></li>
-			{% endif %}
-			<li><a href="/user/alias"><span class="ui-icon ui-icon-link"></span>Add Alias</a></li>
-		</ul>
-		<div class="tabs">
-			<ul>
-				<li><a href="#mygroups">My Groups</a></li>
-				<li><a href="#jstree">All Groups</a></li>
-			</ul>
-			<div id="jstree"></div>
-			<div id="mygroups">My groups</div>
-		</div>
-	</li>
-	<li id="main">
-		<div id="headline">
-			{% block headline %}<a style="text-decoration: none" href="{% if name %}{{name.url}}{% else %}/user/home{% endif %}">{% if name %}{{name.shortname}}{% else %}Dashboard{% endif %}</a>{% endblock %}
-		</div>
-		<div>
-	    	{% block content %}{% endblock %}
-	    </div>
-	</li>
-</ul>
-{% endblock %}
\ No newline at end of file
+                        {% if user.is_authenticated %}
+                <!-- <a class="gravatar" href="#" title="{{user.email}}"></a> -->
+                <!-- <a href="/user/home">{{user|userdisplay}}</a> -->
+            {% endif %}
+            <!--
+            <ul class="nav nav-tabs">
+                <li class="active">
+                    <a href="#mygroups">My Groups</a>
+                </li>
+                <li>
+                    <a href="#jstree">All Groups</a>
+                </li>
+            </ul>
+            -->
+                        <!-- <div id="jstree"></div> -->
+                        <!-- <div id="mygroups">My groups</div> -->
+            <!--
+            <div id="headline">
+                {% block headline %}<a style="text-decoration: none" href="{% if name %}{{name.url}}{% else %}/user/home{% endif %}">{% if name %}{{name.shortname}}{% else %}Dashboard{% endif %}</a>{% endblock %}
+            </div>
+            -->
+                {% block content %}{% endblock %}
+{% endblock %}