diff --git a/app/templates/new/base.html b/app/templates/new/base.html new file mode 100644 index 000000000..b175cff51 --- /dev/null +++ b/app/templates/new/base.html @@ -0,0 +1,372 @@ +{% from "../components/banner.html" import banner %} +{% from "../components/components/skip-link/macro.njk" import usaSkipLink -%} +{% from "../components/components/header/macro.njk" import usaHeader -%} +{% from "../components/components/footer/macro.njk" import usaFooter -%} + + + + + + + + {% block pageTitle %} + {% block per_page_title %} {% endblock %}Notify.gov + <!-- on templates that were using content_template.html, we might need to use the {{ content_page_title }} variable for the per_page_title --> + {% endblock %} + + + + + {% if config['NR_MONITOR_ON'] %} + {% include "partials/newrelic.html" -%} + {% endif %} + {# Ensure that older IE versions always render with the correct rendering engine #} + + {% block headIcons %} + + + + + {% endblock %} + + {% block head %} + + {% block extra_stylesheets %} + {% endblock %} + {% if g.hide_from_search_engines %} + + {% endif %} + + {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #} + {% block meta_format_detection %} + + {% endblock %} + {% block meta %} + + + {% endblock %} + + {% endblock %} + + + + + {% block bodyStart %} + {% block extra_javascripts_before_body %} + + + + {% endblock %} + {% endblock %} + + {% block skipLink %} + {{ usaSkipLink({ + "href": '#main-content', + "text": 'Skip to main content' + }) }} + {% 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') + } + ] %} #} + {% 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 %} +
+ {% block beforeContent %} + {% block backLink %}{% endblock %} + {% endblock %} + {% block mainClasses %} + +
+ {% endblock %} + {% block content %} + {% block flash_messages %} + + {% endblock %} + {% block maincolumn_content %} + {% block fromContentTemplatetwoColumnGrid %} +
+ {% if navigation_links %} +
+ {{ sub_navigation(navigation_links) }} +
+
+ {% else %} +
+ {% endif %} + {% block content_column_content %}{% endblock %} +
+
+ + {% endblock %} + {% endblock %} + {% endblock %} +
+
+ {% endblock %} + + + + {% block footer %} + + {% if current_service and current_service.research_mode %} + {% set meta_suffix = 'Built by the Technology Transformation Servicesresearch mode' %} + {% else %} + {% set meta_suffix = 'Built by the Technology Transformation Services' %} + {% endif %} + + {{ usaFooter({ + "classes": "js-footer", + "navigation": [ + { + "title": "About Notify", + "columns": 1, + "items": [ + { + "href": url_for("main.features"), + "text": "Features" + }, + { + "href": url_for("main.roadmap"), + "text": "Roadmap" + }, + { + "href": url_for("main.security"), + "text": "Security" + }, + { + "href": url_for("main.terms"), + "text": "Terms of use" + }, + ] + }, + { + "title": "Using Notify", + "columns": 1, + "items": [ + { + "href": url_for("main.get_started"), + "text": "Get started" + }, + { + "href": url_for("main.pricing"), + "text": "Pricing" + }, + { + "href": url_for("main.trial_mode_new"), + "text": "Trial mode" + }, + { + "href": url_for("main.message_status"), + "text": "Delivery status" + }, + { + "href": url_for("main.guidance_index"), + "text": "Guidance" + }, + { + "href": url_for("main.documentation"), + "text": "API documentation" + } + ] + }, + { + "title": "Support", + "columns": 1, + "items": [ + { + "href": url_for('main.support'), + "text": "Contact us" + }, + ] + }, + ], + "meta": { + "items": meta_items, + "html": meta_suffix + } + }) }} + + {% if current_user.is_authenticated %} + {% block sessionUserWarning %} + +
+
+

+ Your session will end soon. + Please choose to extend your session or sign out. Your session will expire in 5 minutes or less. +

+
+

You have been inactive for too long. + Your session will expire in . +

+
+ +
+
+
+ {% endblock %} + {% endif %} + + {% endblock %} + + + {% block bodyEnd %} + {% block extra_javascripts %} + {% endblock %} + + + + + {% endblock %} + + diff --git a/app/templates/new/layouts/org_template.html b/app/templates/new/layouts/org_template.html new file mode 100644 index 000000000..5e04003fd --- /dev/null +++ b/app/templates/new/layouts/org_template.html @@ -0,0 +1,35 @@ +{% extends "base.html" %} + +{% block per_page_title %} + {% block org_page_title %}{% endblock %} – {{ current_org.name }} +{% endblock %} + +{% block main %} +
+ +
+
+ {% include "org_nav.html" %} +
+
+ {% block beforeContent %} + {% block backLink %}{% endblock %} + {% endblock %} +
+ {% block content %} + {% include 'flash_messages.html' %} + {% block maincolumn_content %}{% endblock %} + {% endblock %} +
+
+
+
+{% endblock %} diff --git a/app/templates/new/layouts/withnav_template.html b/app/templates/new/layouts/withnav_template.html new file mode 100644 index 000000000..412a004d0 --- /dev/null +++ b/app/templates/new/layouts/withnav_template.html @@ -0,0 +1,41 @@ +{% extends "base.html" %} + +{% block per_page_title %} + {% block service_page_title %}{% endblock %} – {{ current_service.name }} +{% endblock %} + +{% block main %} +
+ {% block serviceNavigation %} + {% include "service_navigation.html" %} + {% endblock %} + +
+ {% if help %} +
+ {% else %} +
+ {% endif %} + {% block sideNavigation %} + {% include "main_nav.html" %} + + {% endblock %} +
+ {% if help %} +
+ {% else %} +
+ {% endif %} + {% block beforeContent %} + {% block backLink %}{% endblock %} + {% endblock %} +
+ {% block content %} + {% include 'flash_messages.html' %} + {% block maincolumn_content %}{% endblock %} + {% endblock %} +
+
+
+
+{% endblock %} diff --git a/app/templates/new/templates_glossary.md b/app/templates/new/templates_glossary.md new file mode 100644 index 000000000..81325e26c --- /dev/null +++ b/app/templates/new/templates_glossary.md @@ -0,0 +1,37 @@ + +# New Templates Glossary + +This document serves as a glossary for the templates directory structure of the project. + +## 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). + - `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) + - `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. + +### 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. + + + +### Old Layout Templates We Don't Need +- withoutnav_template.html Delete +- main_template.html Delete +- settings_templates.html `withnav_template` can be used to replace `settings_template`. +- settings_nav.html (move to /new/navigation directory) +- main_nav.html (move to /new/navigation directory) +- service_navigation.html (move to /new/navigation directory) +- org_template, could be under it's own directory called /layout/organization +- org_nav.html (move to /new/navigation directory) +- content_template.html Delete