add github and social media buttons to docs page (#540)

This commit is contained in:
surendran82 2018-09-26 19:42:55 +05:30 committed by Shahidh K Muhammed
parent 0a43d53ab9
commit 17cbdbd970
5 changed files with 123 additions and 7 deletions

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
npm-debug.log
*.temp
*.DS_Store

View File

@ -649,6 +649,7 @@ p {
.header_links {
width: 33%;
text-align: right;
}
.header_links.inline-block .header_links_content {
@ -658,7 +659,48 @@ p {
.header_links.inline-block .buttons {
float: right;
}
.social_icons_wrapper
{
padding-left: 10px;
}
.social_icons_wrapper .social_icons
{
display: inline-block;
padding: 0 5px;
opacity: 0.7;
}
.tooltip {
position: relative;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 272px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 2px;
position: absolute;
z-index: 1;
right: 0;
top: 36px;
font-size: 14px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.social_icons_wrapper .social_icons:hover
{
opacity: 1;
}
.social_icons_wrapper .social_icons img
{
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
width: 30px;
display: inline-block;
}
.link_element {
padding: 5px 10px;
margin-left: 5px;
@ -1383,4 +1425,3 @@ ol, ul {
padding: 10px
}
}

View File

@ -66,13 +66,32 @@
<input type="text" class="search_element" placeholder="Search docs..." />
</div>
<div class="header_links inline-block">
<div class="buttons">
<div class="inline-block">
<!-- a target="_blank" href="https://dashboard.{{ BASE_DOMAIN }}/login" -->
<button class="indiv_btns black supportBtn"> Support </button>
<!--/ a -->
<div class="social_icons_wrapper">
<div class="social_icons">
<iframe src="https://ghbtns.com/github-btn.html?user=hasura&repo=graphql-engine&type=star&count=true" frameBorder="0" scrolling="0" width="95px" height="25px"></iframe>
</div>
<div class="social_icons">
<a href="https://twitter.com/hasurahq/" target="_blank">
<img class="responsive" src="{{ pathto('_images/layout/Twitter.svg', 1) }}" />
</a>
</div>
<div class="social_icons tooltip">
<a href="https://discord.gg/vBPpJkS" target="_blank">
<img class="responsive" src="{{ pathto('_images/layout/Discord.svg', 1) }}" />
</a>
<span class="tooltiptext">Get instant support on our discord server</span>
</div>
</div>
<!-- no need support button
<div class="buttons">
<div class="inline-block"> -->
<!-- a target="_blank" href="https://dashboard.{{ BASE_DOMAIN }}/login" -->
<!-- no need support button <button class="indiv_btns black supportBtn"> Support </button> -->
<!--/ a -->
<!-- no need support button
</div>
</div> -->
</div>
</div>
<div id="{{ pagename|replace('/', '-') }}">

View File

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-216 218 66 66" style="enable-background:new -216 218 66 66;" xml:space="preserve">
<style type="text/css">
.st0{fill:#97A9FF;}
.st1{fill:#FFFFFF;}
</style>
<g id="Layer_1">
<title>Discord</title>
<desc>Created with Sketch.</desc>
<g id="Page-1">
<g id="Hasura_Jun29-Update" transform="translate(-1157.000000, -872.000000)">
<g id="Group-6" transform="translate(1066.000000, 872.000000)">
<g id="Discord" transform="translate(91.000000, 0.000000)">
<g>
<g id="Twitter-Copy">
<path id="back" class="st0" d="M-216,251c0-18.2,14.8-33,33-33s33,14.8,33,33s-14.8,33-33,33S-216,269.2-216,251z"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g id="Layer_2">
<g>
<path class="st1" d="M-172.5,266.6l-2.5-2.9c4.8-1.3,6.7-4.6,6.7-4.6c-6.1,5.7-22.6,6-29.1,0c0,0,1.6,3,6.5,4.6l-2.7,2.9
c-8.2-0.1-11.3-5.6-11.3-5.6c0-12.1,5.4-21.8,5.4-21.8c5.5-3.9,10.5-3.9,10.5-3.9l0.4,0.5c-6.8,1.9-9.7,4.9-9.7,4.9
c7.9-5.4,24.3-4.9,30.7,0c0.1-0.1-3.9-3.3-10-4.9l0.6-0.5c0,0,5,0,10.5,3.9c0,0,5.4,9.7,5.4,21.8
C-161.2,261-164.3,266.5-172.5,266.6z"/>
<ellipse class="st0" cx="-190" cy="253.5" rx="3.9" ry="4.1"/>
<ellipse class="st0" cx="-176.5" cy="253.5" rx="3.9" ry="4.1"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="66px" height="66px" viewBox="0 0 66 66" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
<title>Twitter</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Hasura_Jun29-Update" transform="translate(-1066.000000, -872.000000)">
<g id="Group-6" transform="translate(1066.000000, 872.000000)">
<g id="Twitter">
<g>
<path d="M0,33 C0,14.7746024 14.7746024,0 33,0 C51.2253976,0 66,14.7746024 66,33 C66,51.2253976 51.2253976,66 33,66 C14.7746024,66 0,51.2253976 0,33 Z" id="back" fill="#55ACEE"></path>
<path d="M32.5362646,26.7393379 L32.6058642,27.8966431 L31.4458703,27.7549322 C27.2234923,27.2117073 23.5347116,25.3694664 20.4027279,22.2754464 L18.8715359,20.7402457 L18.477138,21.8739324 C17.6419423,24.401109 18.1755395,27.0699965 19.9155304,28.8650005 C20.8435256,29.8569763 20.6347267,29.9986872 19.033935,29.4082253 C18.477138,29.2192775 17.9899405,29.0775667 17.9435407,29.1484221 C17.7811416,29.3137514 18.3379387,31.4630325 18.7787364,32.3132975 C19.3819332,33.4942212 20.6115268,34.6515264 21.9571198,35.3364621 L23.0939139,35.879687 L21.7483209,35.9033055 C20.4491277,35.9033055 20.4027279,35.9269239 20.5419272,36.4229119 C21.0059248,37.9581126 22.8387152,39.5877873 24.8803045,40.2963415 L26.318697,40.7923294 L25.0659036,41.5481205 C23.2099133,42.6345703 21.0291246,43.2486506 18.848336,43.2958876 C17.8043415,43.319506 16.9459459,43.4139799 16.9459459,43.4848353 C16.9459459,43.7210201 19.7763312,45.0436546 21.4235226,45.563261 C26.3650968,47.0984617 32.2346662,46.4371445 36.6426431,43.815494 C39.7746268,41.9496346 42.9066105,38.2415343 44.3682028,34.6515264 C45.1569987,32.7384301 45.9457946,29.242896 45.9457946,27.5659844 C45.9457946,26.4795347 46.0153942,26.3378238 47.3145874,25.0388078 C48.0801834,24.2830167 48.7993797,23.4563701 48.938579,23.2201854 C49.1705778,22.7714344 49.1473779,22.7714344 47.9641841,23.1729484 C45.9921943,23.8815026 45.7137958,23.7870287 46.6881907,22.7241974 C47.407387,21.9684063 48.2657825,20.5985348 48.2657825,20.1970208 C48.2657825,20.1261654 47.9177843,20.2442577 47.5233864,20.456824 C47.1057885,20.6930087 46.1777934,21.0472858 45.481797,21.2598521 L44.2290035,21.6613661 L43.0922095,20.8819565 C42.4658128,20.456824 41.5842174,19.9844545 41.1202198,19.8427437 C39.937026,19.5120851 38.1274354,19.559322 37.060241,19.9372176 C34.1602561,21.0000489 32.3274657,23.7397918 32.5362646,26.7393379 Z" id="Shape" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB