From e7a2384bf553eca38c7467ceefdb05fe9fc308a7 Mon Sep 17 00:00:00 2001
From: celebi law <celebilaw@gmail.com>
Date: Mon, 7 Feb 2022 02:32:09 -0800
Subject: [PATCH] restructured-python-class-page with navbar

---
 _includes/py1-sidebar.html |  59 +++++++++++++++++++
 _sass/_py1.scss            |  47 +++++++++++++++
 classes/py1.html           | 115 +++++++++++++++++++++++++++----------
 3 files changed, 190 insertions(+), 31 deletions(-)
 create mode 100644 _includes/py1-sidebar.html

diff --git a/_includes/py1-sidebar.html b/_includes/py1-sidebar.html
new file mode 100644
index 00000000..fa389287
--- /dev/null
+++ b/_includes/py1-sidebar.html
@@ -0,0 +1,59 @@
+<div id="desktop-sidebar-py1" class = "top-left-grid-position">
+	{% for lesson in site.py1 %}
+		<div class="sidebar-item">
+			{% assign lessonUrl = lesson.url%}
+			{% if lesson.num == page.num %}
+				{% assign lessonUrl = "javascript:void(0)" %}
+				<span class="current-dot"></span>
+			{% endif %}
+
+			<a class="python-link" href="{{lessonUrl}}">#{{lesson.num}} {{lesson.title}}</a>
+		</div>
+	{% endfor %}
+</div>
+
+<div id="mobile-sidebar">
+	<div id="sidebar-btn-container">
+		<button id="open-mobile-icon" class="d-flex">Lessons</button>
+		<button id="close-mobile-icon" class="d-none">Close</button>
+	</div>
+	<div id="hamburger-content" class="d-none">
+		{% for lesson in site.py1 %}
+			{% assign lessonUrl = lesson.url%}
+			{% if lesson.num == page.num %}
+				{% assign lessonUrl = "javascript:void(0)" %}
+			{% endif %}
+			
+			<div class="hamburger-item">
+				<a class="python-link" href="{{lessonUrl}}">#{{lesson.num}} {{lesson.title}}</a>
+			</div>
+		{% endfor %}
+</div>
+</div>
+
+<script>
+	function toggleHamburgerContent() {
+		let hamburger_content = document.getElementById("hamburger-content");
+		if (hamburger_content.classList.contains("d-none")) {
+			hide("open-mobile-icon");
+			show("hamburger-content");
+			show("close-mobile-icon");
+		} else {
+			hide("hamburger-content");
+			hide("close-mobile-icon");
+			show("open-mobile-icon");
+		}
+	}
+	function show(elementID) {
+		let lessons_btn = document.getElementById(elementID);
+		lessons_btn.classList.remove("d-none");
+		lessons_btn.classList.add("d-flex");
+	}
+	function hide(elementID) {
+		let lessons_btn = document.getElementById(elementID);
+		lessons_btn.classList.remove("d-flex");
+		lessons_btn.classList.add("d-none");
+	}
+	document.getElementById("open-mobile-icon").onclick = toggleHamburgerContent;
+	document.getElementById("close-mobile-icon").onclick = toggleHamburgerContent;
+</script>
\ No newline at end of file
diff --git a/_sass/_py1.scss b/_sass/_py1.scss
index 80e31b8a..1a0613b0 100644
--- a/_sass/_py1.scss
+++ b/_sass/_py1.scss
@@ -369,3 +369,50 @@
     margin-top: 50px;
     margin-bottom: 0px;
 }
+
+.python-link {
+	@include class-link($py-blue);
+}
+
+.py-lesson-card {
+	@include lesson-card($py-blue);
+}
+
+.button.button-py {
+	@include button-classes($py-blue);
+}
+
+.divider-py {
+	@include divider-class($py-blue);
+}
+
+#desktop-sidebar-py1{
+    top: 80px;
+    width: $ai-desktop-sidebar-total-width - 20px;
+    margin:48px 10px;
+    padding:10px 10px;
+    padding-bottom: 0px;
+    margin-left: 200px;
+    height: calc(100vh - 176px);    //176px is the top position(80px) + the total margin on the top and bottom (48px *2)
+    max-height: 300px;
+    border: solid;
+    border-radius: 10px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: -webkit-sticky;
+    position: sticky;
+    flex-shrink: 0;
+    border-color: $py-blue;
+    z-index: 1;
+    display:inline-block;
+    @media (max-width: $desktop-width-xl) and (min-width: $desktop-width) {
+        grid-row: 1 / span 2;
+    }
+    @media (max-width: $desktop-width) {
+        display: none;
+    }
+}
+
+#desktop-sidebar-py1 .sidebar-item{
+    padding-bottom: 15px;
+}
\ No newline at end of file
diff --git a/classes/py1.html b/classes/py1.html
index 9f2cd205..bfb37a1a 100644
--- a/classes/py1.html
+++ b/classes/py1.html
@@ -1,39 +1,92 @@
 ---
 layout: default
-title: "Intro to Programming with Python 1"
+title: "Introduction to Programming with Python"
 permalink: /classes/py1
+fw: true
 ---
+<div class="page-container">
+    {% include py1-sidebar.html %}
+	<div class="main-content container-restricted top-left-grid-position">
+		<h1 class="title page-title">Introduction to Python</h1>
+		<p class="title text-2x no-margin">Class & Curriculum Outline</p>
+		<hr class="divider-py" />
+		<p>How to get started in <b>Python</b>!</p>
+		<h2 class="title">
+			Brief Overview
+		</h2>
 
-<div class="py1-wrapper">
-    <div class="py1-sidebar">
-       <p class="no-margin">how to get started in</p>
-       <h1 class="no-margin">python</h1>
-        <img src="{{site.baseurl}}/img/undraw/proud_coder.svg" alt="female coder with open window of code">
-        <p>
-        confused about how to get started with
-        python? here's a <strong>step-by-step learning plan</strong>
-        that walks you through how to learn to make
-        awesome programs, with no prior experience!
-        </p>
-        <div class="py1-learned-skills-wrapper">
-            <p>
-            learned skills:
-            </p>
-            <!-- this part could be automated with markdown + loop -->
-            <ul class="py1-list py1-learned-skills-list">
-                <li><span>data types and operators</span></li>
-                <li><span>booleans and conditional statements</span></li>
-                <span><em>(coming soon!)</em></span>
-                <li><span><em>while loops and for loops</em></span></li>
-                <li><span><em>lists</em></span></li>
-                <li><span><em>creating functions</em></span></li>
+		<p>
+			Confused about how to get started with python? Here's a <b>step-by-step learning plan</b>
+            that walks you through how to learn to make awesome programs, with no prior experience!
+		</p>
+        
+        <div> 
+            Learned Skills:
+            <ul>
+                <li>Data Types and operators</li>
+                <li>Booleans and Conditional Statements</li>
+            </ul>
+            Coming Soon!:
+            <ul>
+                <li>While Loops & For Loops</li>
+                <li>Lists</li>
+                <li>Creating Functions</li>
             </ul>
         </div>
-    </div>
-    <div class="py1-divider">
-    </div>
-    <div class="py1-curriculum">
-        {% include py1-lesson-card.html group="fundamentals"%}
-        {% include py1-lesson-card.html group="flow"%}
-    </div>
+
+
+		<h2 class="title" id="lessons">
+			Lessons
+		</h2>
+
+		<div class="row-desktop-ratio-1-1-1">
+			{% for lesson in site.py1 %}
+			<div class="py-lesson-card">
+				<div class="lesson-card-content">
+					<h3 class="title no-margin"><span class="text-normal">#{{lesson.num}}</span>
+						<a class="python-link" href="{{lesson.url}}">{{lesson.title}}</a>
+					</h3>
+                    <ul>
+                        {% for brief in lesson.agenda %}
+                        <li class='py1-lesson-goal'><span>{{ brief.text }}</span></li>
+                        {% endfor %}
+                    </ul>
+				</div>
+				<div class="button-container">
+					{% if lesson.slides_link %}
+					<a class="button button-sm button-py" href="{{lesson.slides_link}}" target="_blank" rel="noopener noreferrer">
+						<span class="fa fa-chalkboard-teacher"></span> slides
+					</a>
+					{% endif %}
+					{% if lesson.video_link %}
+					<a class="button button-sm button-py" href="{{lesson.video_link}}" target="_blank" rel="noopener noreferrer">
+						<span class="fa fa-code"></span> video
+					</a>
+					{% endif %}
+					{% if lesson.worksheet_link %}
+					<a class="button button-sm button-py" href="{{lesson.worksheet_link}}" target="_blank" rel="noopener noreferrer">
+						<span class="fa fa-pencil-alt"></span> worksheet
+					</a>
+					{% endif %}
+				</div>
+			</div>
+			{% endfor %}
+		</div>
+
+		<h2 class="title">More Resources</h2>
+		<p>
+            We provided some additional Python resources - they're all helpful!
+        </p>
+        <ul>
+            <li>
+                <a class="python-link" href="https://boolbots.uclaacm.com/" target="_blank" rel="noopener noreferrrer">Boolbots</a>
+            </li>
+            <li>
+                <a class="python-link" href="https://www.codecademy.com/catalog/language/python" target="_blank" rel="noopener noreferrrer">Codecademy: Learn Python</a>
+            </li>
+            <li>
+                <a class="python-link" href="https://www.w3schools.com/python/" target="_blank" rel="noopener noreferrrer">w3schools: Python Tutorial</a>
+            </li>
+        </ul>
+	</div>
 </div>