From 369161e29feb78a7ce02dbc9f54eb71c0deb5563 Mon Sep 17 00:00:00 2001 From: Tobias Johansson Date: Wed, 6 Feb 2019 10:31:36 +0100 Subject: [PATCH] Navigation: Unified cloud navigation * Removed main drop down menu * Added "My cloud" to user menu * Attract/Flamenco is found under Production Tools menu * Attract/Flamenco has the same navigation as its project --- src/templates/_macros/_navigation.pug | 402 +++++--------------- src/templates/layout.pug | 13 +- src/templates/learn.pug | 4 +- src/templates/libraries.pug | 4 +- src/templates/menus/_dropdown_main.pug | 38 -- src/templates/production.pug | 4 +- src/templates/projects/landing.pug | 2 +- src/templates/projects/view.pug | 26 +- src/templates/projects_index_collection.pug | 6 +- src/templates/services.pug | 4 +- 10 files changed, 109 insertions(+), 394 deletions(-) delete mode 100644 src/templates/menus/_dropdown_main.pug diff --git a/src/templates/_macros/_navigation.pug b/src/templates/_macros/_navigation.pug index fc07664..f461e63 100644 --- a/src/templates/_macros/_navigation.pug +++ b/src/templates/_macros/_navigation.pug @@ -1,326 +1,92 @@ include ../../../../pillar/src/templates/mixins/components -| {# -| Main dropdown macros. These are just links without a container. -| So the container can be set per case (big dropdown, mobile, footer, etc) -| and the links reused multiple times. -| #} - -| {% macro dropdown_main_root(title) %} -+nav-secondary-link( - href="{{ url_for('main.homepage') }}", - data-toggle='dropdown-tab', - data-tab-target='home') - i.mr-2.pi-home - span Homepage - -+nav-secondary-link( - href="{{ url_for('cloud.open_projects') }}", - data-toggle='dropdown-tab', - data-tab-target='open-projects') - i.mr-2.pi-film-thick - span Open Projects - -+nav-secondary-link( - href="{{ url_for('cloud.learn') }}", - data-toggle='dropdown-tab', - data-tab-target='learn') - i.mr-2.pi-graduation-cap - span Learn - -+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') }}", - data-toggle='dropdown-tab', - data-tab-target='services', - class="{% if title == 'services' %}active{% endif %}") - i.mr-2.pi-whoosh - span Services -| {% endmacro %} - - -| {% macro dropdown_main_home(title) %} -+nav-secondary-link( - href="{{ url_for('main.main_blog') }}") - i.pi-newspaper - span Blog - -+nav-secondary-link( - href="{{ url_for('projects.index') }}") - i.pi-star - span My Projects - -| {% if current_user.has_organizations() %} -+nav-secondary-link( - href="{{ url_for('pillar.web.organizations.index') }}") - i.pi-users - span My Organizations -| {% endif %} - -+nav-secondary-link( - href="{{ url_for('projects.home_project_shared_images')}}") - i.pi-picture - span Image Sharing - -+nav-secondary-link( - href="{{ url_for('projects.home_project') }}") - i.pi-blender - span Blender Sync -| {% endmacro %} - - -| {% macro dropdown_main_open_projects(title) %} -+nav-secondary-link( - href="{{ url_for('cloud.open_projects') }}", - class="nav-see-more border-bottom") - span.font-weight-bold - | Open Projects - i.pi-angle-right.pl-2 - -+nav-secondary-link( - href="{{ url_for('projects.view', project_url='spring') }}") - span Spring - -+nav-secondary-link( - href="{{ url_for('projects.view', project_url='hero') }}") - span Hero - -+nav-secondary-link( - href="{{ url_for('projects.view', project_url='dailydweebs') }}") - span The Daily Dweebs - -+nav-secondary-link( - href="{{ url_for('projects.view', project_url='agent-327') }}") - span Agent 327 -| {% endmacro %} - - -| {% macro dropdown_main_learn(title) %} -+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') }}") - i.pi-graduation-cap - span Courses - -+nav-secondary-link( - href="{{ url_for('cloud.workshops') }}") - i.pi-lightbulb - span Workshops - -+nav-secondary-link( - href="{{ url_for('cloud.production') }}") - i.pi-puzzle - span.new Production Lessons -| {% endmacro %} - - -| {% macro dropdown_main_libraries(title) %} -+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') }}") - i.pi-folder-texture - span Textures - -+nav-secondary-link( - href="{{ url_for('projects.view', project_url='hdri') }}") - i.pi-globe - span HDRI - -+nav-secondary-link( - href="{{ url_for('projects.view', project_url='characters') }}") - i.pi-character - span Characters - -+nav-secondary-link( - href="{{ url_for('projects.view', project_url='gallery') }}") - i.pi-picture - span Art Gallery -| {% endmacro %} - - -| {% macro dropdown_main_services(title) %} -+nav-secondary-link( - href="{{ url_for('cloud.services') }}", - class="nav-see-more border-bottom") - span.font-weight-bold - | Services - i.pi-angle-right.pl-2 - -+nav-secondary-link( - href="/attract") - i.pi-attract - span Attract - -+nav-secondary-link( - href="/flamenco") - i.pi-attract - span Flamenco - -+nav-secondary-link( - href="{{ url_for('cloud.services') }}#blender-cloud-add-on") - i.pi-blender - span Blender Cloud add-on - -+nav-secondary-link( - href="{{ url_for('cloud.services') }}#texture-browser") - i.pi-texture - span Texture & HDRI Browser -| {% endmacro %} - - | {# | Secondary Navigation Bars. -| They include the nav-secondary() container unlike dropdown entries which are just links. | #} | {% macro navigation_homepage(title) %} -+nav-secondary(class="d-none d-sm-flex") +button.navbar-toggler( + type="button", + data-toggle="collapse", + data-target="#navigationLinks", + aria-controls="navigationLinks", + aria-expanded="false", + aria-label="Toggle navigation" + ) + i.pi-blender-cloud + i.pi-angle-down ++nav-secondary(class="collapse navbar-collapse")#navigationLinks + +nav-secondary-link( + 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 Open Projects + span Films +nav-secondary-link( - href="{{ url_for('cloud.learn') }}") - span Learn - - +nav-secondary-link( - href="{{ url_for('cloud.libraries') }}") + href="{{ url_for('cloud.libraries') }}", + class="{% if title == 'libraries' %}active{% endif %}") span Libraries +nav-secondary-link( - class="{% if title == 'services' %}active{% endif %}", - href="{{ url_for('cloud.services') }}") + href="{{ url_for('cloud.services') }}", + class="{% if title == 'services' %}active{% endif %}") span Services | {% endmacro %} -| {% macro navigation_learn(title) %} -+nav-secondary(class="d-none d-sm-flex") - +nav-secondary-link( - class="px-0 text-black-50 {% if title == 'learn' %}active{% endif %}", - href="{{ url_for('cloud.learn') }}") - span Learn - - li.pl-1 - i.pi-angle-right - - +nav-secondary-link( - class="{% if title == 'courses' %}active{% endif %}", - href="{{ url_for('cloud.courses') }}") - span Courses - - +nav-secondary-link( - class="{% if title == 'workshops' %}active{% endif %}", - href="{{ url_for('cloud.workshops') }}") - span Workshops - - +nav-secondary-link( - class="{% if title == 'production' %}active{% endif %}", - href="{{ url_for('cloud.production') }}") - span.new Production Lessons -| {% endmacro %} - - -| {% macro navigation_libraries(title) %} -+nav-secondary(class="d-none d-sm-flex") - +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 - - +nav-secondary-link( - href="{{ url_for('projects.view', project_url='gallery') }}") - span Art Gallery -| {% endmacro %} - - | {% macro navigation_home_project(title) %} -+nav-secondary(class="d-none d-sm-flex") - +nav-secondary-link( - href="{{ url_for('projects.index') }}", - class="{% if title == 'dashboard' %}active{% endif %}") - i.pi-star.pr-2 - span My Projects +button.navbar-toggler( + type="button", + data-toggle="collapse", + data-target="#navigationLinks", + aria-controls="navigationLinks", + aria-expanded="false", + aria-label="Toggle navigation" + ) + i.pi-blender-cloud + i.pi-angle-down ++nav-secondary(class="collapse navbar-collapse")#navigationLinks + +nav-secondary-link( + href="{{ url_for('main.homepage') }}") + i.pi-blender-cloud - | {% if current_user.has_organizations() %} - +nav-secondary-link( - href="{{ url_for('pillar.web.organizations.index') }}", - class="{% if title == 'organizations' %}active{% endif %}") - i.pi-users.pr-2 - span My Organizations - | {% endif %} + +nav-secondary-link( + href="{{ url_for('projects.index') }}", + class="{% if title == 'dashboard' %}active{% endif %}") + i.pi-star.pr-2 + span My Projects - +nav-secondary-link( - href="{{ url_for('projects.home_project_shared_images')}}", - class="{% if title == 'images' %}active{% endif %}") - i.pi-picture.pr-2 - span Image Sharing + | {% if current_user.has_organizations() %} + +nav-secondary-link( + href="{{ url_for('pillar.web.organizations.index') }}", + class="{% if title == 'organizations' %}active{% endif %}") + i.pi-users.pr-2 + span My Organizations + | {% endif %} - +nav-secondary-link( - href="{{ url_for('projects.home_project') }}", - class="{% if title == 'blender-sync' %}active{% endif %}") - i.pi-blender.pr-2 - span Blender Sync + +nav-secondary-link( + href="{{ url_for('projects.home_project_shared_images')}}", + class="{% if title == 'images' %}active{% endif %}") + i.pi-picture.pr-2 + span Image Sharing + + +nav-secondary-link( + href="{{ url_for('projects.home_project') }}", + class="{% if title == 'blender-sync' %}active{% endif %}") + i.pi-blender.pr-2 + span Blender Sync | {% endmacro %} -| {% macro navigation_services(title) %} -+nav-secondary(class="d-none d-sm-flex") - +nav-secondary-link( - class="px-0 active", - href="{{ url_for('cloud.services') }}") - span Services - - li.pl-1 - i.pi-angle-right - - +nav-secondary-link( - href="/attract") - i.pi-attract.pr-2 - span Attract - - +nav-secondary-link( - href="/flamenco") - i.pi-flamenco.pr-2 - span Flamenco -| {% endmacro %} - - -| {% macro navigation_project(project, navigation_links, title) %} +| {% macro navigation_project(project, navigation_links, extension_sidebar_links, title) %} | {% if project.category == 'course' %} | {% set category_url = url_for('cloud.courses') %} @@ -343,20 +109,25 @@ include ../../../../pillar/src/templates/mixins/components | {% set category_title = project.category %} | {% endif %} -+nav-secondary(class="d-none d-sm-flex") +button.navbar-toggler( + type="button", + data-toggle="collapse", + data-target="#navigationLinks", + aria-controls="navigationLinks", + aria-expanded="false", + aria-label="Toggle navigation" + ) + i.pi-blender-cloud + i.pi-angle-down ++nav-secondary(class="collapse navbar-collapse")#navigationLinks + +nav-secondary-link( + href="{{ url_for('main.homepage') }}") + i.pi-blender-cloud + | {% if project.url != 'blender-cloud' %} - | {% if not project.is_private %} - +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 %} +nav-secondary-link( - class="px-1 font-weight-bold{% if title == 'landing' %} active{% endif %}", + class="font-weight-bold{% if title == 'landing' %} active{% endif %}", href="{{url_for('projects.view', project_url=project.url, _external=True)}}") span {{ project.name }} | {% endif %} @@ -379,7 +150,20 @@ include ../../../../pillar/src/templates/mixins/components href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}", title="Explore {{ project.name }}", class="{% if title == 'project' %}active{% endif %}") - span Browse + span Explore | {% endif %} + | {% if extension_sidebar_links %} + +nav-secondary() + li.nav-item.dropdown + a.nav-link.dropdown-toggle( + class="{% if title == 'production-tools' %}active{% endif %}" + href="#" + data-toggle="dropdown") + span Production Tools + i.pi-angle-down + + ul.dropdown-menu + | {{ extension_sidebar_links }} + | {% endif %} | {% endmacro %} diff --git a/src/templates/layout.pug b/src/templates/layout.pug index f9d5674..651f62d 100644 --- a/src/templates/layout.pug +++ b/src/templates/layout.pug @@ -37,7 +37,6 @@ html(lang="en") script(src="{{ url_for('static_pillar', filename='assets/js/timeline.min.js') }}") script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.typeahead-0.11.1.min.js')}}") script(src="{{ url_for('static_pillar', filename='assets/js/vendor/js.cookie-2.0.3.min.js')}}") - script(src="{{ url_for('static_pillar', filename='assets/js/vendor/hogan.common-3.0.0.js') }}") | {% if current_user.is_authenticated %} script(src="{{ url_for('static_pillar', filename='assets/js/vendor/clipboard.min.js')}}") | {% endif %} @@ -57,7 +56,7 @@ html(lang="en") | {% endblock css %} | {% if not title %}{% set title="default" %}{% endif %} - body(class="{{ title }}") + body(class="{{ title }} {{'project' if project and project.url != 'blender-cloud'}}") | {% with messages = get_flashed_messages(with_categories=True) %} | {% if messages %} | {% for (category, message) in messages %} @@ -71,15 +70,7 @@ html(lang="en") | {% endwith %} nav.navbar.navbar-expand-md.fixed-top.bg-white - +nav-secondary() - li.nav-item.dropdown.large - a.nav-link.dropdown-toggle.px-2( - href="{{ url_for('main.homepage') }}" - data-toggle="dropdown") - i.pi-blender-cloud - i.pi-angle-down - - | {% include 'menus/_dropdown_main.html' %} + | {% block navigation_tabs %} | {% endblock navigation_tabs %} diff --git a/src/templates/learn.pug b/src/templates/learn.pug index cddbaef..8c9596b 100644 --- a/src/templates/learn.pug +++ b/src/templates/learn.pug @@ -1,5 +1,5 @@ | {% extends 'layout.html' %} -| {% from '_macros/_navigation.html' import navigation_learn %} +| {% from '_macros/_navigation.html' import navigation_homepage %} include ../../../pillar/src/templates/mixins/components | {% set title = 'learn' %} @@ -7,7 +7,7 @@ include ../../../pillar/src/templates/mixins/components | {% block page_title %}Learn{% endblock %} | {% block navigation_tabs %} -| {{ navigation_learn(title) }} +| {{ navigation_homepage(title) }} | {% endblock navigation_tabs %} | {% block body %} diff --git a/src/templates/libraries.pug b/src/templates/libraries.pug index 9252849..049ec24 100644 --- a/src/templates/libraries.pug +++ b/src/templates/libraries.pug @@ -1,5 +1,5 @@ | {% extends 'layout.html' %} -| {% from '_macros/_navigation.html' import navigation_libraries %} +| {% from '_macros/_navigation.html' import navigation_homepage %} include ../../../pillar/src/templates/mixins/components | {% set title = 'libraries' %} @@ -7,7 +7,7 @@ include ../../../pillar/src/templates/mixins/components | {% block page_title %}Libraries{% endblock %} | {% block navigation_tabs %} -| {{ navigation_libraries(title) }} +| {{ navigation_homepage(title) }} | {% endblock navigation_tabs %} | {% block body %} diff --git a/src/templates/menus/_dropdown_main.pug b/src/templates/menus/_dropdown_main.pug deleted file mode 100644 index 4f24ed3..0000000 --- a/src/templates/menus/_dropdown_main.pug +++ /dev/null @@ -1,38 +0,0 @@ -| {% import '_macros/_navigation.html' as navigation %} - -include ../../../../pillar/src/templates/mixins/components - -ul.dropdown-menu.nav-main - +nav-secondary()( - class="nav-secondary-vertical float- bg-light border-left rounded-left") - | {{ navigation.dropdown_main_root(title) }} - - .dropdown-menu-tab(data-dropdown-tab='home') - .dropdown-menu-column - +nav-secondary()( - class="nav-secondary-vertical rounded-right border-left overflow-hidden") - | {{ navigation.dropdown_main_home(title) }} - - .dropdown-menu-tab(data-dropdown-tab='open-projects') - .dropdown-menu-column - +nav-secondary()( - class="nav-secondary-vertical rounded-right border-left overflow-hidden") - | {{ navigation.dropdown_main_open_projects(title) }} - - .dropdown-menu-tab(data-dropdown-tab='learn') - .dropdown-menu-column - +nav-secondary()( - class="nav-secondary-vertical rounded-right border-left overflow-hidden") - | {{ navigation.dropdown_main_learn(title) }} - - .dropdown-menu-tab(data-dropdown-tab='libraries') - .dropdown-menu-column - +nav-secondary()( - class="nav-secondary-vertical rounded-right border-left overflow-hidden") - | {{ navigation.dropdown_main_libraries(title) }} - - .dropdown-menu-tab(data-dropdown-tab='services') - .dropdown-menu-column - +nav-secondary()( - class="nav-secondary-vertical rounded-right border-left overflow-hidden") - | {{ navigation.dropdown_main_services(title) }} diff --git a/src/templates/production.pug b/src/templates/production.pug index 80b606c..aaf9546 100644 --- a/src/templates/production.pug +++ b/src/templates/production.pug @@ -1,5 +1,5 @@ | {% extends 'layout.html' %} -| {% from '_macros/_navigation.html' import navigation_learn %} +| {% from '_macros/_navigation.html' import navigation_homepage %} include ../../../pillar/src/templates/mixins/components @@ -15,7 +15,7 @@ mixin group(title, tag) | {% set page_header_text = "Tips and tricks by the Open Projects crew." %} | {% block navigation_tabs %} -| {{ navigation_learn(title) }} +| {{ navigation_homepage(title) }} | {% endblock navigation_tabs %} | {% block head %} diff --git a/src/templates/projects/landing.pug b/src/templates/projects/landing.pug index 511221d..d9a0a68 100644 --- a/src/templates/projects/landing.pug +++ b/src/templates/projects/landing.pug @@ -82,7 +82,7 @@ link(href="{{ url_for('static_cloud', filename='assets/css/project-main.css') }} | {% endblock %} | {% block navigation_tabs %} -| {{ navigation_project(project, navigation_links, title) }} +| {{ navigation_project(project, navigation_links, extension_sidebar_links, title) }} | {% endblock navigation_tabs %} | {% block body %} diff --git a/src/templates/projects/view.pug b/src/templates/projects/view.pug index 98940d6..1a2de3e 100644 --- a/src/templates/projects/view.pug +++ b/src/templates/projects/view.pug @@ -5,7 +5,10 @@ include ../../../../pillar/src/templates/mixins/components | {% block page_title %}{{ project.name }}{% endblock%} + +| {% if title is not defined %} | {% set title = 'project' %} +| {% endif %} | {% block og %} meta(property="og:type", content="website") @@ -87,32 +90,12 @@ link(href="{{ url_for('static_cloud', filename='assets/css/project-main.css') }} | {% endblock %} | {% block navigation_tabs %} -| {{ navigation_project(project, navigation_links, title) }} +| {{ navigation_project(project, navigation_links, extension_sidebar_links, title) }} | {% endblock navigation_tabs %} | {% block body %} #project-container #project-side-container - #project_sidebar.bg-white - ul.project-tabs.p-0 - li.tabs-browse.active( - title="Browse", - data-toggle="tooltip", - data-placement="right") - a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}") - i.pi-folder - - | {{ extension_sidebar_links }} - - | {% if project.has_method('PUT') %} - li( - title="Edit Project", - data-toggle="tooltip", - data-placement="right") - a(href="{{ url_for('projects.edit', project_url=project.url) }}") - i.pi-cog - | {% endif %} - #project_nav(class="{{ title }}") #project_nav-container @@ -122,7 +105,6 @@ link(href="{{ url_for('static_cloud', filename='assets/css/project-main.css') }} | {% endblock project_tree %} | {% endif %} - #project_context-container | {% if project.has_method('PUT') %} #project_context-header.position-absolute diff --git a/src/templates/projects_index_collection.pug b/src/templates/projects_index_collection.pug index bef8639..3f0d01a 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_learn, navigation_homepage %} +| {% from '_macros/_navigation.html' import navigation_homepage %} include ../../../pillar/src/templates/mixins/components @@ -42,11 +42,7 @@ meta(name="twitter:image", content="{{ page_header_image }}") | {% endblock %} | {% block navigation_tabs %} -| {% if title == 'open-projects' %} | {{ navigation_homepage(title) }} -| {% else %} -| {{ navigation_learn(title) }} -| {% endif %} | {% endblock navigation_tabs %} | {% block body %} diff --git a/src/templates/services.pug b/src/templates/services.pug index 26abe75..f0f10f9 100644 --- a/src/templates/services.pug +++ b/src/templates/services.pug @@ -1,5 +1,5 @@ | {% extends 'layout.html' %} -| {% from '_macros/_navigation.html' import navigation_services %} +| {% from '_macros/_navigation.html' import navigation_homepage %} | {% block page_title %}Services{% endblock %} | {% set title = 'services' %} @@ -18,7 +18,7 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba | {% endblock %} | {% block navigation_tabs %} -| {{ navigation_services(title) }} +| {{ navigation_homepage(title) }} | {% endblock navigation_tabs %} | {% block page_overlay %}