added a feature callout for the url selector
Scott Anderson
parent
1c86d94154
commit
cc51d22263
|
|
@ -36,7 +36,7 @@ function appendUrlSelector(currentUrl) {
|
|||
$(elementSelector).each(function() {
|
||||
var code = $(this).html()
|
||||
if (code.includes(currentUrl)) {
|
||||
$(this).after("<div class='select-url'><a class='url-trigger' href='#'>InfluxDB URL</a></div>")
|
||||
$(this).after("<div class='select-url'><a class='url-trigger' href='#'>Cloud or OSS?</a></div>")
|
||||
$('.select-url').fadeIn(400)
|
||||
}
|
||||
});
|
||||
|
|
@ -102,3 +102,16 @@ $("#modal-close, .modal-overlay, .url-trigger").click(function(e) {
|
|||
e.preventDefault()
|
||||
toggleModal()
|
||||
})
|
||||
|
||||
// Show the feature callout on page load
|
||||
if ( Cookies.get('influxdb_url_selector_seen') != 'true' ) {
|
||||
$('#callout-url-selector').fadeIn(300).removeClass('start-position')
|
||||
}
|
||||
|
||||
// Set feature cookie when the button is clicked
|
||||
$('button.url-trigger, #callout-url-selector .close').click(function() {
|
||||
if ( Cookies.get('influxdb_url_selector_seen') != 'true') {
|
||||
Cookies.set('influxdb_url_selector_seen', 'true')
|
||||
$('#callout-url-selector').fadeOut(200)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
.feature-callout {
|
||||
padding: .5rem .5rem .5rem .75rem;
|
||||
@include gradient($grad-DesertFestival)
|
||||
border-radius: $radius;
|
||||
font-size: .95rem;
|
||||
font-style: italic;
|
||||
font-weight: $medium;
|
||||
color: $g20-white;
|
||||
box-shadow: 2px 2px 6px rgba($g2-kevlar, .35);
|
||||
|
||||
// temp styles for animation
|
||||
transition: margin .3s ease-out;
|
||||
display: none;
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
margin-left: .5rem;
|
||||
color: rgba($g20-white, .5);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#callout-url-selector {
|
||||
position: absolute;
|
||||
top: 3.25rem;
|
||||
right: 1rem;
|
||||
|
||||
p:after {
|
||||
top: -1rem;
|
||||
right: 1.85rem;
|
||||
border-width: 0 7px 8px 7px;
|
||||
border-color: transparent transparent #CB39C4 transparent;
|
||||
}
|
||||
|
||||
&.start-position {
|
||||
margin-top: 2.5rem
|
||||
}
|
||||
}
|
||||
|
|
@ -22,4 +22,5 @@
|
|||
"layouts/algolia-search-overrides",
|
||||
"layouts/landing",
|
||||
"layouts/error-page",
|
||||
"layouts/modal";
|
||||
"layouts/modal",
|
||||
"layouts/feature-callouts";
|
||||
|
|
|
|||
|
|
@ -92,44 +92,46 @@ $cp-titan: #EDEDFF;
|
|||
/////////////////////////////////// Gradients //////////////////////////////////
|
||||
|
||||
// Brand Gradients
|
||||
$grad-WarpSpeed: $br-deeppurple, $p-void;
|
||||
$grad-PowerStone: $p-void, $br-magenta;
|
||||
$grad-MilkyWay: $br-magenta, $br-galaxy;
|
||||
$grad-LazyAfternoon: $b-pool, $br-galaxy;
|
||||
$grad-WarpSpeed: $br-deeppurple, $p-void;
|
||||
$grad-PowerStone: $p-void, $br-magenta;
|
||||
$grad-MilkyWay: $br-magenta, $br-galaxy;
|
||||
$grad-LazyAfternoon: $b-pool, $br-galaxy;
|
||||
$grad-NineteenEightyFour: $b-pool, $br-magenta;
|
||||
$grad-RadioactiveWarning: $b-pool, $br-chartreuse;
|
||||
$grad-LostGalaxy: $br-deeppurple, $br-pulsar;
|
||||
$grad-GrapeSoda: $br-deeppurple, $p-amethyst;
|
||||
$grad-LavenderLatte: $br-deeppurple, $p-star;
|
||||
$grad-OminousFog: $br-pulsar, $br-galaxy;
|
||||
$grad-LostGalaxy: $br-deeppurple, $br-pulsar;
|
||||
$grad-GrapeSoda: $br-deeppurple, $p-amethyst;
|
||||
$grad-LavenderLatte: $br-deeppurple, $p-star;
|
||||
$grad-OminousFog: $br-pulsar, $br-galaxy;
|
||||
|
||||
// Single Hue Gradient
|
||||
$grad-grey-light: $g13-mist, $g18-cloud;
|
||||
$grad-grey: $g10-wolf, $g13-mist;
|
||||
$grad-grey-dark: $g3-castle, $g6-smoke;
|
||||
$grad-grey-light: $g13-mist, $g18-cloud;
|
||||
$grad-grey: $g10-wolf, $g13-mist;
|
||||
$grad-grey-dark: $g3-castle, $g6-smoke;
|
||||
|
||||
$grad-blue-light: $b-pool, $b-hydrogen;
|
||||
$grad-blue: $b-ocean, $b-pool;
|
||||
$grad-blue-dark: $b-sapphire, $b-ocean;
|
||||
$grad-blue-light: $b-pool, $b-hydrogen;
|
||||
$grad-blue: $b-ocean, $b-pool;
|
||||
$grad-blue-dark: $b-sapphire, $b-ocean;
|
||||
|
||||
$grad-purple-light: $p-comet, $p-moonstone;
|
||||
$grad-purple: $p-star, $p-comet;
|
||||
$grad-purple-dark: $p-void, $p-amethyst;
|
||||
$grad-purple-light: $p-comet, $p-moonstone;
|
||||
$grad-purple: $p-star, $p-comet;
|
||||
$grad-purple-dark: $p-void, $p-amethyst;
|
||||
|
||||
$grad-green-light: $gr-honeydew, $gr-krypton;
|
||||
$grad-green: $gr-rainforest, $gr-honeydew;
|
||||
$grad-green-dark: $gr-emerald, $gr-viridian;
|
||||
$grad-green-light: $gr-honeydew, $gr-krypton;
|
||||
$grad-green: $gr-rainforest, $gr-honeydew;
|
||||
$grad-green-dark: $gr-emerald, $gr-viridian;
|
||||
|
||||
$grad-yellow-light: $y-thunder, $y-sulfur;
|
||||
$grad-yellow: $y-pineapple, $y-thunder;
|
||||
$grad-yellow-dark: $y-topaz, $y-tiger;
|
||||
$grad-yellow-light: $y-thunder, $y-sulfur;
|
||||
$grad-yellow: $y-pineapple, $y-thunder;
|
||||
$grad-yellow-dark: $y-topaz, $y-tiger;
|
||||
|
||||
$grad-red-light: $r-dreamsicle, $r-tungsten;
|
||||
$grad-red: $r-curacao, $r-dreamsicle;
|
||||
$grad-red-dark: $r-ruby, $r-fire;
|
||||
$grad-red-light: $r-dreamsicle, $r-tungsten;
|
||||
$grad-red: $r-curacao, $r-dreamsicle;
|
||||
$grad-red-dark: $r-ruby, $r-fire;
|
||||
|
||||
// Multi-Hue Gradients
|
||||
$grad-GundamPilot: $p-amethyst, $b-ocean;
|
||||
$grad-Miyazakisky: $p-star, $b-pool;
|
||||
$grad-PastelGothic: $p-comet, $b-laser;
|
||||
$grad-GarageBand: $b-pool, $gr-rainforest;
|
||||
$grad-GundamPilot: $p-amethyst, $b-ocean;
|
||||
$grad-Miyazakisky: $p-star, $b-pool;
|
||||
$grad-PastelGothic: $p-comet, $b-laser;
|
||||
$grad-GarageBand: $b-pool, $gr-rainforest;
|
||||
$grad-LowDifficulty: $b-pool, $gr-honeydew;
|
||||
$grad-DesertFestival: $r-curacao, $p-star;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ cloud:
|
|||
regions:
|
||||
- name: US West (Oregon)
|
||||
url: https://us-west-2-1.aws.cloud2.influxdata.com
|
||||
- name: EU Frankfort
|
||||
- name: EU Frankfurt
|
||||
url: https://eu-central-1-1.aws.cloud2.influxdata.com
|
||||
- name: Google Cloud Platform
|
||||
short_name: GCP
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
{{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) }}
|
||||
{{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) | default "v2.0" }}
|
||||
|
||||
<!-- InfluxDB URL modal -->
|
||||
{{ partial "footer/influxdb-url-modal.html" . }}
|
||||
{{ partial "footer/feature-callout.html" . }}
|
||||
|
||||
<!-- Docsearch JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<div class="feature-callout start-position" id="callout-url-selector">
|
||||
<p><span>New!</span> Cloud or OSS? <a href="#" class="close"><span class="icon-ui-remove"></span></a></p>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
{{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) .RelPermalink }}
|
||||
{{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) .RelPermalink | default "v2.0" }}
|
||||
<div class="modal">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-wrapper">
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<p class="note">For more information, see <a href='{{ print "/" $currentVersion "/cloud/urls/"}}'>InfluxDB URLs</a>.</p>
|
||||
<p class="note">For more information, see <a href='{{ print "/" $currentVersion "/reference/urls/"}}'>InfluxDB URLs</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue