added styles for main article, sidebar and breadcrumb

lms/static/sass/course/wiki/_wiki.scss

@@ -3,7 +3,7 @@ section.wiki {
 
   header {
     height: 33px;
-    margin-bottom: 50px;
+    margin-bottom: 36px;
     padding-bottom: 26px;
     border-bottom: 1px solid $light-gray;
   }
@@ -27,13 +27,22 @@ section.wiki {
   .breadcrumb {
     list-style: none;
     padding-left: 0;
-    margin: 0;
+    margin: 0 0 0 flex-gutter();
 
     li {
       float: left;
       margin-right: 10px;
       font-size: 0.9em;
-      line-height: 31px;
+      line-height: 31px;      
+
+      a {
+        display: inline-block;
+        max-width: 200px;
+        overflow: hidden;
+        height: 30px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
 
       &:after {
         content: '›';
@@ -59,6 +68,7 @@ section.wiki {
   .global-functions {
     display: block;
     width: auto;
+    margin-right: flex-gutter();
   }
 
   .add-article-btn {
@@ -103,6 +113,10 @@ section.wiki {
 
   -----------------*/
 
+  .article-wrapper {
+
+  }
+
   h1 {
     font-weight: bold;
     letter-spacing: 0;
@@ -111,19 +125,79 @@ section.wiki {
   .main-article {
     float: left;
     width: flex-grid(9);
+    margin-left: flex-gutter();
+    color: $base-font-color;
 
     h2 {
+      padding-bottom: 8px;
+      margin-bottom: 22px;
+      border-bottom: 1px solid $light-gray;
+      font-size: 1.33em;
       font-weight: bold;
+      color: $base-font-color;
       text-transform: none;
       letter-spacing: 0;
-      font-size: 1.33em;
+    }
+
+    h3 {
+      margin-top: 40px;
+      margin-bottom: 20px;
+      font-weight: bold;
+      font-size: 1.1em;
+    }
+
+    h4 {
+
+    }
+
+    h5 {
+
+    }
+
+    h6 {
+
+    }
+
+    ul {
+      font-size: inherit;
+      line-height: inherit;
+      color: inherit;
+    }
+
+    li {      
+      margin-bottom: 15px;
     }
   }
 
+
+
+
+  /*-----------------
+
+    Sidebar
+
+  -----------------*/
+
   .article-functions {
     float: left;
-    width: flex-grid(2);
+    width: flex-grid(2) + flex-gutter();
     margin-left: flex-grid(1);
+
+    .timestamp {
+      margin: 4px 0 15px;
+      padding: 0 0 15px 5px;
+      border-bottom: 1px solid $light-gray;      
+
+      .label {
+        font-size: 0.7em;
+        color: #aaa;
+        text-transform: uppercase;
+      }
+
+      .date {
+        font-size: 0.9em;
+      }
+    }
   }
 
   .nav-tabs {
@@ -132,7 +206,78 @@ section.wiki {
     margin: 0;
 
     li {
-      margin-left: 20px;
+      &.active {
+        a {
+          color: $blue;
+
+          .icon-view {
+            background-position: -25px 0;
+          }
+
+          .icon-edit {
+            background-position: -25px -25px;
+          }
+
+          .icon-changes {
+            background-position: -25px -49px;
+          }
+
+          .icon-attachments {
+            background-position: -25px -73px;
+          }
+
+          .icon-settings {
+            background-position: -25px -99px;
+          }
+
+          &:hover {
+            background: none;
+          }
+        }
+      }
+    }
+
+    a {
+      display: block;
+      padding: 2px 4px;
+      border-radius: 3px;
+      font-size: 0.9em;
+      line-height: 25px;
+      color: #8f8f8f;
+
+      .icon {
+        float: left;
+        display: block;
+        width: 25px;
+        height: 25px;
+        margin-right: 3px;
+        background: url(../images/wiki-icons.png) no-repeat;
+      }
+
+      .icon-view {
+        background-position: 0 0;
+      }
+
+      .icon-edit {
+        background-position: 0 -25px;
+      }
+
+      .icon-changes {
+        background-position: 0 -49px;
+      }
+
+      .icon-attachments {
+        background-position: 0 -73px;
+      }
+
+      .icon-settings {
+        background-position: 0 -99px;
+      }
+
+      &:hover {
+        background-color: #f6f6f6;
+        text-decoration: none;
+      }
     }
   }
 

lms/templates/wiki/article.html

@@ -10,17 +10,20 @@
 
 {% block wiki_contents %}
 
-  <div class="tabbable tabs-top" style="margin-top: 20px;">
+  <div class="article-wrapper">
+    
     <article class="main-article">
-      <h1 style="margin-top: -10px;">{{ article.current_revision.title }}</h1>
-      <div class="tab-content">
+        <h1>{{ article.current_revision.title }}</h1>  
         {% block wiki_contents_tab %}
         {% wiki_render article %}
-        {% endblock %}
-      </div>
+        {% endblock %}      
     </article>
 
     <div class="article-functions">
+      <div class="timestamp">
+        <span class="label">{% trans "Last modified:" %}</span><br />
+        <span class="date">{{ article.current_revision.modified }}</span>
+      </div>
       <ul class="nav nav-tabs">
         {% include "wiki/includes/article_menu.html" %}
       </ul>
@@ -32,5 +35,5 @@
 {% endblock %}
 
 {% block footer_prepend %}
-  <p style="margin-bottom: 10px;"><em>{% trans "This article was last modified:" %} {{ article.current_revision.modified }}</em></p>
+  <p><em>{% trans "This article was last modified:" %} {{ article.current_revision.modified }}</em></p>
 {% endblock %}

lms/templates/wiki/includes/article_menu.html

@@ -10,26 +10,26 @@
 
 <li class="{% if selected == "view" %} active{% endif %}">
   <a href="{% url 'wiki:get' article_id=article.id path=urlpath.path %}">
-    <span class="icon-home"></span>
+    <span class="icon icon-view"></span>
     {% trans "View" %}
   </a>
 </li>
 <li class="{% if selected == "edit" %} active{% endif %}">
   <a href="{% url 'wiki:edit' article_id=article.id path=urlpath.path %}">
-    <span class="icon-edit"></span>
+    <span class="icon icon-edit"></span>
     {% trans "Edit" %}
   </a>
 </li>
 <li class="{% if selected == "history" %} active{% endif %}">
   <a href="{% url 'wiki:history' article_id=article.id path=urlpath.path %}">
-    <span class="icon-time"></span>
+    <span class="icon icon-changes"></span>
     {% trans "Changes" %}
   </a>
 </li>
 {% for plugin in article_tabs %}
   <li class="{% if selected == plugin.slug %} active{% endif %}">
     <a href="{% url 'wiki:plugin' slug=plugin.slug article_id=article.id path=urlpath.path %}">
-      <span class="{{ plugin.article_tab.1 }}"></span>
+      <span class="icon icon-attachments {{ plugin.article_tab.1 }}"></span>
       {{ plugin.article_tab.0 }}
     </a>
   </li>
@@ -38,7 +38,7 @@
 <li class="{% if selected == "settings" %} active{% endif %}">
   {% if not user.is_anonymous %}
   <a href="{% url 'wiki:settings' article_id=article.id path=urlpath.path %}">
-    <span class="icon-wrench"></span>
+    <span class="icon icon-settings"></span>
     {% trans "Settings" %}
   </a>
   {% endif %}