From: gfawcett <gfawcett@6d9bc8c9-1ec2-4278-b937-99fde70a366f>
Date: Sat, 14 Feb 2009 22:24:17 +0000 (+0000)
Subject: mostly navigation and appearance changes.
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=563ae57a211ad1a39ce8129036b0bdb33a97569e;p=Syrup.git

mostly navigation and appearance changes.

- no longer showing an expanded tree of all course items; it's
  overwhelming in full sites. Only show first level elements;

- cleaned up the in-course breadcrumbs a bit;

- fixed page width to a 960px layout;

- put course-name and department information in a coloured band to
  separate from the course content.

- etc.


git-svn-id: svn://svn.open-ils.org/ILS-Contrib/servres/trunk@122 6d9bc8c9-1ec2-4278-b937-99fde70a366f
---

diff --git a/conifer/static/main.css b/conifer/static/main.css
index c2430fb..b2eaaf1 100644
--- a/conifer/static/main.css
+++ b/conifer/static/main.css
@@ -4,11 +4,20 @@
 pre, code { font-family: monospace; }
 
 body, html { margin: 0; padding: 0; }
+
 body {  
+    background-color: #005; 
+    font-size: normal; 
+}
+
+div#outer {
     background-color: white; 
-    font-size: normal;
+    width: 960; margin-bottom: 50;
+    margin-left: auto; margin-right: auto;
+}
+#mainpanel {  background-color: white; padding: 0 12 24 12; 
+min-height: 300; 
 }
-#mainpanel {  background-color: white; padding: 0 12 24 12; }
 
 /* General headers and footers */
 
@@ -33,10 +42,11 @@ body {
 #header a:hover { background-color: #fb7; color: black; text-decoration: none; }
 
 #footer {  
-    margin-top: 12;
+    margin: 12;
     padding-bottom: 12;
     background-color: #ddf; 
     color: black;
+    border-bottom: white 10px solid;
 }
 
 h1 { font-size: 150%;  }
@@ -88,14 +98,14 @@ a:hover {  text-decoration: underline;  }
 /* item trees (tree of headings and items in a course */
 
 .itemtree { 
-    margin-left: 30; 
+padding-left: 25;
     list-style-type: none; 
     list-style-position: inside;
 }
 
 .itemtree .itemtree { margin-left: 0;}
 
-.itemtree li { width: 400; }
+/* .itemtree li { width: 400; } */
 
 .itemtree .metalink { padding-left: 8; color: gray; }
 .itemtree .metalink a {
@@ -103,27 +113,29 @@ a:hover {  text-decoration: underline;  }
 }
 
 .itemtree .editlinks   { padding-left: 12; color: gray; 
-                         position: absolute; left: 0; 
 			 font-size: small;
 		     }
 .itemtree .editlinks a { color: navy; }
 
 .itemadd { 
-    margin-left: 30; /* should match .itemtree{margin-left} */
-    margin-top: 30; 
+    margin-top: 30; font-size: smaller;
+    padding: 10; background-color: #eef; 
 }
+.itemadd a { color: navy; }
+
 
 /* specialized display of items in tree, by type */
 
 .itemtree li.item_HEADING { 
+    list-style-image: url(tango/folder.png);
     margin-top: 4;
 }
 .itemtree li.item_HEADING > a { 
-    font-weight: bold; color: navy; 
+    color: navy; 
 }
 
 .itemtree li.item_ELEC { 
-    list-style-image: url(tango/view_detailed.png);
+    list-style-image: url(tango/document.png);
     margin-top: 4;
 }
 
@@ -168,3 +180,12 @@ p.todo, div.todo { background-color: #fdd; padding: 6; margin: 12; border-left:
 .newsitem { 
     max-width: 600;
 }
+
+.menublockopener { color: gray !important; font-weight: normal !important; }
+.menublock { background-color: #f0f0e0; font-size: 95%; padding: 1 4; }
+
+#coursebanner { background-color: #f2e4cc; margin: -12 -12 0 -12; padding: 8; }
+
+#coursebanner h1 { padding: 0; font-size: 110%; }
+
+.breadcrumbs { margin: 8 8 8 0; }
diff --git a/conifer/static/menublocks.js b/conifer/static/menublocks.js
new file mode 100644
index 0000000..192b524
--- /dev/null
+++ b/conifer/static/menublocks.js
@@ -0,0 +1,20 @@
+function init_blocks() {
+    $('span.menublock').each(make_opener);
+}
+
+var blocknum = 0;
+function make_opener() {
+    var menublock = $(this);
+    var blockid = 'menublock' + (blocknum++);
+    menublock.attr('id', blockid);
+    var opener = '<a class="menublockopener" onmouseover="openblock(\'' + blockid + '\');" href="javascript:openblock(\'' + blockid + '\');">&raquo;</a>';
+    menublock.before(opener);
+    menublock.hide();
+}
+
+function openblock(bid) {
+    $('span.menublock').hide();
+    $('#' + bid).fadeIn('fast');
+}
+
+$(init_blocks);
\ No newline at end of file
diff --git a/conifer/static/tango/big/folder.png b/conifer/static/tango/big/folder.png
new file mode 100644
index 0000000..0171b09
Binary files /dev/null and b/conifer/static/tango/big/folder.png differ
diff --git a/conifer/static/tango/document.png b/conifer/static/tango/document.png
new file mode 100644
index 0000000..d18082e
Binary files /dev/null and b/conifer/static/tango/document.png differ
diff --git a/conifer/static/tango/folder.png b/conifer/static/tango/folder.png
new file mode 100644
index 0000000..901edc9
Binary files /dev/null and b/conifer/static/tango/folder.png differ
diff --git a/conifer/syrup/views.py b/conifer/syrup/views.py
index bb6f581..338e2d3 100644
--- a/conifer/syrup/views.py
+++ b/conifer/syrup/views.py
@@ -240,7 +240,7 @@ def item_add(request, course_id, item_id):
                     last_modified=datetime.now(),
                     url = url)
                 item.save()
-                return HttpResponseRedirect(item_url(item) + 'meta/')
+                return HttpResponseRedirect(item_url(item, 'meta/'))
         elif item_type == 'ELEC':
             title = request.POST.get('title', '').strip()
             upload = request.FILES.get('file')
@@ -257,7 +257,7 @@ def item_add(request, course_id, item_id):
             item.fileobj.save(upload.name, upload)
             item.save()
 
-            return HttpResponseRedirect(item_url(item) + 'meta/')
+            return HttpResponseRedirect(item_url(item, 'meta/'))
         else:
             raise NotImplementedError
 
diff --git a/conifer/templates/components/item.xhtml b/conifer/templates/components/item.xhtml
index d1355fc..5db74be 100644
--- a/conifer/templates/components/item.xhtml
+++ b/conifer/templates/components/item.xhtml
@@ -7,32 +7,31 @@
   <ul py:def="show_tree(tree, edit=False)" py:if="tree" class="itemtree">
     <li py:for="item, subs in tree" class="item_${item.item_type}">
       <a href="${item_url(item)}">${item}</a> 
-      <span py:if="item.needs_meta_link()" class="metalink">
-	[<a href="${item_url(item, 'meta/')}">about</a>]
+      <span py:if="item.needs_meta_link()" class="menublock">
+	<a href="${item_url(item, 'meta/')}">about</a>
       </span>
-      <span class="editlinks" py:if="edit">
-	[<a href="${item_url(item, 'edit/')}">edit</a>]
-      </span>
-      ${show_tree(subs, edit)}
+      <!-- ${show_tree(subs, edit)} -->
     </li>
   </ul>
 
   <div py:def="nested_title(item)"
        py:with="hier=item.hierarchy()[:-1]; lastnum=len(hier)"
        class="nestedtitle">
-    <span><a href="${course_url(item.course)}">Top</a></span> &raquo; 
+    <div class="breadcrumbs">
+    <span><a href="${course_url(item.course)}">Top</a></span> &raquo;
     <span py:for="n, x in enumerate(hier)"><a href="${item_url(x)}">${x.title}</a> &raquo; </span>
-    <h2>${item.title}</h2>
+<b>${item.title}</b>
+    </div>
   </div>
 
-  <ul py:def="add_subs(parent=None)" class="itemadd">
-    <li>Add a new item...</li>
+  <div py:def="add_subs(parent=None)" class="itemadd">
+    <div>Add a new item:</div>
     <ul py:with="prefix = (not parent) and 'item/0/' or ''">
-      <li><a href="${prefix}add?item_type=HEADING">Add subheading</a></li>
-      <li><a href="${prefix}add?item_type=URL">Add URL</a></li>
-      <li><a href="${prefix}add?item_type=ELEC">Add Electronic Document</a></li>
-      <li><a href="${prefix}add?item_type=PHYS">Add Physical Book/Document</a></li>
+      <li><a href="${prefix}add/?item_type=HEADING">Subheading</a></li>
+      <li><a href="${prefix}add/?item_type=URL">URL</a></li>
+      <li><a href="${prefix}add/?item_type=ELEC">Electronic Document</a></li>
+      <li><a href="${prefix}add/?item_type=PHYS">Physical Book/Document</a></li>
     </ul>
-  </ul>
+  </div>
   
 </html>
diff --git a/conifer/templates/course_detail.xhtml b/conifer/templates/course_detail.xhtml
index 4d961e3..368838d 100644
--- a/conifer/templates/course_detail.xhtml
+++ b/conifer/templates/course_detail.xhtml
@@ -10,10 +10,13 @@ is_editor = course.can_edit(request.user)
   <xi:include href="components/item.xhtml"/>
   <head>
     <title>${title}</title>
+    <script type="text/javascript" src="/static/menublocks.js"/>
   </head>
   <body>
-    <p class="deptident">${course.department}</p>
+    <div id="coursebanner">
+    <div class="deptident">${course.department}</div>
     <h1>${title}</h1>
+    </div>
     <p py:if="not item_tree">
       There are no items associated with this course yet.
     </p>
diff --git a/conifer/templates/item_add_elec.xhtml b/conifer/templates/item_add_elec.xhtml
index 595ca52..aad71c6 100644
--- a/conifer/templates/item_add_elec.xhtml
+++ b/conifer/templates/item_add_elec.xhtml
@@ -11,11 +11,12 @@ course_title = '%s: %s (%s)' % (course.code, course.title, course.term)
     <title>${title}</title>
   </head>
   <body>
-    <div class="courseident">
+    <div id="coursebanner">
       <div>${course.department}</div>
       <h1><a href="${course_url(course)}">${course_title}</a></h1>
+    </div>
       <div py:if="parent_item">${nested_title(parent_item)}</div>
-      <h2>${title}</h2>
+      <h3>${title}</h3>
       <form action=".?item_type=${item_type}" method="POST"
 	    enctype="multipart/form-data">
 	<table>
@@ -24,6 +25,5 @@ course_title = '%s: %s (%s)' % (course.code, course.title, course.term)
 	</table>
 	<p><input type="submit" value="Upload file and Create item"/></p>
       </form>
-    </div>
 </body>
 </html>
diff --git a/conifer/templates/item_add_heading.xhtml b/conifer/templates/item_add_heading.xhtml
index bd50ea3..591c466 100644
--- a/conifer/templates/item_add_heading.xhtml
+++ b/conifer/templates/item_add_heading.xhtml
@@ -12,10 +12,12 @@ course_title = '%s: %s (%s)' % (course.code, course.title, course.term)
   </head>
   <body>
     <div class="courseident">
+    <div id="coursebanner">
       <div>${course.department}</div>
       <h1><a href="${course_url(course)}">${course_title}</a></h1>
+    </div>
       <div py:if="parent_item">${nested_title(parent_item)}</div>
-      <h2>${title}</h2>
+      <h3>${title}</h3>
       <form action=".?item_type=${item_type}" method="POST">
 	<table>
 	  <tr><th>Heading</th><td><input type="text" name="title"/></td></tr>
diff --git a/conifer/templates/item_add_url.xhtml b/conifer/templates/item_add_url.xhtml
index c33704b..8bd1d12 100644
--- a/conifer/templates/item_add_url.xhtml
+++ b/conifer/templates/item_add_url.xhtml
@@ -12,10 +12,12 @@ course_title = '%s: %s (%s)' % (course.code, course.title, course.term)
   </head>
   <body>
     <div class="courseident">
+    <div id="coursebanner">
       <div>${course.department}</div>
       <h1><a href="${course_url(course)}">${course_title}</a></h1>
+    </div>
       <div py:if="parent_item">${nested_title(parent_item)}</div>
-      <h2>${title}</h2>
+      <h3>${title}</h3>
       <form action=".?item_type=${item_type}" method="POST">
 	<table>
 	  <tr><th>Title</th><td><input type="text" name="title"/></td></tr>
diff --git a/conifer/templates/item_heading_detail.xhtml b/conifer/templates/item_heading_detail.xhtml
index 38d0a61..af9f643 100644
--- a/conifer/templates/item_heading_detail.xhtml
+++ b/conifer/templates/item_heading_detail.xhtml
@@ -12,12 +12,15 @@ item_tree = course.item_tree(subtree=item)
   <xi:include href="components/item.xhtml"/>
   <head>
     <title>${title}</title>
+    <script type="text/javascript" src="/static/menublocks.js"/>
   </head>
   <body>
+    <div id="coursebanner">
     <div class="courseident">
       <div>${course.department}</div>
       <h1><a href="${course_url(course)}">${course_title}</a></h1>
     </div>
+    </div>
     ${nested_title(item)}
     <!-- <p py:if="not item_tree"> -->
     <!--   There are no items associated in this subheading. -->
diff --git a/conifer/templates/item_metadata.xhtml b/conifer/templates/item_metadata.xhtml
index 0be6ca4..5e49dcd 100644
--- a/conifer/templates/item_metadata.xhtml
+++ b/conifer/templates/item_metadata.xhtml
@@ -12,10 +12,12 @@ title = item.title
     <title>${title}</title>
   </head>
   <body>
+    <div id="coursebanner">
     <div class="courseident">
       <div>${course.department}</div>
       <h1><a href="${course_url(course)}">${course_title}</a></h1>
     </div>
+    </div>
     ${nested_title(item)}
 
     <table>
diff --git a/conifer/templates/master.xhtml b/conifer/templates/master.xhtml
index e6878ea..1a241cf 100644
--- a/conifer/templates/master.xhtml
+++ b/conifer/templates/master.xhtml
@@ -17,6 +17,7 @@ app_name = 'Syrup E-Reserve System'
   </py:match>
   <py:match path="body" once="true">
     <body py:attrs="select('@*')">
+      <div id="outer">
       <div id="brandheader">
 	<div style="float: right; font-size: x-large; padding: 12; color: #888;">
 	  ${app_name}
@@ -67,6 +68,7 @@ app_name = 'Syrup E-Reserve System'
     Syrup is a subproject of <a href="http://conifer.mcmaster.ca/">Project Conifer</a> &copy; 2009
     </div>
       </div>
+      </div>
     </body>
   </py:match>
 </html>