Merge branch 'release/v2.8.0'

docs/guide-content.md

@@ -554,7 +554,7 @@ This text is the panel's contents.
 **Parameters:**
 - `type` - The type of panel to create. The type is used as the title of the panel, plus as the CSS class for panel (this allows colouring of all the same types of panels).
 - `summary` (optional) - Text to display after the title to summarise the panel's contents.
-- `expanded` (optional) - If set to False, the panel is expanded at load. When not given it defaults to True.
+- `expanded` (optional) - If set to `True`, the panel is expanded at load. If set to `Always`, the panel is expanded at load and cannot be closed. When a value is not given, the panel is closed on load.
 
 ---
 

generator/generator-settings.conf

@@ -1,5 +1,5 @@
 [General]
-Version Number: v2.7.1
+Version Number: v2.8.0
 Google Analytics Code: UA-49289263-2
 Domain: http://www.csfieldguide.org.nz/
 
@@ -51,6 +51,7 @@ JS:
     third-party/modernizr.js
     website.js
     third-party/iframeResizer.min.js
+    third-party/jquery.sticky-kit.min.js
 Interactive:
     base-files
 Font:
@@ -80,6 +81,8 @@ Image:
     guide-favicon.png
     google-logo-colour.png
     internet-new-zealand-logo-colour.png
+    uc-computer-science-education-logo.png
+    microsoft-philanthropies-logo.png
 
 [PDF]
 Output File: Computer Science Field Guide - {} Version.pdf

generator/html-templates.conf

@@ -140,21 +140,21 @@ MathJax.Hub.Config({
 {panel}
 <div class='clearfix'>
   <ul class='collapsible panel' data-collapsible='accordion'>
-    <li class='panel-selector {type_class}'>
-      <div class='collapsible-header{expanded}'>
-        <div class='panel-heading'>{panel_heading}</div>
-        <div class='dropdown-menu-arrow'>&#9660;</div>
+    <li class='panel-selector panel-{{ type_class }}'>
+      <div class='collapsible-header{% if expanded %} active{% endif %}{% if not collapsible %} no-pointer-events{% endif -%}'>
+        <div class='panel-heading'>
+          <strong>{{ title }}</strong>{{ summary }}
+        </div>
+        {%- if collapsible %}<div class='dropdown-menu-arrow'>&#9660;</div>{% endif -%}
+      </div>
+      <div class='collapsible-body'>
+        {{ content }}
       </div>
-      <div class='collapsible-body'>{content}</div>
     </li>
   </ul>
 </div>
 {panel end}
 
-{panel_heading}
-<strong>{title}</strong>{summary}
-{panel_heading end}
-
 {pre-release-notice}
 <div class='card red darken-4'>
   <div class='card-content white-text'>
@@ -259,7 +259,9 @@ MathJax.Hub.Config({
           <h4>{{ translations.footer_sponsors_heading }}</h4>
           <p>{{ translations.footer_sponsors_text }}</p>
           <div class='sponsor-logos'>
+            <a href='http://www.cosc.canterbury.ac.nz/research/RG/CSE/'><img src='{{ path_to_guide_root }}images/uc-computer-science-education-logo.png'></a>
             <a href='https://www.google.com'><img src='{{ path_to_guide_root }}images/google-logo-colour.png'></a>
+            <a href='https://www.microsoft.com/about/philanthropies/'><img src='{{ path_to_guide_root }}images/microsoft-philanthropies-logo.png' style='height: 4em !important;'></a>
             <a href='https://internetnz.nz/'><img src='{{ path_to_guide_root }}images/internet-new-zealand-logo-colour.png'></a>
           </div>
         </div>
@@ -317,12 +319,12 @@ MathJax.Hub.Config({
   </a>
   {%- endif %}
 </div>
-
-<p>{{ translations.homepage_paragraph_1 }}</p>
-
+{% if guide.version == 'student' %}
+<p>{{ translations.homepage_link_to_teachers_guide }}</p>
+{% endif %}
 {{ prerelease_notice }}
 
-<p>{{ translations.homepage_paragraph_2 }}</p>
+<p>{{ translations.homepage_paragraph }}</p>
 {website_homepage_content end}
 
 {website_homepage_header}
@@ -365,34 +367,28 @@ MathJax.Hub.Config({
     {{ page_heading }}
     <div class='container'>
       <div class='row'>
-        {%- if file.settings.table_of_contents_sidebar %}
-        <div class='col s12 l10 main-content'>
+        <div class='col s12{%- if file.settings.table_of_contents_sidebar %} l9{%- endif %} main-content'>
           {{ body_html }}
         </div>
-        <div class='col hide-on-med-and-down l2 hide_for_print'>
-          <div id='page-navigation'>
-            {{ prerelease_notice }}
-            {{ version_link_html }}
-            <h6>{{ translations.table_of_contents }}</h6>
-            <div class='divider'></div>
-            <ul class='table-of-contents'>
-              {%- for heading in heading_root.children %}
-              <li><a href='#section-{{ heading.permalink }}'>{{ heading.heading }}</a>
-              {%- if heading.children %}
-              <ul class='table-of-contents-subtitle'>
-              {%- for subheading in heading.children %}
-                <li><a href='#{{ subheading.permalink }}'>{{ subheading.heading }}</a></li>
-              {%- endfor %}
-              </ul>
-              {%- endif %}
-              </li>
-              {%- endfor %}
+        {%- if file.settings.table_of_contents_sidebar %}
+        <div id='page-navigation' class='hide-on-med-and-down hide_for_print'>
+          {{ prerelease_notice }}
+          {{ version_link_html }}
+          <h6>{{ translations.table_of_contents }}</h6>
+          <div class='divider'></div>
+          <ul class='table-of-contents'>
+            {%- for heading in heading_root.children %}
+            <li><a href='#section-{{ heading.permalink }}'>{{ heading.heading }}</a>
+            {%- if heading.children %}
+            <ul class='table-of-contents-subtitle'>
+            {%- for subheading in heading.children %}
+              <li><a href='#{{ subheading.permalink }}'>{{ subheading.heading }}</a></li>
+            {%- endfor %}
             </ul>
-          </div>
-        </div>
-        {% else %}
-        <div class='col s12 main-content'>
-          {{ body_html }}
+            {%- endif %}
+            </li>
+            {%- endfor %}
+          </ul>
         </div>
         {% endif %}
       </div>
@@ -415,6 +411,7 @@ MathJax.Hub.Config({
 <script type='text/javascript' src='{{ path_to_guide_root }}js/third-party/jquery.js'></script>
 <script type='text/javascript' src='{{ path_to_guide_root }}js/third-party/materialize.min.js'></script>
 <script type='text/javascript' src='{{ path_to_guide_root }}js/third-party/featherlight.min.js'></script>
+<script type='text/javascript' src='{{ path_to_guide_root }}js/third-party/jquery.sticky-kit.min.js'></script>
 <script type='text/javascript' src='{{ path_to_guide_root }}js/website.js'></script>
 {%- for script in page_scripts %}
 {{ script }}

generator/js/website.js

@@ -6,6 +6,7 @@ $(document).ready(function(){
     }
   );
   $('.scrollspy').scrollSpy();
+  $("#page-navigation").stick_in_parent();
 
   // Code for jumping to anchors
   if (window.location.hash) {

generator/markdownsection.py

@@ -174,18 +174,22 @@ def create_panel(self, match):
                 summary_value = parse_argument('summary', arguments)
                 summary = ': ' + summary_value.strip() if summary_value else ''
                 expanded_value = parse_argument('expanded', arguments)
-                expanded = ' active' if expanded_value == 'True' else ''
-                content = self.parse_markdown(match.group('content'))
-
-                heading = self.html_templates['panel_heading'].format(title=title,
-                                                                      summary=summary)
-                html = self.html_templates['panel'].format(panel_heading = heading,
-                                                           content = content,
-                                                           type_class = 'panel-' + panel_type,
-                                                           expanded = expanded)
+                collapsible = False if expanded_value == 'Always' else True
+                valid_expanded_values = ['True', 'Always']
+                expanded = expanded_value in valid_expanded_values
+                context = {
+                    'type_class': panel_type,
+                    'title': title,
+                    'summary': summary,
+                    'content': self.parse_markdown(match.group('content')),
+                    'expanded': expanded,
+                    'collapsible': collapsible
+                }
+                html = self.guide.html_generator.render_template('panel', context)
             # Panel should be ignored
             else:
                 html = ''
+
             # Check for tags within panel that could cause dead links within student version
             if panel_type in teacher_only_panels:
                 content = match.group('content')

generator/scss/website.scss

@@ -113,6 +113,7 @@ ul.side-nav.fixed li a {
 }
 .section-heading {
   margin-bottom: 0;
+  margin-top: 1em;
   .page-title-header & > a {
     color: white !important;
   }
@@ -197,7 +198,8 @@ ul.side-nav.fixed li a {
 }
 #page-navigation {
   padding: 1rem 1rem 0 0;
-  position: fixed;
+  width: 24%;
+  float: right;
 }
 .btn-expand {
   width: 100% !important;
@@ -314,7 +316,8 @@ ul.panel {
   @include panel-color("panel-teacher-note", "red");
   @include panel-color("panel-additional-information", "amber");
   @include panel-color("panel-curiosity", "purple");
-  @include panel-color("panel-challenge", "orange");
+  @include panel-color("panel-challenge", "deep-orange");
+  @include panel-color("panel-caution", "orange");
   @include panel-color("panel-jargon-buster", "light-green");
   @include panel-color("panel-spoiler", "blue-grey");
   @include panel-color("panel-project", "blue");
@@ -330,14 +333,12 @@ ul.panel {
 .text-box-indented {
   margin-left: 40px !important;
 }
-
-
 .table-of-contents {
   li, ul, a {
     display: block !important;
   }
   a {
-    height: 100% !important;
+    height: initial !important;
   }
   &-subtitle {
     padding-left: 0.8rem;
@@ -365,12 +366,12 @@ footer {
     .sponsor-logos {
       display: flex;
       flex-wrap: wrap;
+      align-items: center;
       a {
         flex: 0 1 auto;
-        margin: 0 3rem 3rem 0;
-        width: 10rem;
+        margin: 0 3rem 2rem 0;
         img {
-          width: 100%;
+          height: 3em;
         }
       }
     }
@@ -389,6 +390,16 @@ footer {
       padding-left: 1rem;
     }
   }
+  @if $version == "teacher" {
+    .footer-second a {
+      color: rgba(255,255,255,0.8);
+      text-decoration: underline;
+    }
+    .footer-third a {
+      color: rgba(255,255,255,0.8);
+      text-decoration: underline;
+    }
+  }
   .row {
     margin-bottom: 0;
   }
@@ -399,7 +410,7 @@ body.landing-page {
     padding-left: 0 !important;
   }
   main {
-    color: rgba(255,255,255,0.8);
+    color: rgb(255,255,255);
   }
   footer {
     .footer-first .container {
@@ -435,3 +446,6 @@ img.responsive-img {
     background-color: #FFF !important;
   }
 }
+.no-pointer-events {
+  pointer-events: none;
+}

interactives/base-files/js/translation-rotation-interactives/script.js

@@ -3,6 +3,7 @@
  */
 
 var imgPath = '../base-files/img/translation-rotation-interactives-images/';
+var boxImgPath = '../base-files/img/colourful-box-images/';
 var container = document.getElementById( 'container' );
 var camera, scene, renderer;
 var cube, hiddenObject;
@@ -161,23 +162,23 @@ function buildCube() {
     // loads all the symbols for the box
     var materials = [
         new THREE.MeshBasicMaterial({
-           map: new THREE.TextureLoader().load( imgPath + 'grayscale_square' + right_side + '.png' )
+           map: new THREE.TextureLoader().load( boxImgPath + 'square' + right_side + '-256px-grayscale.png' )
         }),
         new THREE.MeshBasicMaterial({
             // non grey scale becuase this is the first symbol the user needs to find
-           map: new THREE.TextureLoader().load( imgPath + 'square' + left_side + '.png' )
+           map: new THREE.TextureLoader().load( boxImgPath + 'square' + left_side + '-256px.png' )
         }),
         new THREE.MeshBasicMaterial({
-           map: new THREE.TextureLoader().load( imgPath + 'grayscale_square' + top_side + '.png' ) // top, non-coded side
+           map: new THREE.TextureLoader().load( boxImgPath + 'square' + top_side + '-256px-grayscale.png' ) // top, non-coded side
         }),
         new THREE.MeshBasicMaterial({
-           map: new THREE.TextureLoader().load( imgPath + 'grayscale_square' + bottom_side + '.png' )
+           map: new THREE.TextureLoader().load( boxImgPath + 'square' + bottom_side + '-256px-grayscale.png' )
         }),
         new THREE.MeshBasicMaterial({
-           map: new THREE.TextureLoader().load( imgPath + 'grayscale_square' + front_side + '.png' ) // front, non-coded side
+           map: new THREE.TextureLoader().load( boxImgPath + 'square' + front_side + '-256px-grayscale.png' ) // front, non-coded side
         }),
         new THREE.MeshBasicMaterial({
-           map: new THREE.TextureLoader().load( imgPath + 'grayscale_square' + back_side + '.png' ) // back, non-coded side
+           map: new THREE.TextureLoader().load( boxImgPath + 'square' + back_side + '-256px-grayscale.png' ) // back, non-coded side
         })
     ];
 
@@ -307,9 +308,9 @@ function submitSymbol() {
         return;
     }
 
-    document.getElementById(selectedSymbolId).src = imgPath + 'grayscale_square' + selectedSymbolId + '.png';
+    document.getElementById(selectedSymbolId).src = boxImgPath + 'square' + selectedSymbolId + '-256px-grayscale.png';
 
-    var img_src = imgPath + 'square' + selectedSymbolId + '.png';
+    var img_src = boxImgPath + 'square' + selectedSymbolId + '-256px.png';
 
     if ( code[1] == null ) {
         code[1] = selectedSymbolId;
@@ -346,10 +347,10 @@ function submitSymbol() {
 function updateSide( side, currentImg, coloured) {
     var format = '';
     if ( coloured == false ) {
-        format = 'grayscale_';
+        format = '-grayscale';
     }
     cube.material.materials[side].map = new THREE.TextureLoader().load(
-            imgPath + format + 'square' + currentImg + '.png',
+            boxImgPath + 'square' + currentImg + '-256px' + format + '.png',
             undefined,
             function() {
                 cube.material.materials[side].map.needsUpdate = true;
@@ -563,9 +564,9 @@ function symbolClick(id) {
 
     for (var i = 1; i <= 8; i++) {
         if (i == id) {
-            document.getElementById(i).src = imgPath + 'square' + i + '.png';
+            document.getElementById(i).src = boxImgPath + 'square' + i + '-256px.png';
         } else {
-            document.getElementById(i).src = imgPath + 'grayscale_square' + i + '.png';
+            document.getElementById(i).src = boxImgPath + 'square' + i + '-256px-grayscale.png';
         }
     }
 
@@ -624,4 +625,3 @@ function reset() {
         .start();
 
 }
-