hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2025-01-05 22:34:22 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #5077 from sezgi/ui-tweaks

Browse Source 
docs: design & UI fixes (close #5022)
This commit is contained in:
sezgi 2020-06-16 11:20:29 -07:00 committed by GitHub
commit fe0aca2a6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 139 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
docs/_static/hasura-custom.css vendored
View File

@ -1,6 +1,6 @@
@import url('https://fonts.googleapis.com/css?family=Gudea');
@import url('https://fonts.googleapis.com/css?family=Khula:400,700'); @import url('https://fonts.googleapis.com/css?family=Khula:400,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap');
html { html {
background-color: #f8f8f8 !important; background-color: #f8f8f8 !important;
} }
@ -13,9 +13,72 @@ html {
background: #b2d7fe !important; background: #b2d7fe !important;
} }
/* override djangosite.css */
body, p, #docs-content, #sidebar,
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
body, p, #docs-content, #sidebar, #sidebar a,
tt, code, kbd, pre, samp,
.graphiql .graphiql-container .CodeMirror {
font-size: 18px;
}
[role="main"] {
width: 90%;
border: none;
padding: 1px 15px 0;
}
[role="main"] h1 {
font-size: 32px;
}
[role="main"] h2 {
font-size: 26px;
}
[role="main"] h3 {
font-size: 24px;
}
[role="main"] h4 {
font-size: 20px;
}
@media (max-width: 1200px) {
body, p, #docs-content, #sidebar, #sidebar a,
tt, code, kbd, pre, samp,
.graphiql .graphiql-container .CodeMirror {
font-size: 16px;
}
[role="main"] h1 {
font-size: 32px;
}
[role="main"] h2 {
font-size: 24px;
}
[role="main"] h3 {
font-size: 20px;
}
[role="main"] h4 {
font-size: 18px;
}
}
form input[type="search"], form input[type="text"],
form input[type="email"], form input[type="password"],
form input[type="number"], form input[type="url"],
form input[type="submit"], form textarea {
font-size: 16px;
}
body { body {
font-family: 'Gudea' !important;
font-size: 16px !important;
color: #333 !important; color: #333 !important;
min-width: 100%; min-width: 100%;
overflow-y: auto; overflow-y: auto;
@ -36,25 +99,10 @@ h3 {
} }
p { p {
font-family: 'Gudea';
font-size: 16px;
color: #333; color: #333;
line-height: 1.7; line-height: 1.7;
} }
tt,
code,
kbd,
pre,
samp {
font-size: 15px !important;
}
ol,
ul {
font-family: 'Gudea';
}
.inline-block { .inline-block {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -72,7 +120,6 @@ ul {
.content_wrapper { .content_wrapper {
display: flex; display: flex;
font-family: 'Gudea';
margin: auto; margin: auto;
width: 100%; width: 100%;
/* height: calc(100vh - 60px); */ /* height: calc(100vh - 60px); */
@ -87,8 +134,6 @@ ul {
align-items: center; align-items: center;
} }
#mc_embed_signup .subscribe-form-content { #mc_embed_signup .subscribe-form-content {
font-family: 'Gudea';
font-size: 18px;
font-weight: bold; font-weight: bold;
color: #001934; color: #001934;
padding-right: 40px; padding-right: 40px;
@ -118,13 +163,12 @@ ul {
margin: 0 0 !important; margin: 0 0 !important;
border-radius: 5px !important; border-radius: 5px !important;
border: solid 1px #001934 !important; border: solid 1px #001934 !important;
background-color: transparent !important; background-color: #fff;
color: #001934 !important; color: #001934 !important;
opacity: .8 !important; opacity: .8 !important;
padding: 0 16px !important; padding: 0 16px !important;
height: 32px !important; height: 32px !important;
width: calc(100% - 32px) !important; width: calc(100% - 32px) !important;
font-size: 13px !important;
} }
.input-box input:-webkit-autofill, .input-box input:-webkit-autofill { .input-box input:-webkit-autofill, .input-box input:-webkit-autofill {
-webkit-animation-name: autofill; -webkit-animation-name: autofill;
@ -159,7 +203,6 @@ ul {
background-color: rgba(0, 25, 52, .9) !important; background-color: rgba(0, 25, 52, .9) !important;
border: 1px solid rgba(0, 25, 52, .9) !important; border: 1px solid rgba(0, 25, 52, .9) !important;
color: #1ad7ca !important; color: #1ad7ca !important;
font-size: 13px !important;
font-weight: bold !important; font-weight: bold !important;
height: 34px !important; height: 34px !important;
} }
@ -179,7 +222,6 @@ ul {
background-color: #001934; background-color: #001934;
padding: 8px 12px !important; padding: 8px 12px !important;
border-radius: 4px; border-radius: 4px;
font-family: 'Gudea';
font-size: 14px !important; font-size: 14px !important;
font-weight: normal; font-weight: normal;
position: absolute; position: absolute;
@ -265,8 +307,7 @@ ul {
} }
.bannerStripWrapper .bannerStrip .bodyTextSmall .bannerStripWrapper .bannerStrip .bodyTextSmall
{ {
font-family: 'Poppins'; font-family: Poppins;
font-size: 18px;
text-align: left; text-align: left;
padding-top: 0; padding-top: 0;
letter-spacing: normal; letter-spacing: normal;
@ -292,34 +333,8 @@ ul {
overflow-y: auto; overflow-y: auto;
} }
[role="main"] {
width: 90% !important;
/*max-width: 800px !important;*/
border: none !important;
padding-bottom: 0 !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
[role="main"] h1 {
font-size: 32px !important;
}
[role="main"] h2 {
font-size: 24px !important;
}
[role="main"] h3 {
font-size: 20px !important;
}
[role="main"] h4 {
font-size: 18px !important;
}
#docs-content, #docs-content,
#docs-header { #docs-header {
font-size: 16px !important;
margin-left: 40px; margin-right: 40px; margin-left: 40px; margin-right: 40px;
} }
@ -575,8 +590,6 @@ article ol ol {
color: #1CD3C6; color: #1CD3C6;
} }
#nav_tree_icon .docs-menu { #nav_tree_icon .docs-menu {
font-family: 'Poppins';
font-size: 14px;
font-weight: 600; font-weight: 600;
color: #001934; color: #001934;
margin-left: 20px; margin-left: 20px;
@ -595,7 +608,6 @@ article ol ol {
position: absolute; position: absolute;
top: 13px; top: 13px;
left: 10px; left: 10px;
font-size: 18px;
color: #1CD3C6; color: #1CD3C6;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
@ -608,7 +620,6 @@ article ol ol {
display: block; display: block;
width: 100%; width: 100%;
padding: 6px 12px; padding: 6px 12px;
font-size: 18px;
line-height: 1.42857143; line-height: 1.42857143;
color: #333; color: #333;
background-color: #fff; background-color: #fff;
@ -661,14 +672,6 @@ article ol ol {
/*** Table of contents END ***/ /*** Table of contents END ***/
/*** toctree ***/
.toctree-wrapper {
font-family: 'Gudea';
}
/*** toctree END ***/
/*** Feedback section ***/ /*** Feedback section ***/
.feedback_wrapper { .feedback_wrapper {
@ -677,10 +680,6 @@ article ol ol {
margin: 20px 0; margin: 20px 0;
} }
.feedback_wrapper .feedback {
position: relative;
}
.feedback_wrapper .feedback .display_inl { .feedback_wrapper .feedback .display_inl {
display: inline-block; display: inline-block;
} }
@ -688,18 +687,13 @@ article ol ol {
.feedback_wrapper .feedback .actions { .feedback_wrapper .feedback .actions {
width: 21px; width: 21px;
cursor: pointer; cursor: pointer;
} margin-left: 15px;
position: relative;
.feedback_wrapper .feedback .actions.thumb_up { top: 2px;
position: absolute;
top: 1px;
left: 170px;
} }
.feedback_wrapper .feedback .actions.thumb_down { .feedback_wrapper .feedback .actions.thumb_down {
position: absolute; top: 5px;
left: 210px;
top: 4px;
} }
.feedback_wrapper .thumb_up:hover svg path { .feedback_wrapper .thumb_up:hover svg path {
@ -721,9 +715,8 @@ article ol ol {
color: #000; color: #000;
border-radius: 5px; border-radius: 5px;
border: 1px solid #1CD3C6; border: 1px solid #1CD3C6;
font-size: 14px; font-size: 16px;
font-weight: 600; font-weight: 600;
font-family: 'Gudea';
} }
#feedback_box { #feedback_box {
@ -736,6 +729,7 @@ article ol ol {
/*** Footer ***/ /*** Footer ***/
.footer-hasura-custom { .footer-hasura-custom {
font-size: 16px;
text-align: center; text-align: center;
background-color: #eee; background-color: #eee;
margin: 20px 0; margin: 20px 0;
@ -760,8 +754,6 @@ article ol ol {
#sidebar { #sidebar {
background-color: #001934; background-color: #001934;
width: 24% !important; width: 24% !important;
font-family: 'Gudea' !important;
font-size: 16px;
height: 100vh; height: 100vh;
overflow-y: auto; overflow-y: auto;
padding-left: 15px !important; padding-left: 15px !important;
@ -806,7 +798,6 @@ article ol ol {
/* color: #fff; */ /* color: #fff; */
color: rgba(214,214,214,1); color: rgba(214,214,214,1);
text-decoration: none; text-decoration: none;
font-size: 16px;
} }
#sidebar .sphinxsidebar .sphinxsidebarwrapper ul li a code { #sidebar .sphinxsidebar .sphinxsidebarwrapper ul li a code {
@ -839,7 +830,6 @@ article ol ol {
} }
#sidebar .sphinxsidebar .sphinxsidebarwrapper .header_main_logo .version_txt { #sidebar .sphinxsidebar .sphinxsidebarwrapper .header_main_logo .version_txt {
font-family: 'Gudea';
color: rgba(255,198,39,1); color: rgba(255,198,39,1);
margin-top: 6px; margin-top: 6px;
margin-left: 10px; margin-left: 10px;
@ -853,7 +843,6 @@ article ol ol {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
color: #FFF; color: #FFF;
// color: #000;
font-size: 18px; font-size: 18px;
-moz-appearance: none; -moz-appearance: none;
@ -890,11 +879,6 @@ article ol ol {
margin-left: calc(24vw - 240px); margin-left: calc(24vw - 240px);
} }
#sidebar .sphinxsidebar .sphinxsidebarwrapper .current {
font-family: 'Gudea';
font-size: 16px;
}
#sidebar .sphinxsidebar .sphinxsidebarwrapper a.current.reference.internal { #sidebar .sphinxsidebar .sphinxsidebarwrapper a.current.reference.internal {
color: #1CD3C6 !important; color: #1CD3C6 !important;
} }
@ -976,8 +960,8 @@ article ol ol {
} }
.graphiql .variable-editor .variable-editor-title { .graphiql .variable-editor .variable-editor-title {
line-height: 12px; line-height: 18px;
font-size: 13px; font-size: 16px;
padding: 2px 10px; padding: 2px 10px;
} }
@ -1162,10 +1146,13 @@ article ol ol {
min-width: calc(166% + 10px); /* 1 / width(input_search_box) + 10px */ min-width: calc(166% + 10px); /* 1 / width(input_search_box) + 10px */
} }
} }
@media (min-width: 768px) and (max-width: 1200px) { @media (min-width: 768px) and (max-width: 1385px) {
.bannerStripWrapper { .bannerStripWrapper {
/* padding-left: 4vw; */ /* padding-left: 4vw; */
} }
.bannerStripWrapper .bannerStrip .bodyTextSmall {
line-height: 21px;
}
.bannerStripWrapper .bannerStripImg { .bannerStripWrapper .bannerStripImg {
display: none; display: none;
} }
@ -1275,7 +1262,6 @@ article ol ol {
} }
.commonBtn { .commonBtn {
border-radius: 5px; border-radius: 5px;
font-family: 'Poppins';
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
position: relative; position: relative;
@ -1311,7 +1297,7 @@ article ol ol {
display: none; display: none;
position: absolute; position: absolute;
right: 0; right: 0;
top: 13px; top: 16px;
cursor: pointer; cursor: pointer;
} }
.navBarToggle .iconBar { .navBarToggle .iconBar {
@ -1407,7 +1393,7 @@ article ol ol {
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
height: 18px; height: 20px;
text-decoration: none; text-decoration: none;
} }
.headerWrapper .navLeft .gitHubBtn .gitHubStars { .headerWrapper .navLeft .gitHubBtn .gitHubStars {
@ -1415,7 +1401,7 @@ article ol ol {
align-items: center; align-items: center;
padding-left: 4px; padding-left: 4px;
background-color: #f1f5f8; background-color: #f1f5f8;
height: 18px; height: 20px;
} }
.headerWrapper .navLeft .gitHubBtn .gitHubStars img { .headerWrapper .navLeft .gitHubBtn .gitHubStars img {
width: 12px; width: 12px;
@ -1428,7 +1414,7 @@ article ol ol {
} }
.headerWrapper .navLeft .gitHubBtn .gitHubCount { .headerWrapper .navLeft .gitHubBtn .gitHubCount {
border-left: 1px solid #d1d2d3; border-left: 1px solid #d1d2d3;
height: 10px; height: 12px;
padding: 4px; padding: 4px;
line-height: 8px; line-height: 8px;
display: flex; display: flex;
@ -1441,11 +1427,10 @@ article ol ol {
} }
.headerWrapper .navBlueBG .navBarUL { .headerWrapper .navBlueBG .navBarUL {
padding-left: 0; padding-left: 0;
margin: 0 0; margin: 2px 0 0;
} }
.headerWrapper .navBlueBG .navBarUL li, .headerWrapper .navWhiteBG .navBarUL li { .headerWrapper .navBlueBG .navBarUL li, .headerWrapper .navWhiteBG .navBarUL li {
font-size: 15px; font-size: 16px;
font-family: 'Poppins';
list-style-type: none; list-style-type: none;
display: inline-block; display: inline-block;
padding: 10px 6px; padding: 10px 6px;
@ -1453,15 +1438,18 @@ article ol ol {
margin: 0 0; margin: 0 0;
letter-spacing: -.48px; letter-spacing: -.48px;
} }
.headerWrapper .navBlueBG .navBarUL li, .versionTxt {
color: #1CD3C6;
}
.versionTxt { .versionTxt {
position: relative; font-size: 13px;
vertical-align: top;
} }
.versionTxt select { .versionTxt select {
border-radius: 8px; border-radius: 8px;
background-color: rgba(255, 255, 255, .24); background-color: rgba(255, 255, 255, .24);
margin-right: 12px; margin-right: 12px;
font-family: 'Poppins'; font-size: 14px;
font-size: 12px;
font-weight: 600; font-weight: 600;
color: #ffffff; color: #ffffff;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -1531,27 +1519,19 @@ article ol ol {
position: relative; position: relative;
display: block; display: block;
z-index: 10; z-index: 10;
}
.headerWrapper .navLeft .brand {
margin-top: 3px;
padding: 8px 0;
} }
.headerWrapper .navLeft .gitHubBtn { .headerWrapper .navLeft {
margin-top: 4px; padding-top: 5px;
}
.headerWrapper .navLeft .twitterBtn, .headerWrapper .navLeft .discordBtn {
margin-top: 4px;
} }
.headerWrapper .topnav .visibleMobile .navBarULMobile { .headerWrapper .topnav .visibleMobile .navBarULMobile {
padding: 10px 15px; padding: 10px 15px;
background-color: #001934; background-color: #001934;
border-top: 1px solid rgba(255, 255, 255, .6);
border-bottom: 1px solid rgba(255, 255, 255, .6); border-bottom: 1px solid rgba(255, 255, 255, .6);
margin-top: 0; margin-top: 0;
position: relative;
bottom: 1px;
} }
.headerWrapper .topnav .visibleMobile .navBarULMobile li { .headerWrapper .topnav .visibleMobile .navBarULMobile li {
font-size: 15px;
font-family: 'Poppins';
list-style-type: none; list-style-type: none;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
@ -1588,30 +1568,24 @@ article ol ol {
display: block; display: block;
z-index: 10; z-index: 10;
} }
.headerWrapper .navLeft {
padding-top: 5px;
}
.headerWrapper .navLeft .brand { .headerWrapper .navLeft .brand {
padding: 8px 0;
margin-top: 0px;
margin-right: 16px; margin-right: 16px;
}
.headerWrapper .navLeft .twitterBtn, .headerWrapper .navLeft .discordBtn {
margin-top: 4px;
}
.headerWrapper .navLeft .gitHubBtn {
margin-top: 4px;
} }
.headerWrapper .topnav .visibleMobile .navBarULMobile { .headerWrapper .topnav .visibleMobile .navBarULMobile {
padding: 10px 15px; padding: 10px 15px;
background-color: #001934; background-color: #001934;
border-top: 1px solid rgba(255, 255, 255, .6); border-bottom: 1px solid rgba(255, 255, 255, .6);
border-bottom: 1px solid rgba(255, 255, 255, .6); position: relative;
bottom: 11px;
} }
.headerWrapper .topnav .visibleMobile .navBarULMobile li { .headerWrapper .topnav .visibleMobile .navBarULMobile li {
font-size: 15px; list-style-type: none;
font-family: 'Poppins'; font-weight: 600;
list-style-type: none; text-transform: uppercase;
font-weight: 600; padding: 10px 0;
text-transform: uppercase;
padding: 10px 0;
} }
.headerWrapper .topnav .visibleMobile .navBarULMobile li a { .headerWrapper .topnav .visibleMobile .navBarULMobile li a {
color: rgba(255, 255, 255, .6); color: rgba(255, 255, 255, .6);

65
docs/_theme/djangodocs/layout.html vendored
View File

@ -4,7 +4,7 @@
{% set is_landing_page = true %} {% set is_landing_page = true %}
{%- endif %} {%- endif %}
{% set css_files = css_files + ['_static/hasura-custom.css', '_static/djangosite.css'] %} {% set css_files = css_files + ['_static/djangosite.css', '_static/hasura-custom.css'] %}
{%- if is_landing_page %} {%- if is_landing_page %}
{% set css_files = css_files + ['_static/landing.css'] %} {% set css_files = css_files + ['_static/landing.css'] %}
@ -42,7 +42,7 @@
<img src="{{ pathto('_images/layout/hasura-con.svg', 1) }}" alt="Hasura con 2020"/> <img src="{{ pathto('_images/layout/hasura-con.svg', 1) }}" alt="Hasura con 2020"/>
</div> </div>
<div class="bodyTextSmall"> <div class="bodyTextSmall">
Hasura Con: <span class='fontNormal'>Our free online conference on Pushing the boundaries of GraphQL<span class='mLeft15'>·</span></span><span class='underLine mLeft15'>Register now</span> Hasura Con: <span class='fontNormal'>Our free online conference on pushing the boundaries of GraphQL<span class='mLeft15'>·</span></span><span class='underLine mLeft15'>Register now</span>
</div> </div>
</div> </div>
</div> </div>
@ -68,16 +68,16 @@
</a> </a>
</div> </div>
<a href="https://discordapp.com/invite/hasura" target="_blank" rel="noopener noreferrer"> <a href="https://discordapp.com/invite/hasura" target="_blank" rel="noopener noreferrer">
<div class="discordBtn"> <div class="socialBtn discordBtn">
<img src="{{ pathto('_images/layout/discord-brands-block.svg', 1) }}" alt="Discord"/> <img src="{{ pathto('_images/layout/discord-brands-block.svg', 1) }}" alt="Discord"/>
</div> </div>
</a> </a>
<a href="https://twitter.com/hasurahq" target="_blank" rel="noopener noreferrer"> <a href="https://twitter.com/hasurahq" target="_blank" rel="noopener noreferrer">
<div class="twitterBtn"> <div class="socialBtn twitterBtn">
<img src="{{ pathto('_images/layout/twitter-brands-block.svg', 1) }}" alt="Twitter"/> <img src="{{ pathto('_images/layout/twitter-brands-block.svg', 1) }}" alt="Twitter"/>
</div> </div>
</a> </a>
<a class='gitHubBtn hide' href="https://github.com/hasura/graphql-engine/" target="_blank" rel="noopener noreferrer"> <a class='socialBtn gitHubBtn hide' href="https://github.com/hasura/graphql-engine/" target="_blank" rel="noopener noreferrer">
<div class='gitHubStars'> <div class='gitHubStars'>
<img src="{{ pathto('_images/layout/github-header.svg', 1) }}" alt='Github'/> <img src="{{ pathto('_images/layout/github-header.svg', 1) }}" alt='Github'/>
<span>Star</span> <span>Star</span>
@ -89,16 +89,16 @@
</div> </div>
<div class="navBlueBG"> <div class="navBlueBG">
<ul class="navBarUL"> <ul class="navBarUL">
<!-- <select value="{{ version }}" onchange="location = this.value;" class="selected" aria-label="Select Version">
{%- if version == '1.0' %}
<option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html" selected="selected">v1.x</option>
{%- else -%}
<option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html">v1.x</option>
{% endif %}
</select> -->
<li>v1.x</li>
<li class='navListActive'> <li class='navListActive'>
<span class="versionTxt">
<select value="{{ version }}" onchange="location = this.value;" class="selected" aria-label="Select Version">
{%- if version == '1.0' %}
<option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html" selected="selected">v1.x</option>
{%- else -%}
<option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html">v1.x</option>
{% endif %}
</select>
</span>
<a href="/docs/">Docs</a> <a href="/docs/">Docs</a>
</li> </li>
<li> <li>
@ -146,7 +146,7 @@
</div> </div>
<div class='navBlueBG'> <div class='navBlueBG'>
<span class="navBarToggle" <span class="navBarToggle"
onclick="openMenu()" onclick="toggleMenu()"
> >
<span class="iconBar"></span> <span class="iconBar"></span>
<span class="iconBar"></span> <span class="iconBar"></span>
@ -158,58 +158,57 @@
<ul class="navBarULMobile"> <ul class="navBarULMobile">
<li> <li>
<a href="/docs/" <a href="/docs/"
onclick="openMenu()" onclick="toggleMenu()"
> >Docs</a>
Docs
</a>
<span class="versionTxt"> <span class="versionTxt">
<select value="{{ version }}" onchange="location = this.value;" class="selected" aria-label="Select Version"> v1.x
<!-- <select value="{{ version }}" onchange="location = this.value;" class="selected" aria-label="Select Version">
{%- if version == '1.0' %} {%- if version == '1.0' %}
<option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html" selected="selected">v1.x</option> <option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html" selected="selected">v1.x</option>
{%- else -%} {%- else -%}
<option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html">v1.x</option> <option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html">v1.x</option>
{% endif %} {% endif %}
</select> </select> -->
</span> </span>
</li> </li>
<li> <li>
<a href='https://hasura.io/blog/' <a href='https://hasura.io/blog/'
onclick="openMenu()" onclick="toggleMenu()"
> >
Blog Blog
</a> </a>
</li> </li>
<li> <li>
<a href='https://hasura.io/learn/' <a href='https://hasura.io/learn/'
onclick="openMenu()" onclick="toggleMenu()"
> >
Tutorials Tutorials
</a> </a>
</li> </li>
<li> <li>
<a href="https://hasura.io/enterprise/" <a href="https://hasura.io/enterprise/"
onclick="openMenu()" onclick="toggleMenu()"
> >
Enterprise Enterprise
</a> </a>
</li> </li>
<li> <li>
<a href="https://hasura.io/hasura-pro/" <a href="https://hasura.io/hasura-pro/"
onclick="openMenu()" onclick="toggleMenu()"
> >
Hasura Pro Hasura Pro
</a> </a>
</li> </li>
<li> <li>
<a href="https://hasura.io/pricing/" <a href="https://hasura.io/pricing/"
onclick="openMenu()" onclick="toggleMenu()"
> >
Pricing Pricing
</a> </a>
</li> </li>
<li> <li>
<a href='https://hasura.io/docs/1.0/graphql/manual/getting-started/index.html' <a href='https://hasura.io/docs/1.0/graphql/manual/getting-started/index.html'
onclick="openMenu()" onclick="toggleMenu()"
> >
<button class='commonBtn navBtnHome'> <button class='commonBtn navBtnHome'>
Get Started Get Started
@ -218,7 +217,7 @@
</li> </li>
<li> <li>
<a href="https://calendly.com/hasura/prod-expert-call" <a href="https://calendly.com/hasura/prod-expert-call"
onclick="openMenu()" onclick="toggleMenu()"
> >
<button class="commonBtn navBtnContactHome"> <button class="commonBtn navBtnContactHome">
Talk to a Product Expert Talk to a Product Expert
@ -340,7 +339,7 @@
<div class="subscribe-form-wrapper"> <div class="subscribe-form-wrapper">
<div id="mc_embed_signup"> <div id="mc_embed_signup">
<div class="subscribe-form-content"> <div class="subscribe-form-content">
Stay up to date with product & security updates Stay up to date with product & security news
</div> </div>
<form action="https://hasura.us13.list-manage.com/subscribe/post?u=9b63e92a98ecdc99732456b0e&amp;id=f5c4f66bcf" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate post-subscription-form mailchimp-form" target="_blank" rel="noopener" novalidate> <form action="https://hasura.us13.list-manage.com/subscribe/post?u=9b63e92a98ecdc99732456b0e&amp;id=f5c4f66bcf" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate post-subscription-form mailchimp-form" target="_blank" rel="noopener" novalidate>
<div class="full-width"> <div class="full-width">
@ -438,8 +437,8 @@
<!--Hamburger menu--> <!--Hamburger menu-->
<script type="text/javascript"> <script type="text/javascript">
function openMenu() { function toggleMenu() {
var x = document.getElementById("navbar"); var x = document.getElementById("navbar")
if (x.className === "topnav") { if (x.className === "topnav") {
x.className += " responsive" x.className += " responsive"
} else { } else {
@ -616,12 +615,12 @@
}; };
const handleThumbUpClick = function(e) { const handleThumbUpClick = function(e) {
sendFeedback('positive', 'Great to hear that. Would you like to share any other feedback:'); sendFeedback('positive', 'Great to hear that! If you have any other feedback, please share here:');
}; };
$('.thumb_up').on('click', handleThumbUpClick); $('.thumb_up').on('click', handleThumbUpClick);
const handleThumbDownClick = function(e) { const handleThumbDownClick = function(e) {
sendFeedback('negative', 'Sorry to hear that. Could you please tell us what you were looking for:'); sendFeedback('negative', 'Sorry to hear that. Please tell us what you were looking for:');
}; };
$('.thumb_down').on('click', handleThumbDownClick); $('.thumb_down').on('click', handleThumbDownClick);