Skip to content

restructured-python-class-page with navbar #408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

restructured-python-class-page with navbar #408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions _includes/py1-sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
47 changes: 47 additions & 0 deletions _sass/_py1.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
115 changes: 84 additions & 31 deletions classes/py1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>