clean up interface for very long titled items

deme_django/modules/community_forum/templates/discussionboard/show.html

@@ -7,11 +7,11 @@
 <p><a href="{% url item_url viewer="discussionboard",action="newdiscussion",noun=item.pk %}" class="btn">Create a new discussion</a></p>
 {% endifagentcan %}
 
-<table class="table table-striped">
+<table class="table table-striped table-discussion">
     <tr>
-        <th>Discussion Topics</td>
-        <th>Replies</td>
-        <th>Last Post</td></tr>
+        <th class="topics">Discussion Topics</td>
+        <th class="replies">Replies</td>
+        <th class="last-post">Last Post</td></tr>
     </tr>
     {% for discussion in discussions %}
     <tr>

deme_django/modules/community_forum/templates/discussionboard/viewdiscussion.html

@@ -3,10 +3,8 @@
 {% load air_extras %}
 {% block content %}
 
-<div><a href="{% url item_url viewer="discussionboard",action="show",noun=discussion_board.pk %}" style="text-decoration: underline;">Back to discussion board</a></div>
+<p><a href="{% url item_url viewer="discussionboard",action="show",noun=discussion_board.pk %}" style="text-decoration: underline;">Back to discussion board</a></p>
 
 {% communityforum_calculatecomments %}
 
-{% endblock content %}
-
-
+{% endblock content %}

deme_django/static/css/deme.css

@@ -5002,8 +5002,11 @@ you can use the generic selector below, but it's slower:
 .adminbar .nav.breadcrumbs {
   border-left: 1px solid rgba(255, 255, 255, 0.15);
   border-right: 1px solid rgba(255, 255, 255, 0.15);
+  max-width: 90%;
 }
 .adminbar .nav.breadcrumbs > li {
+  display: inline-block;
+  float: none;
   background-color: #49869c;
   background-image: -moz-linear-gradient(top, #8ac9df, #49869c);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#8ac9df), to(#49869c));
@@ -5028,6 +5031,8 @@ you can use the generic selector below, but it's slower:
 }
 .adminbar .nav.breadcrumbs > li > a,
 .adminbar .nav.breadcrumbs > li > span {
+  text-overflow: ellipsis;
+  overflow: hidden;
   background-image: url('../img/breadcrumb-right.png');
   background-repeat: no-repeat;
   background-position: right center;
@@ -5244,6 +5249,9 @@ you can use the generic selector below, but it's slower:
 .page-layout {
   margin-top: 10px;
 }
+.page-layout * {
+  word-wrap: break-word;
+}
 .page-layout .logo-section {
   margin-bottom: 10px;
 }
@@ -5263,6 +5271,7 @@ you can use the generic selector below, but it's slower:
   text-align: left;
   font-weight: bold;
   font-size: 175%;
+  line-height: 1.2;
   margin-bottom: 10px;
 }
 .page-layout div.title img {
@@ -5272,10 +5281,16 @@ you can use the generic selector below, but it's slower:
   text-decoration: none;
   color: black;
 }
-.page-layout .table {
+.page-layout .table-discussion {
   table-layout: fixed;
 }
-.page-layout .table td {
+.page-layout .table-discussion th.replies {
+  width: 10%;
+}
+.page-layout .table-discussion th.last-post {
+  width: 20%;
+}
+.page-layout .table-discussion td {
   text-overflow: ellipsis;
   overflow: hidden;
 }

deme_django/static/javascripts/deme/metabar.js

@@ -2,6 +2,7 @@ $.cookie.defaults.path = '/';
 
 $(function(){
   var $metabar = $('#metabar');
+  var metabar_width = 200;
 
   // sets metabar sizing styles based on window dimensions
   function metabar_sizing(){
@@ -12,21 +13,24 @@ $(function(){
 
   // attach resizable to entire metabar
   $metabar.resizable({
-    minWidth: 200,
+    minWidth: metabar_width,
     handles: 'w',
     start: function() {
       $metabar.addClass('noanim');
     },
     stop: function(ev, ui) {
       $metabar.removeClass('noanim');
       var width = ui.size.width;
+      metabar_width = width;
       // save cookie
       $.cookie('METABAR_WIDTH', width);
+      metabarWidthAdjust(metabar_width);
     }
   });
 
   var past_width = $.cookie('METABAR_WIDTH');
   if (past_width) {
+    metabar_width = past_width;
     $metabar.css('width', past_width);
   }
 
@@ -46,7 +50,19 @@ $(function(){
       $('a.metabar-toggle').addClass('active');
       $.cookie('METABAR_VISIBLE', true);
     }
+    metabarWidthAdjust(metabar_width);
   }
+
+  // adjust width of container to take into account metadata width
+  function metabarWidthAdjust(metabar_width) {
+    var width = '';
+    // if visible, then calculate
+    if (!$metabar.hasClass('closed')) {
+      width = $(window).width() - metabar_width - 10 + 'px'; // buffer
+    }
+    $('.page-layout').css('max-width',width)
+  }
+
   // attach event to adminbar
   $('.metabar-toggle').click(function(e){
     e.preventDefault();

deme_django/static/less/deme/adminbar.less

@@ -40,7 +40,10 @@
     &.breadcrumbs {
       border-left: 1px solid fade(@white, 15%);
       border-right: 1px solid fade(@white, 15%);
+      max-width: 90%;
       > li{
+        display: inline-block;
+        float: none;
         #gradient .vertical(@adminbar-top-light, @adminbar-bottom-light);
         &:first-child {
           margin-left: 5px;
@@ -55,6 +58,8 @@
           color: @grayLighter;
         }
         > a, > span {
+          text-overflow: ellipsis;
+          overflow: hidden;
           background-image: url('../img/breadcrumb-right.png');
           background-repeat: no-repeat;
           background-position: right center;

deme_django/static/less/deme/page-layout.less

@@ -1,5 +1,8 @@
 .page-layout {
   margin-top: 10px;
+  * {
+    word-wrap: break-word;
+  }
   .logo-section {
     margin-bottom: 10px;
     a.logo {
@@ -19,6 +22,7 @@
     text-align: left;
     font-weight: bold;
     font-size: 175%;
+    line-height: 1.2;
     margin-bottom: 10px;
     img {
       vertical-align: middle;
@@ -28,8 +32,17 @@
       color: black;
     }
   }
-  .table {
+  .table-discussion {
     table-layout: fixed;
+    th.topics {
+
+    }
+    th.replies {
+      width: 10%;
+    }
+    th.last-post {
+      width: 20%;
+    }
     td {
       text-overflow: ellipsis;
       overflow: hidden;