Update v3 wayfinding modal (#5230)
* update description and verbiage in v3 wayfinding modal to address user feedback * Update layouts/partials/footer/v3-wayfinding.html Co-authored-by: Jason Stirnaman <stirnamanj@gmail.com> --------- Co-authored-by: Jason Stirnaman <stirnamanj@gmail.com>pull/5232/head
Scott Anderson
GitHub
parent
b892ddf32b
commit
c131654294
|
|
@ -1,13 +1,13 @@
|
|||
// Store the host value for the current page
|
||||
currentPageHost = window.location.href.match(/^(?:[^\/]*\/){2}[^\/]+/g)[0]
|
||||
|
||||
// Define iox-wayfinding elements
|
||||
var wayfindingModal = document.getElementById('iox-wayfinding-modal');
|
||||
var wayfindingClose = document.getElementById('iox-wayfinding-close');
|
||||
var wayfindingStay = document.getElementById('iox-wayfinding-stay');
|
||||
var wayfindingSwitch = document.getElementById('iox-wayfinding-switch');
|
||||
var wayfindingOptOut = document.getElementById('iox-wayfinding-opt-out');
|
||||
var wayfindingOptOutInput = document.getElementById('iox-wayfinding-opt-out-input');
|
||||
// Define v3-wayfinding elements
|
||||
var wayfindingModal = document.getElementById('v3-wayfinding-modal');
|
||||
var wayfindingClose = document.getElementById('v3-wayfinding-close');
|
||||
var wayfindingStay = document.getElementById('v3-wayfinding-stay');
|
||||
var wayfindingSwitch = document.getElementById('v3-wayfinding-switch');
|
||||
var wayfindingOptOut = document.getElementById('v3-wayfinding-opt-out');
|
||||
var wayfindingOptOutInput = document.getElementById('v3-wayfinding-opt-out-input');
|
||||
var wayfindingFindOutToggle = document.getElementById('find-out-toggle');
|
||||
var wayfindingFindOutInstructions = document.getElementById('find-out-instructions');
|
||||
|
||||
|
|
@ -17,10 +17,10 @@ var wayfindingFindOutInstructions = document.getElementById('find-out-instructio
|
|||
*/
|
||||
var referrerWhitelist = cloudUrls.concat(currentPageHost);
|
||||
|
||||
// iox-wayfinding preference cookie name
|
||||
// v3-wayfinding preference cookie name
|
||||
var wayfindingPrefCookie = 'influx-iox-show-wayfinding'
|
||||
|
||||
// Toggle the iox-wayfinding modal
|
||||
// Toggle the v3-wayfinding modal
|
||||
function toggleWayfinding() {
|
||||
wayfindingModal.classList.toggle("open");
|
||||
}
|
||||
|
|
@ -46,7 +46,7 @@ function slideUp(elem) {
|
|||
}
|
||||
|
||||
/**
|
||||
* Check to see if the iox-wayfinding modal should be opened:
|
||||
* Check to see if the v3-wayfinding modal should be opened:
|
||||
* - Is the user coming from a non-whitelisted external referrer?
|
||||
* - Has the user opted out of the wayfinding modal?
|
||||
*/
|
||||
|
|
@ -134,7 +134,7 @@ wayfindingFindOutToggle.onclick = function(event) {
|
|||
|
||||
/**
|
||||
* Check to see if the referrer is in the referrer whitelist, otherwise trigger
|
||||
* the iox-wayfinding modal.
|
||||
* the v3-wayfinding modal.
|
||||
* This reuses the referrerHost variable defined in assets/js/influxdb-url.js
|
||||
*/
|
||||
if (shouldOpenWayfinding()) {
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
#iox-wayfinding-modal {
|
||||
#v3-wayfinding-modal {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
|
@ -72,16 +72,18 @@
|
|||
}
|
||||
|
||||
#find-out-instructions {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
line-height: 1rem;
|
||||
transition: height .2s ease-out, opacity .2s;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
margin-top: -.5rem;
|
||||
margin-top: 0;
|
||||
font-size: .95rem;
|
||||
font-style: italic;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -115,6 +117,19 @@
|
|||
font-size: .95rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
span.storage-description {
|
||||
display: block;
|
||||
color: $grey55;
|
||||
font-weight: normal;
|
||||
line-height: 1.1rem;
|
||||
|
||||
&.git-head::after {
|
||||
content: "(xxxxxx)";
|
||||
font-family: $code;
|
||||
margin-left: .2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -127,7 +142,7 @@
|
|||
align-content: center;
|
||||
}
|
||||
|
||||
.iox-wayfinding-btn {
|
||||
.v3-wayfinding-btn {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
margin-bottom: .5rem;
|
||||
|
|
@ -148,7 +163,7 @@
|
|||
|
||||
}
|
||||
|
||||
#iox-wayfinding-close {
|
||||
#v3-wayfinding-close {
|
||||
position: absolute;
|
||||
top: .75rem;
|
||||
right: .75rem;
|
||||
|
|
@ -225,7 +240,7 @@
|
|||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
@include media(small) {
|
||||
#iox-wayfinding-modal {
|
||||
#v3-wayfinding-modal {
|
||||
.wayfinding-content-info {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
"layouts/notifications",
|
||||
"layouts/custom-time-trigger",
|
||||
"layouts/code-controls",
|
||||
"layouts/iox-wayfinding";
|
||||
"layouts/v3-wayfinding";
|
||||
|
||||
// Import Product-specifc color schemes
|
||||
@import "product-overrides/telegraf",
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<!-- IOx wayfinding modal -->
|
||||
{{ if in (slice "cloud" "cloud-serverless") $currentVersion }}
|
||||
{{ partial "footer/iox-wayfinding.html" . }}
|
||||
{{ partial "footer/v3-wayfinding.html" . }}
|
||||
{{ end }}
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -15,13 +15,13 @@
|
|||
{{ $pageFeedback := resources.Get "js/page-feedback.js" }}
|
||||
{{ $homepageInteractions := resources.Get "js/home-interactions.js" }}
|
||||
{{ $fluxInfluxDBVersions := resources.Get "/js/flux-influxdb-versions.js" }}
|
||||
{{ $ioxWayfinding := resources.Get "/js/iox-wayfinding.js"}}
|
||||
{{ $v3Wayfinding := resources.Get "/js/v3-wayfinding.js"}}
|
||||
{{ $codePlaceholders := resources.Get "/js/code-placeholders.js" }}
|
||||
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $listFilters $modals $influxdbURLs $featureCallouts $tabbedContent $notifications $keybindings $codeControls $pageFeedback $homepageInteractions $fluxInfluxDBVersions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
|
||||
{{ $fluxGroupKeyjs := $fluxGroupKeys | resources.Fingerprint }}
|
||||
{{ $dateTimejs := $dateTime | resources.Fingerprint }}
|
||||
{{ $influxdbGSTimestampsjs := $influxdbGSTimestamps | resources.Fingerprint }}
|
||||
{{ $ioxWayfindingjs := $ioxWayfinding | resources.Fingerprint }}
|
||||
{{ $v3Wayfindingjs := $v3Wayfinding | resources.Fingerprint }}
|
||||
{{ $codePlaceholdersjs := $codePlaceholders | resources.Fingerprint }}
|
||||
|
||||
<!-- Load cloudUrls array -->
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
|
||||
<!-- Load IOx wayfinding JS if page is in cloud or cloud-serverless -->
|
||||
{{ if in (slice "cloud" "cloud-serverless") (index (findRE "[^/]+.*?" .Page.RelPermalink) 1) }}
|
||||
<script type="text/javascript" src="{{ $ioxWayfinding.RelPermalink }}"></script>
|
||||
<script type="text/javascript" src="{{ $v3Wayfinding.RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
|
||||
<!-- Load code placeholders js when code-placeholders shortcode is present -->
|
||||
|
|
|
|||
|
|
@ -2,27 +2,29 @@
|
|||
{{ $productPathData := findRE "[^/]+.*?" .RelPermalink }}
|
||||
{{ $version := index $productPathData 1 }}
|
||||
{{ $altVersion := cond (ne $version "cloud-serverless") "cloud-serverless" "cloud" }}
|
||||
{{ $engine := cond (eq $version "cloud-serverless") "IOx" "TSM" }}
|
||||
{{ $altEngine := cond (eq $version "cloud-serverless") "TSM" "IOx" }}
|
||||
{{ $engine := cond (eq $version "cloud-serverless") "v3" "TSM" }}
|
||||
{{ $altEngine := cond (eq $version "cloud-serverless") "TSM" "v3" }}
|
||||
{{ $productName := cond (eq $version "cloud-serverless") "InfluxDB Cloud Serverless" "InfluxDB Cloud (TSM)" }}
|
||||
{{ $altProductName := cond (eq $version "cloud-serverless") "InfluxDB Cloud (TSM)" "InfluxDB Cloud Serverless" }}
|
||||
{{ $altDoc := .Page.Params.alt_engine | default "" }}
|
||||
{{ $altLink := cond (ne $altDoc "") $altDoc (print "/influxdb/" $altVersion "/") }}
|
||||
{{ $isCloud := eq $version "cloud" }}
|
||||
{{ $isIOx := eq $version "cloud-serverless" }}
|
||||
{{ $isV3 := eq $version "cloud-serverless" }}
|
||||
|
||||
{{ $scratch.Set "uiText" "" }}
|
||||
{{ $scratch.Set "link" "" }}
|
||||
{{ if $isCloud }}
|
||||
{{ $scratch.Set "uiText" "InfluxDB Cloud powered by TSM"}}
|
||||
{{ $altIOxPage := $.GetPage ((replaceRE "influxdb/cloud" "influxdb/cloud-serverless" $.Page.RelPermalink) | replaceRE `\/$` "") }}
|
||||
{{ $scratch.Set "uiStorageDescription" "Storage Engine Version 2" }}
|
||||
{{ $altV3Page := $.GetPage ((replaceRE "influxdb/cloud" "influxdb/cloud-serverless" $.Page.RelPermalink) | replaceRE `\/$` "") }}
|
||||
{{ if ne $altDoc "" }}
|
||||
{{ $scratch.Set "link" $altDoc }}
|
||||
{{ else if gt (len $altIOxPage.Title) 0 }}
|
||||
{{ $scratch.Set "link" $altIOxPage.RelPermalink }}
|
||||
{{ else if gt (len $altV3Page.Title) 0 }}
|
||||
{{ $scratch.Set "link" $altV3Page.RelPermalink }}
|
||||
{{ end }}
|
||||
{{ else if $isIOx }}
|
||||
{{ $scratch.Set "uiText" "InfluxDB Cloud Serverless"}}
|
||||
{{ else if $isV3 }}
|
||||
{{ $scratch.Set "uiText" "InfluxDB Cloud Serverless"}}
|
||||
{{ $scratch.Set "uiStorageDescription" "Storage Engine Version 3" }}
|
||||
{{ $altCloudPage := $.GetPage ((replaceRE "influxdb/cloud-serverless" "influxdb/cloud" $.Page.RelPermalink) | replaceRE `\/$` "") }}
|
||||
{{ if ne $altDoc "" }}
|
||||
{{ $scratch.Set "link" $altDoc }}
|
||||
|
|
@ -32,47 +34,49 @@
|
|||
{{ end }}
|
||||
|
||||
{{ $uiText := $scratch.Get "uiText" }}
|
||||
{{ $uiStorageDescription := $scratch.Get "uiStorageDescription" }}
|
||||
{{ $altLink := cond (eq ($scratch.Get "link") "") (print "/influxdb/" $altVersion "/") ($scratch.Get "link") }}
|
||||
|
||||
<div id="iox-wayfinding-modal">
|
||||
<div id="v3-wayfinding-modal">
|
||||
<div class="wayfinding-wrapper">
|
||||
<div class="wayfinding-content">
|
||||
<h4>InfluxDB Cloud{{ if $isIOx }} Serverless{{ else }} powered by {{ $engine }}{{end}}</h4>
|
||||
<h4>InfluxDB Cloud{{ if $isV3 }} Serverless{{ else }} powered by {{ $engine }}{{end}}</h4>
|
||||
<div class="wayfinding-content-info">
|
||||
<div>
|
||||
<p>
|
||||
You are currently viewing documentation specific to InfluxDB Cloud
|
||||
{{ if $isIOx }}Serverless{{ end }}
|
||||
{{ if $isV3 }}Serverless{{ end }}
|
||||
powered by the <strong>{{ $engine }} storage engine</strong>, which
|
||||
offers different functionality than InfluxDB Cloud
|
||||
{{ if not $isIOx }}Serverless{{ end }}
|
||||
{{ if not $isV3 }}Serverless{{ end }}
|
||||
powered by the {{ $altEngine }} storage engine.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Are you using InfluxDB Cloud {{ if $isIOx }}Serverless{{ else }}powered by TSM{{ end }}?</strong>
|
||||
<strong>Are you using InfluxDB Cloud {{ if $isV3 }}Serverless{{ else }}powered by TSM{{ end }}?</strong>
|
||||
<a href="#" id="find-out-toggle">How to find out?</a>
|
||||
</p>
|
||||
<div id="find-out-instructions">
|
||||
<p>
|
||||
Visit <a href="https://cloud2.influxdata.com" target="_blank">your organization's homepage</a>
|
||||
and look for:
|
||||
and find the following at the bottom of the right column:
|
||||
</p>
|
||||
<div class="powered-by-example">
|
||||
{{ $uiText }}
|
||||
<span class="storage-description{{ if not $isV3 }} git-head{{ end }}">{{ $uiStorageDescription }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wayfinding-actions">
|
||||
<a class="iox-wayfinding-btn" data-engine="{{ $engine | lower }}" href="#" id="iox-wayfinding-stay"><strong>Yes</strong><span class="small"> – I'm using {{ $productName }}</span></a>
|
||||
<a class="iox-wayfinding-btn" data-engine="{{ $altEngine | lower }}" id="iox-wayfinding-switch" href="{{ $altLink }}"><strong>No</strong><span class="small"> – I'm using {{ $altProductName }}</span></a>
|
||||
<a class="v3-wayfinding-btn" data-engine="{{ $engine | lower }}" href="#" id="v3-wayfinding-stay"><strong>Yes</strong><span class="small"> – I'm using {{ $productName }}</span></a>
|
||||
<a class="v3-wayfinding-btn" data-engine="{{ $altEngine | lower }}" id="v3-wayfinding-switch" href="{{ $altLink }}"><strong>No</strong><span class="small"> – I'm using {{ $altProductName }}</span></a>
|
||||
<label>
|
||||
<input id="iox-wayfinding-opt-out-input" type="checkbox" />
|
||||
<span id="iox-wayfinding-opt-out" class="checkbox"></span>
|
||||
<input id="v3-wayfinding-opt-out-input" type="checkbox" />
|
||||
<span id="v3-wayfinding-opt-out" class="checkbox"></span>
|
||||
<span class="checkbox-text">Don't ask again</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span id="iox-wayfinding-close" class="cf-icon Remove_New"></span>
|
||||
<span id="v3-wayfinding-close" class="cf-icon Remove_New"></span>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue