mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-16 08:27:07 +00:00
Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 SethBurkart123
|
20a4078f60 | ||
 AdenMGB
|
ce3468e2ab | ||
|
AdenMGB
|
b3a4182a52 | ||
|
SethBurkart123
|
7d18b2483f | ||
|
SethBurkart123
|
9bfd1bbf0e | ||
|
SethBurkart123
|
feaf4dced5 | ||
|
Seth Burkart
|
5c195f1148 |
@@ -18,6 +18,7 @@ betterseqtaplus-safari/
|
||||
|
||||
.million/
|
||||
.vscode/
|
||||
.cursor/
|
||||
**/.DS_Store
|
||||
.parcel-cache
|
||||
.env
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { Plugin } from "vite";
|
||||
|
||||
/**
|
||||
* crxjs 2.6.x only replaces the first `__LIVE_RELOAD__` in `@crx/client-worker`,
|
||||
* which crashes the service worker when the dev server reconnects.
|
||||
*/
|
||||
export default function fixCrxWorkerLiveReload(): Plugin {
|
||||
return {
|
||||
name: "fix-crx-worker-live-reload",
|
||||
apply: "serve",
|
||||
enforce: "post",
|
||||
transform(code, id) {
|
||||
if (!id.includes("@crx/client-worker") || !code.includes("__LIVE_RELOAD__")) {
|
||||
return;
|
||||
}
|
||||
return code.replaceAll("__LIVE_RELOAD__", "true");
|
||||
},
|
||||
};
|
||||
}
|
||||
+3
-3
@@ -42,7 +42,7 @@
|
||||
"@babel/plugin-transform-runtime": "^7.26.9",
|
||||
"@babel/runtime": "^7.26.9",
|
||||
"@bedframe/cli": "^0.1.2",
|
||||
"@crxjs/vite-plugin": "^2.4.0",
|
||||
"@crxjs/vite-plugin": "^2.6.1",
|
||||
"@types/d3-scale": "^4.0.9",
|
||||
"@types/d3-shape": "^3.1.8",
|
||||
"@types/jest": "^30.0.0",
|
||||
@@ -77,7 +77,7 @@
|
||||
"@codemirror/search": "^6.5.10",
|
||||
"@codemirror/state": "^6.5.2",
|
||||
"@codemirror/view": "^6.36.4",
|
||||
"@sveltejs/vite-plugin-svelte": "^7.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tsconfig/svelte": "^5.0.4",
|
||||
"@types/chrome": "^0.1.4",
|
||||
@@ -122,7 +122,7 @@
|
||||
"svelte": "^5.46.4",
|
||||
"typescript": "^5.8.2",
|
||||
"uuid": "^11.1.0",
|
||||
"vite": "^8.0.5",
|
||||
"vite": "^6.2.1",
|
||||
"webextension-polyfill": "^0.12.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3615,26 +3615,6 @@ div.day-empty {
|
||||
font-size: 1em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.whatsnewHeader.engageParentsAnnouncementHeader {
|
||||
height: auto;
|
||||
min-height: unset;
|
||||
}
|
||||
.whatsnewHeader.engageParentsAnnouncementHeader h1 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
.whatsnewHeader.engageParentsAnnouncementHeader .engageParentsSubheading {
|
||||
margin-top: 0.35rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
opacity: 0.92;
|
||||
}
|
||||
.seqtaEngageAccent {
|
||||
color: #ea580c;
|
||||
font-weight: 700;
|
||||
}
|
||||
.dark .seqtaEngageAccent {
|
||||
color: #fb923c;
|
||||
}
|
||||
.whatsnewBackground {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -3763,25 +3743,6 @@ div.day-empty {
|
||||
object-fit: cover;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.whatsnewTextContainer .engageParentsPromoWrap {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 16 / 9;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.28);
|
||||
background: color-mix(in srgb, var(--background-secondary) 88%, var(--text-primary) 12%);
|
||||
}
|
||||
.whatsnewTextContainer .engageParentsPromoWrap .engageParentsPromoImg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.whatsnewHeader.bsCloudAutoSyncAnnouncementHeader {
|
||||
height: auto;
|
||||
@@ -5014,66 +4975,3 @@ h2.home-subtitle {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.bsplus-toast {
|
||||
position: fixed;
|
||||
right: max(18px, env(safe-area-inset-right));
|
||||
bottom: max(18px, env(safe-area-inset-bottom));
|
||||
z-index: 10000;
|
||||
width: min(360px, calc(100vw - 36px));
|
||||
padding: 14px 16px 16px;
|
||||
border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
|
||||
border-radius: 20px;
|
||||
background: var(--background-primary, #fff);
|
||||
color: var(--text-primary, #1a1a1a);
|
||||
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.bsplus-toast-eyebrow {
|
||||
margin: 0 0 6px !important;
|
||||
font-size: 0.72rem !important;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: color-mix(in srgb, #ea580c 82%, var(--text-primary) 18%);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.dark .bsplus-toast-eyebrow {
|
||||
color: color-mix(in srgb, #fb923c 82%, var(--text-primary) 18%);
|
||||
}
|
||||
.bsplus-toast-content strong {
|
||||
display: block;
|
||||
padding-right: 34px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.bsplus-toast-content p:not(.bsplus-toast-eyebrow) {
|
||||
display: -webkit-box;
|
||||
margin: 8px 0 0;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
color: color-mix(in srgb, var(--text-primary) 78%, transparent);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.bsplus-toast-close {
|
||||
position: absolute !important;
|
||||
top: 4px !important;
|
||||
right: 4px !important;
|
||||
z-index: 2;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
border-radius: 16px !important;
|
||||
background: rgba(0, 0, 0, 0.42);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 1.35rem;
|
||||
line-height: 1;
|
||||
transition: filter 0.15s ease;
|
||||
}
|
||||
.bsplus-toast-close:hover {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
@@ -2,13 +2,14 @@
|
||||
import * as Chart from "./chart/index";
|
||||
import { scaleLinear } from "d3-scale";
|
||||
import { Area, AreaChart, ChartClipPath, Spline } from "layerchart";
|
||||
import { curveNatural } from "d3-shape";
|
||||
import { curveMonotoneX } from "d3-shape";
|
||||
import { cubicInOut } from "svelte/easing";
|
||||
import type { Assessment } from "./types";
|
||||
import {
|
||||
buildGradeTrendChart,
|
||||
getTimeRangeLabel,
|
||||
type TimeRange,
|
||||
type TrendPoint,
|
||||
} from "./timeRange";
|
||||
import { computeGradeForecast, aggregateToMonthlyPoints } from "./utils/gradePrediction";
|
||||
import PredictionMonthsSlider from "./PredictionMonthsSlider.svelte";
|
||||
@@ -46,7 +47,7 @@
|
||||
return computeGradeForecast(points, predictionMonths);
|
||||
});
|
||||
|
||||
/** Bridge point + future months — separate from historical so the main line stays intact. */
|
||||
/** Bridge point + future months — separate series rendered via Spline. */
|
||||
const forecastLineData = $derived.by(() => {
|
||||
if (!showPrediction || !forecast) return [];
|
||||
|
||||
@@ -60,19 +61,21 @@
|
||||
];
|
||||
});
|
||||
|
||||
/** Ghost future dates (null grades) extend the x domain without touching the historical line. */
|
||||
const chartData = $derived.by(() => {
|
||||
if (!showPrediction || forecastLineData.length <= 1) {
|
||||
return historicalData;
|
||||
const xDomain = $derived.by((): [Date, Date] | undefined => {
|
||||
const times = historicalData.map((p) => p.date.getTime());
|
||||
|
||||
if (showPrediction && forecastLineData.length > 1) {
|
||||
for (const point of forecastLineData.slice(1)) {
|
||||
times.push(point.date.getTime());
|
||||
}
|
||||
}
|
||||
|
||||
const futurePadding = forecastLineData.slice(1).map((p) => ({
|
||||
date: p.date,
|
||||
average: null,
|
||||
count: 0,
|
||||
}));
|
||||
if (!times.length) return undefined;
|
||||
|
||||
return [...historicalData, ...futurePadding];
|
||||
return [
|
||||
new Date(Math.min(...times)),
|
||||
new Date(Math.max(...times)),
|
||||
];
|
||||
});
|
||||
|
||||
const chartConfig = $derived.by(() => {
|
||||
@@ -157,12 +160,49 @@
|
||||
);
|
||||
return monthly.length >= 3;
|
||||
});
|
||||
|
||||
/** Historical + future forecast points so tooltips work across the dashed line. */
|
||||
const chartData = $derived.by((): TrendPoint[] => {
|
||||
if (!showPrediction || !forecast?.points.length) {
|
||||
return historicalData;
|
||||
}
|
||||
|
||||
const points = historicalData.map((p) => ({ ...p }));
|
||||
const validHist = points.filter((p) => !Number.isNaN(p.average));
|
||||
const last = validHist[validHist.length - 1];
|
||||
|
||||
if (last) {
|
||||
const lastIdx = points.findIndex((p) => p.date.getTime() === last.date.getTime());
|
||||
if (lastIdx >= 0) {
|
||||
points[lastIdx] = { ...points[lastIdx], forecast: last.average };
|
||||
}
|
||||
}
|
||||
|
||||
const futurePoints: TrendPoint[] = forecast.points.map((p) => ({
|
||||
date: p.date,
|
||||
count: 0,
|
||||
forecast: p.value,
|
||||
})) as TrendPoint[];
|
||||
|
||||
return [...points, ...futurePoints];
|
||||
});
|
||||
</script>
|
||||
|
||||
<article class="bsplus-analytics-card">
|
||||
<header class="bsplus-analytics-card-header bsplus-analytics-card-header-split">
|
||||
<div>
|
||||
<div class="bsplus-analytics-card-header-text">
|
||||
<div class="bsplus-analytics-card-title-row">
|
||||
<h3 class="bsplus-analytics-card-title">Grade trends</h3>
|
||||
<label class="bsplus-analytics-checkbox bsplus-analytics-forecast-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={showPrediction}
|
||||
disabled={!canForecast}
|
||||
/>
|
||||
<span class="bsplus-analytics-checkmark" aria-hidden="true"></span>
|
||||
<span>Forecast</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="bsplus-analytics-card-desc">
|
||||
{#if showSubjectTrends}
|
||||
Overall and per-subject averages · {getTimeRangeLabel(timeRange)}
|
||||
@@ -172,21 +212,14 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bsplus-analytics-card-controls bsplus-analytics-forecast-controls">
|
||||
<label class="bsplus-analytics-checkbox bsplus-analytics-forecast-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={showPrediction}
|
||||
disabled={!canForecast}
|
||||
/>
|
||||
<span>Grade forecast</span>
|
||||
{#if showPrediction}
|
||||
<div class="bsplus-analytics-card-controls">
|
||||
<label class="bsplus-analytics-card-control bsplus-analytics-forecast-horizon">
|
||||
<span class="bsplus-analytics-field-label">Months</span>
|
||||
<PredictionMonthsSlider bind:value={predictionMonths} />
|
||||
</label>
|
||||
|
||||
<div class="bsplus-analytics-card-control bsplus-analytics-forecast-horizon">
|
||||
<span class="bsplus-analytics-field-label">Months ahead</span>
|
||||
<PredictionMonthsSlider bind:value={predictionMonths} disabled={!showPrediction} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<div class="bsplus-analytics-card-body">
|
||||
@@ -197,11 +230,12 @@
|
||||
legend
|
||||
data={chartData}
|
||||
x="date"
|
||||
{xDomain}
|
||||
yScale={yScale}
|
||||
series={areaSeries}
|
||||
props={{
|
||||
area: {
|
||||
curve: curveNatural,
|
||||
curve: curveMonotoneX,
|
||||
"fill-opacity": showSubjectTrends ? 0.12 : 0.35,
|
||||
line: { class: "stroke-2" },
|
||||
motion: "tween",
|
||||
@@ -263,7 +297,7 @@
|
||||
data={forecastLineData}
|
||||
x="date"
|
||||
y="forecast"
|
||||
curve={curveNatural}
|
||||
curve={curveMonotoneX}
|
||||
class="bsplus-analytics-forecast-line"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -209,7 +209,6 @@
|
||||
</span>
|
||||
{/if}
|
||||
</h1>
|
||||
<p>Track your academic performance and progress over time</p>
|
||||
{#if lastUpdated && analyticsData && analyticsData.length > 0}
|
||||
<p class="bsplus-analytics-meta">Last updated: {formattedTimestamp()}</p>
|
||||
{/if}
|
||||
@@ -244,32 +243,22 @@
|
||||
<div class="bsplus-analytics-spinner" aria-label="Loading analytics"></div>
|
||||
</div>
|
||||
{:else if analyticsData && analyticsData.length > 0}
|
||||
<section
|
||||
class="bsplus-analytics-stats bsplus-analytics-animate bsplus-analytics-delay-1"
|
||||
aria-label="Summary statistics"
|
||||
<div class="bsplus-analytics-layout bsplus-analytics-animate bsplus-analytics-delay-1">
|
||||
<aside class="bsplus-analytics-filters" aria-label="Filters">
|
||||
<div class="bsplus-analytics-filters-head">
|
||||
<h2 class="bsplus-analytics-filters-title">Filters</h2>
|
||||
{#if hasActiveFilters()}
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-analytics-filters-clear"
|
||||
onclick={clearFilters}
|
||||
>
|
||||
<div class="bsplus-analytics-stat">
|
||||
<div class="bsplus-analytics-stat-label">Average grade</div>
|
||||
<div class="bsplus-analytics-stat-value bsplus-analytics-stat-value-accent">
|
||||
{statsAverage !== null ? `${statsAverage}%` : "—"}
|
||||
Clear all
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bsplus-analytics-stat">
|
||||
<div class="bsplus-analytics-stat-label">Graded shown</div>
|
||||
<div class="bsplus-analytics-stat-value">{gradedFiltered().length}</div>
|
||||
</div>
|
||||
<div class="bsplus-analytics-stat">
|
||||
<div class="bsplus-analytics-stat-label">Subjects</div>
|
||||
<div class="bsplus-analytics-stat-value">{statsSubjectCount}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="bsplus-analytics-toolbar bsplus-analytics-animate bsplus-analytics-delay-2">
|
||||
<div class="bsplus-analytics-toolbar-grid">
|
||||
<div
|
||||
class="bsplus-analytics-field bsplus-analytics-toolbar-dropdown-field"
|
||||
data-analytics-dropdown
|
||||
>
|
||||
<div class="bsplus-analytics-filter-group" data-analytics-dropdown>
|
||||
<span class="bsplus-analytics-field-label">Time period</span>
|
||||
<div class="bsplus-analytics-dropdown" data-analytics-dropdown>
|
||||
<button
|
||||
@@ -309,10 +298,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bsplus-analytics-field bsplus-analytics-toolbar-dropdown-field"
|
||||
data-analytics-dropdown
|
||||
>
|
||||
<div class="bsplus-analytics-filter-group" data-analytics-dropdown>
|
||||
<span class="bsplus-analytics-field-label">Subjects</span>
|
||||
<div class="bsplus-analytics-dropdown" data-analytics-dropdown>
|
||||
<button
|
||||
@@ -361,7 +347,7 @@
|
||||
<span class="bsplus-analytics-dropdown-check"
|
||||
>{selected ? "✓" : ""}</span
|
||||
>
|
||||
<span style="overflow:hidden;text-overflow:ellipsis">{subject}</span>
|
||||
<span class="bsplus-analytics-filter-subject-name">{subject}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -369,7 +355,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bsplus-analytics-field bsplus-analytics-toolbar-search">
|
||||
<div class="bsplus-analytics-filter-group">
|
||||
<span class="bsplus-analytics-field-label">Search</span>
|
||||
<input
|
||||
type="search"
|
||||
@@ -379,51 +365,52 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if hasActiveFilters()}
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-analytics-btn bsplus-analytics-btn-ghost bsplus-analytics-toolbar-clear"
|
||||
onclick={clearFilters}
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<div class="bsplus-analytics-field bsplus-analytics-grade-range">
|
||||
<div class="bsplus-analytics-filter-group">
|
||||
<span class="bsplus-analytics-field-label">Grade range</span>
|
||||
<GradeRangeSlider bind:value={gradeRange} />
|
||||
</div>
|
||||
|
||||
<label
|
||||
class="bsplus-analytics-checkbox bsplus-analytics-toolbar-trends"
|
||||
class:bsplus-analytics-toolbar-trends-top={!hasActiveFilters()}
|
||||
>
|
||||
<div class="bsplus-analytics-filter-group">
|
||||
<label class="bsplus-analytics-checkbox">
|
||||
<input type="checkbox" bind:checked={showSubjectTrends} />
|
||||
<span>Show per-subject trends on chart</span>
|
||||
<span class="bsplus-analytics-checkmark" aria-hidden="true"></span>
|
||||
<span>Per-subject trends</span>
|
||||
</label>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="bsplus-analytics-main">
|
||||
<div class="bsplus-analytics-stats" aria-label="Summary statistics">
|
||||
<div class="bsplus-analytics-stat">
|
||||
<div class="bsplus-analytics-stat-label">Average grade</div>
|
||||
<div class="bsplus-analytics-stat-value bsplus-analytics-stat-value-accent">
|
||||
{statsAverage !== null ? `${statsAverage}%` : "—"}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bsplus-analytics-stat">
|
||||
<div class="bsplus-analytics-stat-label">Graded shown</div>
|
||||
<div class="bsplus-analytics-stat-value">{gradedFiltered().length}</div>
|
||||
</div>
|
||||
<div class="bsplus-analytics-stat">
|
||||
<div class="bsplus-analytics-stat-label">Subjects</div>
|
||||
<div class="bsplus-analytics-stat-value">{statsSubjectCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bsplus-analytics-results">
|
||||
<div class="bsplus-analytics-charts">
|
||||
{#key filteredData().length + "-" + gradeRange.join(",") + filterSearch + filterSubjects.join("|") + timeRange + String(showSubjectTrends)}
|
||||
<div class="bsplus-analytics-chart-cell">
|
||||
<div class="bsplus-analytics-animate bsplus-analytics-delay-3">
|
||||
<AnalyticsAreaChart
|
||||
data={gradedFiltered()}
|
||||
{timeRange}
|
||||
showSubjectTrends={showSubjectTrends}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bsplus-analytics-chart-cell">
|
||||
<div class="bsplus-analytics-animate bsplus-analytics-delay-4">
|
||||
<AnalyticsBarChart data={gradedFiltered()} {timeRange} />
|
||||
</div>
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
|
||||
<div class="bsplus-analytics-animate bsplus-analytics-delay-5">
|
||||
<AssessmentTable data={timeScopedData()} />
|
||||
</div>
|
||||
|
||||
@@ -435,6 +422,8 @@
|
||||
{/if}
|
||||
</span>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bsplus-analytics-empty bsplus-analytics-animate" transition:fade={{ duration: 300 }}>
|
||||
<h2>No analytics data yet</h2>
|
||||
|
||||
@@ -143,7 +143,7 @@
|
||||
{itemConfig?.label || item.name}
|
||||
</span>
|
||||
</div>
|
||||
{#if item.value !== undefined}
|
||||
{#if item.value != null && !Number.isNaN(Number(item.value))}
|
||||
<span class="font-mono font-medium tabular-nums">
|
||||
{item.value.toLocaleString()}
|
||||
</span>
|
||||
|
||||
@@ -12,6 +12,8 @@
|
||||
min-height: min(100%, calc(100vh - 6rem));
|
||||
}
|
||||
|
||||
/* Theme tokens (mount + page); layout padding only on the inner page root */
|
||||
.bsplus-analytics-mount,
|
||||
.bsplus-analytics-root {
|
||||
--bsplus-analytics-radius: 16px;
|
||||
--bsplus-analytics-radius-sm: 12px;
|
||||
@@ -34,21 +36,46 @@
|
||||
/* Set on host via ui.ts from --better-main / user selectedColor */
|
||||
--bsplus-analytics-accent: var(--better-main, #007bff);
|
||||
--bsplus-analytics-chart-height: 300px;
|
||||
--bsplus-analytics-stack-gap: 0.625rem;
|
||||
/* Form controls — aligned with global SEQTA select styling */
|
||||
--bsplus-analytics-control-bg: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-surface) 94%,
|
||||
var(--bsplus-analytics-surface-2) 6%
|
||||
);
|
||||
--bsplus-analytics-control-bg-elevated: var(--bsplus-analytics-surface);
|
||||
--bsplus-analytics-control-border: color-mix(
|
||||
in srgb,
|
||||
var(--theme-offset-bg, var(--bsplus-analytics-surface-2)) 88%,
|
||||
transparent
|
||||
);
|
||||
--bsplus-analytics-control-border-strong: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-text) 18%,
|
||||
var(--theme-offset-bg, var(--bsplus-analytics-surface-2)) 82%
|
||||
);
|
||||
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
min-height: min(100%, calc(100vh - 6rem));
|
||||
box-sizing: border-box;
|
||||
padding: 1.5rem 1.25rem 2rem;
|
||||
}
|
||||
|
||||
.bsplus-analytics-mount {
|
||||
min-height: min(100%, calc(100vh - 6rem));
|
||||
}
|
||||
|
||||
.bsplus-analytics-root {
|
||||
font-family: Rubik, system-ui, sans-serif;
|
||||
font-size: 0.875rem;
|
||||
color: var(--bsplus-analytics-text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.bsplus-analytics-mount.dark,
|
||||
.bsplus-analytics-root.dark {
|
||||
--bsplus-analytics-shadow: 0 5px 20px 6px rgba(0, 0, 0, 0.45);
|
||||
--bsplus-analytics-shadow-hover: 0 10px 28px 10px rgba(0, 0, 0, 0.55);
|
||||
@@ -56,8 +83,8 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.bsplus-analytics-root {
|
||||
padding: 1.25rem 1rem 1.5rem;
|
||||
gap: 1.5rem;
|
||||
padding: 0.875rem 0.75rem 1rem;
|
||||
gap: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -109,7 +136,7 @@
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1.25rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.bsplus-analytics-header-actions {
|
||||
@@ -138,7 +165,7 @@
|
||||
}
|
||||
|
||||
.bsplus-analytics-header-text h1 {
|
||||
margin: 0 0 0.35rem;
|
||||
margin: 0 0 0.2rem;
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
@@ -154,7 +181,7 @@
|
||||
}
|
||||
|
||||
.bsplus-analytics-meta {
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 0.15rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--bsplus-analytics-muted);
|
||||
}
|
||||
@@ -266,58 +293,200 @@
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* ─── Stat cards ─── */
|
||||
.bsplus-analytics-stats {
|
||||
/* ─── Sidebar layout (shop-style filters) ─── */
|
||||
.bsplus-analytics-layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--bsplus-analytics-stack-gap);
|
||||
align-items: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--bsplus-analytics-stack-gap);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.55rem;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
padding-right: 0.375rem;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters-title {
|
||||
margin: 0;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 700;
|
||||
color: var(--bsplus-analytics-text);
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters-clear {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
font-family: inherit;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--bsplus-analytics-accent);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.15em;
|
||||
text-decoration-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-accent) 45%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters-clear:hover {
|
||||
color: var(--bsplus-analytics-text);
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters-clear:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px
|
||||
color-mix(in srgb, var(--bsplus-analytics-accent) 35%, transparent);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.bsplus-analytics-filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bsplus-analytics-filter-group .bsplus-analytics-field-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--bsplus-analytics-muted);
|
||||
}
|
||||
|
||||
.bsplus-analytics-filter-subject-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters .bsplus-analytics-dropdown {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters .bsplus-analytics-dropdown-trigger {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 2.35rem;
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.4rem;
|
||||
background-color: var(--bsplus-analytics-control-bg-elevated);
|
||||
border-color: var(--bsplus-analytics-control-border-strong);
|
||||
box-shadow: 0 1px 4px
|
||||
color-mix(in srgb, var(--bsplus-analytics-text) 10%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters .bsplus-analytics-input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 2.35rem;
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.4rem;
|
||||
padding-left: 2.25rem;
|
||||
padding-right: 0;
|
||||
background-color: var(--bsplus-analytics-control-bg-elevated);
|
||||
border-color: var(--bsplus-analytics-control-border-strong);
|
||||
box-shadow: 0 1px 4px
|
||||
color-mix(in srgb, var(--bsplus-analytics-text) 10%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters .bsplus-grade-range-slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters .bsplus-analytics-range-value {
|
||||
min-width: 3.75rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.bsplus-analytics-layout {
|
||||
grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr);
|
||||
gap: var(--bsplus-analytics-stack-gap);
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters {
|
||||
position: sticky;
|
||||
top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 899px) {
|
||||
.bsplus-analytics-filters-head {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Stat strip ─── */
|
||||
.bsplus-analytics-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0.25rem 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.bsplus-analytics-stats {
|
||||
grid-template-columns: 1fr;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bsplus-analytics-stat {
|
||||
padding: 1.1rem 1.25rem;
|
||||
border-radius: var(
|
||||
--bsplus-theme-card-radius,
|
||||
var(--bsplus-analytics-radius)
|
||||
);
|
||||
background: var(--bsplus-theme-card-bg, var(--bsplus-analytics-surface));
|
||||
border: var(
|
||||
--bsplus-theme-card-border,
|
||||
1px solid var(--bsplus-analytics-border)
|
||||
);
|
||||
box-shadow: var(--bsplus-theme-card-shadow, var(--bsplus-analytics-shadow));
|
||||
backdrop-filter: var(--bsplus-theme-card-blur, none);
|
||||
transition:
|
||||
transform 0.25s var(--bsplus-analytics-ease),
|
||||
box-shadow 0.25s var(--bsplus-analytics-ease);
|
||||
}
|
||||
|
||||
.bsplus-analytics-stat:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(
|
||||
--bsplus-theme-card-shadow-hover,
|
||||
var(--bsplus-analytics-shadow-hover)
|
||||
);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.45rem;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.bsplus-analytics-stat-label {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
color: var(--bsplus-analytics-muted);
|
||||
margin-bottom: 0.35rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-stat-label::after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
.bsplus-analytics-stat-value {
|
||||
font-size: 1.75rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
line-height: 1.2;
|
||||
color: var(--bsplus-analytics-text);
|
||||
}
|
||||
|
||||
@@ -325,95 +494,11 @@
|
||||
color: var(--bsplus-analytics-accent);
|
||||
}
|
||||
|
||||
/* ─── Filter toolbar ─── */
|
||||
.bsplus-analytics-toolbar {
|
||||
padding: 1rem 1.15rem;
|
||||
border-radius: var(
|
||||
--bsplus-theme-card-radius,
|
||||
var(--bsplus-analytics-radius)
|
||||
);
|
||||
background: var(--bsplus-theme-card-bg, var(--bsplus-analytics-surface));
|
||||
border: var(
|
||||
--bsplus-theme-card-border,
|
||||
1px solid var(--bsplus-analytics-border)
|
||||
);
|
||||
box-shadow: var(--bsplus-theme-card-shadow, var(--bsplus-analytics-shadow));
|
||||
backdrop-filter: var(--bsplus-theme-card-blur, none);
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.bsplus-analytics-toolbar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(12rem, 1.4fr) auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 0.9rem 1rem;
|
||||
align-items: end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bsplus-analytics-toolbar-clear {
|
||||
grid-column: 4;
|
||||
grid-row: 1;
|
||||
justify-self: end;
|
||||
align-self: end;
|
||||
padding: 0.65rem 0.9rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bsplus-analytics-toolbar-trends {
|
||||
grid-column: 4;
|
||||
grid-row: 2;
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
margin-left: 0;
|
||||
max-width: 14rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bsplus-analytics-toolbar-trends-top {
|
||||
grid-row: 1;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.bsplus-analytics-toolbar-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.bsplus-analytics-toolbar-search {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.bsplus-analytics-toolbar-clear {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: auto;
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.bsplus-analytics-grade-range {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.bsplus-analytics-toolbar-trends {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: auto;
|
||||
justify-self: start;
|
||||
max-width: none;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.bsplus-analytics-toolbar-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.bsplus-analytics-toolbar-dropdown-field {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
.bsplus-analytics-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--bsplus-analytics-stack-gap);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-field {
|
||||
@@ -432,11 +517,13 @@
|
||||
}
|
||||
|
||||
.bsplus-analytics-checkbox {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.35rem 0;
|
||||
font-size: 0.8125rem;
|
||||
height: 20px;
|
||||
padding-left: 25px;
|
||||
padding-right: 10px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--bsplus-analytics-text);
|
||||
cursor: pointer;
|
||||
@@ -445,12 +532,67 @@
|
||||
}
|
||||
|
||||
.bsplus-analytics-checkbox input[type="checkbox"] {
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
accent-color: var(--bsplus-analytics-accent);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: content-box;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 3px solid
|
||||
var(--item-colour, var(--better-main, var(--bsplus-analytics-accent)));
|
||||
border-radius: 5px;
|
||||
color: var(--bsplus-analytics-text);
|
||||
}
|
||||
|
||||
.bsplus-analytics-checkbox:hover
|
||||
input:not(:disabled)
|
||||
~ .bsplus-analytics-checkmark {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
.bsplus-analytics-checkbox input:checked ~ .bsplus-analytics-checkmark {
|
||||
background: var(--item-colour, var(--better-main, var(--bsplus-analytics-accent)));
|
||||
}
|
||||
|
||||
.lc-legend-swatch-group {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bsplus-analytics-checkmark::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-checkbox input:checked ~ .bsplus-analytics-checkmark::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bsplus-analytics-checkbox input:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bsplus-analytics-checkbox input:disabled ~ .bsplus-analytics-checkmark,
|
||||
.bsplus-analytics-checkbox input:disabled ~ span:not(.bsplus-analytics-checkmark) {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bsplus-analytics-select,
|
||||
@@ -460,16 +602,24 @@
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--bsplus-analytics-text);
|
||||
background: var(--bsplus-analytics-surface-2);
|
||||
border: 2px solid var(--bsplus-analytics-border);
|
||||
background-color: var(--bsplus-analytics-control-bg);
|
||||
border: 2px solid var(--bsplus-analytics-control-border);
|
||||
border-radius: var(--bsplus-analytics-radius-sm);
|
||||
padding: 0.65rem 2.25rem 0.65rem 0.9rem;
|
||||
min-height: 2.75rem;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
background-color 0.2s ease,
|
||||
transform 0.2s var(--bsplus-analytics-ease);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 1px 3px
|
||||
color-mix(in srgb, var(--bsplus-analytics-text) 8%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-analytics-card .bsplus-analytics-select,
|
||||
.bsplus-analytics-card .bsplus-analytics-input,
|
||||
.bsplus-analytics-card .bsplus-analytics-dropdown-trigger {
|
||||
background-color: var(--bsplus-analytics-surface-2);
|
||||
}
|
||||
|
||||
.bsplus-analytics-select {
|
||||
@@ -497,26 +647,58 @@
|
||||
|
||||
.bsplus-analytics-select:hover,
|
||||
.bsplus-analytics-input:hover {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-surface) 96%,
|
||||
var(--bsplus-analytics-surface-2) 4%
|
||||
);
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-accent) 35%,
|
||||
var(--bsplus-analytics-border)
|
||||
var(--bsplus-analytics-control-border)
|
||||
);
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters .bsplus-analytics-dropdown-trigger:hover {
|
||||
background-color: var(--bsplus-analytics-control-bg-elevated);
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-accent) 40%,
|
||||
var(--bsplus-analytics-control-border-strong)
|
||||
);
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters .bsplus-analytics-input:hover {
|
||||
background-color: var(--bsplus-analytics-control-bg-elevated);
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-accent) 40%,
|
||||
var(--bsplus-analytics-control-border-strong)
|
||||
);
|
||||
}
|
||||
|
||||
.bsplus-analytics-select:focus,
|
||||
.bsplus-analytics-input:focus {
|
||||
outline: none;
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-surface) 96%,
|
||||
var(--bsplus-analytics-surface-2) 4%
|
||||
);
|
||||
border-color: var(--bsplus-analytics-accent);
|
||||
box-shadow: 0 0 0 3px
|
||||
color-mix(in srgb, var(--bsplus-analytics-accent) 22%, transparent);
|
||||
box-shadow:
|
||||
0 0 0 1px color-mix(in srgb, var(--bsplus-analytics-text) 12%, transparent),
|
||||
0 0 0 3px color-mix(in srgb, var(--bsplus-analytics-accent) 22%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-analytics-grade-range {
|
||||
grid-column: 1 / 4;
|
||||
grid-row: 2;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
.bsplus-analytics-filters .bsplus-analytics-dropdown-trigger:focus-visible {
|
||||
background-color: var(--bsplus-analytics-control-bg-elevated);
|
||||
border-color: var(--bsplus-analytics-accent);
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters .bsplus-analytics-input:focus {
|
||||
background-color: var(--bsplus-analytics-control-bg-elevated);
|
||||
border-color: var(--bsplus-analytics-accent);
|
||||
}
|
||||
|
||||
.bsplus-analytics-range-value {
|
||||
@@ -528,24 +710,16 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bsplus-analytics-toolbar-search {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Toolbar custom dropdowns (time period, subjects) */
|
||||
/* Custom dropdowns (time period, subjects) */
|
||||
.bsplus-analytics-dropdown {
|
||||
position: relative;
|
||||
min-width: 11rem;
|
||||
}
|
||||
|
||||
.dark .bsplus-analytics-dropdown-trigger {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.72)'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.bsplus-analytics-dropdown-trigger {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.65rem 2.25rem 0.65rem 0.9rem;
|
||||
@@ -554,35 +728,86 @@
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
color: var(--bsplus-analytics-text);
|
||||
background: var(--bsplus-analytics-surface-2);
|
||||
border: 2px solid var(--bsplus-analytics-border);
|
||||
background-color: var(--bsplus-analytics-control-bg);
|
||||
border: 2px solid var(--bsplus-analytics-control-border);
|
||||
border-radius: var(--bsplus-analytics-radius-sm);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
|
||||
background-position: right 0.75rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem;
|
||||
box-shadow: 0 1px 3px
|
||||
color-mix(in srgb, var(--bsplus-analytics-text) 8%, transparent);
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
background-color 0.2s ease,
|
||||
transform 0.2s var(--bsplus-analytics-ease);
|
||||
}
|
||||
|
||||
.bsplus-analytics-dropdown-trigger::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.9rem;
|
||||
width: 0.42rem;
|
||||
height: 0.42rem;
|
||||
border-right: 2px solid var(--bsplus-analytics-muted);
|
||||
border-bottom: 2px solid var(--bsplus-analytics-muted);
|
||||
transform: translateY(-65%) rotate(45deg);
|
||||
pointer-events: none;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
transform 0.2s var(--bsplus-analytics-ease);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bsplus-analytics-dropdown-trigger::after {
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.bsplus-analytics-dropdown-trigger:hover {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-surface) 96%,
|
||||
var(--bsplus-analytics-surface-2) 4%
|
||||
);
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-accent) 35%,
|
||||
var(--bsplus-analytics-border)
|
||||
var(--bsplus-analytics-control-border)
|
||||
);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.bsplus-analytics-dropdown-trigger:hover::after {
|
||||
border-color: var(--bsplus-analytics-text);
|
||||
}
|
||||
|
||||
.bsplus-analytics-card .bsplus-analytics-dropdown-trigger:hover {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-surface-2) 92%,
|
||||
var(--bsplus-analytics-surface) 8%
|
||||
);
|
||||
}
|
||||
|
||||
.bsplus-analytics-dropdown-trigger:focus-visible {
|
||||
outline: none;
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-surface) 96%,
|
||||
var(--bsplus-analytics-surface-2) 4%
|
||||
);
|
||||
border-color: var(--bsplus-analytics-accent);
|
||||
box-shadow: 0 0 0 3px
|
||||
color-mix(in srgb, var(--bsplus-analytics-accent) 22%, transparent);
|
||||
box-shadow:
|
||||
0 0 0 1px color-mix(in srgb, var(--bsplus-analytics-text) 12%, transparent),
|
||||
0 0 0 3px color-mix(in srgb, var(--bsplus-analytics-accent) 22%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-analytics-dropdown-trigger:focus-visible::after {
|
||||
border-color: var(--bsplus-analytics-accent);
|
||||
}
|
||||
|
||||
.bsplus-analytics-dropdown-trigger[aria-expanded="true"]::after {
|
||||
transform: translateY(-35%) rotate(225deg);
|
||||
}
|
||||
|
||||
.bsplus-analytics-dropdown-menu {
|
||||
@@ -595,9 +820,9 @@
|
||||
overflow-y: auto;
|
||||
padding: 0.35rem;
|
||||
border-radius: var(--bsplus-analytics-radius-sm);
|
||||
background: var(--bsplus-analytics-surface);
|
||||
border: 1px solid var(--bsplus-analytics-border);
|
||||
box-shadow: var(--bsplus-analytics-shadow-hover);
|
||||
background: var(--bsplus-analytics-control-bg-elevated);
|
||||
border: 1px solid var(--bsplus-analytics-control-border-strong);
|
||||
box-shadow: var(--bsplus-analytics-shadow);
|
||||
}
|
||||
|
||||
.bsplus-analytics-dropdown-item {
|
||||
@@ -645,7 +870,7 @@
|
||||
.bsplus-analytics-charts {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.25rem;
|
||||
gap: var(--bsplus-analytics-stack-gap);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -660,42 +885,17 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-chart-cell > :global(.bsplus-analytics-animate) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.bsplus-analytics-chart-cell > :global(.bsplus-analytics-card) {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-chart-cell :global(.bsplus-analytics-card) {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Fade-in animation must not paint above the filter toolbar / dropdown */
|
||||
.bsplus-analytics-charts > .bsplus-analytics-animate {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-charts > .bsplus-analytics-animate > .bsplus-analytics-card {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.bsplus-analytics-charts {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.bsplus-analytics-charts .bsplus-analytics-card-header {
|
||||
min-height: 5.75rem;
|
||||
box-sizing: border-box;
|
||||
align-items: flex-end;
|
||||
gap: var(--bsplus-analytics-stack-gap);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -730,10 +930,9 @@
|
||||
.bsplus-analytics-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 1rem;
|
||||
min-height: 4.75rem;
|
||||
padding: 1.15rem 1.25rem;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem 0.75rem;
|
||||
padding: 0.65rem 0.85rem;
|
||||
border-bottom: 1px solid var(--bsplus-analytics-border);
|
||||
}
|
||||
|
||||
@@ -741,27 +940,40 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bsplus-analytics-card-header-text {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bsplus-analytics-card-title-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.bsplus-analytics-card-title-row .bsplus-analytics-card-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-card-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 0.75rem 1rem;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-forecast-controls {
|
||||
min-width: min(100%, 18rem);
|
||||
max-width: 22rem;
|
||||
}
|
||||
|
||||
.bsplus-analytics-forecast-toggle {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
height: 20px;
|
||||
padding: 0 0 0 25px;
|
||||
font-size: 0.8125rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bsplus-analytics-forecast-horizon {
|
||||
flex: 1;
|
||||
min-width: 11rem;
|
||||
min-width: 8.5rem;
|
||||
max-width: 11rem;
|
||||
}
|
||||
|
||||
.bsplus-analytics-forecast-line {
|
||||
@@ -816,18 +1028,20 @@
|
||||
}
|
||||
|
||||
.bsplus-analytics-card-desc {
|
||||
margin: 0.25rem 0 0;
|
||||
margin: 0.15rem 0 0;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--bsplus-analytics-muted);
|
||||
}
|
||||
|
||||
.bsplus-analytics-card-body {
|
||||
padding: 1rem 1.15rem;
|
||||
padding: 0.5rem 0.85rem 0.65rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
background: var(--bsplus-analytics-surface);
|
||||
}
|
||||
|
||||
@@ -836,19 +1050,14 @@
|
||||
}
|
||||
|
||||
.bsplus-analytics-card-footer {
|
||||
padding: 0.85rem 1.25rem 1.1rem;
|
||||
padding: 0.5rem 0.85rem 0.65rem;
|
||||
border-top: 1px solid var(--bsplus-analytics-border);
|
||||
font-size: 0.8125rem;
|
||||
color: var(--bsplus-analytics-muted);
|
||||
line-height: 1.5;
|
||||
line-height: 1.4;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.bsplus-analytics-charts .bsplus-analytics-card-footer {
|
||||
min-height: 4.25rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bsplus-analytics-card-footer p {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -884,21 +1093,13 @@
|
||||
color: var(--bsplus-analytics-muted);
|
||||
}
|
||||
|
||||
.bsplus-analytics-root .bsplus-chart-surface {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: var(--bsplus-analytics-chart-height, 280px);
|
||||
min-height: var(--bsplus-analytics-chart-height, 280px);
|
||||
max-height: var(--bsplus-analytics-chart-height, 280px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-root .bsplus-chart-surface,
|
||||
.bsplus-analytics-root .bsplus-chart-surface-bar {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 320px;
|
||||
min-height: 320px;
|
||||
max-height: 320px;
|
||||
height: var(--bsplus-analytics-chart-height, 300px);
|
||||
min-height: var(--bsplus-analytics-chart-height, 300px);
|
||||
max-height: var(--bsplus-analytics-chart-height, 300px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -1033,7 +1234,7 @@
|
||||
}
|
||||
|
||||
.bsplus-analytics-table-header {
|
||||
padding: 1rem 1.25rem;
|
||||
padding: 0.65rem 0.85rem;
|
||||
border-bottom: 1px solid var(--bsplus-analytics-border);
|
||||
}
|
||||
|
||||
@@ -1062,7 +1263,7 @@
|
||||
}
|
||||
|
||||
.bsplus-analytics-table th {
|
||||
padding: 0.75rem 1rem;
|
||||
padding: 0.55rem 0.85rem;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
color: var(--bsplus-analytics-muted);
|
||||
@@ -1085,7 +1286,7 @@
|
||||
}
|
||||
|
||||
.bsplus-analytics-table td {
|
||||
padding: 0.7rem 1rem;
|
||||
padding: 0.55rem 0.85rem;
|
||||
border-top: 1px solid var(--bsplus-analytics-border);
|
||||
color: var(--bsplus-analytics-text);
|
||||
}
|
||||
@@ -1128,8 +1329,8 @@
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.85rem 1.25rem;
|
||||
gap: 0.65rem;
|
||||
padding: 0.55rem 0.85rem;
|
||||
border-top: 1px solid var(--bsplus-analytics-border);
|
||||
color: var(--bsplus-analytics-muted);
|
||||
font-size: 0.8125rem;
|
||||
@@ -1150,8 +1351,8 @@
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
padding-bottom: 0;
|
||||
color: var(--bsplus-analytics-muted);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
@@ -124,6 +124,7 @@ function syncThemeFromPage(target: HTMLElement) {
|
||||
|
||||
target.style.setProperty("--bsplus-analytics-accent", palette.accent);
|
||||
target.style.setProperty("--bsplus-analytics-accent-subtle", palette.accentSubtle);
|
||||
target.style.setProperty("--item-colour", palette.accent);
|
||||
target.style.setProperty(
|
||||
"--bsplus-analytics-forecast",
|
||||
`color-mix(in srgb, ${palette.accent} 72%, ${target.classList.contains("dark") ? "#f8fafc" : "#64748b"})`,
|
||||
@@ -210,7 +211,7 @@ export function renderAnalyticsPage(container: HTMLElement) {
|
||||
shadow.appendChild(styleElement);
|
||||
|
||||
analyticsRoot = document.createElement("div");
|
||||
analyticsRoot.className = "bsplus-analytics-root";
|
||||
analyticsRoot.className = "bsplus-analytics-mount";
|
||||
syncThemeToAnalyticsUi();
|
||||
shadow.appendChild(analyticsRoot);
|
||||
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* Serializable plugin setting defaults for cloud sync backfill.
|
||||
*
|
||||
* Kept separate from `@/plugins` so the service worker never imports Svelte UI or
|
||||
* Vite HMR clients. Values must match each plugin's non-component settings.
|
||||
*/
|
||||
function defaultSearchHotkey(): string {
|
||||
if (typeof navigator !== "undefined") {
|
||||
return navigator.platform.toUpperCase().includes("MAC") ? "cmd+k" : "ctrl+k";
|
||||
}
|
||||
return "ctrl+k";
|
||||
}
|
||||
|
||||
/** `plugin.<id>.settings` defaults (component/button keys omitted). */
|
||||
export const SYNCABLE_PLUGIN_SETTING_DEFAULTS: Record<
|
||||
string,
|
||||
Record<string, unknown>
|
||||
> = {
|
||||
themes: {},
|
||||
"animated-background": { speed: 1 },
|
||||
"assessments-average": { lettergrade: false },
|
||||
notificationCollector: {},
|
||||
timetable: {},
|
||||
timetableEdit: {},
|
||||
"profile-picture": { useCloudPfp: false },
|
||||
"assessments-overview": {},
|
||||
"background-music": { volume: 0.5, pauseOnHidden: true },
|
||||
messageFolders: {
|
||||
showTagsInAllMessages: true,
|
||||
hideFolderedMessagesInAll: true,
|
||||
},
|
||||
"enhanced-navigation": { autoScrollOnClick: false },
|
||||
"global-search": {
|
||||
searchHotkey: defaultSearchHotkey(),
|
||||
showRecentFirst: true,
|
||||
transparencyEffects: true,
|
||||
runIndexingOnLoad: true,
|
||||
passiveIndexing: true,
|
||||
},
|
||||
"grade-analytics": { cacheTtlHours: 24 },
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 54 KiB |
@@ -1,55 +0,0 @@
|
||||
import { settingsState } from "../listeners/SettingsState";
|
||||
import { animate as motionAnimate } from "motion";
|
||||
|
||||
export function shouldShowEngageParentsAnnouncement(): boolean {
|
||||
return !settingsState.engageParentsAnnouncementShown;
|
||||
}
|
||||
|
||||
/**
|
||||
* Non-blocking bottom-right toast announcing SEQTA Engage support. Shown once.
|
||||
*/
|
||||
export function showEngageParentsToast() {
|
||||
if (!shouldShowEngageParentsAnnouncement()) return;
|
||||
|
||||
settingsState.engageParentsAnnouncementShown = true;
|
||||
|
||||
const toast = document.createElement("div");
|
||||
toast.className = "bsplus-toast engageParentsToast";
|
||||
toast.innerHTML = /* html */ `
|
||||
<button class="bsplus-toast-close" aria-label="Dismiss">×</button>
|
||||
<div class="bsplus-toast-content">
|
||||
<p class="bsplus-toast-eyebrow">SEQTA Engage support</p>
|
||||
<strong>BetterSEQTA+ now supports <span class="seqtaEngageAccent">SEQTA Engage</span></strong>
|
||||
<p>Buy your mum a BetterSEQTA Plus! Parents now get themes, a cleaner home page, and all the Plus polish on SEQTA Engage.</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
toast.style.opacity = "0";
|
||||
document.getElementById("container")?.append(toast);
|
||||
|
||||
if (settingsState.animations) {
|
||||
(motionAnimate as any)(
|
||||
toast,
|
||||
{ opacity: [0, 1], y: [40, 0] },
|
||||
{ duration: 0.35, easing: [0.22, 0.03, 0.26, 1] },
|
||||
);
|
||||
} else {
|
||||
toast.style.opacity = "1";
|
||||
}
|
||||
|
||||
const dismiss = () => {
|
||||
if (settingsState.animations) {
|
||||
(motionAnimate as any)(
|
||||
toast,
|
||||
{ opacity: [1, 0], y: [0, 40] },
|
||||
{ duration: 0.2, easing: [0.22, 0.03, 0.26, 1] },
|
||||
).then(() => toast.remove());
|
||||
} else {
|
||||
toast.remove();
|
||||
}
|
||||
};
|
||||
|
||||
toast.querySelector(".bsplus-toast-close")!.addEventListener("click", dismiss);
|
||||
|
||||
setTimeout(dismiss, 10000);
|
||||
}
|
||||
@@ -1,9 +1,5 @@
|
||||
import { settingsState } from "../listeners/SettingsState";
|
||||
import { OpenWhatsNewPopup } from "./OpenWhatsNewPopup";
|
||||
import {
|
||||
shouldShowEngageParentsAnnouncement,
|
||||
showEngageParentsToast,
|
||||
} from "./OpenEngageParentsAnnouncement";
|
||||
import {
|
||||
fetchThemeOfTheMonth,
|
||||
OpenThemeOfTheMonthPopup,
|
||||
@@ -15,8 +11,7 @@ type QueueStep = (goNext: () => void) => void;
|
||||
|
||||
/**
|
||||
* Runs startup modals in order: What's New (if the extension just updated),
|
||||
* Theme of the Month (when the user hasn't dismissed this calendar month), then shows
|
||||
* the SEQTA Engage toast (once, non-blocking).
|
||||
* Theme of the Month (when the user hasn't dismissed this calendar month).
|
||||
*/
|
||||
export async function runStartupPopupQueue() {
|
||||
// Make sure the background script knows about any dev-mode API override
|
||||
@@ -41,11 +36,6 @@ export async function runStartupPopupQueue() {
|
||||
function runNext() {
|
||||
const step = steps.shift();
|
||||
if (step) step(runNext);
|
||||
else {
|
||||
if (shouldShowEngageParentsAnnouncement()) {
|
||||
showEngageParentsToast();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
runNext();
|
||||
|
||||
@@ -67,7 +67,6 @@ export function getDefaultSettingsState(): SettingsState {
|
||||
selectedFont: "rubik",
|
||||
timeFormat: "24",
|
||||
privacyStatementShown: false,
|
||||
engageParentsAnnouncementShown: false,
|
||||
bsCloudAutoSyncAnnouncementShown: false,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import browser from "webextension-polyfill";
|
||||
import { getAllPluginSettings } from "@/plugins";
|
||||
import { SYNCABLE_PLUGIN_SETTING_DEFAULTS } from "@/plugins/syncablePluginDefaults";
|
||||
import { getDefaultSettingsState } from "@/seqta/utils/defaultSettings";
|
||||
import {
|
||||
isKeyIncludedInCloudUploadPayload,
|
||||
@@ -24,7 +24,6 @@ const OPTIONAL_UNSET_MEANS_DEFAULT_KEYS = [
|
||||
"selectedFont",
|
||||
"privacyStatementShown",
|
||||
"privacyStatementLastUpdated",
|
||||
"engageParentsAnnouncementShown",
|
||||
"bsCloudAutoSyncAnnouncementShown",
|
||||
"themeOfTheMonthDismissedMonth",
|
||||
"themeOfTheMonthLastSeenId",
|
||||
@@ -38,18 +37,6 @@ const OPTIONAL_UNSET_MEANS_DEFAULT_KEYS = [
|
||||
"profile_picture_revision",
|
||||
] as const;
|
||||
|
||||
function buildDefaultPluginSettings(
|
||||
plugin: ReturnType<typeof getAllPluginSettings>[number],
|
||||
): Record<string, unknown> {
|
||||
const out: Record<string, unknown> = {};
|
||||
for (const [key, setting] of Object.entries(plugin.settings)) {
|
||||
const meta = setting as { type?: string; default?: unknown };
|
||||
if (meta.type === "component" || meta.type === "button") continue;
|
||||
out[key] = meta.default;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Flat default map in upload shape (plugin-format only; no legacy keys).
|
||||
*/
|
||||
@@ -65,9 +52,10 @@ export function getSyncableStorageDefaults(): Record<string, unknown> {
|
||||
delete flat[key];
|
||||
}
|
||||
|
||||
for (const plugin of getAllPluginSettings()) {
|
||||
flat[`plugin.${plugin.pluginId}.settings`] =
|
||||
buildDefaultPluginSettings(plugin);
|
||||
for (const [pluginId, settings] of Object.entries(
|
||||
SYNCABLE_PLUGIN_SETTING_DEFAULTS,
|
||||
)) {
|
||||
flat[`plugin.${pluginId}.settings`] = settings;
|
||||
}
|
||||
|
||||
return flat;
|
||||
|
||||
@@ -32,8 +32,6 @@ export interface SettingsState {
|
||||
justupdated?: boolean;
|
||||
privacyStatementShown?: boolean;
|
||||
privacyStatementLastUpdated?: string;
|
||||
/** One-time announcement: SEQTA Engage support for parents (dismissed popup queue). */
|
||||
engageParentsAnnouncementShown?: boolean;
|
||||
/** One-time announcement: BS Cloud automatic settings sync (last in startup popup queue). */
|
||||
bsCloudAutoSyncAnnouncementShown?: boolean;
|
||||
/**
|
||||
|
||||
+40
-4
@@ -4,8 +4,9 @@ import { join, resolve } from "path";
|
||||
import touchGlobalCSSPlugin from "./lib/touchGlobalCSS";
|
||||
import InlineWorkerPlugin from "./lib/inlineWorker";
|
||||
import { base64Loader } from "./lib/base64loader";
|
||||
import type { BuildTarget } from "./lib/types";
|
||||
import type { BuildTarget, Manifest } from "./lib/types";
|
||||
import ClosePlugin from "./lib/closePlugin";
|
||||
import fixCrxWorkerLiveReload from "./lib/fixCrxWorkerLiveReload";
|
||||
import { firefoxStripFunctionProbe } from "./lib/firefoxStripFunctionProbe";
|
||||
|
||||
import million from "million/compiler";
|
||||
@@ -22,6 +23,37 @@ import { crx } from "@crxjs/vite-plugin";
|
||||
|
||||
const targets: BuildTarget[] = [chrome, brave, edge, firefox, opera, safari];
|
||||
|
||||
const DEV_SERVER_PORT = 5173;
|
||||
|
||||
/** Vite HMR needs localhost script + ws origins; only applied during `vite dev`. */
|
||||
function withDevManifestCsp(manifest: Manifest, command: string): Manifest {
|
||||
if (command !== "serve") return manifest;
|
||||
|
||||
const extensionPages = manifest.content_security_policy?.extension_pages;
|
||||
if (!extensionPages) return manifest;
|
||||
|
||||
const localhost = `http://localhost:${DEV_SERVER_PORT}`;
|
||||
const localhostWs = `ws://localhost:${DEV_SERVER_PORT}`;
|
||||
const loopback = `http://127.0.0.1:${DEV_SERVER_PORT}`;
|
||||
const loopbackWs = `ws://127.0.0.1:${DEV_SERVER_PORT}`;
|
||||
|
||||
return {
|
||||
...manifest,
|
||||
content_security_policy: {
|
||||
...manifest.content_security_policy,
|
||||
extension_pages: extensionPages
|
||||
.replace(
|
||||
"script-src 'self'",
|
||||
`script-src 'self' ${localhost} ${loopback}`,
|
||||
)
|
||||
.replace(
|
||||
/connect-src ([^;]+)/,
|
||||
`connect-src $1 ${localhost} ${localhostWs} ${loopback} ${loopbackWs}`,
|
||||
),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const mode = process.env.MODE || "chrome"; // Check the environment variable to determine which build type to use.
|
||||
//const sourcemap = (process.env.SOURCEMAP === "true") || false; // Check whether we want sourcemaps.
|
||||
/** Million's compiler can emit `new Function()`, which Firefox extension pages block (strict CSP, no unsafe-eval). */
|
||||
@@ -46,11 +78,14 @@ export default defineConfig(({ command }) => ({
|
||||
}),
|
||||
...(useMillion ? [million.vite({ auto: true })] : []),
|
||||
crx({
|
||||
manifest:
|
||||
manifest: withDevManifestCsp(
|
||||
targets.find((t) => t.browser === mode.toLowerCase())?.manifest ??
|
||||
chrome.manifest,
|
||||
command,
|
||||
),
|
||||
browser: mode.toLowerCase() === "firefox" ? "firefox" : "chrome",
|
||||
}),
|
||||
fixCrxWorkerLiveReload(),
|
||||
touchGlobalCSSPlugin(),
|
||||
...(command === "build" ? [ClosePlugin(), firefoxStripFunctionProbe()] : []),
|
||||
],
|
||||
@@ -61,11 +96,12 @@ export default defineConfig(({ command }) => ({
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
port: DEV_SERVER_PORT,
|
||||
strictPort: true,
|
||||
hmr: {
|
||||
host: "localhost",
|
||||
protocol: "ws",
|
||||
port: 5173,
|
||||
port: DEV_SERVER_PORT,
|
||||
},
|
||||
},
|
||||
css: {
|
||||
|
||||
Reference in New Issue
Block a user