diff --git a/app/templates/new/base.html b/app/templates/new/base.html index b175cff51..c55a3edff 100644 --- a/app/templates/new/base.html +++ b/app/templates/new/base.html @@ -67,142 +67,13 @@ }) }} {% endblock %} - + {% block header %} {% if current_user.is_authenticated %} - {% if current_user.platform_admin %} - {% set navigation = [ - { - "href": url_for("main.show_accounts_or_dashboard"), - "text": "Current service", - "active": header_navigation.is_selected('accounts-or-dashboard') - }, - { - "href": url_for('main.get_started'), - "text": "Using Notify", - "active": header_navigation.is_selected('using_notify') - }, - { - "href": url_for('main.features'), - "text": "Features", - "active": header_navigation.is_selected('features') - }, - { - "href": url_for('main.platform_admin_splash_page'), - "text": "Platform admin", - "active": header_navigation.is_selected('platform-admin') - }, - { - "href": url_for('main.support'), - "text": "Contact us", - "active": header_navigation.is_selected('support') - } - ] %} - {% if current_service %} - {% set secondaryNavigation = [ - { - "href": url_for('main.service_settings', service_id=current_service.id), - "text": "Settings", - "active": secondary_navigation.is_selected('settings') - }, - { - "href": url_for('main.sign_out'), - "text": "Sign out" - } - ] %} - {% else %} - {% set secondaryNavigation = [ - { - "href": url_for('main.sign_out'), - "text": "Sign out" - } - ] %} - {% endif %} - {% else %} - {% set navigation = [ - { - "href": url_for("main.show_accounts_or_dashboard"), - "text": "Current service", - "active": header_navigation.is_selected('accounts-or-dashboard') - }, - { - "href": url_for('main.get_started'), - "text": "Using Notify", - "active": header_navigation.is_selected('using_notify') - }, - { - "href": url_for('main.features'), - "text": "Features", - "active": header_navigation.is_selected('features') - }, - { - "href": url_for('main.support'), - "text": "Contact us", - "active": header_navigation.is_selected('support') - }, - { - "href": url_for('main.user_profile'), - "text": "User profile", - "active": header_navigation.is_selected('user-profile') - } - ] %} - {% if current_service %} - {% set secondaryNavigation = [ - { - "href": url_for('main.service_settings', service_id=current_service.id), - "text": "Settings", - "active": secondary_navigation.is_selected('settings') - }, - { - "href": url_for('main.sign_out'), - "text": "Sign out" - } - ] %} - {% else %} - {% set secondaryNavigation = [ - { - "href": url_for('main.sign_out'), - "text": "Sign out" - } - ] %} - {% endif %} - {% endif %} - {% else %} - - {# {% set navigation = [ - { - "href": url_for('main.get_started'), - "text": "Using Notify", - "active": header_navigation.is_selected('using_notify') - }, - { - "href": url_for('main.features'), - "text": "Features", - "active": header_navigation.is_selected('features') - }, - { - "href": url_for('main.support'), - "text": "Contact us", - "active": header_navigation.is_selected('support') - }, - { - "href": url_for('main.sign_in'), - "text": "Sign in", - "active": header_navigation.is_selected('sign-in') - } - ] %} #} + {% include "new/components/header.html" %} {% endif %} - - {{ usaHeader({ - "homepageUrl": url_for('main.show_accounts_or_dashboard'), - "productName": "Notify", - "navigation": navigation, - "navigationClasses": "govuk-header__navigation--end", - "secondaryNavigation": secondaryNavigation, - "assetsPath": asset_path + "images" - }) }} {% endblock %} - + {% block main %} diff --git a/app/templates/new/components/header.html b/app/templates/new/components/header.html new file mode 100644 index 000000000..1f559f447 --- /dev/null +++ b/app/templates/new/components/header.html @@ -0,0 +1,195 @@ + + +
+
+
+
+
+ +
+ + +
+
+ +
+
+{% if current_user.platform_admin %} + {% set navigation = [ + { + "href": url_for("main.show_accounts_or_dashboard"), + "text": "Current service", + "active": header_navigation.is_selected('accounts-or-dashboard') + }, + { + "href": url_for('main.get_started'), + "text": "Using Notify", + "active": header_navigation.is_selected('using_notify') + }, + { + "href": url_for('main.features'), + "text": "Features", + "active": header_navigation.is_selected('features') + }, + { + "href": url_for('main.platform_admin_splash_page'), + "text": "Platform admin", + "active": header_navigation.is_selected('platform-admin') + }, + { + "href": url_for('main.support'), + "text": "Contact us", + "active": header_navigation.is_selected('support') + } + ] %} + {% if current_service %} + {% set secondaryNavigation = [ + { + "href": url_for('main.service_settings', service_id=current_service.id), + "text": "Settings", + "active": secondary_navigation.is_selected('settings') + }, + { + "href": url_for('main.sign_out'), + "text": "Sign out" + } + ] %} + {% else %} + {% set secondaryNavigation = [ + { + "href": url_for('main.sign_out'), + "text": "Sign out" + } + ] %} + {% endif %} +{% else %} + {% set navigation = [ + { + "href": url_for("main.show_accounts_or_dashboard"), + "text": "Current service", + "active": header_navigation.is_selected('accounts-or-dashboard') + }, + { + "href": url_for('main.get_started'), + "text": "Using Notify", + "active": header_navigation.is_selected('using_notify') + }, + { + "href": url_for('main.features'), + "text": "Features", + "active": header_navigation.is_selected('features') + }, + { + "href": url_for('main.support'), + "text": "Contact us", + "active": header_navigation.is_selected('support') + }, + { + "href": url_for('main.user_profile'), + "text": "User profile", + "active": header_navigation.is_selected('user-profile') + } + ] %} + {% if current_service %} + {% set secondaryNavigation = [ + { + "href": url_for('main.service_settings', service_id=current_service.id), + "text": "Settings", + "active": secondary_navigation.is_selected('settings') + }, + { + "href": url_for('main.sign_out'), + "text": "Sign out" + } + ] %} + {% else %} + {% set secondaryNavigation = [ + { + "href": url_for('main.sign_out'), + "text": "Sign out" + } + ] %} + {% endif %} +{% endif %} + +
+
+
+ +
+ +
+
diff --git a/app/templates/new/templates_glossary.md b/app/templates/new/templates_glossary.md index 81325e26c..8ee501728 100644 --- a/app/templates/new/templates_glossary.md +++ b/app/templates/new/templates_glossary.md @@ -6,22 +6,22 @@ This document serves as a glossary for the templates directory structure of the ## Directory Structure - `/templates` - - `base.html`: The main base template from which all other templates inherit. This template is a combination of `main_template`, `admin_template`, `withoutnav_template` and `content_template`. - - **/layouts**: Contains base templates and shared layouts used across the site. Simply put, it defines the overall structure or skeleton of the application (less frequently revised). + - `base.html`: The main base template from which all other templates inherit. This template is a combination of `main_template`, `admin_template`, `withoutnav_template`, `settings_templates`, and `content_template`. + - **/layouts**: Contains shared layouts used across the site. Simply put, it defines the overall structure or skeleton of the application (less frequently revised). - `withnav_template.html`: A variation of the base layout that includes a sidebar. - `org_template.html`: A variaton of the withnav_template - - **/components**: Houses reusable UI components that can be included in multiple templates and can be tailored with different content or links depending on the context.(more frequently revised or customized) + - **/components**: Houses reusable UI components that can be included in multiple templates and can be tailored with different content or links depending on the context.(more frequently revised, used or customized) - `header.html`: Template for the site's header, included in `base.html`. - `footer.html`: Template for the site's footer, included in `base.html`. - **/views** (or **/pages**): Individual page templates that use the base layouts, components, and partials to present content. ### Best Practices -- Use **inheritance** (`{% extends %}`) to build on base layouts. -- Employ **components** (`{% include %}`) for reusable UI elements to keep the code DRY and facilitate easier updates. +- Use **inheritance** `{% extends %}` to build on base layouts. +- Employ **components** `{% include %}` for reusable UI elements to keep the code DRY and facilitate easier updates. ### Observation Notes -- The macro-options.json files in the header and footer component act as structural guides. They aren't directly used as data passed to the usaFooter function/macro. Instead, these files outline the expected properties and provide a description of their purpose. The `usaFooter` macro component is currently only invoked in the `admin_template`, which will eventually serve as the `base.html` template. This will simplify the approach when we change the footer macros to componenets by eliminating the need to dynamically pass this data from the base.html template. +- The macro-options.json files in the header and footer component act as structural guides. They aren't directly used as data passed to the usaFooter function/macro. Instead, these files outline the expected properties and provide a description of their purpose. The `usaFooter` macro component is currently only invoked in the `admin_template`, which will eventually serve as the `base.html` template. This will simplify the approach when we change the footer macros to componenets by eliminating the need to dynamically pass this data from the base.html template. This is also true for `usaHeader` macro component.