New UI

4 files changed, 153 insertions, 127 deletions

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 %}