started styles

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

@@ -1,158 +1,166 @@
-div.wiki-wrapper {
-  display: table;
-  width: 100%;
+section.wiki {
+  padding-top: 25px;
 
-  section.wiki-body {
-    @extend .clearfix;
-    @extend .content;
-    @include border-radius(0 4px 4px 0);
-    position: relative;
+  header {
+    height: 33px;
+    margin-bottom: 50px;
+    padding-bottom: 26px;
+    border-bottom: 1px solid $light-gray;
+  }
 
-    header {
-      @extend .topbar;
-      @include border-radius(0 4px 0 0);
-      height:46px;
-      overflow: hidden;
+  .pull-left {
+    float: left;
+  }
 
-      &:empty {
-        border-bottom: 0;
-        display: none !important;
-      }
+  .pull-right {
+    float: right;
+  }
 
-      a {
-        @extend .block-link;
-      }
 
-      p {
-        float: left;
-        line-height: 46px;
-        margin-bottom: 0;
-        padding-left: lh();
-      }
 
-      ul {
-        float: right;
-        list-style: none;
+  /*-----------------
 
-        li {
-          float: left;
+    Breadcrumbs
 
-          input[type="button"] {
-            @extend .block-link;
-            background-position: 12px center;
-            background-repeat: no-repeat;
-            border: 0;
-            border-left: 1px solid darken(#f6efd4, 20%);
-            @include border-radius(0);
-            @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
-            display: block;
-            font-size: 12px;
-            font-weight: normal;
-            letter-spacing: 1px;
-            line-height: 46px;
-            margin: 0;
-            padding: 0 lh() 0 38px;
-            text-shadow: none;
-            text-transform: uppercase;
-            @include transition();
+  -----------------*/
 
-            &.view {
-              background-image: url('../images/sequence-nav/view.png');
-            }
+  .breadcrumb {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
 
-            &.history {
-              background-image:  url('../images/sequence-nav/history.png');
-            }
-
-            &.edit {
-              background-image:  url('../images/sequence-nav/edit.png');
-            }
-
-            &:hover {
-              background-color: transparent;
-            }
-          }
-        }
-      }
-    }
-
-     h2.wiki-title {
-        @include box-sizing(border-box);
-        display: inline-block;
-        float: left;
-        margin-bottom: 15px;
-        margin-top: 0;
-        padding-right: flex-gutter(9);
-        vertical-align: top;
-        width: flex-grid(2.5, 9);
-
-        @media screen and (max-width:900px) {
-          border-right: 0;
-          display: block;
-          width: auto;
-        }
-
-        @media print {
-          border-right: 0;
-          display: block;
-          width: auto;
-        }
-      }
-
-    p {
-      line-height: 1.6em;
-    }
-
-    section.results {
-      border-left: 1px dashed #ddd;
-      @include box-sizing(border-box);
-      display: inline-block;
+    li {
       float: left;
-      padding-left: 10px;
-      width: flex-grid(6.5, 9);
+      margin-right: 10px;
+      font-size: 0.9em;
+      line-height: 31px;
 
-      @media screen and (max-width:900px) {
-        border: 0;
-        display: block;
-        padding-left: 0;
-        width: 100%;
-        width: auto;
-      }
-
-      @media print {
-        display: block;
-        padding: 0;
-        width: auto;
-
-        canvas, img {
-          page-break-inside: avoid;
-        }
-      }
-
-      ul.article-list {
-        margin-left: 15px;
-        width: 100%;
-
-        @media screen and (max-width:900px) {
-          margin-left: 0px;
-        }
-
-        li {
-          border-bottom: 1px solid #eee;
-          list-style: none;
-          margin: 0;
-          padding: 10px 0;
-
-          &:last-child {
-            border-bottom: 0;
-          }
-
-          h3 {
-            font-size: 18px;
-            font-weight: normal;
-          }
-        }
+      &:after {
+        content: '›';
+        display: inline-block;
+        margin-left: 10px;
+        color: $base-font-color;
       }
     }
   }
-}
+
+  .dropdown-menu {
+    display: none;
+  }
+
+
+
+  /*-----------------
+
+    Global Functions
+
+  -----------------*/
+
+  .global-functions {
+    display: block;
+    width: auto;
+  }
+
+  .add-article-btn {
+    @include button(simple, #eee);
+    margin-left: 25px;
+    padding: 7px 15px !important;
+    font-size: 0.72em;
+    font-weight: 600;
+  }
+
+  .search-wiki {
+    margin-top: 3px;
+
+    input {
+      width: 180px;
+      height: 27px;
+      padding: 0 15px 0 35px;
+      background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6;
+      border: 1px solid #c8c8c8;
+      border-radius: 14px;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) inset;
+      font-family: $sans-serif;
+      font-size: 12px;
+      outline: none;
+      @include transition(border-color .1s);
+
+      &:-webkit-input-placholder {
+        font-style: italic;
+      }
+
+      &:focus {
+        border-color: $blue;
+      }
+    }
+  }
+
+
+
+  /*-----------------
+
+    Article
+
+  -----------------*/
+
+  h1 {
+    font-weight: bold;
+    letter-spacing: 0;
+  }
+
+  .main-article {
+    float: left;
+    width: flex-grid(9);
+
+    h2 {
+      font-weight: bold;
+      text-transform: none;
+      letter-spacing: 0;
+      font-size: 1.33em;
+    }
+  }
+
+  .article-functions {
+    float: left;
+    width: flex-grid(2);
+    margin-left: flex-grid(1);
+  }
+
+  .nav-tabs {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      margin-left: 20px;
+    }
+  }
+
+
+
+  /*-----------------
+
+    Alerts
+
+  -----------------*/
+
+  .alert {
+    position: relative;
+    top: -35px;
+    margin-bottom: 24px;
+    padding: 8px 12px;
+    border: 1px solid #EBE8BF;
+    border-radius: 3px;
+    background: $yellow;
+    font-size: 0.9em;
+
+    .close {
+      position: absolute;
+      right: 12px;
+      font-size: 1.3em;
+      top: 6px;
+      color: #999;
+      text-decoration: none;
+    }
+  }
+}

lms/templates/wiki/article.html

@@ -0,0 +1,36 @@
+{% extends "wiki/base.html" %}
+{% load wiki_tags i18n %}
+{% load url from future %}
+
+{% block pagetitle %}{{ article.current_revision.title }}{% endblock %}
+
+{% block wiki_breadcrumbs %}
+{% include "wiki/includes/breadcrumbs.html" %}
+{% endblock %}
+
+{% block wiki_contents %}
+
+  <div class="tabbable tabs-top" style="margin-top: 20px;">
+    <article class="main-article">
+      <h1 style="margin-top: -10px;">{{ article.current_revision.title }}</h1>
+      <div class="tab-content">
+        {% block wiki_contents_tab %}
+        {% wiki_render article %}
+        {% endblock %}
+      </div>
+    </article>
+
+    <div class="article-functions">
+      <ul class="nav nav-tabs">
+        {% include "wiki/includes/article_menu.html" %}
+      </ul>
+    </div>
+  </div>
+
+
+
+{% endblock %}
+
+{% block footer_prepend %}
+  <p style="margin-bottom: 10px;"><em>{% trans "This article was last modified:" %} {{ article.current_revision.modified }}</em></p>
+{% endblock %}

lms/templates/wiki/base.html

@@ -12,20 +12,25 @@
     {% include "course_navigation.html" with active_page_context="wiki" %}
   {% endif %}
 
-  {% block wiki_body %}
-    
-    {% if messages %}
-      {% for message in messages %}
-        <div class="alert alert-{{ message.tags }}">
-          <a class="close" data-dismiss="alert" href="#">&times;</a>
-          {{ message }}
-        </div>
-      {% endfor %}
-    {% endif %}
-    
-    {% block wiki_breadcrumbs %}{% endblock %}
-    
-    {% block wiki_contents %}{% endblock %}
-    
-  {% endblock %}
+  <section class="container wiki">
+
+    {% block wiki_body %}
+      
+      {% block wiki_breadcrumbs %}{% endblock %}
+
+      {% if messages %}
+        {% for message in messages %}
+          <div class="alert alert-{{ message.tags }}">
+            <a class="close" data-dismiss="alert" href="#">&times;</a>
+            {{ message }}
+          </div>
+        {% endfor %}
+      {% endif %}
+      
+      {% block wiki_contents %}{% endblock %}
+      
+    {% endblock %}
+
+  </section>
+
 {% endblock %}

lms/templates/wiki/includes/article_menu.html

@@ -0,0 +1,47 @@
+{% load i18n wiki_tags %}{% load url from future %}
+
+{% with selected_tab as selected %}
+
+
+
+
+
+
+
+<li class="{% if selected == "view" %} active{% endif %}">
+  <a href="{% url 'wiki:get' article_id=article.id path=urlpath.path %}">
+    <span class="icon-home"></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>
+    {% 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>
+    {% 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>
+      {{ plugin.article_tab.0 }}
+    </a>
+  </li>
+{% endfor %}
+
+<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>
+    {% trans "Settings" %}
+  </a>
+  {% endif %}
+</li>
+
+{% endwith %}

lms/templates/wiki/includes/breadcrumbs.html

@@ -0,0 +1,52 @@
+{% load i18n %}{% load url from future %}
+{% if urlpath %}
+
+<header>
+  <ul class="breadcrumb pull-left" class="">
+    {% for ancestor in urlpath.get_ancestors.all %}
+      <li><a href="{% url 'wiki:get' path=ancestor.path %}">{{ ancestor.article.current_revision.title }}</a></li>
+    {% endfor %}
+    <li class="active"><a href="{% url 'wiki:get' path=urlpath.path %}">{{ article.current_revision.title }}</a></li>
+  </ul>
+
+ 
+  <div class="pull-left" style="margin-left: 10px;">
+    <div class="btn-group">
+      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="padding: 7px;" title="{% trans "Sub-articles for" %} {{ article.current_revision.title }}">
+        <span class="icon-list"></span>
+      <span class="caret"></span>
+      </a>
+      <ul class="dropdown-menu">
+        {% for child in children_slice %}
+          <li>
+            <a href="{% url 'wiki:get' path=child.path %}">
+              {{ child.article.current_revision.title }}
+            </a>
+          </li>
+          {% empty %}
+          <li><a href="#"><em>{% trans "No sub-articles" %}</em></a></li>
+        {% endfor %}
+        {% if children_slice_more %}
+        <li><a href="#"><em>{% trans "...and more" %}</em></a></li>
+        {% endif %}
+        <li class="divider"></li>
+        <li>
+          <a href="" onclick="alert('TODO')">{% trans "List sub-pages" %} &raquo;</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  
+
+  <div class="global-functions pull-right">
+    <form class="search-wiki pull-left">
+      <input type="search" placeholder="search wiki" />
+    </form>
+    <a class="add-article-btn btn pull-left" href="{% url 'wiki:create' path=urlpath.path %}" style="padding: 7px;">
+      <span class="icon-plus"></span>
+      {% trans "Add article" %}
+    </a>
+  </div>
+</header>
+
+{% endif %}