From 7ba8ff7580d27101cd33f2895eb39bceff006ece Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 20 Sep 2018 15:00:10 +0200 Subject: [PATCH] New templates for /learn and /libraries --- cloud/routes.py | 10 +++ src/templates/_footer.pug | 10 ++- src/templates/_macros/_navigation.pug | 95 ++++++++++++++------- src/templates/learn.pug | 73 ++++++++++++++++ src/templates/libraries.pug | 75 ++++++++++++++++ src/templates/menus/_dropdown_main.pug | 48 ++++++----- src/templates/production.pug | 57 +++++++------ src/templates/projects/view.pug | 1 - src/templates/projects_index_collection.pug | 4 +- 9 files changed, 287 insertions(+), 86 deletions(-) create mode 100644 src/templates/learn.pug create mode 100644 src/templates/libraries.pug diff --git a/cloud/routes.py b/cloud/routes.py index bd4aa97..c33f967 100644 --- a/cloud/routes.py +++ b/cloud/routes.py @@ -169,6 +169,16 @@ def services(): return render_template('services.html') +@blueprint.route('/learn') +def learn(): + return render_template('learn.html') + + +@blueprint.route('/libraries') +def libraries(): + return render_template('libraries.html') + + @blueprint.route('/stats') def stats(): return render_template('stats.html') diff --git a/src/templates/_footer.pug b/src/templates/_footer.pug index 15983c8..463b178 100644 --- a/src/templates/_footer.pug +++ b/src/templates/_footer.pug @@ -27,7 +27,8 @@ .col-md-2.col-xs-6 h7.font-weight-bold - | TRAINING + a.d-block.pb-2(href="{{ url_for('cloud.learn') }}") + | LEARN ul.list-unstyled li @@ -42,7 +43,8 @@ .col-md-2.col-xs-6 h7.font-weight-bold - | LIBRARIES + a.d-block.pb-2(href="{{ url_for('cloud.libraries') }}") + | LIBRARIES ul.list-unstyled li @@ -63,7 +65,7 @@ .col-md-2.col-xs-6 h7.font-weight-bold - a(href="{{ url_for('cloud.services') }}") + a.d-block.pb-2(href="{{ url_for('cloud.services') }}") | SERVICES ul.list-unstyled @@ -89,7 +91,7 @@ | Image Sharing .col-md-2.col-xs-6 - h7.font-weight-bold + h7.font-weight-bold.d-block.pb-2 | RESOURCES ul.list-unstyled li diff --git a/src/templates/_macros/_navigation.pug b/src/templates/_macros/_navigation.pug index ff598da..c66cbf6 100644 --- a/src/templates/_macros/_navigation.pug +++ b/src/templates/_macros/_navigation.pug @@ -29,14 +29,15 @@ include ../../../../pillar/src/templates/mixins/components span Services | {% endmacro %} -| {% macro navigation_collection(title) %} +| {% macro navigation_learn(title) %} +nav-secondary - | {% if title in ['courses', 'workshops', 'production'] %} - li - .nav-link.pointer-events-none.px-0 - span Learn + | {% if title in ['learn', 'courses', 'workshops', 'production'] %} + +nav-secondary-link( + class="px-0 text-black-50 {% if title == 'learn' %}active{% endif %}", + href="{{ url_for('cloud.learn') }}") + span Learn - li.px-1 + li.pl-1 i.pi-angle-right +nav-secondary-link( @@ -57,11 +58,36 @@ include ../../../../pillar/src/templates/mixins/components | {% elif title in ['open-projects'] %} +nav-secondary-link( class="{% if title == 'open-projects' %}active{% endif %}", - href="{{ url_for('projects.view', project_url='gallery') }}") + href="{{ url_for('cloud.open_projects') }}") span Open Projects | {% endif %} | {% endmacro %} + +| {% macro navigation_libraries(title) %} ++nav-secondary + +nav-secondary-link( + class="px-0 active", + href="{{ url_for('cloud.libraries') }}") + span Libraries + + li.pl-1 + i.pi-angle-right + + +nav-secondary-link( + href="{{ url_for('projects.view', project_url='textures') }}") + span Textures + + +nav-secondary-link( + href="{{ url_for('projects.view', project_url='hdri') }}") + span HDRI + + +nav-secondary-link( + href="{{ url_for('projects.view', project_url='characters') }}") + span Characters +| {% endmacro %} + + | {% macro navigation_home_project(title) %} +nav-secondary() +nav-secondary-link( @@ -91,50 +117,60 @@ include ../../../../pillar/src/templates/mixins/components span Blender Sync | {% endmacro %} + | {% macro navigation_services(title) %} +nav-secondary() - li - a.nav-link.active.px-0(href="{{ url_for('cloud.services') }}") - span Services + +nav-secondary-link( + class="px-0 active", + href="{{ url_for('cloud.services') }}") + span Services - li.px-1 - i.pi-angle-right + li.pl-1 + i.pi-angle-right - +nav-secondary-link( - href="/attract") - i.pi-attract.pr-2 - span Attract + +nav-secondary-link( + href="/attract") + i.pi-attract.pr-2 + span Attract - +nav-secondary-link( - href="/flamenco") - i.pi-flamenco.pr-2 - span Flamenco + +nav-secondary-link( + href="/flamenco") + i.pi-flamenco.pr-2 + span Flamenco | {% endmacro %} + | {% macro navigation_project(project, navigation_links, title) %} | {% if project.category == 'course' %} | {% set category_url = url_for('cloud.courses') %} +| {% set category_title = 'Courses' %} + | {% elif project.category == 'workshop' %} | {% set category_url = url_for('cloud.workshops') %} +| {% set category_title = 'Workshops' %} + | {% elif project.category == 'film' %} | {% set category_url = url_for('cloud.open_projects') %} +| {% set category_title = 'Open Projects' %} + +| {% elif project.category == 'assets' %} +| {% set category_url = url_for('cloud.libraries') %} +| {% set category_title = 'Libraries' %} + | {% else %} | {% set category_url = url_for('main.homepage') %} +| {% set category_title = project.category %} | {% endif %} +nav-secondary() | {% if project.url != 'blender-cloud' %} | {% if not project.is_private %} - li.text-capitalize - a.nav-link.text-muted.px-0(href="{{ category_url }}") - | {% if project.category == 'film' %} - span Open Projects - | {% elif project.category == 'assets' %} - span Libraries - | {% else %} - span {{ project.category }} - | {% endif %} + +nav-secondary-link( + class="px-0 text-black-50 text-capitalize", + href="{{ category_url }}") + span {{ category_title }} + li.px-1 i.pi-angle-right | {% endif %} @@ -143,7 +179,6 @@ include ../../../../pillar/src/templates/mixins/components class="px-1 font-weight-bold{% if title == 'landing' %} active{% endif %}", href="{{url_for('projects.view', project_url=project.url, _external=True)}}") span {{ project.name }} - | {% endif %} | {% for link in navigation_links %} diff --git a/src/templates/learn.pug b/src/templates/learn.pug new file mode 100644 index 0000000..cddbaef --- /dev/null +++ b/src/templates/learn.pug @@ -0,0 +1,73 @@ +| {% extends 'layout.html' %} +| {% from '_macros/_navigation.html' import navigation_learn %} +include ../../../pillar/src/templates/mixins/components + +| {% set title = 'learn' %} + +| {% block page_title %}Learn{% endblock %} + +| {% block navigation_tabs %} +| {{ navigation_learn(title) }} +| {% endblock navigation_tabs %} + +| {% block body %} +.container.pb-5 + .row + .col-12 + .pt-4 + h2.text-uppercase.font-weight-bold + | Learn + .lead + | Production quality training by Blender professionals. + + hr.pb-2 + + .page-triplet-container.homepage.p-0 + .row + .col-md-4 + .triplet-card(data-url="{{ url_for('cloud.courses') }}") + .triplet-card-thumbnail + img( + alt="Courses", + src="{{ url_for('static', filename='assets/img/features/training_motion_graphics.jpg')}}") + .triplet-card-info + h3 Courses + p. + Character modeling, 3D printing, VFX, rigging and more. + a.triplet-cta(href="{{ url_for('cloud.courses') }}") + | LEARN MORE + + .col-md-4 + .triplet-card(data-url="{{ url_for('cloud.workshops') }}") + .triplet-card-thumbnail + img( + alt="Workshops", + src="{{ url_for('static', filename='assets/img/features/training_minecraft_animation.jpg')}}") + .triplet-card-info + h3 Workshops + p. + Enter the artist workshop and learn by example. + a.triplet-cta(href="{{ url_for('cloud.workshops') }}") + | LEARN MORE + + .col-md-4 + .triplet-card(data-url="{{ url_for('cloud.production') }}") + .triplet-card-thumbnail + img( + alt="Production Lessons", + src="{{ url_for('static', filename='assets/img/features/open_movies_02.jpg')}}") + .triplet-card-info + h3 Production Lessons + p. + Tips and tricks by the open projects crew. + a.triplet-cta(href="{{ url_for('cloud.production') }}") + | LEARN MORE + +| {% endblock body %} + +| {% block footer_scripts %} +script. + $('.triplet-card').click(function(){ + window.location.href = $(this).attr('data-url'); + }); +| {% endblock footer_scripts %} diff --git a/src/templates/libraries.pug b/src/templates/libraries.pug new file mode 100644 index 0000000..9252849 --- /dev/null +++ b/src/templates/libraries.pug @@ -0,0 +1,75 @@ +| {% extends 'layout.html' %} +| {% from '_macros/_navigation.html' import navigation_libraries %} +include ../../../pillar/src/templates/mixins/components + +| {% set title = 'libraries' %} + +| {% block page_title %}Libraries{% endblock %} + +| {% block navigation_tabs %} +| {{ navigation_libraries(title) }} +| {% endblock navigation_tabs %} + +| {% block body %} +.container.pb-5 + .row + .col-12 + .pt-4 + h2.text-uppercase.font-weight-bold + | Libraries + .lead + | Download 1000s of files and assets. + + hr.pb-2 + + .page-triplet-container.homepage.p-0 + .row + .col-md-4 + .triplet-card(data-url="{{ url_for('projects.view', project_url='textures') }}") + .triplet-card-thumbnail + img( + alt="Textures", + src="{{ url_for('static', filename='assets/img/features/textures_01.jpg')}}") + .triplet-card-info + h3 Textures + p. + More than 1500 texture maps. + Browse online or from Blender with our add-on. + + a.triplet-cta(href="{{ url_for('projects.view', project_url='textures') }}") + | LEARN MORE + + .col-md-4 + .triplet-card(data-url="{{ url_for('projects.view', project_url='hdri') }}") + .triplet-card-thumbnail + img( + alt="HDRI", + src="{{ url_for('static', filename='assets/img/features/hdri_01.jpg')}}") + .triplet-card-info + h3 HDRI + p. + Up to 16K and 24 EVs (extremely high) HDR images to light your renders. + a.triplet-cta(href="{{ url_for('projects.view', project_url='hdri') }}") + | LEARN MORE + + .col-md-4 + .triplet-card(data-url="{{ url_for('projects.view', project_url='characters') }}") + .triplet-card-thumbnail + img( + alt="Characters", + src="{{ url_for('static', filename='assets/img/features/characters_01.jpg')}}") + .triplet-card-info + h3 Characters + p. + Production quality, fully rigged and shaded characters ready to animate. + a.triplet-cta(href="{{ url_for('projects.view', project_url='characters') }}") + | LEARN MORE + +| {% endblock body %} + +| {% block footer_scripts %} +script. + $('.triplet-card').click(function(){ + window.location.href = $(this).attr('data-url'); + }); +| {% endblock footer_scripts %} diff --git a/src/templates/menus/_dropdown_main.pug b/src/templates/menus/_dropdown_main.pug index 25e00a3..d0e5c7d 100644 --- a/src/templates/menus/_dropdown_main.pug +++ b/src/templates/menus/_dropdown_main.pug @@ -17,19 +17,19 @@ ul.dropdown-menu.nav-main i.mr-2.pi-film-thick span Open Projects - li.nav-item - .nav-link( - data-toggle='dropdown-tab', - data-tab-target='training') - i.mr-2.pi-graduation-cap - span Learn + +nav-secondary-link( + href="{{ url_for('cloud.learn') }}", + data-toggle='dropdown-tab', + data-tab-target='learn') + i.mr-2.pi-graduation-cap + span Learn - li.nav-item - .nav-link( - data-toggle='dropdown-tab', - data-tab-target='libraries') - i.mr-2.pi-file-archive - span Libraries + +nav-secondary-link( + href="{{ url_for('cloud.libraries') }}", + data-toggle='dropdown-tab', + data-tab-target='libraries') + i.mr-2.pi-file-archive + span Libraries +nav-secondary-link( href="{{ url_for('cloud.services') }}", @@ -76,7 +76,7 @@ ul.dropdown-menu.nav-main href="{{ url_for('cloud.open_projects') }}", class="nav-see-more border-bottom") span.font-weight-bold - | All Open Projects + | Open Projects i.pi-angle-right.pl-2 +nav-secondary-link( @@ -95,13 +95,15 @@ ul.dropdown-menu.nav-main href="{{ url_for('projects.view', project_url='agent-327') }}") span Agent 327 - .dropdown-menu-tab(data-tab='training') + .dropdown-menu-tab(data-tab='learn') .dropdown-menu-column +nav-secondary()(class="nav-secondary-vertical rounded-right border-left overflow-hidden") - li.nav-item - .nav-link.border-bottom.pointer-events-none - span.font-weight-bold - | Learn + +nav-secondary-link( + href="{{ url_for('cloud.learn') }}", + class="nav-see-more border-bottom") + span.font-weight-bold + | Learn + i.pi-angle-right.pl-2 +nav-secondary-link( href="{{ url_for('cloud.courses') }}") @@ -121,10 +123,12 @@ ul.dropdown-menu.nav-main .dropdown-menu-tab(data-tab='libraries') .dropdown-menu-column +nav-secondary()(class="nav-secondary-vertical rounded-right border-left overflow-hidden") - li.nav-item - .nav-link.border-bottom.pointer-events-none - span.font-weight-bold - | Libraries + +nav-secondary-link( + href="{{ url_for('cloud.libraries') }}", + class="nav-see-more border-bottom") + span.font-weight-bold + | Libraries + i.pi-angle-right.pl-2 +nav-secondary-link( href="{{ url_for('projects.view', project_url='textures') }}") diff --git a/src/templates/production.pug b/src/templates/production.pug index 51586c1..65c108e 100644 --- a/src/templates/production.pug +++ b/src/templates/production.pug @@ -1,5 +1,5 @@ | {% extends 'layout.html' %} -| {% from '_macros/_navigation.html' import navigation_collection %} +| {% from '_macros/_navigation.html' import navigation_learn %} include ../../../pillar/src/templates/mixins/components @@ -12,10 +12,10 @@ mixin group(title, tag) +card-deck(data-asset-tag=tag, class="js-asset-list py-3") | {% block page_title %}Production Lessons{% endblock %} -| {% set page_header_text = "Tips and tricks by the Open Movie crew." %} +| {% set page_header_text = "Tips and tricks by the Open Projects crew." %} | {% block navigation_tabs %} -| {{ navigation_collection(title) }} +| {{ navigation_learn(title) }} | {% endblock navigation_tabs %} | {% block head %} @@ -27,31 +27,34 @@ script. }); | {% endblock %} | {% block body %} -+jumbotron( - '{{ self.page_title() }}', - '{{ page_header_text }}', - "{{ url_for('static', filename='assets/img/backgrounds/background_agent327_04.jpg')}}")( - class="jumbotron-overlay", - style="background-position: center top") +.container.pb-5 + .row + .col-12 + .pt-4 + h2.text-uppercase.font-weight-bold + | {{ self.page_title() }} + .lead + | {{ page_header_text }} -.container - +group('Walk-through', 'walk-through') - +group('Modeling', 'modeling') - +group('Sculpting', 'sculpting') - +group('Animation', 'animation') - +group('Shading', 'shading') - +group('Texturing', 'texturing') - +group('Character Pipeline', 'character-pipeline') - +group('Rigging', 'rigging') - +group('Lighting & Rendering', 'lighting') - +group('Simulation & Effects', 'effects') - +group('Video Editing', 'video-editing') - +group('Digital Painting', 'digital-painting') - +group('Production Design', 'production-design') + hr.pb-2 - a.d-block.py-5.text-center.text-muted( - href="{{ url_for('main.nodes_search_index') }}") - | Search Blender Cloud to find even more content - i.pi-angle-right.pl-1 + +group('Walk-through', 'walk-through') + +group('Modeling', 'modeling') + +group('Sculpting', 'sculpting') + +group('Animation', 'animation') + +group('Shading', 'shading') + +group('Texturing', 'texturing') + +group('Character Pipeline', 'character-pipeline') + +group('Rigging', 'rigging') + +group('Lighting & Rendering', 'lighting') + +group('Simulation & Effects', 'effects') + +group('Video Editing', 'video-editing') + +group('Digital Painting', 'digital-painting') + +group('Production Design', 'production-design') + + a.d-block.py-5.text-center.text-muted( + href="{{ url_for('main.nodes_search_index') }}") + | Search Blender Cloud to find even more content + i.pi-angle-right.pl-1 | {% endblock body%} diff --git a/src/templates/projects/view.pug b/src/templates/projects/view.pug index 97239e6..346cdf8 100644 --- a/src/templates/projects/view.pug +++ b/src/templates/projects/view.pug @@ -87,7 +87,6 @@ link(href="{{ url_for('static_cloud', filename='assets/css/project-main.css') }} | {% endblock %} | {% block navigation_tabs %} -| {% from '_macros/_navigation.html' import navigation_collection %} | {{ navigation_project(project, navigation_links, title) }} | {% endblock navigation_tabs %} diff --git a/src/templates/projects_index_collection.pug b/src/templates/projects_index_collection.pug index 37664d8..1f1ae8c 100644 --- a/src/templates/projects_index_collection.pug +++ b/src/templates/projects_index_collection.pug @@ -1,5 +1,5 @@ | {% extends 'layout.html' %} -| {% from '_macros/_navigation.html' import navigation_collection, navigation_homepage %} +| {% from '_macros/_navigation.html' import navigation_learn, navigation_homepage %} include ../../../pillar/src/templates/mixins/components @@ -45,7 +45,7 @@ meta(name="twitter:image", content="{{ page_header_image }}") | {% if title == 'open-projects' %} | {{ navigation_homepage(title) }} | {% else %} -| {{ navigation_collection(title) }} +| {{ navigation_learn(title) }} | {% endif %} | {% endblock navigation_tabs %}