Merge pull request #852 from processing/teach

pre-final uiux design of /teach

Author: Qianqianye

i18n-tracking.yml

@@ -1,5 +1,7 @@
 es:
   src/data/en.yml:
+    line 243: '  learn-title'
+    line 256: teach
     line 37: '  blmstatement1'
     line 62: '  project-a-5-2-moon'
     line 45: '  '
@@ -51,7 +53,6 @@ es:
     line 161: '  processing-transition3'
     line 162: '  processing-transition4'
     line 163: '  book1'
-    line 270: '  showcase-intro1'
     line 271: '  showcase-intro2'
     line 272: '  showcase-intro3'
     line 273: '  showcase-intro4'
@@ -235,14 +236,38 @@ es:
     line 230: '  coordinate-system-simple-shapes-p1x1'
     line 239: '  p5.bots'
     line 248: '  Rotating knobs'
-    line 256: '  '
     line 259: '  notes1'
     line 274: '  nominate-project'
     line 875: '  project-a-5-2-moon'
+
+    line 254: '  project-a-5-2-moon'
+    line 255: ''
+    line 500: '  teach-title2'
+    line 501: '  teach-intro1'
+    line 502: '  teach-intro2'
+    line 503: '  teach-intro3'
+    line 504: '  teach-intro4'
+    line 505: '  teach-slider-title1'
+    line 506: '  teach-slider-title2'
+    line 507: '  teach-slider-title3'
+    line 508: '  teach-results'
+    line 878: '  teach-title2'
+    line 879: '  teach-intro1'
+    line 880: '  teach-intro2'
+    line 881: '  teach-intro3'
+    line 882: '  teach-intro4'
+    line 883: '  teach-slider-title1'
+    line 884: '  teach-slider-title2'
+    line 885: '  teach-slider-title3'
+    line 886: '  teach-results'
+
     line 66: '  sketch_credits'
     line 67: '  sketch_info'
+
 ko:
   src/data/en.yml:
+    line 243: '  learn-title'
+    line 256: teach
     line 37: '  blmstatement1'
     line 62: '  project-a-5-2-moon'
     line 45: '  '
@@ -478,14 +503,38 @@ ko:
     line 230: '  coordinate-system-simple-shapes-p1x1'
     line 239: '  p5.bots'
     line 248: '  Rotating knobs'
-    line 256: '  '
     line 259: '  notes1'
     line 274: '  nominate-project'
     line 875: '  project-a-5-2-moon'
+
+    line 254: '  project-a-5-2-moon'
+    line 255: ''
+    line 500: '  teach-title2'
+    line 501: '  teach-intro1'
+    line 502: '  teach-intro2'
+    line 503: '  teach-intro3'
+    line 504: '  teach-intro4'
+    line 505: '  teach-slider-title1'
+    line 506: '  teach-slider-title2'
+    line 507: '  teach-slider-title3'
+    line 508: '  teach-results'
+    line 878: '  teach-title2'
+    line 879: '  teach-intro1'
+    line 880: '  teach-intro2'
+    line 881: '  teach-intro3'
+    line 882: '  teach-intro4'
+    line 883: '  teach-slider-title1'
+    line 884: '  teach-slider-title2'
+    line 885: '  teach-slider-title3'
+    line 886: '  teach-results'
+
     line 66: '  sketch_credits'
     line 67: '  sketch_info'
+
 zh-Hans:
   src/data/en.yml:
+    line 243: '  learn-title'
+    line 256: teach
     line 37: '  blmstatement1'
     line 62: '  project-a-5-2-moon'
     line 45: '  '
@@ -721,9 +770,31 @@ zh-Hans:
     line 230: '  coordinate-system-simple-shapes-p1x1'
     line 239: '  p5.bots'
     line 248: '  Rotating knobs'
-    line 256: '  '
     line 259: '  notes1'
     line 274: '  nominate-project'
     line 875: '  project-a-5-2-moon'
+
+    line 254: '  project-a-5-2-moon'
+    line 255: ''
+    line 500: '  teach-title2'
+    line 501: '  teach-intro1'
+    line 502: '  teach-intro2'
+    line 503: '  teach-intro3'
+    line 504: '  teach-intro4'
+    line 505: '  teach-slider-title1'
+    line 506: '  teach-slider-title2'
+    line 507: '  teach-slider-title3'
+    line 508: '  teach-results'
+    line 878: '  teach-title2'
+    line 879: '  teach-intro1'
+    line 880: '  teach-intro2'
+    line 881: '  teach-intro3'
+    line 882: '  teach-intro4'
+    line 883: '  teach-slider-title1'
+    line 884: '  teach-slider-title2'
+    line 885: '  teach-slider-title3'
+    line 886: '  teach-results'
+
     line 66: '  sketch_credits'
     line 67: '  sketch_info'
+

src/assets/css/main.css

@@ -1442,6 +1442,101 @@ h2.featuring{
   font-size: 1.1rem;
 }
 
+.slidecontainer {
+  width: 100%; /* Width of the outside container */
+}
+
+/* ==========================================================================
+   Teach Page
+   ========================================================================== */
+#teach-page .accordion {
+  background-color: #eee;
+  color: #444;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  text-align: left;
+  border: none;
+  outline: none;
+  transition: 0.4s;
+}
+
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+#teach-page .active, .accordion:hover {
+  background-color: #ccc;
+}
+
+/* Style the accordion panel. Note: hidden by default */
+#teach-page .panel {
+  padding: 0 18px;
+  background-color: white;
+  display: none;
+  overflow: hidden;
+}
+
+
+
+
+
+#teach-page .teach-intro p {
+  font: 200 1.4rem "Montserrat", sans-serif;
+  line-height: 1.5em;
+}
+
+#teach-page .teach-slider h2 {
+  font: 200 1.4rem "Montserrat", sans-serif;
+  color: #ed225d;
+  letter-spacing: 0.05rem;
+}
+
+#teach-page .teach-results {
+  border-bottom: 4px dotted #ed225d;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+  opacity: 1;
+  font: 400 1.4rem "Montserrat", sans-serif;
+  color: #ed225d;
+  line-height: 1.5em;
+}
+
+/* The slider itself */
+.slider {
+ -webkit-appearance: none;  /* Override default CSS styles */
+  appearance: none;
+  width: 80%; /* Full-width */
+  height: 0px; /* Specified height */
+  background: transparent; /* Grey background */
+  border-bottom: 4px dotted #ed225d; /* Remove outline */
+  opacity: .3; /* Set transparency (for mouse-over effects on hover) */
+  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
+  transition: opacity .2s;
+  outline: none;
+}
+
+/* Mouse-over effects */
+.slider:hover {
+  opacity: 1; /* Fully shown on mouse-over */
+}
+
+/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
+.slider::-webkit-slider-thumb {
+  /*-webkit-appearance: none; Override default look
+  appearance: none; */
+  width: 20px; /* Set a specific slider handle width */
+  height: 20px; /* Slider handle height */
+  background: url('../img/asterisk-01.png'); /* Green background */
+  cursor: pointer; /* Cursor on hover */
+  outline: none;
+}
+
+.slider::-moz-range-thumb {
+  width: 10px; /* Set a specific slider handle width */
+  height: 10px; /* Slider handle height */
+  background: url('../img/asterisk-01.png'); /* Green background */
+  cursor: pointer; /* Cursor on hover */
+  outline: none;
+}
+
 /* ==========================================================================
    Chrome Frame prompt
    ========================================================================== */

src/assets/js/teach.js

@@ -0,0 +1,14 @@
+var acc = document.getElementsByClassName("accordion");
+var i;
+
+for (i = 0; i < acc.length; i++) {
+  acc[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var panel = this.nextElementSibling;
+    if (panel.style.maxHeight) {
+      panel.style.maxHeight = null;
+    } else {
+      panel.style.maxHeight = panel.scrollHeight + "px";
+    }
+  });
+}

src/data/en.yml

@@ -228,7 +228,8 @@ download:
   support-31-alt: ""
 
 learn:
-  learn-title: "Learn"
+  learn-title: "Learn & "
+  teach-title2: "Teach"
   learn1: "These tutorials provide more in-depth or step-by-step overviews of particular topics. Check out the "
   learn2: "examples page"
   learn3: "to explore short demonstrations of various p5.js topics."
@@ -858,4 +859,15 @@ showcase:
   project-a-3-4-moon: ". I was able to use and to teach this tool to visualize various ideas about time in motion."
   project-a-4-1-moon: "It was challenging for me, a beginner, to understand the overall structure of p5.js and how code works in general. I had to repeat the p5.js basics a couple of times, and then I drew a chart to memorize and to teach the way I understood the p5.js structure and code with strong constraints I set up. It was an excellent teaching and learning experience."
   project-a-5-1-moon: "Check out the "
-  project-a-5-2-moon: " in Milan, Italy."
+  project-a-5-2-moon: " in Milan, Italy."
+
+teach:
+  teach-title2: "Teach"
+  teach-intro1: "intro1"
+  teach-intro2: "intro2"
+  teach-intro3: "intro3"
+  teach-intro4: "intro4"
+  teach-slider-title1: "Year"
+  teach-slider-title2: "Region"
+  teach-slider-title3: "Type"
+  teach-results: "Results"

src/data/es.yml

@@ -228,7 +228,8 @@ download:
   support-31-alt: ""
 
 learn:
-  learn-title: "Aprender"
+  learn-title: "Aprender & "
+  teach-title2: "Teach"
   learn1: "Estos tutoriales proveen una revisión en mayor profundidad o paso a paso sobre temas particulares. Revisa la "
   learn2: "página de ejemplos"
   learn3: " para explorar demostraciones cortas sobre diversos temas de p5.js."
@@ -857,4 +858,15 @@ showcase:
   project-a-3-4-moon: ". Pude usar y enseñar esta herramienta para visualizar varias ideas sobre el tiempo en movimiento."
   project-a-4-1-moon: "Para mí, un principiante, fue un desafío comprender la estructura general de p5.js y cómo funciona el código en general. Tuve que repetir los conceptos básicos de p5.js un par de veces, y luego dibujé un cuadro para memorizar y enseñar la forma en que entendí la estructura y el código de p5.js con fuertes restricciones que configuré. Fue una excelente experiencia de enseñanza y aprendizaje."
   project-a-5-1-moon: "Echa un vistazo a "
-  project-a-5-2-moon: " en Milán, Italia."
+  project-a-5-2-moon: " en Milán, Italia."
+
+teach:
+  teach-title2: "Teach"
+  teach-intro1: "intro1"
+  teach-intro2: "intro2"
+  teach-intro3: "intro3"
+  teach-intro4: "intro4"
+  teach-slider-title1: "Year"
+  teach-slider-title2: "Region"
+  teach-slider-title3: "Type"
+  teach-results: "Results"

src/data/ko.yml

@@ -228,7 +228,8 @@ download:
   support-31-alt: ""
 
 learn:
-  learn-title: "배우기"
+  learn-title: "배우기 & "
+  teach-title2: "가르치기"
   learn1: "깊이있고 순차적인 설명과 튜토리얼을 주제별로 제공합니다. p5.js 함수를 종류별로 알고싶다면 "
   learn2: "예제"
   learn3: "를 클릭하세요."
@@ -858,4 +859,15 @@ showcase:
   project-a-3-4-moon: ". I was able to use and to teach this tool to visualize various ideas about time in motion."
   project-a-4-1-moon: "It was challenging for me, a beginner, to understand the overall structure of p5.js and how code works in general. I had to repeat the p5.js basics a couple of times, and then I drew a chart to memorize and to teach the way I understood the p5.js structure and code with strong constraints I set up. It was an excellent teaching and learning experience."
   project-a-5-1-moon: "Check out the "
-  project-a-5-2-moon: " in Milan, Italy."
+  project-a-5-2-moon: " in Milan, Italy."
+
+teach:
+  teach-title2: "가르치기"
+  teach-intro1: "intro1"
+  teach-intro2: "intro2"
+  teach-intro3: "intro3"
+  teach-intro4: "intro4"
+  teach-slider-title1: "Year"
+  teach-slider-title2: "Region"
+  teach-slider-title3: "Type"
+  teach-results: "Results"

src/data/zh-Hans.yml

@@ -15,7 +15,6 @@ Community: "社群"
 Contribute: "贡献"
 Forum: "论坛"
 Showcase: "Showcase"
-
 footerxh1: "归功于"
 footer1: "p5.js 的原"
 footer2: "并在"
@@ -228,7 +227,8 @@ download:
   support-31-alt: ""
 
 learn:
-  learn-title: "学习"
+  learn-title: "学习 & "
+  teach-title2: "Teach"
   learn1: "以下教程将提供更多深入及详细的步骤，专注于特定的主题。请参考"
   learn2: "范例页面"
   learn3: "以查看 p5.js 多种功能的简单范例。"
@@ -858,4 +858,15 @@ showcase:
   project-a-3-4-moon: ". I was able to use and to teach this tool to visualize various ideas about time in motion."
   project-a-4-1-moon: "It was challenging for me, a beginner, to understand the overall structure of p5.js and how code works in general. I had to repeat the p5.js basics a couple of times, and then I drew a chart to memorize and to teach the way I understood the p5.js structure and code with strong constraints I set up. It was an excellent teaching and learning experience."
   project-a-5-1-moon: "Check out the "
-  project-a-5-2-moon: " in Milan, Italy."
+  project-a-5-2-moon: " in Milan, Italy."
+
+teach:
+  teach-title2: "Teach"
+  teach-intro1: "intro1"
+  teach-intro2: "intro2"
+  teach-intro3: "intro3"
+  teach-intro4: "intro4"
+  teach-slider-title1: "Year"
+  teach-slider-title2: "Region"
+  teach-slider-title3: "Type"
+  teach-results: "Results"

src/templates/pages/index.hbs

@@ -37,7 +37,7 @@ slug: /
       <h2 id="involvement-options" class="sr-only">{{#i18n "p4xp2"}}{{/i18n}}</h2>
       <ul aria-labelledby="involvement-options" class="list_view bullets">
         <li>{{#i18n "p4xp3"}}{{/i18n}}</li>
-        <li>{{#i18n "p4xp4"}}{{/i18n}}</li>
+        <li><a href="{{root}}/teach">{{#i18n "p4xp4"}}{{/i18n}}</a></li>
         <li><a href="https://day.processing.org" target="_blank">{{#i18n "p4xp5"}}{{/i18n}}</a></li>
         <li><a href="https://github.com/processing/p5.js/tree/main/contributor_docs"
             target="_blank">{{#i18n "p4xp6"}}{{/i18n}}</a></li>