archive/blender-cloud
0
1
Fork 1
Code Issues 24 Pull Requests Projects Releases Wiki Activity

Add secondary navbar. Add jinja if for jumbotron bg and secondary navbar

Browse Source
This commit is contained in:
Sam Lu
2018-07-20 22:55:04 -05:00
parent ecd09a3f02
commit a4bbff1ad0
6 changed files with 66 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/_cards.sass
View File

@@ -1,5 +1,6 @@
.container.card-container
max-width: 1200px
margin-top: 56px
// pending media query decision
// .col-md-4
// +media-breakpoint-up(lg)

36
src/styles/_navbar-secondary.sass Normal file
View File

@@ -0,0 +1,36 @@
.nav-scroller
position: relative
z-index: 2
height: 2.75rem
overflow-y: hidden
.navbar-secondary
max-width: 700px
margin-bottom: 56px
padding-left: 0
border-bottom: 1px solid $gray
.nav
display: flex
flex-wrap: nowrap
overflow-x: auto
text-align: center
white-space: nowrap
-webkit-overflow-scrolling: touch
.nav-link
font-size: 18px
color: $dark
padding: 13px 4px
margin-right: 16px
margin-left: 16px
&:hover
color: $muted
.nav-title
font-weight: 600
@include media-breakpoint-up(md)
padding-left: 0
margin-left: 0
&:hover
color: $dark
.active
border-bottom: 2px solid $primary
&:hover
color: $dark

3
src/styles/_navbar.sass
View File

@@ -4,6 +4,9 @@
min-height: 48px
+media-breakpoint-up(md)
height: 56px
&.sticky-top
+media-breakpoint-down(sm)
position: static
.logo
display: flex
justify-content: center

7
src/styles/projects-index-collection.sass
View File

@@ -3,9 +3,6 @@
@import ../styles/custom-font
@import ../styles/navbar
@import ../styles/jumbotron
@import ../styles/navbar-secondary
@import ../styles/cards
@import ../styles/footer
.jumbotron
background-image: url('/../../static/assets/img/backgrounds/banner-open-projects.jpg')
margin-bottom: 56px
@import ../styles/footer

6
src/templates/layout.pug
View File

@@ -82,7 +82,7 @@ html(lang="en")
| {% endwith %}
//- Navigation Bar
nav.navbar.navbar-expand-md.navbar-light.fixed-top
nav.navbar.navbar-expand-md.navbar-light.sticky-top
//- Logo
a.navbar-brand(href="#")
img(src="{{ url_for('static', filename='assets/img/logo-blender-cloud-text.svg') }}", alt="alt")
@@ -149,8 +149,8 @@ html(lang="en")
| {% endif %}
| {% block navigation_user %}
| {% include 'menus/notifications.html' %}
| {% include 'menus/user.html' %}
//- | {% include 'menus/notifications.html' %}
//- | {% include 'menus/user.html' %}
| {% endblock navigation_user %}

31
src/templates/projects_index_collection.pug
View File

@@ -6,17 +6,17 @@
| {% set page_header_image = url_for('static', filename='assets/img/backgrounds/banner-open-projects.jpg') %}
| {% set page_header_text = 'See how each film came to be. Explore our production files, assets, artwork and more. Get full access to behind the scenes at the Blender Animation Studio. Follow along as we share our process and techniques for each movie.' %}
| {% if title == 'courses' %}
| {% if title == 'courses' or title == 'workshops' %}
| {% set page_title = 'Training' %}
| {% set page_description = 'Production quality training by 3D professionals' %}
| {% set page_header_image = url_for('static', filename='assets/img/backgrounds/background_caminandes_3_03.jpg') %}
| {% set page_header_image = url_for('static', filename='assets/img/backgrounds/banner-training.jpg') %}
| {% set page_header_text = 'Browse through our structured courses. Choose a workshop where top Blender Artists walk you through professional techniques to build a specific project. Visit the Art Gallery where you can download and study source files from your favorite artists.' %}
| {% elif title == 'workshops' %}
| {% set page_title = 'Workshops' %}
| {% set page_description = 'Production quality training by 3D professionals' %}
| {% set page_header_image = url_for('static', filename='assets/img/backgrounds/background_caminandes_3_03.jpg') %}
| {% set page_header_text = 'Enter the artist workshop and learn by example.' %}
//- | {% elif title == 'workshops' %}
//- | {% set page_title = 'Workshops' %}
//- | {% set page_description = 'Production quality training by 3D professionals' %}
//- | {% set page_header_image = url_for('static', filename='assets/img/backgrounds/background_caminandes_3_03.jpg') %}
//- | {% set page_header_text = 'Enter the artist workshop and learn by example.' %}
| {% endif %}
@@ -44,12 +44,23 @@ link(href="{{ url_for('static_cloud', filename='assets/css/projects-index-collec
| {% block body %}
//- Jumbotron
.jumbotron.jumbotron-fluid
//- commented out image until decision is made on jinja background image
//- img.background-header(src="{{ page_header_image }}")
.jumbotron.jumbotron-fluid(style="background-image: url('{{ page_header_image }}')")
.container
h1.display-4.node_index-collection-name {{ page_title }}
p.lead.node_index-collection-description {{ page_header_text }}
//- Secondary Navigation
| {% if title == 'courses' or title == 'workshops' %}
.container.navbar-secondary
ul.nav.justify-content-left
li.nav-item
a.nav-link.nav-title(href="#") Training
li.nav-item
a.nav-link(href="#", class="{% if title == 'courses' %}active{% endif %}") Courses
li.nav-item
a.nav-link(href="#", class="{% if title == 'workshops' %}active{% endif %}") Workshops
li.nav-item
a.nav-link(href="#") Art Gallery
| {% endif %}
//- Project Cards
.container.card-container
.row