Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ROI Calculator #814

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Info bubbles, Fixed input field
  • Loading branch information
avinder-red-crackle committed Apr 3, 2024
commit 91bab48bfe7ff93c1318b839cdd3af56c9d441a8
3 changes: 2 additions & 1 deletion website/_data/value-calculator.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
- id: team-size
title: Team size
info: 6,000 min included = 6,000 min on xsmall 6,000 min included = 6,000 min on xsmall
min: 1
max: 50
maxlength: 4
@@ -51,7 +52,7 @@
- id: ci-price
title: CI compute unit price
min: 0
max: 0.02
max: 0.07
step: 0.001
maxlength: 8
value: 0.008
6 changes: 3 additions & 3 deletions website/_includes/value-calculator/index.html
Original file line number Diff line number Diff line change
@@ -146,12 +146,12 @@

// Escape non-number chars & add restriction to input fields
var newValue = input.value.replace(/[^\d.]/, "")
if (!["", "."].includes(newValue) && (newValue <= 0 || isNaN(newValue))) return input.value = inputValues[id.replace("-input", "")]
if (!["", "."].includes(newValue) && (newValue < 0 || isNaN(newValue))) return input.value = inputValues[id.replace("-input", "")]
input.value = newValue

// Updaye slider accordingly
// Update slider accordingly
const slider = document.getElementById(id.replace("-input", ""))
slider.value = ["", "."].includes(newValue) ? min : newValue.endsWith(".") ? (newValue + "0") : newValue
slider.value = ["", "."].includes(newValue) ? 0 : newValue.endsWith(".") ? (newValue + "0") : newValue
slider.style.backgroundSize = ((slider.value - slider.min) * 100) / (slider.max - slider.min) + "% 100%"

inputValues[id.replace("-input", "")] = newValue
9 changes: 8 additions & 1 deletion website/_includes/value-calculator/inputs.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
{% assign inputs = site.data.value-calculator | where: "advanced", include.advanced %}
{% for item in inputs %}
<div class="mt-6 pl-1 text-sm lg:text-base {{ item.containerClass }}">
<div class="flex gap-2 items-center {{ item.titleClass }}">
<div class="flex gap-2 items-center relative {{ item.titleClass }}">
<span>{{ item.title }}</span>

{% if item.info %}
<div class="cursor-pointer included-minutes-tooltip left-align">
<img src="assets/svg/info.svg" alt="Info icon" />
<span class="w-60 lg:w-80 cursor-default font-normal text-sm tracking-tight z-10">{{ item.info }}</span>
</div>
{% endif %}

{% if item.link %}
<a class="flex font-semibold gap-1 items-center text-[#2d7e5d] text-xs" href="{{ item.link }}" target="_blank">
<span>{{ item.linkLabel }}</span>
19 changes: 19 additions & 0 deletions website/assets/css/subpage.css
Original file line number Diff line number Diff line change
@@ -375,7 +375,26 @@ p > a:visited {
visibility: visible;
}

.included-minutes-tooltip.left-align span {
top: calc(100% + 10px);
left: 0;
padding: 6px 12px;
transform: translate(0);
white-space: pre-line;
}

@media screen and (min-width: 640px) {
.included-minutes-tooltip.left-align {
position: relative;
}

.included-minutes-tooltip.left-align span {
top: calc(100% + 20px);
left: 10px;
padding: 3px 12px;
transform: translateX(-50%);
}

.pricing-faq.open .answer {
max-height: 520px;
}
6 changes: 6 additions & 0 deletions website/assets/svg/info.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading