diff --git a/.circleci/config.yml b/.circleci/config.yml index be3aed00..a1922fe1 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,5 +1,4 @@ --- - defaults: &defaults docker: - image: canonicalwebteam/dev @@ -17,7 +16,7 @@ jobs: command: pip3 install flake8 - run: name: Lint webapp with Flake8 - command: flake8 webapp + command: yarn run python-lint scss-lint: <<: *defaults steps: diff --git a/.env b/.env index 9257e28a..c457c904 100644 --- a/.env +++ b/.env @@ -1,3 +1,4 @@ PORT=8029 FLASK_DEBUG=true DEVEL=True +EXPERTS_RETURN=https://jaas.ai diff --git a/package.json b/package.json index 09c36161..eb8f9a41 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "build-js": "webpack --mode development ./static/js/src/app.js --output ./static/js/dist/app.js --module-bind js=babel-loader", "clean": "rm -rf node_modules yarn-error.log css static/css *.log *.sqlite _site/ build/ .jekyll-metadata .bundle", "lint-scss": "sass-lint static/**/*.scss --verbose --no-exit", - "python-lint": "flake8 webapp tests", + "python-lint": "flake8 --max-line-length 95 webapp tests", "serve": "./entrypoint 0.0.0.0:${PORT}", "test": "npm run python-lint && npm run test-python && sass-lint static/**/*.scss --verbose --no-exit", "test-python": "python3 -m unittest discover tests", diff --git a/static/js/app/modal.js b/static/js/app/modal.js new file mode 100644 index 00000000..1e53aaba --- /dev/null +++ b/static/js/app/modal.js @@ -0,0 +1,27 @@ +/* +@param { String } modalId +The DOM id of the element you'd like to turn into a modal. +*/ +if (!window.app.model) { + window.app.modal = function(modalId) { + const modal = document.querySelector(`#${modalId}`); + const modalTrigger = document.querySelector(`[data-js=${modalId}Trigger]`); + + modalTrigger.onclick = function() { + modal.classList.remove('p-modal--hidden'); + }; + + const closeModal = document.querySelector(`#${modalId} [data-js=modalClose]`); + closeModal.onclick = function() { + modal.classList.add('p-modal--hidden'); + }; + + modal.onclick = function(e) { + modal.classList.add('p-modal--hidden'); + }; + + document.querySelector(`.p-modal__dialog`).onclick = function(e) { + e.stopPropagation(); + }; + }; +} diff --git a/static/sass/custom/_modal.scss b/static/sass/custom/_modal.scss new file mode 100644 index 00000000..fae41a80 --- /dev/null +++ b/static/sass/custom/_modal.scss @@ -0,0 +1,90 @@ +.p-modal { + opacity: 1; + visibility: visible; + transition: visibility 0s, opacity 0.25s linear; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 99999; + + ul, + button { + margin-bottom: 0; + } + + &__header { + max-height: 16px; + } + + &__close { + margin-left: auto; + } + + &__dialog { + max-width: 420px; + overflow-y: scroll; + } +} + +.p-modal--hidden { + opacity: 0; + visibility: hidden; +} + +.modal__divider { + margin: 1rem 0; +} + +.modal__contact-list { + list-style: none; + margin-left: 0; + padding-left: 0; + + li { + display: flex; + margin-bottom: 0.25rem; + + a { + padding-left: 0.5rem; + } + } + + img { + display: block; + padding-top: 0.25rem; + } +} + +.modal__button { + display: flex; + + button { + margin-left: auto; + } +} + +.icon-placeholder { + display: inline-block; + width: 16px; +} + +.modal__tel-link { + display: inline-block; + margin-right: 0.5rem; +} + +.modal__terms { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.submit-wrapper { + display: flex; + margin-top: 1rem; + + &__button { + margin-left: auto; + } +} diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 4727d45d..5c17877e 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -27,6 +27,7 @@ $mid-grey: $color-mid-light; @import 'custom/minimal-juju-cards'; @import 'custom/entities'; @import 'custom/homepage-hero-promo'; +@import 'custom/modal'; // temp header styling $color-nav-border: #33535d; diff --git a/templates/jaasai/experts/spicule.html b/templates/jaasai/experts/spicule.html index cdcad145..5995b1b8 100644 --- a/templates/jaasai/experts/spicule.html +++ b/templates/jaasai/experts/spicule.html @@ -23,46 +23,9 @@

Please let us know if you have a question, or would like further information about Spicule.

@@ -187,5 +150,6 @@

+{% include "shared/_spicule_lead-gen-form.html" %} {% endblock content %} diff --git a/templates/jaasai/experts/thanks.html b/templates/jaasai/experts/thanks.html new file mode 100644 index 00000000..87472e4e --- /dev/null +++ b/templates/jaasai/experts/thanks.html @@ -0,0 +1,20 @@ +{% extends "_layout.html" %} + +{% block title %}Juju expert - Your message has been successfully sent.{% endblock %} + +{% block content %} +
+
+
+

Thank you.

+

Your message has been successfully sent - we'll get back to you as soon as possible.

+
+
+
+
+

Return to the homepage.

+
+
+
+ +{% endblock content %} diff --git a/templates/shared/_spicule_lead-gen-form.html b/templates/shared/_spicule_lead-gen-form.html new file mode 100644 index 00000000..7e680da1 --- /dev/null +++ b/templates/shared/_spicule_lead-gen-form.html @@ -0,0 +1,96 @@ +
+
+ +
+
+ + diff --git a/templates/store/bundle-details.html b/templates/store/bundle-details.html index 3cb3c784..c22c5dff 100644 --- a/templates/store/bundle-details.html +++ b/templates/store/bundle-details.html @@ -99,6 +99,41 @@

Description

+ {% if context.bundle.owner == "spiculecharms" or context.bundle.owner == "yellow" %} +
+
+ Juju expert partners +
+ +
+
    +
  • + Machine learning +
    • +
  • + Data service deployments +
    • +
  • + Container orchestration +
    • +
+ +
+
+

Please let us know if you have a question, or would like further information about Spicule.

+
+ +
+
+
+ {% endif %} + {% if context.bundle.bundle_data.Meta['common-info'] %}

Contribute

@@ -188,4 +223,8 @@

Preview

window.app.treeifyFileList(); +{% if context.bundle.owner == "spiculecharms" or context.bundle.owner == "yellow" %} + {% include "shared/_spicule_lead-gen-form.html" %} +{% endif %} + {% endblock %} diff --git a/webapp/jaasai/views.py b/webapp/jaasai/views.py index e55a15aa..753375a1 100644 --- a/webapp/jaasai/views.py +++ b/webapp/jaasai/views.py @@ -1,4 +1,5 @@ from flask import Blueprint, render_template +import os jaasai = Blueprint( 'jaasai', __name__, @@ -48,7 +49,11 @@ def experts(): @jaasai.route('/experts/spicule') def experts_spicule(): - return render_template('jaasai/experts/spicule.html') + EXPERTS_RETURN = os.environ.get("EXPERTS_RETURN", default="https://jaas.ai") + return render_template( + 'jaasai/experts/spicule.html', + expertThanksPage=EXPERTS_RETURN + ) @jaasai.route('/experts/tengu') @@ -56,6 +61,11 @@ def experts_tengu(): return render_template('jaasai/experts/tengu.html') +@jaasai.route('/experts/thanks') +def experts_thanks(): + return render_template('jaasai/experts/thanks.html') + + @jaasai.route('/community') def community(): return render_template('jaasai/community.html')