fixed wiki styles

lms/static/sass/course/base/_base.scss

@@ -25,11 +25,11 @@ a {
 }
 
 .container {
-  padding: 1.4em 0;
+  padding: 1.4em 0 0 0;
 
   > div {
     width: 100%;
-    box-sizing: border-box;
+    @include box-sizing(border-box);
     border-radius: 3px;
     border: 1px solid #ccc;
     background: #fff;

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

 section.wiki {
   padding-top: 25px;
 
-  > header {
-    height: 33px;
-    margin-bottom: 36px;
-    padding-bottom: 26px;
-    border-bottom: 1px solid $light-gray;
-  }
-
   .pull-left {
     float: left;
   }
@@ -16,6 +9,18 @@ section.wiki {
     float: right;
   }
 
+  .wiki-wrapper {
+    @include clearfix;
+
+    > header {
+      height: 33px;
+      padding: 24px 0 26px;
+      border-bottom: 1px solid #ccc;
+      border-radius: 3px 3px 0 0;
+      background-color: $sidebar-color;
+    }
+  }
+
 
 
   /*-----------------
@@ -27,7 +32,7 @@ section.wiki {
   .breadcrumb {
     list-style: none;
     padding-left: 0;
-    margin: 0 0 0 flex-gutter();
+    margin: 0 0 0 40px;
 
     li {
       float: left;
@@ -68,7 +73,7 @@ section.wiki {
   .global-functions {
     display: block;
     width: auto;
-    margin-right: flex-gutter();
+    margin-right: 20px;
   }
 
   .add-article-btn {
@@ -129,8 +134,9 @@ section.wiki {
   .main-article {
     float: left;
     width: flex-grid(9);
-    margin-left: flex-gutter();
+    padding: 40px 0 40px 40px;
     color: $base-font-color;
+    @include box-sizing(border-box);
   }
 
   &.view .main-article {
@@ -206,13 +212,14 @@ section.wiki {
 
   .article-functions {
     float: left;
-    width: flex-grid(2) + flex-gutter();
-    margin-left: flex-grid(1);
+    width: flex-grid(3);
+    padding: 40px 40px;
+    @include box-sizing(border-box);
 
     .timestamp {
-      margin: 4px 0 15px;
-      padding: 0 0 15px 5px;
-      border-bottom: 1px solid $light-gray;      
+      margin-top: 15px;
+      padding: 15px 0 0 10px;
+      border-top: 1px solid $light-gray;      
 
       .label {
         font-size: 0.7em;
@@ -236,7 +243,8 @@ section.wiki {
         a {
           color: $blue;
 
-          .icon-view {
+          .icon-view,
+          .icon-home {
             background-position: -25px 0;
           }
 
@@ -244,11 +252,13 @@ section.wiki {
             background-position: -25px -25px;
           }
 
-          .icon-changes {
+          .icon-changes,
+          .icon-time {
             background-position: -25px -49px;
           }
 
-          .icon-attachments {
+          .icon-attachments,
+          .icon-file {
             background-position: -25px -73px;
           }
 
@@ -280,7 +290,8 @@ section.wiki {
         background: url(../images/wiki-icons.png) no-repeat;
       }
 
-      .icon-view {
+      .icon-view,
+      .icon-home {
         background-position: 0 0;
       }
 
@@ -288,11 +299,13 @@ section.wiki {
         background-position: 0 -25px;
       }
 
-      .icon-changes {
+      .icon-changes,
+      .icon-time {
         background-position: 0 -49px;
       }
 
-      .icon-attachments {
+      .icon-attachments,
+      .icon-file {
         background-position: 0 -73px;
       }
 
@@ -706,6 +719,10 @@ section.wiki {
       font-size: 0.8em;
     }
 
+    .attachment-actions {
+      width: 175px;
+    }
+
     .attachment-actions .btn {
       float: right;
     }

lms/templates/wiki/article.html

@@ -23,13 +23,14 @@
     </article>
 
     <div class="article-functions">
+      
+      <ul class="nav nav-tabs">
+        {% include "wiki/includes/article_menu.html" %}
+      </ul>
       <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>
     </div>
   </div>
 

lms/templates/wiki/base.html

@@ -51,24 +51,24 @@
   {% endif %}
 
   <section class="container wiki {{ selected_tab }}">
+    <div class="wiki-wrapper">
+      {% block wiki_body %}
+        
+        {% block wiki_breadcrumbs %}{% endblock %}
 
-    {% 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 %}
-
+        {% 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 %}
+    </div>
   </section>
 
 {% endblock %}

lms/templates/wiki/includes/article_menu.html

@@ -3,7 +3,7 @@
 
 <li class="${"active" if selected_tab == "view" else ""}">
   <a href="${reverse('wiki:get', kwargs={'article_id' : article.id, 'path' : urlpath.path})}">
-    <span class="icon-home"></span>
+    <span class="icon-home icon"></span>
     View
   </a>
 </li>
@@ -11,7 +11,7 @@
 %if article.can_write(user):
   <li class="${"active" if selected_tab == "edit" else ""}">
     <a href="${reverse('wiki:edit', kwargs={'article_id' : article.id, 'path' : urlpath.path})}">
-      <span class="icon-edit"></span>
+      <span class="icon-edit icon"></span>
       Edit
     </a>
   </li>
@@ -19,7 +19,7 @@
 
 <li class="${"active" if selected_tab == "history" else ""}">
   <a href="${reverse('wiki:history', kwargs={'article_id' : article.id, 'path' : urlpath.path})}">
-    <span class="icon-time"></span>
+    <span class="icon-changes icon"></span>
     Changes
   </a>
 </li>
@@ -28,7 +28,7 @@
   %if hasattr(plugin, "article_tab"):
     <li class="${"active" if selected_tab == plugin.slug else ""}">
       <a href="${reverse('wiki:plugin', kwargs={'slug' : plugin.slug, 'article_id' : article.id, 'path' : urlpath.path}) }">
-        <span class="${plugin.article_tab[1]}"></span>
+        <span class="${plugin.article_tab[1]} icon"></span>
         ${plugin.article_tab[0]}
       </a>
     </li>
@@ -38,7 +38,7 @@
 %if not user.is_anonymous():
 <li class="${"active" if selected_tab == "settings" else ""}">
   <a href="${reverse('wiki:settings', kwargs={'article_id' : article.id, 'path' : urlpath.path})}">
-    <span class="icon-wrench"></span>
+    <span class="icon-settings icon"></span>
     Settings
   </a>
 </li>