New support and feedback layout (#1423)

* WIP new feedback/support block

* restructured and restyled support and feedback section

* added api issue button to swagger-generated api docs, resolves #1415

* added community slack link, restyled ul for feedback block

* minor wording change in feedback section
pull/1427/head
Scott Anderson 2020-09-09 21:49:06 -06:00 committed by GitHub
parent 2b1559fcd4
commit 5b9783c055
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 412 additions and 234 deletions

View File

@ -39,7 +39,8 @@
<div class="spinner"></div>
</div>
<div id="influx-header">
<a href="/{{templateOptions.version}}">InfluxDB {{templateOptions.version}} Docs</a>
<a class="back" href="/influxdb/{{templateOptions.version}}/">InfluxDB <span class="version">{{templateOptions.version}}</span> Docs</a>
<a class="btn" href="https://github.com/influxdata/influxdb/issues/new/choose/" target="_blank">Submit API issue</a>
</div>
{{{redocHTML}}}
<script type="text/javascript">

View File

@ -45,24 +45,54 @@ $bold: 700;
#influx-header {
font-family: $rubik;
padding: 15px 20px ;
display: block;
padding: 10px ;
display: flex;
align-items: center;
justify-content: space-between;
background-color: $g2-kevlar;
a {
color: $g20-white;
text-decoration: none;
transition: color .2s;
&:hover {
color: $b-pool;
&.back {
color: $g20-white;
transition: color .2s;
&:hover {
color: $b-pool;
}
&:before {
content: '\e918';
font-family: 'icomoon';
margin-right: .65rem;
}
}
&:before {
content: '\e918';
font-family: 'icomoon';
margin-right: .65rem;
&.btn {
padding: .5rem .75rem .5rem .65rem;
font-size: .85rem;
font-weight: 500;
color: $g15-platinum;
background: $g5-pepper;
border-radius: 4.5px;
transition: all .2s;
&:before {
content: "\e933";
display: inline-block;
font-size: .95rem;
margin-right: .5rem;
font-family: 'icomoon';
}
&:hover {
color: $g20-white;
background: $b-pool;
}
}
}
}
// Header Media Queries
@media (max-width: 600px) {
#influx-header span.version {display: none;}
}
////////////////////////////////////////////////////////////////////////////////
.cjtbAK {
@ -263,3 +293,4 @@ $bold: 700;
}
.token.boolean { color: #f955b0; }
}

View File

@ -1,4 +1,98 @@
.feedback {
border-color: rgba($article-note-base, .75);
background: rgba($article-text, .05);
display: flex;
justify-content: space-between;
border: none;
border-radius: $radius;
box-shadow: 1px 2px 6px $article-shadow;
background: rgba($article-text, .03);
}
.support {
padding-right: 2rem;
ul {
display: flex;
flex-wrap: wrap;
margin-bottom: 1.25rem;
padding: 0;
list-style: none;
li {display: inline-block}
a {
margin-right: 1.5rem;
color: $article-heading-alt;
&:hover {
color: $article-link;
border-radius: calc($radius * 1.5);
}
&.community:before {
content: "\e900";
color: $article-heading-alt;
margin: 0 .25rem 0 -.25rem;
font-size: 1.65rem;
font-family: 'icomoon';
vertical-align: middle;
}
&.slack:before {
content: url('/svgs/slack.svg');
display: inline-block;
height: 1.1rem;
width: 1.1rem;
vertical-align: text-top;
margin-right: .5rem;
}
}
}
}
.actions {
min-width: 230px;
padding-bottom: 1.75rem;
a {
display: block;
padding-left: .7rem;
font-size: .85rem;
&.btn {
color: $article-text !important;
background: $feedback-btn-bg !important;
&:hover {
color: $g20-white !important;
}
}
&:before {
display: inline-block;
margin-right: .5rem;
font-family: 'icomoon';
}
&.edit:before {
content: "\e92e";
font-size: .75rem;
vertical-align: top;
}
&.issue:before {
content: "\e933";
font-size: .95rem;
}
}
}
///////////////////////////////// Media Queries ////////////////////////////////
@include media(medium) {
.feedback {
flex-direction: column;
}
}
@include media(small) {
.actions { padding-bottom: 1rem; }
}

View File

@ -188,6 +188,9 @@ $tooltip-color-alt: $br-chartreuse;
$tooltip-bg: $br-chartreuse;
$tooltip-text: $g2-kevlar;
// Support and feedback buttons
$feedback-btn-bg: $g3-castle;
// URL Modal colors
$modal-field-bg: $g1-raven;

View File

@ -188,6 +188,9 @@ $tooltip-color-alt: $p-twilight !default;
$tooltip-bg: $p-amethyst !default;
$tooltip-text: $g20-white !default;
// Support and feedback buttons
$feedback-btn-bg: $g16-pearl !default;
// URL Modal colors
$modal-field-bg: $g20-white !default;

View File

@ -1,10 +1,10 @@
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?rgf1km');
src: url('fonts/icomoon.eot?rgf1km#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?rgf1km') format('truetype'),
url('fonts/icomoon.woff?rgf1km') format('woff'),
url('fonts/icomoon.svg?rgf1km#icomoon') format('svg');
src: url('fonts/icomoon.eot?lp1izo');
src: url('fonts/icomoon.eot?lp1izo#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?lp1izo') format('truetype'),
url('fonts/icomoon.woff?lp1izo') format('woff'),
url('fonts/icomoon.svg?lp1izo#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@ -13,7 +13,7 @@
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
@ -25,35 +25,101 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-ui-disks-nav:before {
content: "\e93c";
.icon-alert-circle:before {
content: "\e933";
}
.icon-ui-wrench-nav:before {
content: "\e93d";
.icon-influx-logo:before {
content: "\e900";
}
.icon-ui-user:before {
content: "\e93e";
.icon-influx-logotype:before {
content: "\e901";
}
.icon-ui-chat:before {
content: "\e93a";
.icon-alert-triangle:before {
content: "\e902";
}
.icon-ui-bell:before {
content: "\e93b";
.icon-arrow-down:before {
content: "\e903";
}
.icon-ui-users-trio:before {
content: "\e940";
.icon-moon1:before {
content: "\e904";
}
.icon-ui-cloud:before {
content: "\e93f";
.icon-search:before {
content: "\e905";
}
.icon-ui-nav-chat:before {
content: "\e941";
.icon-sun1:before {
content: "\e906";
}
.icon-ui-eye-closed:before {
content: "\e956";
.icon-arrow-down-circle:before {
content: "\e907";
}
.icon-ui-eye-open:before {
content: "\e957";
.icon-arrow-down-left:before {
content: "\e908";
}
.icon-arrow-down-right:before {
content: "\e909";
}
.icon-arrow-left:before {
content: "\e90a";
}
.icon-arrow-left-circle:before {
content: "\e90b";
}
.icon-arrow-right:before {
content: "\e90c";
}
.icon-arrow-right-circle:before {
content: "\e90d";
}
.icon-arrow-up:before {
content: "\e90e";
}
.icon-arrow-up-circle:before {
content: "\e90f";
}
.icon-arrow-up-left:before {
content: "\e910";
}
.icon-arrow-up-right:before {
content: "\e911";
}
.icon-check:before {
content: "\e912";
}
.icon-heart1:before {
content: "\e913";
}
.icon-settings:before {
content: "\e914";
}
.icon-zoom-in:before {
content: "\e915";
}
.icon-zoom-out:before {
content: "\e916";
}
.icon-chevron-down:before {
content: "\e917";
}
.icon-chevron-left:before {
content: "\e918";
}
.icon-chevron-right:before {
content: "\e919";
}
.icon-chevron-up:before {
content: "\e91a";
}
.icon-menu:before {
content: "\e91b";
}
.icon-download:before {
content: "\e91c";
}
.icon-minus:before {
content: "\e91d";
}
.icon-plus:before {
content: "\e91e";
}
.icon-ui-add-cell:before {
content: "\e91f";
@ -115,123 +181,51 @@
.icon-ui-remove:before {
content: "\e932";
}
.icon-ui-search:before {
content: "\e933";
}
.icon-ui-trash:before {
content: "\e935";
}
.icon-ui-triangle:before {
content: "\e936";
}
.icon-ui-wrench-2:before {
content: "\e939";
}
.icon-moon1:before {
content: "\e904";
}
.icon-sun1:before {
content: "\e906";
}
.icon-search:before {
content: "\e905";
}
.icon-influx-logo:before {
content: "\e900";
}
.icon-influx-logotype:before {
content: "\e901";
}
.icon-alert-triangle:before {
content: "\e902";
}
.icon-arrow-down:before {
content: "\e903";
}
.icon-arrow-down-circle:before {
content: "\e907";
}
.icon-arrow-down-left:before {
content: "\e908";
}
.icon-arrow-down-right:before {
content: "\e909";
}
.icon-arrow-left:before {
content: "\e90a";
}
.icon-arrow-left-circle:before {
content: "\e90b";
}
.icon-arrow-right:before {
content: "\e90c";
}
.icon-arrow-right-circle:before {
content: "\e90d";
}
.icon-arrow-up:before {
content: "\e90e";
}
.icon-arrow-up-circle:before {
content: "\e90f";
}
.icon-arrow-up-left:before {
content: "\e910";
}
.icon-arrow-up-right:before {
content: "\e911";
}
.icon-check:before {
content: "\e912";
}
.icon-chevron-down:before {
content: "\e917";
}
.icon-chevron-left:before {
content: "\e918";
}
.icon-chevron-right:before {
content: "\e919";
}
.icon-chevron-up:before {
content: "\e91a";
}
.icon-download:before {
content: "\e91c";
}
.icon-heart1:before {
content: "\e913";
}
.icon-menu:before {
content: "\e91b";
}
.icon-minus:before {
content: "\e91d";
}
.icon-plus:before {
content: "\e91e";
}
.icon-settings:before {
content: "\e914";
}
.icon-triangle:before {
content: "\e937";
}
.icon-x:before {
content: "\e938";
}
.icon-zoom-in:before {
content: "\e915";
.icon-ui-wrench-2:before {
content: "\e939";
}
.icon-zoom-out:before {
content: "\e916";
.icon-chat:before {
content: "\e93a";
}
.icon-folder-upload:before {
content: "\e934";
.icon-bell:before {
content: "\e93b";
}
.icon-disks-nav:before {
content: "\e93c";
}
.icon-wrench-nav:before {
content: "\e93d";
}
.icon-user:before {
content: "\e93e";
}
.icon-cloud:before {
content: "\e93f";
}
.icon-users-trio:before {
content: "\e940";
}
.icon-nav-chat:before {
content: "\e941";
}
.icon-map2:before {
content: "\e94c";
}
.icon-eye-closed:before {
content: "\e956";
}
.icon-eye-open:before {
content: "\e957";
}
.icon-heart:before {
content: "\e9da";
}

View File

@ -8,6 +8,6 @@
{{ .Content }}
{{ partial "article/related.html" . }}
{{ partial "article/tags.html" . }}
{{ partial "article/_feedback.html" . }}
{{ partial "article/feedback.html" . }}
</article>
</div>

View File

@ -1,17 +0,0 @@
<hr/>
<div class="feedback block">
<h4 id="bug-reports-and-feedback">Support and feedback</h4>
<p>
Thank you for being part of our community!
We welcome and encourage your feedback and bug reports for InfluxDB and this documentation.
To find support or submit feedback, the following resources are available:
</p>
<ul>
<li><a href="https://community.influxdata.com/c/influxdb2" target="_blank">Post in the InfluxData Community</a>.</li>
<li>Submit <strong>documentation issues</strong> to the <a href="https://github.com/influxdata/docs-v2" target="_blank">InfluxDB 2.0 documentation repository</a>.</li>
<li>Submit <strong>InfluxDB issues</strong> to the <a href="https://github.com/influxdata/influxdb" target="_blank">InfluxDB repository</a>.</li>
</ul>
<p>
For our <strong>InfluxDB Cloud</strong> customers, <a href="mailto:support@influxdata.com" target="_blank">InfluxData Support</a> is also available.
</p>
</div>

View File

@ -0,0 +1,38 @@
{{ $productPathData := findRE "[^/]+.*?" .RelPermalink }}
{{ .Scratch.Set "product" (index $productPathData 0) }}
{{ if in (.Scratch.Get "product") "influxdb" }}
{{ .Scratch.Set "product" "influxdb" }}
{{ end }}
{{ $product := .Scratch.Get "product" }}
{{ $productName := (index .Site.Data.products $product).name }}
{{ $supportBlacklist := slice "chronograf" "kapacitor" }}
{{ .Scratch.Set "pageGithubLink" (print "https://github.com/influxdata/docs-v2/edit/master/content/" .File.Path) }}
{{ .Scratch.Set "productGithubLink" (print "https://github.com/influxdata/" $product "/issues/new/choose/") }}
{{ $pageGithubLink := .Scratch.Get "pageGithubLink" }}
{{ $productGithubLink := .Scratch.Get "productGithubLink" }}
<hr/>
<div class="feedback block">
<div class="support">
<h4 id="bug-reports-and-feedback">Support and feedback</h4>
<p>
Thank you for being part of our community!
We welcome and encourage your feedback and bug reports for {{ $productName }} and this documentation.
To find support, the following resources are available:
</p>
<ul>
<li><a class="community" href="https://community.influxdata.com/" target="_blank">InfluxData Community</a></li>
<li><a class="slack" href="https://influxdata.com/slack" target="_blank">InfluxDB Community Slack</a></li>
</ul>
{{ if not (in $supportBlacklist $product) }}
<p><strong>InfluxDB Cloud{{ if eq $product "influxdb" }} and InfluxDB Enterprise{{ end }} customers</strong> can <a href="mailto:support@influxdata.com" target="_blank">contact InfluxData Support</a>.</p>
{{ end }}
</div>
<div class="actions">
<a href="{{ $pageGithubLink }}" class="btn edit" target="_blank">Edit this page</a>
<a href="https://github.com/influxdata/docs-v2/issues/new/" class="btn issue" target="_blank">Submit docs issue</a>
<a href="{{ $productGithubLink }}" class="btn issue" target="_blank">Submit {{ $productName }} issue</a>
</div>
</div>

Binary file not shown.

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Binary file not shown.

33
static/svgs/slack.svg Normal file
View File

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 122.8 122.8" style="enable-background:new 0 0 122.8 122.8;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E01E5A;}
.st1{fill:#36C5F0;}
.st2{fill:#2EB67D;}
.st3{fill:#ECB22E;}
</style>
<g>
<g>
<path class="st0" d="M25.8,77.6c0,7.1-5.8,12.9-12.9,12.9S0,84.7,0,77.6c0-7.1,5.8-12.9,12.9-12.9h12.9V77.6z"/>
<path class="st0" d="M32.3,77.6c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9
C32.3,109.9,32.3,77.6,32.3,77.6z"/>
</g>
<g>
<path class="st1" d="M45.2,25.8c-7.1,0-12.9-5.8-12.9-12.9S38.1,0,45.2,0s12.9,5.8,12.9,12.9v12.9H45.2z"/>
<path class="st1" d="M45.2,32.3c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H12.9C5.8,58.1,0,52.3,0,45.2s5.8-12.9,12.9-12.9
C12.9,32.3,45.2,32.3,45.2,32.3z"/>
</g>
<g>
<path class="st2" d="M97,45.2c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H97V45.2z"/>
<path class="st2" d="M90.5,45.2c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V12.9C64.7,5.8,70.5,0,77.6,0
c7.1,0,12.9,5.8,12.9,12.9V45.2z"/>
</g>
<g>
<path class="st3" d="M77.6,97c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V97H77.6z"/>
<path class="st3" d="M77.6,90.5c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9
c0,7.1-5.8,12.9-12.9,12.9H77.6z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB