hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-12-15 17:31:56 +03:00
Code Issues Projects Releases Wiki Activity

docs: design & UI fixes (fix #5022)

Browse Source
This commit is contained in:
sezgi 2020-06-10 18:55:07 -07:00
parent 8b6728de43
commit c9e622ffb2
2 changed files with 50 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
@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');
html { html {
background-color: #f8f8f8 !important; background-color: #f8f8f8 !important;
@ -122,7 +123,7 @@ samp {
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;
@ -266,6 +267,7 @@ samp {
} }
.bannerStripWrapper .bannerStrip .bodyTextSmall .bannerStripWrapper .bannerStrip .bodyTextSmall
{ {
font-family: Poppins;
text-align: left; text-align: left;
padding-top: 0; padding-top: 0;
letter-spacing: normal; letter-spacing: normal;
@ -1285,7 +1287,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 {
@ -1381,7 +1383,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 {
@ -1389,7 +1391,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;
@ -1402,7 +1404,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;
@ -1415,7 +1417,7 @@ 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: 16px; font-size: 16px;
@ -1426,8 +1428,12 @@ 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;
@ -1503,20 +1509,17 @@ article ol ol {
position: relative; position: relative;
display: block; display: block;
z-index: 10; z-index: 10;
}
.headerWrapper .navLeft .brand {
margin-top: 3px;
padding: 5px 0;
} }
.headerWrapper .navLeft .socialBtn { .headerWrapper .navLeft {
margin-top: 4px; padding-top: 5px;
} }
.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 {
list-style-type: none; list-style-type: none;
@ -1555,19 +1558,18 @@ article ol ol {
display: block; display: block;
z-index: 10; z-index: 10;
} }
.headerWrapper .navLeft .brand { .headerWrapper .navLeft {
padding: 5px 0; padding-top: 5px;
margin-top: 0px;
margin-right: 16px;
} }
.headerWrapper .navLeft .socialBtn { .headerWrapper .navLeft .brand {
margin-top: 4px; margin-right: 16px;
} }
.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 {
list-style-type: none; list-style-type: none;

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

@ -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>
@ -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 {