Working on books styling and features. Adding read only and overrideable sections to editor and templates.

2026-02-12 12:45:18 -08:00 · 2018-04-11 10:09:01 -04:00
parent 8c931b1147
commit bb58eeabb0
12 changed files with 539 additions and 261 deletions
--- a/compile_server/app/static/book_base.css
+++ b/compile_server/app/static/book_base.css
@@ -44,6 +44,10 @@ This is the parent `<div>` that contains the menu and the content area.
 The content `<div>` is where all your content goes.
 */

+#main {
+    margin: 0 0 0 330px;
+}
+
 .content {
    margin: 0 auto;
    padding: 0 2em;
@@ -105,7 +109,6 @@ appears on the left side of the page.
    background: #191818;
    overflow-y: auto;
    overflow-x: hidden;
-    overflow-wrap: break-word;
    -webkit-overflow-scrolling: touch;
 }

@@ -116,7 +119,9 @@ appears on the left side of the page.
 #sidebar a {
    color: #999;
    border: none;
-    padding: 0.6em 0 0.6em 0.6em;
+    padding: 0.6em 0.6em 0.6em 0.6em;
+    
+    white-space: normal;
 }

 /*
@@ -138,6 +143,10 @@ appears on the left side of the page.
    border-top: 1px solid #333;
 }

+#sidebar ul ul {
+    margin-left: 15px;
+}
+
 /*
        Change color of the anchor links on hover/focus.
        */
@@ -240,7 +249,7 @@ small screens.
 Hides the menu at `48em`, but modify this based on your app's needs.
 */

-@media (min-width: 48em) {
+@media (min-width: 1165px) {

    .header,
    .content {
@@ -268,7 +277,7 @@ Hides the menu at `48em`, but modify this based on your app's needs.
    }
 }

-@media (max-width: 48em) {
+@media (max-width: 1165px) {
    /* Only apply this when the window is small. Otherwise, the following
    case results in extra padding on the left:
        * Make the window small.
--- a/compile_server/app/static/common.css
+++ b/compile_server/app/static/common.css
@@ -53,3 +53,9 @@ div.output_row button{
   margin-right:4px;
   margin-top:2px;
 }
+
+.read-only {
+    background-color: #c0c0c0;
+    opacity: 0.2;
+    position: absolute;
+}
--- a/compile_server/app/static/editors.js
+++ b/compile_server/app/static/editors.js
--- a/compile_server/app/static/sidebar.js
+++ b/compile_server/app/static/sidebar.js
@@ -1,13 +1,25 @@
-$(document).ready( function() {
+$( document ).ready( function() {
    $( document ).on( "scroll", onScroll);

-    $( ".toc-link" ).click( function() {
+    $( ".toc-link" ).click( function(e) {

        var hid = lid2hid( $( this ).attr( 'id' ) );
+        var div_position = $( hid ).offset().top;
+        var padding = 12;
+        var header_offset = $( "#title_header" ).outerHeight();

        $( 'html, body' ).animate( {
-            scrollTop: $( hid ).offset().top
+            scrollTop: (div_position - header_offset - padding)
        }, 800);
+        
+        if ( $( "#sidebar" ).hasClass( 'active' ) )
+            toggleAll(e);
+    });
+    
+    $( "#sidebarLink" ).click( toggleAll );
+    $( "#main" ).click( function(e) {
+        if ( $( "#sidebar" ).hasClass( 'active' ) )
+            toggleAll(e);
    });

    onScroll();
@@ -42,4 +54,14 @@ function inView(elem) {
    bounds.bottom = bounds.top + $( elem ).outerHeight();

    return ((bounds.top <= viewport.bottom) && (bounds.bottom >= viewport.top));
-}
+}
+
+function toggleAll(e) {
+    var active = 'active';
+
+    e.preventDefault();
+    
+    $( "#wrapper" ).toggleClass( active );
+    $( "#sidebar" ).toggleClass( active );
+    $( "#sidebarLink" ).toggleClass( active );
+}
--- a/compile_server/app/templates/book_base.html
+++ b/compile_server/app/templates/book_base.html
@@ -10,13 +10,13 @@
    
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

-<!--    <link rel="stylesheet" href="{% static "common.css" %}" />-->
+    <link rel="stylesheet" href="{% static "common.css" %}" />
    <link rel="stylesheet" href="{% static "book_base.css" %}" />
 </head>

 <body>

-    <div class="wrapper">
+    <div id="wrapper">
        {% block reader %}{% endblock %}
    </div>    

--- a/compile_server/app/templates/readerpage.html
+++ b/compile_server/app/templates/readerpage.html
@@ -13,7 +13,7 @@
 </div>

 <div id="main">
-    <div class="header">
+    <div id="title_header" class="header">
        <h1>{{ book_info.title }}</h1>
        <h2><a href="{{ HTTP_HOST }}/books/">Back to book list</a></h2>
    </div>
--- a/compile_server/app/views.py
+++ b/compile_server/app/views.py
@@ -5,7 +5,7 @@ from django.shortcuts import render

 # Create your views here.
 from bs4 import BeautifulSoup
-import docutils
+from docutils import core
 import markdown
 import os
 import yaml
@@ -125,10 +125,12 @@ def md_filter(text):


 def rst_filter(text):
-    return docutils.core.publish_parts(text, writer_name='html')['html_body']
+    parts = core.publish_parts(text, writer_name='html')
+    return parts['body_pre_docinfo'] + parts['fragment']


-def toc_filter(htmldata):
+def toc_filter(htmldata):   
+    
    def append_li(ul, i, h):
        h['id'] = "header" + str(i)
        new_link_tag = toc_soup.new_tag('a', href='#')
--- a/resources/books/example/info.yaml
+++ b/resources/books/example/info.yaml
@@ -7,5 +7,6 @@ pages:
  - "part1-chapter2.rst"
  - "part2-chapter1.md"
  - "part2-chapter2.rst"
+  - "part2-chapter1.rst"
 ...

--- a/resources/books/example/part1-chapter1.md
+++ b/resources/books/example/part1-chapter1.md
@@ -3,10 +3,23 @@ Part 1 Chapter 1

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id massa felis. Nam eget risus sit amet ante tempor lacinia. Mauris ut nunc sem. Cras mattis, nibh quis fermentum porttitor, arcu tortor porttitor magna, ac adipiscing quam urna at lectus. Ut at dolor in elit tempor ultrices sagittis sed lacus. Nullam a lectus mauris. Pellentesque molestie, leo in auctor semper, magna sem mattis tellus, a consectetur nisl tellus volutpat quam. Etiam ultricies risus sed sapien convallis aliquet. Curabitur vehicula purus vitae justo commodo facilisis. Quisque at porta ipsum. Sed purus leo, mattis sed ultricies ac, ultricies eget lacus. Sed ac nibh est. Suspendisse sed orci nisl. Vestibulum ultrices metus sapien, sed interdum nunc. In arcu neque, sollicitudin ut porta eu, viverra at elit. Nam accumsan condimentum metus nec accumsan. Nunc porta consectetur nisi in ornare. Vestibulum tempor mollis dui quis luctus. Aliquam dolor enim, tristique a blandit eu, auctor ut odio.

-### Test
+Test Editor
+------------
 This is a test of inserting code blocks in the markdown

- <div example_editor="Hello world runnable example"></div>
+ <div example_editor="Hello world runnable example" inline="true">
+    <div class="resource" region="editable_1">
+   Put_Line ("Hello, World Editable 1");
+    </div>
+ </div>
+ 
+  <div example_editor="Hello world runnable example" inline="true">
+    <div class="resource" region="editable_1">
+   for I in 1 .. 10 loop
+      Put_Line ("Hello, World " & I'Img);
+   end loop;
+    </div>
+ </div>

 Fusce molestie commodo nisi, bibendum dictum purus vehicula vel. Nulla mattis lobortis ipsum ac ornare. Integer sed erat vel mauris volutpat sodales nec auctor nulla. Aliquam ac adipiscing erat. Aliquam erat volutpat. Aenean fringilla congue odio non mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque porta vehicula diam, et placerat eros iaculis et. Cras nec ante ipsum, eu cursus sem. Suspendisse nec orci neque, ac egestas sapien.

--- a/resources/books/example/part1-chapter2.rst
+++ b/resources/books/example/part1-chapter2.rst
@@ -3,8 +3,8 @@ Part 1 Chapter 2

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id massa felis. Nam eget risus sit amet ante tempor lacinia. Mauris ut nunc sem. Cras mattis, nibh quis fermentum porttitor, arcu tortor porttitor magna, ac adipiscing quam urna at lectus. Ut at dolor in elit tempor ultrices sagittis sed lacus. Nullam a lectus mauris. Pellentesque molestie, leo in auctor semper, magna sem mattis tellus, a consectetur nisl tellus volutpat quam. Etiam ultricies risus sed sapien convallis aliquet. Curabitur vehicula purus vitae justo commodo facilisis. Quisque at porta ipsum. Sed purus leo, mattis sed ultricies ac, ultricies eget lacus. Sed ac nibh est. Suspendisse sed orci nisl. Vestibulum ultrices metus sapien, sed interdum nunc. In arcu neque, sollicitudin ut porta eu, viverra at elit. Nam accumsan condimentum metus nec accumsan. Nunc porta consectetur nisi in ornare. Vestibulum tempor mollis dui quis luctus. Aliquam dolor enim, tristique a blandit eu, auctor ut odio.

-Test
-======
+Test Editor
+=============

 This is a test of inserting code blocks in the RST

--- a/resources/books/under-construction.md
+++ b/resources/books/under-construction.md
@@ -1 +1,4 @@
-# Page Under Construction
+Page Under Construction
+=========================
+
+This page is currently under construction. We apologize for the inconvenience. 
--- a/resources/example/hello_world/hello.adb
+++ b/resources/example/hello_world/hello.adb
@@ -1,8 +1,15 @@
 --  A simple Hello, World program
-
 with Ada.Text_IO; use Ada.Text_IO;

 procedure Hello is
 begin
+--  end readonly
+--  #region editable_1
   Put_Line ("Hello, World");
+--  #endregion editable_1
+--  begin readonly
+--  this is a read only comment
+--  end readonly
+--  this is an editable comment
+--  begin readonly
 end Hello;