Skip to content

Added sidebar for ther rnative class similar to the aiml class #393

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

Added sidebar for ther rnative class similar to the aiml class #393

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/rnative-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-rnative" class="top-left-grid-position">
{% for lesson in site.rnative %}
<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="rnative-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.rnative %}
{% assign lessonUrl = lesson.url%}
{% if lesson.num == page.num %}
{% assign lessonUrl = "javascript:void(0)" %}
{% endif %}

<div class="hamburger-item">
<a class="rnative-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>
28 changes: 28 additions & 0 deletions _sass/_rnative.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,31 @@
border-color: $rnative-blue;
}
}
#desktop-sidebar-rnative{
top: 80px;
width: $ai-desktop-sidebar-total-width - 20px;
margin:48px 10px;
padding:10px 10px;
padding-bottom: 0px;
height: calc(100vh - 176px); //176px is the top position(80px) + the total margin on the top and bottom (48px *2)
max-height: $ai-desktop-sidebar-content-height;
border: solid;
border-radius: 10px;
overflow-y: auto;
overflow-x: hidden;
position: -webkit-sticky;
position: sticky;
flex-shrink: 0;
border-color: $rnative-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-rnative .sidebar-item{
padding-bottom: 15px;
}
12 changes: 7 additions & 5 deletions classes/aiml.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
<h1 class="title page-title">Introduction to AI & ML</h1>
<p class="title text-2x no-margin">Class & Curriculum Outline</p>
<hr class="divider-ai" />
<p>Learn machine learning, with us! A joint collaboration with <a class="ai-link" href="https://uclaacmai.github.io"
target="_blank" rel="noopener noreferrer">ACM AI Outreach</a>.</p>
<p>Learn machine learning, with us! A joint collaboration with <a class="ai-link"
href="https://uclaacmai.github.io" target="_blank" rel="noopener noreferrer">ACM AI Outreach</a>.</p>

<h2 class="title">
Brief Overview
Expand Down Expand Up @@ -51,12 +51,14 @@ <h3 class="title no-margin"><span class="text-normal">#{{lesson.num}}</span>
</div>
<div class="button-container">
{% if lesson.slides_link %}
<a class="button button-sm button-ai" href="{{lesson.slides_link}}" target="_blank" rel="noopener noreferrer">
<a class="button button-sm button-ai" href="{{lesson.slides_link}}" target="_blank"
rel="noopener noreferrer">
<span class="fa fa-chalkboard-teacher"></span> slides
</a>
{% endif %}
{% if lesson.colab_link %}
<a class="button button-sm button-ai" href="{{lesson.colab_link}}" target="_blank" rel="noopener noreferrer">
<a class="button button-sm button-ai" href="{{lesson.colab_link}}" target="_blank"
rel="noopener noreferrer">
<span class="fa fa-code"></span> code
</a>
{% endif %}
Expand Down Expand Up @@ -88,4 +90,4 @@ <h3 class="title">{{subcategory.title}}</h3>
</ul>
{% endfor %}
</div>
</div>
</div>
110 changes: 66 additions & 44 deletions classes/rnative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,79 @@
layout: default
title: "App Development with React Native"
permalink: /classes/rnative
fw: true
---
<h1 class="title page-title">App Development with React Native</h1>

<p class="title text-2x no-margin">Class & Curriculum Outline</p>
<hr class="divider-rnative" />
<p>Learn mobile web development with us! </p>

<h2 class="title">
Brief Overview
</h2>

<p>
A year-long course that aims to give students a wide set of practical skills and project experience: students learn how to build websites with HTML, CSS, and Javascript, and then use those tools to build cross-platform mobile apps with React Native.
</p>
<p>
All of our course materials are open-source! You can click into each lesson to see the notes that we use to teach the class. On top of that, we've put all of our code examples on GitHub; you can see them in the <a class="rnative-link" href="{{site.data.classes[3].github}}">repository.</a>
</p>
<p>
{% comment %} TODO - change this to a map lookup {% endcomment %}
Have any questions? Feel free to reach out to <a class="rnative-link" href="{{site.baseurl}}/team/{{site.data.classes[3].lead.hash}}">Matt</a>, our school lead, or anybody else on the Teach LA team!
</p>


<h2 class="title" id="lessons">
Lessons
</h2>

<div class="row-desktop-ratio-1-1-1 mb-32">
{% for lesson in site.rnative %}
<div class="rnative-lesson-card">
<div class="lesson-card-content">
<h3 class="title no-margin"><span class="text-normal">#{{lesson.num}}</span>
<a class="rnative-link" href="{{lesson.url}}">{{lesson.title}}</a>
</h3>
{{lesson.desc}}
</div>
<div class="button-container">
{% if lesson.course_id %}
<div class="page-container">
{% include rnative-sidebar.html %}
<div class="main-content container-restricted top-left-grid-position">
<h1 class="title page-title">App Development with React Native</h1>

<p class="title text-2x no-margin">Class & Curriculum Outline</p>
<hr class="divider-rnative" />
<p>Learn mobile web development with us! </p>

<h2 class="title">
Brief Overview
</h2>

<p>
A year-long course that aims to give students a wide set of practical skills and project experience:
students
learn
how to build websites with HTML, CSS, and Javascript, and then use those tools to build cross-platform
mobile
apps
with React Native.
</p>
<p>
All of our course materials are open-source! You can click into each lesson to see the notes that we use to
teach
the class. On top of that, we've put all of our code examples on GitHub; you can see them in the <a
class="rnative-link" href="{{site.data.classes[3].github}}">repository.</a>
</p>
<p>
{% comment %} TODO - change this to a map lookup {% endcomment %}
Have any questions? Feel free to reach out to <a class="rnative-link"
href="{{site.baseurl}}/team/{{site.data.classes[3].lead.hash}}">Matt</a>, our school lead, or anybody
else
on
the Teach LA team!
</p>


<h2 class="title" id="lessons">
Lessons
</h2>

<div class="row-desktop-ratio-1-1-1 mb-32">
{% for lesson in site.rnative %}
<div class="rnative-lesson-card">
<div class="lesson-card-content">
<h3 class="title no-margin"><span class="text-normal">#{{lesson.num}}</span>
<a class="rnative-link" href="{{lesson.url}}">{{lesson.title}}</a>
</h3>
{{lesson.desc}}
</div>
<div class="button-container">
{% if lesson.course_id %}
{% comment %} TODO - change this to a map lookup {% endcomment %}

<a class="button button-sm button-rnative" href="{{site.data.classes[3].github}}/{{lesson.course_id}}" target="_blank" rel="noopener noreferrer">
<a class="button button-sm button-rnative"
href="{{site.data.classes[3].github}}/{{lesson.course_id}}" target="_blank"
rel="noopener noreferrer">
<span class="fab fa-github"></span> GitHub
</a>
{% endif %}
{% if lesson.code_link %}
<a class="button button-sm button-rnative" href="{{lesson.code_link}}" target="_blank" rel="noopener noreferrer">
{% endif %}
{% if lesson.code_link %}
<a class="button button-sm button-rnative" href="{{lesson.code_link}}" target="_blank"
rel="noopener noreferrer">
<span class="fa fa-code"></span> code
</a>
{% endif %}
{% endif %}

</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>