Forum Map view redesigned for Cranefly

static/cranefly/css/cranefly.css

@@ -929,6 +929,15 @@ footer .breadcrumb li.active{color:#555555;}
 .signin-help h2{margin-bottom:0px;color:#999999;font-size:17.5px;}
 .signin-help ul{margin-bottom:0px;}
 .signin-help a:link,.signin-help a:visited{opacity:0.9;filter:alpha(opacity=90);color:#333333;font-weight:bold;}
+.forum-map-category{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.forum-map-category table{margin:0px;}.forum-map-category table caption{background-color:#3c85a3;border:1px solid #357690;border-radius:2px 2px 0px 0px;margin:-1px;padding:2px 10px;color:#ffffff;font-size:11.9px;font-weight:bold;text-align:left;text-shadow:0px 1px 0px #1a3946;}
+.forum-map-category table .forum-map-forum h3,.forum-map-category table .forum-map-subforum h3{margin:0px;padding:0px;font-size:14px;line-height:20px;}.forum-map-category table .forum-map-forum h3 a:link,.forum-map-category table .forum-map-subforum h3 a:link,.forum-map-category table .forum-map-forum h3 a:visited,.forum-map-category table .forum-map-subforum h3 a:visited{color:#555555;}
+.forum-map-category table .forum-map-forum h3 a:active,.forum-map-category table .forum-map-subforum h3 a:active,.forum-map-category table .forum-map-forum h3 a:hover,.forum-map-category table .forum-map-subforum h3 a:hover{color:#333333;}
+.forum-map-category table .forum-map-subforum{padding-left:15px;}.forum-map-category table .forum-map-subforum span.tree-t,.forum-map-category table .forum-map-subforum span.tree-l,.forum-map-category table .forum-map-subforum span.tree-s,.forum-map-category table .forum-map-subforum span.tree-i{display:inline-block;height:20px;width:10px;}
+.forum-map-category table .forum-map-subforum span.tree-t{border-left:2px solid #eeeeee;}.forum-map-category table .forum-map-subforum span.tree-t span{border-top:2px solid #eeeeee;display:inline-block;height:1px;width:100%;margin-bottom:3px;}
+.forum-map-category table .forum-map-subforum span.tree-l span{border-left:2px solid #eeeeee;border-bottom:2px solid #eeeeee;display:inline-block;height:10px;width:100%;margin-bottom:3px;}
+.forum-map-category table .forum-map-subforum span.tree-i{border-left:2px solid #eeeeee;position:relative;top:5px;margin-right:4px;}
+.forum-map-category table .forum-map-subforum span.tree-s{width:12px;margin-right:4px;}
+.forum-map-category.forum-map-category-important caption{background-color:#cf402e;border:1px solid #ba3a29;text-shadow:0px 1px 0px #672017;}
 .index-rank-team ul li{background-color:#cf402e;border-color:#ae3627;}.index-rank-team ul li a:link,.index-rank-team ul li a:active,.index-rank-team ul li a:visited,.index-rank-team ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #3d130e;}
 .index-rank-team ul li .muted{color:#672017;}
 .index-rank-mvp ul li{background-color:#1a93c5;border-color:#037fb3;}.index-rank-mvp ul li a:link,.index-rank-mvp ul li a:active,.index-rank-mvp ul li a:visited,.index-rank-mvp ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #011f2c;}

static/cranefly/css/cranefly.less

@@ -75,6 +75,7 @@
 @import "cranefly/markdown.less";
 @import "cranefly/index.less";
 @import "cranefly/signin.less";
+@import "cranefly/forummap.less";
 
 // Keep ranks last for easy overrides!
 @import "ranks.less";

static/cranefly/css/cranefly/forummap.less

@@ -0,0 +1,102 @@
+// Forum Map
+// -------------------------
+
+.forum-map-category {
+  background-color: @categoryBackground;
+  border: 1px solid @categoryBorder;
+  border-radius: @borderRadiusSmall;
+  .box-shadow(0px 0px 0px 3px @categoryShadow);
+  margin-bottom: @baseLineHeight;
+
+  table {
+  	margin: 0px;
+
+  	caption {
+  	  background-color: @categoryHeader;
+      border: 1px solid darken(@categoryHeader, 5%);
+      border-radius: @borderRadiusSmall @borderRadiusSmall 0px 0px;
+      margin: -1px;
+  	  padding: @paddingSmall;
+
+      color: @white;
+  	  font-size: @fontSizeSmall;
+  	  font-weight: bold;
+  	  text-align: left;
+      text-shadow: 0px 1px 0px darken(@categoryHeader, 25%);
+  	}
+    
+    .forum-map-forum, .forum-map-subforum {
+      h3 {
+				margin: 0px;
+				padding: 0px;
+
+				font-size: @baseFontSize;
+				line-height: @baseLineHeight;
+
+				a:link, a:visited {
+				  color: @gray;
+				}
+
+	      a:active, a:hover {
+			    color: @textColor;
+			  }
+      }
+    }
+
+    .forum-map-subforum {
+    	padding-left: @baseLineHeight * 0.75;
+
+    	span {
+    		&.tree-t, &.tree-l, &.tree-s, &.tree-i {
+    			display: inline-block;
+    			height: @baseLineHeight;
+    			width: @baseLineHeight * 0.5;
+    		}
+
+    		&.tree-t {
+    			border-left: 2px solid @grayLighter;
+
+    			span {
+    				border-top: 2px solid @grayLighter;
+    			  display: inline-block;
+    				height: 1px;
+    				width: 100%;
+    				margin-bottom: 3px;
+    			}
+    		}
+
+    		&.tree-l {
+    			span {
+    			  border-left: 2px solid @grayLighter;
+    				border-bottom: 2px solid @grayLighter;
+    			  display: inline-block;
+    				height: @baseLineHeight * 0.5;
+    				width: 100%;
+    				margin-bottom: 3px;
+    			}
+    		}
+
+    		&.tree-i {
+    			border-left: 2px solid @grayLighter;
+    			position: relative;
+    			top: 5px;
+    			margin-right: 4px;
+    		}
+
+    		&.tree-s {
+    			width: (@baseLineHeight * 0.5) + 2px;
+    			margin-right: 4px;
+    		}
+    	}
+    }
+  }
+
+  &.forum-map-category-important {
+    caption {
+      background-color: @red;
+      border: 1px solid darken(@red, 5%);
+
+      text-shadow: 0px 1px 0px darken(@red, 25%);
+    }
+  }
+}

static/cranefly/css/cranefly/index.less

@@ -57,21 +57,21 @@
     .forum-main {
       h3 {
         float: left;
-		margin: 0px;
-		padding: 0px;
+    		margin: 0px;
+    		padding: 0px;
 
-		font-size: @fontSizeLarge;
-		line-height: @baseLineHeight;
+    		font-size: @fontSizeLarge;
+    		line-height: @baseLineHeight;
 
-		a:link, a:visited {
-		  color: lighten(@textColor, 35%);
-		}
+    		a:link, a:visited {
+    		  color: lighten(@textColor, 35%);
+    		}
 
-		&.forum-title-new {
+    		&.forum-title-new {
           a:link, a:visited {
-		    color: @textColor;
-		  }
-		}
+    		    color: @textColor;
+    		  }
+    		}
       }
 
       .forum-details {

templates/cranefly/forum_map.html

@@ -4,76 +4,79 @@
 
 {% block title %}{{ macros.page_title(title=_("Forum Map")) }}{% endblock %}
 
-{% block content %}
-<div class="page-header">
-  <h1>{% trans %}Forum Map{% endtrans %}</h1>
-</div>
-<h3>{% trans %}General Links{% endtrans %}</h3>
-<div class="well" style="padding: 8px 0;">
-  <ul class="nav nav-list">
-    <li><a href="{% url 'index' %}">{% trans %}Forum Home{% endtrans %}</a></li>
-    {% if user.is_authenticated() %}
-    <li><a href="{% url 'newsfeed' %}">{% trans %}News Feed{% endtrans %}</a></li>
-    {% endif %}
-    <li class="divider"></li>
-    <li><a href="{% url 'users' %}">{% trans %}Browse Users{% endtrans %}</a></li>
-    {% if ranks %}
-    <li>
-      <ul class="nav nav-list">
-      {% for rank in ranks %}
-        <li><a href="{% if loop.first %}{% url 'users' %}{% else %}{% url 'users' rank_slug=rank.name_slug %}{% endif %}">{{ _(rank.name) }}</a></li>
-      {% endfor %}
-      </ul>
-    </li>
-    {% endif %}
-    {% if user.is_authenticated() %}
-    <li class="divider"></li>
-    <li><a href="{% url 'user' user=user.pk, username=user.username_slug %}">{% trans %}Your Profile{% endtrans %}</a></li>
-    <li><a href="{% url 'usercp' %}">{% trans %}Your Control Panel{% endtrans %}</a></li>
-    <li><a href="{% url 'alerts' %}">{% trans %}Your Notifications{% endtrans %}</a></li>
-    {% elif not user.is_crawler() %}
-    <li class="divider"></li>
-    <li><a href="{% url 'sign_in' %}">{% trans %}Sign In{% endtrans %}</a></li>
-    {% if settings.account_activation != 'block' %}
-    <li><a href="{% url 'register' %}">{% trans %}Register{% endtrans %}</a></li>
+{% block container %}
+<div class="page-header header-primary">
+  <div class="container">
+    {% if messages %}
+    <div class="messages-list">
+      {{ messages_list(messages) }}
+    </div>
     {% endif %}
-    <li><a href="{% url 'forgot_password' %}">{% trans %}Reset password{% endtrans %}</a></li>
-    <li><a href="{% url 'send_activation' %}">{% trans %}Resend activation e-mail{% endtrans %}</a></li>
-    {% endif %}
-  </ul>
+    <h1>{% trans %}Forum Map{% endtrans %}</h1>
+  </div>
 </div>
-<hr>
-<h3>{% trans %}Forum List{% endtrans %}</h3>
-{% if forums %}
-<div class="well" style="padding: 8px 0;">
-  <ul class="nav nav-list">
-    {% for forum in forums %}
-    {% if forum.subforums %}
-    <li class="nav-header">{{ forum.name }}</li>
-    {% for child in forum.subforums %}
-    {{ draw_forum(child) }}
-    {% endfor %}
-    {% endif %}
-    {% if not loop.last %}
-    <li class="divider"></li>
-    {% endif %}
-    {% endfor %}
-  </ul>
+
+<div class="container container-primary">
+  {% if forums %}
+  <div class="row">
+    <div class="span6">
+      {% for category in forums %}{% if loop.index is odd and category.subforums %}
+      {{ draw_category(category) }}
+      {% endif %}{% endfor %}
+    </div>
+    <div class="span6">
+      {% for category in forums %}{% if loop.index is even and category.subforums %}
+      {{ draw_category(category) }}
+      {% endif %}{% endfor %}
+    </div>
+  </div>
+  {% else %}
+  <p class="lead">{% trans %}Looks like no forums exist that you have permission to see.{% endtrans %}</p>
+  {% endif %}
 </div>
-{% else %}
-<p class="large">{% trans %}Looks like no forums exist that you have permission to see.{% endtrans %}</p>
-{% endif %}
 {% endblock %}
 
-{% macro draw_forum(forum) %}
-<li><a href="{{ forum.type|url(forum=forum.pk, slug=forum.slug) }}">{{ forum.name }}</a></li>
-{% if forum.subforums %}
-<li>
-  <ul class="nav nav-list">
-  {% for child in forum.subforums %}
-  {{ draw_forum(child) }}
-  {% endfor %}
-  </ul>
-</li>
-{% endif %}
+
+{% macro draw_category(category) %}
+<div class="forum-map-category{% if category.style %} forum-map-category-{{ category.style }}{% endif %}">
+  <table class="table">
+    <caption>{{ category.name }}</caption>
+    <tbody>
+      {% for forum in category.subforums%}
+      {{ draw_forum(forum) }}
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+{% endmacro %}
+
+{% macro draw_forum(forum, depth=0, branch='', last=false) %}
+<tr>
+  <td class="{% if depth -%}
+    forum-map-subforum
+    {%- else -%}
+    forum-map-forum
+    {%- endif %}"><h3>{% if depth %}{% if last -%}
+    {{ draw_tree(branch ~ 'l') }}
+    {%- else -%}
+    {{ draw_tree(branch ~ 't') }}
+    {%- endif %}{% endif %}<a href="{{ forum.type|url(slug=forum.slug, forum=forum.id) }}">{{ forum.name }}</a></h3></td>
+</tr>
+{% for subforum in forum.subforums %}
+  {% if depth %}
+    {% if last %}
+    {{ draw_forum(subforum, (depth + 1), (branch ~ 's'), loop.last) }}
+    {% else %}
+    {{ draw_forum(subforum, (depth + 1), (branch ~ 'i'), loop.last) }}
+    {% endif %}
+  {% else %}
+  {{ draw_forum(subforum, (depth + 1), '', loop.last) }}
+  {% endif %}
+{% endfor %}
+{% endmacro %}
+
+{% macro draw_tree(branch) %}
+{% for item in branch %}
+<span class="tree-{{ item }}"><span></span></span>
+{% endfor %}
 {% endmacro %}

templates/cranefly/forum_tos.html

@@ -8,7 +8,6 @@
 {{ macros.page_title(title=_('Terms of Service')) }}
 {%- endif %}{% endblock %}
 
-
 {% block container %}
 <div class="page-header header-primary">
   <div class="container">

templates/cranefly/index.html

@@ -20,7 +20,6 @@
           <caption>{{ category.name }}</caption>
           <tbody>
             {% for forum in category.subforums %}
-            {% do forum.__dict__.update({'is_read': True}) %}
             <tr>
               <td class="forum-icon"><span class="forum-icon-wrap{% if forum.type == 'redirect' %} forum-icon-redirect{% elif not forum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if forum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></span></td>
               <td class="forum-main">