From e13a1bff1b77773b1c59fe3b31ac25f9a32ed758 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 27 Mar 2019 15:53:00 +0100 Subject: [PATCH 1/4] UI Navigation: Move Training after Films. So we have categories listing grouped together (Training/Libraries/Services). --- src/templates/_macros/_navigation.pug | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/templates/_macros/_navigation.pug b/src/templates/_macros/_navigation.pug index 0b2b9c2..e4d823d 100644 --- a/src/templates/_macros/_navigation.pug +++ b/src/templates/_macros/_navigation.pug @@ -20,16 +20,16 @@ button.navbar-toggler( href="{{ url_for('main.homepage') }}") i.pi-blender-cloud-logo - +nav-secondary-link( - href="{{ url_for('cloud.learn') }}", - class="{% if title in ('learn', 'courses', 'workshops') %}active{% endif %}") - span Training - +nav-secondary-link( href="{{ url_for('cloud.open_projects') }}", class="{% if title == 'open-projects' %}active{% endif %}") span Films + +nav-secondary-link( + href="{{ url_for('cloud.learn') }}", + class="{% if title in ('learn', 'courses', 'workshops') %}active{% endif %}") + span Training + +nav-secondary-link( href="{{ url_for('cloud.libraries') }}", class="{% if title == 'libraries' %}active{% endif %}") From 149013d64c8a52451eddc765cb048583207c4405 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 27 Mar 2019 15:57:39 +0100 Subject: [PATCH 2/4] UI Learn: Use single-column listing. Uses component from components.pug --- src/templates/learn.pug | 77 +++++++++++++---------------------------- 1 file changed, 25 insertions(+), 52 deletions(-) diff --git a/src/templates/learn.pug b/src/templates/learn.pug index 8c9596b..e03a391 100644 --- a/src/templates/learn.pug +++ b/src/templates/learn.pug @@ -11,63 +11,36 @@ include ../../../pillar/src/templates/mixins/components | {% endblock navigation_tabs %} | {% block body %} -.container.pb-5 +.container.py-4 .row .col-12 - .pt-4 - h2.text-uppercase.font-weight-bold - | Learn - .lead - | Production quality training by Blender professionals. + h2.text-uppercase.font-weight-bold + | Learn + .lead + | Production quality training by Blender professionals. - hr.pb-2 + 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 + +category_list_item( + 'COURSES', + 'Character modeling, 3D printing, VFX, rigging and more.', + "{{ url_for('cloud.courses') }}", + "{{ url_for('static', filename='assets/img/features/training_motion_graphics.jpg')}}") - .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 + hr - .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 + +category_list_item( + 'WORKSHOPS', + 'Enter the artist workshop and learn by example.', + "{{ url_for('cloud.workshops') }}", + "{{ url_for('static', filename='assets/img/features/training_minecraft_animation.jpg')}}") + + hr + + +category_list_item( + 'PRODUCTION LESSONS', + 'Tips and tricks by the Open Projects crew.', + "{{ url_for('cloud.production') }}", + "{{ url_for('static', filename='assets/img/features/open_movies_02.jpg')}}") | {% endblock body %} - -| {% block footer_scripts %} -script. - $('.triplet-card').click(function(){ - window.location.href = $(this).attr('data-url'); - }); -| {% endblock footer_scripts %} From 2fc1738e99ece04621e66b4787106eab24c77270 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 27 Mar 2019 15:57:53 +0100 Subject: [PATCH 3/4] UI Libraries: Use single-column listing. Uses component from components.pug --- src/templates/libraries.pug | 78 +++++++++++++++---------------------- 1 file changed, 32 insertions(+), 46 deletions(-) diff --git a/src/templates/libraries.pug b/src/templates/libraries.pug index 049ec24..76cf71d 100644 --- a/src/templates/libraries.pug +++ b/src/templates/libraries.pug @@ -11,59 +11,45 @@ include ../../../pillar/src/templates/mixins/components | {% endblock navigation_tabs %} | {% block body %} -.container.pb-5 +.container.py-4 .row .col-12 - .pt-4 - h2.text-uppercase.font-weight-bold - | Libraries - .lead - | Download 1000s of files and assets. + h2.text-uppercase.font-weight-bold + | Libraries + .lead + | Download 1000s of files and assets. - hr.pb-2 + 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. + +category_list_item( + 'TEXTURES', + 'More than 1500 texture maps. Browse online or from Blender with our add-on.', + "{{ url_for('projects.view', project_url='textures') }}", + "{{ url_for('static', filename='assets/img/features/textures_01.jpg')}}") - a.triplet-cta(href="{{ url_for('projects.view', project_url='textures') }}") - | LEARN MORE + hr - .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 + +category_list_item( + 'HDRI', + 'Up to 16K and 24 EVs (extremely high) HDR images to light your renders.', + "{{ url_for('projects.view', project_url='hdri') }}", + "{{ url_for('static', filename='assets/img/features/hdri_01.jpg')}}") - .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 + hr + + +category_list_item( + 'CHARACTERS', + 'Production quality, fully rigged and shaded characters ready to animate.', + "{{ url_for('projects.view', project_url='hdri') }}", + "{{ url_for('static', filename='assets/img/features/characters_01.jpg')}}") + + hr + + +category_list_item( + 'ART GALLERY', + 'Learn by example.', + "{{ url_for('projects.view', project_url='gallery') }}", + "{{ url_for('static', filename='assets/img/features/training_bob_forest.jpg')}}") | {% endblock body %} From af6022c99702d0d2c690915dc2252d7f1f6de31a Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 27 Mar 2019 16:00:05 +0100 Subject: [PATCH 4/4] UI Services: Minor layout adjustments. * Align all items to the left. * Match header with Training and Libraries. * Make images a link. --- src/templates/services.pug | 74 ++++++++++++++++++++++++++------------ 1 file changed, 52 insertions(+), 22 deletions(-) diff --git a/src/templates/services.pug b/src/templates/services.pug index f0f10f9..9987a92 100644 --- a/src/templates/services.pug +++ b/src/templates/services.pug @@ -27,8 +27,13 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba | {% endblock %} | {% block body %} -- var header_text = "On Blender Cloud you can create and share personal projects, access our texture and HDRI library (or create your own), keep track of your production, manage your renders and much more!"; -+jumbotron("Services", header_text, "{{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}}")(class="jumbotron-overlay") +.container.py-4 + .row.pb-3 + .col-12 + h2.text-uppercase.font-weight-bold + | Services + .lead + | On Blender Cloud you can create and share personal projects, access our texture and HDRI library (or create your own), keep track of your production, manage your renders and much more! - var addon_text = 'Available through the Blender Cloud add-on'; section#blender-cloud-add-on.page-card @@ -46,15 +51,18 @@ section#blender-cloud-add-on.page-card small Blender Cloud add-on requires Blender 2.78 or newer a.btn.btn-primary( - href="/r/downloads/blender_cloud-latest-addon.zip") + href="/r/downloads/blender_cloud-latest-addon.zip", + title="Download Blender Cloud add-on") i.pi-download | Download add-on  v {{ config.BLENDER_CLOUD_ADDON_VERSION }} - .page-card-side + a.page-card-side( + href="/r/downloads/blender_cloud-latest-addon.zip", + title="Download Blender Cloud add-on") img( src="{{ url_for('static', filename='assets/img/features/blender_cloud_addon_thumbnail.png')}}") -section#blender-sync.page-card.right +section#blender-sync.page-card .page-card-side h2.page-card-title Blender Sync .page-card-summary @@ -68,21 +76,25 @@ section#blender-sync.page-card.right .tip !{addon_text} a.btn.btn-outline-primary( - href="/r/downloads/blender_cloud-latest-addon.zip") + href="/r/downloads/blender_cloud-latest-addon.zip", + title="Download Blender Cloud add-on") i.pi-download | Download add-on  v {{ config.BLENDER_CLOUD_ADDON_VERSION }} a.btn.btn-link( - href="/blog/introducing-blender-sync") + href="/blog/introducing-blender-sync", + title="Learn more about Blender Sync") | Learn More i.pi-angle-right - .page-card-side + a.page-card-side( + href="/blog/introducing-blender-sync", + title="Learn more about Blender Sync") img( src="{{ url_for('static', filename='assets/img/features/sync_thumbnail.jpg')}}") -section#texture-browser.page-card.right +section#texture-browser.page-card .page-card-side h2.page-card-title Texture & HDRI Browser .page-card-summary @@ -95,16 +107,21 @@ section#texture-browser.page-card.right a.btn.btn-outline-primary.js-watch-video( href="https://www.youtube.com/watch?v=-srXYv2Osjw", - data-youtube-id="-srXYv2Osjw") + data-youtube-id="-srXYv2Osjw", + title="Watch video about Texture and HDRI Browser") i.pi-play | Watch Video - .page-card-side + a.page-card-side( + class="js-watch-video", + href="https://www.youtube.com/watch?v=-srXYv2Osjw", + data-youtube-id="-srXYv2Osjw", + title="Watch video about Texture and HDRI Browser") img( src="{{ url_for('static', filename='assets/img/features/tex_library_thumbnail.jpg')}}") -section#image-sharing.page-card.right +section#image-sharing.page-card .page-card-side h2.page-card-title Image Sharing .page-card-summary @@ -115,21 +132,27 @@ section#image-sharing.page-card.right a.btn.btn-outline-primary.js-watch-video( href="https://www.youtube.com/watch?v=yvtqeMBOAyk", - data-youtube-id="yvtqeMBOAyk") + data-youtube-id="yvtqeMBOAyk", + title="Watch video about Image Sharing") i.pi-play | Watch Video a.btn.btn-link( - href="/blog/introducing-image-sharing") + href="/blog/introducing-image-sharing", + title="Learn more about Image Sharing") | Learn More i.pi-angle-right - .page-card-side + a.page-card-side( + class="js-watch-video", + href="https://www.youtube.com/watch?v=yvtqeMBOAyk", + data-youtube-id="yvtqeMBOAyk", + title="Watch video about Image Sharing") img( src="{{ url_for('static', filename='assets/img/features/image_sharing_thumbnail.jpg')}}") -section#projects.page-card.right +section#projects.page-card .page-card-side h2.page-card-title Private Projects .page-card-summary. @@ -137,16 +160,19 @@ section#projects.page-card.right Upload assets and collaborate with other Blender Cloud members. a.btn.btn-link( - href="/blog/introducing-private-projects") + href="/blog/introducing-private-projects", + title="Learn more about Private Projects") | Learn More i.pi-angle-right - .page-card-side + a.page-card-side( + href="/blog/introducing-private-projects", + title="Learn more about Private Projects") img( src="{{ url_for('static', filename='assets/img/features/projects_thumbnail.jpg')}}") -section#attract.page-card.right +section#attract.page-card .page-card-side h2.page-card-title | Attract @@ -165,12 +191,14 @@ section#attract.page-card.right | Learn More i.pi-angle-right - .page-card-side + a.page-card-side( + href="/blog/attract-and-flamenco-public-beta", + title="Learn more about Attract") img( src="{{ url_for('static', filename='assets/img/features/attract_thumbnail.jpg')}}") -section#flamenco.page-card.right +section#flamenco.page-card .page-card-side h2.page-card-title | Flamenco @@ -189,7 +217,9 @@ section#flamenco.page-card.right | Learn More i.pi-angle-right - .page-card-side + a.page-card-side( + href="https://flamenco.io", + title="Learn more about Flamenco") img( src="{{ url_for('static', filename='assets/img/features/flamenco_thumbnail.jpg')}}")