edit page styles

lms/static/sass/base/_variables.scss

@@ -10,6 +10,7 @@ $fg-min-width: 810px;
 $sans-serif: 'Open Sans', $verdana;
 $body-font-family: $sans-serif;
 $serif: $georgia;
+$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
 
 $body-font-size: em(14);
 $body-line-height: golden-ratio(.875em, 1);

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

@@ -77,6 +77,10 @@ section.wiki {
     padding: 7px 15px !important;
     font-size: 0.72em;
     font-weight: 600;
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 
   .search-wiki {
@@ -127,12 +131,14 @@ section.wiki {
     width: flex-grid(9);
     margin-left: flex-gutter();
     color: $base-font-color;
+  }
 
+  &.view .main-article {
     h2 {
       padding-bottom: 8px;
       margin-bottom: 22px;
       border-bottom: 1px solid $light-gray;
-      font-size: 1.33em;
+      font-size: 1.6em;
       font-weight: bold;
       color: $base-font-color;
       text-transform: none;
@@ -143,19 +149,29 @@ section.wiki {
       margin-top: 40px;
       margin-bottom: 20px;
       font-weight: bold;
-      font-size: 1.1em;
+      font-size: 1.25em;
     }
 
     h4 {
-
+      margin: 30px 0 10px;
+      font-size: 1em;
+      color: #999;
+      font-weight: bold;
     }
 
     h5 {
-
+      margin: 20px 0 10px;
+      font-size: .8em;
+      font-weight: bold;
+      text-transform: uppercase;
     }
 
     h6 {
-
+      margin: 20px 0 10px;
+      font-size: .8em;
+      font-weight: bold;
+      color: #999;
+      text-transform: uppercase;
     }
 
     ul {
@@ -166,6 +182,16 @@ section.wiki {
 
     li {
       margin-bottom: 15px;
+      line-height: 1.6em;
+    }
+
+    pre {
+      padding: 10px;
+      border: 1px solid #ddd;
+      background: #f8f8f8;
+      border-radius: 4px;
+      font-size: 0.9em;
+      font-family: Monaco, monospace;
     }
   }
 
@@ -283,6 +309,133 @@ section.wiki {
 
 
 
+
+  /*-----------------
+
+    Edit
+
+  -----------------*/
+
+  label {
+    font-family: $sans-serif;
+    font-size: 0.9em;
+    font-weight: bold;
+    font-style: normal;
+    text-transform: uppercase;
+    color: #aaa;
+  }
+
+  input {
+    font-family: $sans-serif;
+    font-style: normal;
+    font-weight: normal;
+  }
+
+  #id_title,
+  #id_content {
+    width: 100%;
+  }
+
+  #id_content {
+    font-family: $monospace;
+  }
+
+  .markItUpContainer {
+    margin-right: 0;
+  }
+
+  .control-group {
+    margin-bottom: 20px;
+  }
+
+  #hint_id_summary {
+    display: inline-block;
+    font-size: 0.9em;
+    line-height: 32px;
+    margin-left: 15px;
+  }
+
+  .asteriskField {
+    display: none;
+  }
+
+  .btn {
+    @include button(simple, #eee);
+    font-size: 0.8em;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &.btn-primary {
+      @include button;
+      font-size: 0.8em;
+    }
+
+    &.btn-danger {
+      @include button(simple, $pink);
+      font-size: 0.8em;
+    }
+  }
+
+  #previewModal {
+    width: 960px;
+    z-index: 9999;
+    min-height: 500px;
+    margin-left: -480px;
+    top: 200px;
+
+    .modal-body {
+      padding-bottom: 8px;
+    }
+
+    iframe {
+      width: 100%;
+      min-height: 450px;
+      border: 0;
+    }
+
+    .modal-footer .btn {
+      margin-right: 10px;
+    }
+  }
+
+  #previewWindow body {
+    background: #f00 !important;
+  }
+
+
+
+
+
+  /*-----------------
+
+    Changes
+
+  -----------------*/
+
+  &.history {
+    .accordion {
+      margin-bottom: 15px;
+      padding: 15px;
+      border: 1px solid $light-gray;
+      background: #f9f9f9;
+      border-radius: 5px;
+    }
+
+    .collapse {
+      display: none;
+
+      &.in {
+        display: block;
+      }
+    }
+  }
+
+
+
+
+
   /*-----------------
 
     Alerts
@@ -291,7 +444,7 @@ section.wiki {
 
   .alert {
     position: relative;
-    top: -35px;
+    top: -15px;
     margin-bottom: 24px;
     padding: 8px 12px;
     border: 1px solid #EBE8BF;
@@ -309,3 +462,26 @@ section.wiki {
     }
   }
 }
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, .4);
+}
+
+.modal-preview {
+  min-width: 0;
+}
+
+.modal-preview .container {
+  padding: 50px;
+}
+
+.modal-preview .main-article {
+  width: 100% !important;
+  margin-left: 0;
+}
\ No newline at end of file

lms/templates/wiki/article.html

@@ -13,7 +13,10 @@
   <div class="article-wrapper">
     
     <article class="main-article">
+        {% if selected_tab != "edit" %}
           <h1>{{ article.current_revision.title }}</h1>  
+        {% endif %}
+        
         {% block wiki_contents_tab %}
         {% wiki_render article %}
         {% endblock %}      

lms/templates/wiki/base.html

@@ -14,7 +14,7 @@
     {% include "course_navigation.html" with active_page_context="wiki" %}
   {% endif %}
 
-  <section class="container wiki">
+  <section class="container wiki {{ selected_tab }}">
 
     {% block wiki_body %}
       

lms/templates/wiki/edit.html

+{% extends "wiki/article.html" %}
+{% load wiki_tags i18n %}
+{% load url from future %}
+
+{% block pagetitle %}{% trans "Edit" %}: {{ article.current_revision.title }}{% endblock %}
+
+{% block wiki_contents_tab %}
+
+<form method="POST" class="form-horizontal" id="article_edit_form" enctype="multipart/form-data">
+  {% include "wiki/includes/editor.html" %}
+  <div class="form-actions">
+      <button type="submit" name="preview" value="1" class="btn btn-large" onclick="$('#previewModal').modal('show'); this.form.target = 'previewWindow'; this.form.action = '{% url 'wiki:preview' path=urlpath.path article_id=article.id %}';">
+        <span class="icon-eye-open"></span>
+        {% trans "Preview" %}
+      </button>
+      <button type="submit" name="save" value="1" class="btn btn-large btn-primary" onclick="this.form.target=''; this.form.action='{% url 'wiki:edit' path=urlpath.path article_id=article.id %}'">
+        <span class="icon-ok"></span>
+        {% trans "Save changes" %}
+      </button>
+      
+      <a href="{% url 'wiki:delete' path=urlpath.path article_id=article.id %}" class="pull-right btn btn-danger">
+        <span class="icon-trash"></span>
+        {% trans "Delete article" %}
+      </a>
+      
+  </div>
+  <div class="modal hide fade" id="previewModal">
+    <div class="modal-body">
+      <iframe name="previewWindow" frameborder="0"></iframe>
+    </div>
+    <div class="modal-footer">
+      <a href="#" class="btn btn-large" data-dismiss="modal">
+        <span class="icon-circle-arrow-left"></span>
+        {% trans "Back to editor" %}
+      </a>
+      <button type="submit" name="save" value="1" class="btn btn-large btn-primary" onclick="this.form.target=''; this.form.action='{% url 'wiki:edit' path=urlpath.path article_id=article.id %}'">
+        <span class="icon-ok"></span>
+        {% trans "Save changes" %}
+      </button>
+    </div>
+  </div>     
+</form>
+
+{% endblock %}
+

lms/templates/wiki/includes/editor.html

+{% load wiki_tags i18n %}
+{% include "wiki/includes/editormedia.html" %}
+
+<div>
+{% wiki_form edit_form %}
+<script language="javascript">
+  $(document).ready(function() {
+    $("#id_revision").val('{{ article.current_revision.id }}');
+  });
+</script>
+</div>
+
+<div>
+  <div >
+    {% for plugin in sidebar %}
+
+    <div class="accordion" id="accordion_{{ plugin.slug }}">
+
+      <div class="accordion-group">
+        
+        <div class="accordion-heading">
+          <a class="accordion-toggle" href="#collapse_{{ plugin.slug }}" data-toggle="collapse">
+            <h2>{{ plugin.sidebar.headline }} <span class="{{ plugin.sidebar.icon_class }}"></span></h2>
+          </a>
+        </div>
+        
+        <div id="collapse_{{ plugin.slug }}" class="accordion-body collapse{% if form_images.errors %} in{% endif %}">
+          <div class="accordion-inner form-vertical">
+            {% if plugin.sidebar.template %}
+              {% with form_images as form and plugin as plugin %}
+                {% include plugin.sidebar.template %}
+              {% endwith %}
+            {% endif %}
+          </div>
+        </div>
+      
+      </div>
+    </div>
+
+    {% endfor %}
+  </div>
+</div>

lms/templates/wiki/preview_inline.html

@@ -4,8 +4,9 @@
 <head>
   {% compressed_css 'course' %}
 </head>
-<body>
-  <section class="content-wrapper">
+<body class="modal-preview">
+  <section class="container wiki view">
+    <div class="main-article">
       {% if revision %}
         <div class="alert alert-info">
           <strong>{% trans "Previewing revision" %}:</strong> {{ revision.created }} (#{{ revision.revision_number }}) by {% if revision.user %}{{ revision.user }}{% else %}{% if user|is_moderator %}{{ revision.ip_address|default:"anonymous (IP not logged)" }}{% else %}{% trans "anonymous (IP logged)" %}{% endif %}{% endif %}
@@ -24,6 +25,7 @@
       <h1 class="page-header">{{ title }}</h1>
 
       {% wiki_render article content %}
+    </div>
   </section>
 </body>
 </html>