Skip to content

Commit

Permalink
docs: update marketo form
Browse files Browse the repository at this point in the history 
GitOrigin-RevId: 474aa47
  • Loading branch information
@surendran82 @hasura-bot
surendran82 authored and hasura-bot committed Jan 12, 2021
1 parent f967a4b commit 3373bbc
Show file tree
Hide file tree
Showing 6 changed files with 178 additions and 18 deletions.
1 change: 0 additions & 1 deletion docs/.gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,5 @@ venv
myenv
env


# Jetbrains folder
.idea
15 changes: 15 additions & 0 deletions docs/_static/scripts/hdocs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,21 @@ window.hdocs = (function () {
hdocs.setExternalLinks();
hdocs.setupIntercom();
hdocs.setupGraphiQL();
hdocs.newsletterForm();
},
newsletterForm: function () {
const searchParams = new URLSearchParams(window.location.search);
const searchAliId = searchParams.get("aliId");
var marketoForm = document.getElementById("mktoForm_1011");
var marketoSuccess = document.getElementById("marketo-success");
if (searchAliId || searchAliId === '') {
marketoForm.classList.add('hide');
marketoSuccess.classList.remove('hide');
marketoSuccess.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
} else {
marketoForm.classList.remove('hide');
marketoSuccess.classList.add('hide');
}
},
toggleMenu: function () {
var x = document.getElementById("navbar")
Expand Down
4 changes: 3 additions & 1 deletion docs/_static/styles/landing.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,9 @@
width: 50%;
float: left;
}

.marketoFormWrapper {
width: 100% !important;
}
@media (max-width: 1024px) {
.hcl_half {
width: 100%;
Expand Down
156 changes: 143 additions & 13 deletions docs/_static/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,13 +108,6 @@ p {
color: #001934;
padding-right: 40px;
}
.mc_embed_signup form {
display: flex !important;
padding: 0 0 0 0 !important;
flex: 1 !important;
position: relative !important;
font-size: 16px;
}
/* todo: redesign & clean up */
.mc_embed_signup input:focus {border-color:#333;}
.mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; transition: all 0.23s ease-in-out 0s; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: normal; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
Expand Down Expand Up @@ -225,6 +218,136 @@ p {
.mce-responses .success-message {
color: #1cd3c6 !important;
}
/* new subscribe form css */
.marketoFormWrapper {
width: 100% !important;
border-radius: 8px;
padding: 0px;
margin: 0 auto;
position: relative;
flex: 1;
height: 34px;
}
.marketoFormWrapper .mktoFormRow {
position: absolute;
left: 0;
top: 0;
width: calc(100% - 186px);
}
.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor {
float: none;
min-height: unset !important;
margin-bottom: 0px !important;
}
.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoOffset {
display: none;
}
.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap {
float: none;
}
.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap .mktoGutter {
display: none;
}
.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap .mktoLabel {
display: none;
font-size: 16px;
line-height: 220%;
font-weight: 400;
color: #717780;
font-weight: 400;
float: none;
width: 100% !important;
}
.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap .mktoField {
width: 100% !important;
height: 34px;
border-radius: 5px;
color: #001934!important;
opacity: .8!important;
font-weight: 400;
border: solid 1px #ddd;
padding: 0 0 !important;
text-indent: 12px;
font-size: 16px;
background-color: #fff;;
z-index: 1;
}
.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap .mktoField:hover, .marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap textarea:hover, .marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap select:hover {
border: 1px solid #111b29;
}
.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap .mktoField:focus, .marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap textarea:focus, .marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap select:focus {
outline: none;
border: 1px solid #0093a5;
}
.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap .mktoField:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
-webkit-box-shadow: 0 0 0px 1000px white inset;
background-color: transparent;
font-size: 16px;
}
.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap .mktoField:-webkit-autofill, .marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap .mktoField:-webkit-autofill:hover, .marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap .mktoField:-webkit-autofill:focus, .marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap .mktoField:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 35px #fff inset !important;
-webkit-text-fill-color: #505050 !important;
font-size: 16px;
caret-color: #505050;
color: #fff !important;
}
.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap .mktoField:-internal-autofill-selected {
color: #505050 !important;
font-size: 16px;
}
.marketoFormWrapper .mktoButtonRow {
display: block;
position: absolute;
right: 0;
top: 0;
width: 170px;
}
.marketoFormWrapper .mktoButtonRow .mktoButtonWrap {
margin-left: 0 !important;
}
.marketoFormWrapper .mktoButtonRow .mktoButtonWrap .mktoButton {
padding: 3px 15px !important;
font-size: 14px !important;
border-radius: 8px;
font-weight: 600;
width: 100%;
border: 0;
cursor: pointer;
transition: all 0.2s ease-in-out;
background-color: rgba(0,25,52,1) !important;
background-image: none !important;
color: #fff !important;
transition: all 0.2s ease-in-out;
border: 0 !important;
height: 34px;
}
.marketoFormWrapper .mktoButtonRow .mktoButtonWrap .mktoButton:hover {
background-color: rgba(92, 148, 200, 1);
}
.marketoFormWrapper .mktoButtonRow .mktoButtonWrap .mktoButton:focus {
outline: none;
}
.marketoFormWrapper .mktoButtonRow .mktoButtonWrap .mktoButton:hover {
transform: scale(0.98);
}
.subscribeNewsletterSuccess {
background-color: #f8f8f8;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
height: 34px;
color: #111b29;
width: 100%;
flex: 1;
font-weight: 600;
}
.subscribeNewsletterSuccess img {
margin-right: 12px;
height: 22px;
}
#content_inner_wrapper {
width: 75% !important;
/* height: 100vh; */
Expand Down Expand Up @@ -1014,14 +1137,12 @@ article ol ol {
}
}
@media (min-width: 768px) and (max-width: 1385px) {
.mc_embed_signup form {
padding-top: 10px !important;
}
.mc_embed_signup {
display: block;
}
.mc_embed_signup .subscribe-form-content {
padding-right: 0;
padding-bottom: 10px;
text-align: center;
}
.mce-responses .error-message, .mce-responses .success-message {
Expand All @@ -1039,17 +1160,26 @@ article ol ol {
}
.mc_embed_signup .subscribe-form-content {
padding-right: 0;
padding-bottom: 10px;
text-align: center;
}
.mc_embed_signup form {
padding-top: 10px !important;
}
.submit-box input {
padding: 0 4px !important;
}
.mce-responses .error-message, .mce-responses .success-message {
top: 34px !important;
}
.subscribeNewsletterSuccess {
height: auto;
padding: 10px;
width: auto;
}
.marketoFormWrapper .mktoFormRow {
width: calc(100% - 110px);
}
.marketoFormWrapper .mktoButtonRow {
width: auto;
}
#input_search_box {
flex: 1;
margin-left: 10px;
Expand Down
14 changes: 11 additions & 3 deletions docs/_theme/djangodocs/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
{# TODO: replace react & graphiql imports with a custom directive #}
{# b/c we're not using any graphiql functionality, only styles #}

{% set deferred_script_files = ['_static/react/react.min.js', '_static/react/react-dom.min.js', '_static/graphiql/graphiql.min.js', '_static/scripts/hdocs.js', '_static/scripts/newsletter.js'] %}
{% set deferred_script_files = ['_static/react/react.min.js', '_static/react/react-dom.min.js', '_static/graphiql/graphiql.min.js', '_static/scripts/hdocs.js'] %}

{%- if pagename.endswith('mysql-preview') %}
{% set deferred_script_files = deferred_script_files + ['_static/scripts/mysql-subscribe.js'] %}
Expand Down Expand Up @@ -294,10 +294,16 @@
</div>
</div>
<div class="subscribe-form-wrapper">
<div id="mc_embed_signup" class="mc_embed_signup">
<div class="mc_embed_signup">
<div class="subscribe-form-content">
Stay up to date with product & security news
</div>
<form id="mktoForm_1011" class="marketoFormWrapper"></form>
<div id='marketo-success' class='subscribeNewsletterSuccess hide'>
<img src="{{ pathto('_images/layout/newsletter-success.svg', 1) }}" alt='Success' />
Thank you for subscribing to our newsletter!
</div>
<!--
<form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate post-subscription-form mc-embedded-subscribe-form newsletter-form" target="_blank" rel="noopener" novalidate>
<div class="full-width">
<div class="input-box">
Expand All @@ -315,6 +321,7 @@
<input type="submit" disabled="true" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button mc-embedded-subscribe">
</div>
</form>
-->
</div>
</div>
<div class="footer-hasura-custom">
Expand Down Expand Up @@ -352,7 +359,8 @@
{% block footer %}

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

<script src="https://page.hasura.io/js/forms2/js/forms2.min.js"></script>
<script>MktoForms2.loadForm("https://page.hasura.io", "631-HMN-492", 1011);</script>
<script type="text/javascript">
const HDOCS_BASE_DOMAIN = "{{ BASE_DOMAIN }}";
const HDOCS_GRAPHIQL_DEFAULT_ENDPOINT = "{{ GRAPHIQL_DEFAULT_ENDPOINT }}";
Expand Down
6 changes: 6 additions & 0 deletions docs/img/layout/newsletter-success.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3373bbc

Please sign in to comment.