nick/PlotDirector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Small pricing page fixes

Browse Source
This commit is contained in:
Nick Beckley 2026-06-07 21:24:42 +01:00
parent 864d9089a7
commit 47489b2012
2 changed files with 55 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
PlotLine/Views/Pricing/Index.cshtml
View File

@ -1,4 +1,5 @@
@model PricingViewModel
@using Microsoft.AspNetCore.Html
@{
ViewData["Title"] = "Pricing";
ViewData["ShellClass"] = "marketing-shell";
@ -60,11 +61,11 @@
<div class="pricing-price">
@if (plan.RequiresStripeSubscription)
{
<strong>@FormatMoney(plan.MonthlyPricePence, plan.CurrencyCode)</strong>
@PriceMarkup(plan.MonthlyPricePence, plan.CurrencyCode)
<span>per month</span>
@if (plan.AnnualPricePence.HasValue)
{
<small>@FormatMoney(plan.AnnualPricePence, plan.CurrencyCode) billed annually</small>
<small>@FormatAnnualPrice(plan.AnnualPricePence, plan.CurrencyCode) billed annually</small>
}
}
else
@ -192,16 +193,28 @@
? "Unlimited"
: StorageUsage.FormatBytes(megabytes * 1024L * 1024L);
private static string FormatMoney(int? pence, string? currencyCode)
private static IHtmlContent PriceMarkup(int? pence, string? currencyCode)
{
if (!pence.HasValue)
{
return new HtmlString("<strong>Contact us</strong>");
}
var code = string.IsNullOrWhiteSpace(currencyCode) ? "GBP" : currencyCode.ToUpperInvariant();
var symbol = string.Equals(code, "GBP", StringComparison.OrdinalIgnoreCase) ? "£" : string.Empty;
return new HtmlString($"<strong><span class=\"pricing-price__value\">{symbol}{pence.Value / 100m:0.00}</span> <small>{code}</small></strong>");
}
private static string FormatAnnualPrice(int? pence, string? currencyCode)
{
if (!pence.HasValue)
{
return "Contact us";
}
return string.Equals(currencyCode, "GBP", StringComparison.OrdinalIgnoreCase)
? $"GBP {pence.Value / 100m:0.00}"
: $"{pence.Value / 100m:0.00} {(string.IsNullOrWhiteSpace(currencyCode) ? "GBP" : currencyCode.ToUpperInvariant())}";
var code = string.IsNullOrWhiteSpace(currencyCode) ? "GBP" : currencyCode.ToUpperInvariant();
var symbol = string.Equals(code, "GBP", StringComparison.OrdinalIgnoreCase) ? "£" : string.Empty;
return $"{symbol}{pence.Value / 100m:0.00}";
}
private static string PlanTagline(SubscriptionLevel plan) =>

38
PlotLine/wwwroot/css/plotline-theme.css
View File

@ -2913,7 +2913,7 @@ a:focus-visible {
}
.pricing-hero {
padding: clamp(4rem, 8vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem);
padding: clamp(2rem, 5vw, 3.75rem) 0 clamp(2.5rem, 6vw, 4.5rem);
background:
radial-gradient(circle at 18% 20%, rgba(212, 165, 116, 0.2), transparent 24rem),
linear-gradient(180deg, var(--marketing-cream), var(--marketing-offwhite));
@ -3003,12 +3003,21 @@ a:focus-visible {
box-shadow: 0 18px 42px rgba(31, 42, 68, 0.08);
}
.pricing-card::before {
content: "";
display: block;
height: 1.9rem;
}
.pricing-card--featured {
border-color: rgba(212, 165, 116, 0.7);
box-shadow: 0 26px 58px rgba(31, 42, 68, 0.13);
}
.pricing-badge {
position: absolute;
top: clamp(1.2rem, 2.4vw, 1.65rem);
right: clamp(1.2rem, 2.4vw, 1.65rem);
width: fit-content;
margin: 0;
border: 1px solid rgba(212, 165, 116, 0.55);
@ -3025,6 +3034,8 @@ a:focus-visible {
.pricing-card__heading {
display: grid;
gap: 0.5rem;
min-height: 6.85rem;
align-content: start;
}
.pricing-card h3,
@ -3052,10 +3063,15 @@ a:focus-visible {
}
.pricing-price strong {
display: inline-flex;
gap: 0.35rem;
align-items: baseline;
width: fit-content;
color: var(--marketing-navy);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(2.15rem, 4vw, 3rem);
line-height: 1;
white-space: nowrap;
}
.pricing-price span,
@ -3068,6 +3084,24 @@ a:focus-visible {
font-size: 0.88rem;
}
.pricing-price strong small {
color: var(--marketing-muted);
font-family: "Segoe UI", "Aptos", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.88rem;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.pricing-price .pricing-price__value {
color: var(--marketing-navy);
white-space: nowrap;
}
.pricing-price > small {
white-space: nowrap;
}
.pricing-feature-list {
display: grid;
gap: 0.65rem;
@ -3312,7 +3346,7 @@ a:focus-visible {
}
.pricing-hero {
padding-top: 3rem;
padding-top: 1.8rem;
}
.pricing-card-grid {