Przeglądaj źródła

(FE) Make results panels collapsible

Also include bootstrap.js to make collapsing actually work, and change
order of links in head to ensure js is included in the 'correct' order
tags/v0.2.0
bertieb 3 lat temu
rodzic
commit
295c9a73f7
2 zmienionych plików z 17 dodań i 4 usunięć
  1. +1
    -1
      src/html/index.html
  2. +16
    -3
      src/ts/frontend.ts

+ 1
- 1
src/html/index.html Wyświetl plik

@@ -4,9 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asphodel Dice Roller</title>
<link rel="stylesheet" href="asphotheme.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="bundle.js" type="text/javascript"></script>
<link rel="stylesheet" href="asphotheme.css">
</head>
<body>
<div class="container">


+ 16
- 3
src/ts/frontend.ts Wyświetl plik

@@ -2,6 +2,7 @@ import { RollStats } from "./rollstats"
import { Outcomes } from "./asphodice"
import palette from "google-palette"
import { Chart } from "chart.js"
import "bootstrap";

let barChartOptions = { scales: {
yAxes: [{
@@ -298,10 +299,22 @@ function getResults():void {
let resultsCardBody = $("#results").find("div.card-body");


resultsCardBody.append(bigTitle("Asphodice Results"));
resultsCardBody.append(describeRolls(rollstats));
let resultsTitle = `<div class="d-flex justify-content-between">`
resultsTitle += `<div class="">`
+ bigTitle(`Asphodice Results
<small class="h4 text-muted">(<em><var>d=${rollstats.numDice}</var></em>)</small>`)
+ `</div>`;
resultsTitle += `<div class="">
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#resultsBody" aria-expanded="true" aria-controls="collapse-resultsBody">(hide/show)</button>
</div>`
resultsTitle += `</div>`;

resultsCardBody.append(resultsTitle);
//resultsCardBody.append(bigTitle(`Asphodice Results (${rollstats.numDice})`));
//resultsCardBody.append(describeRolls(rollstats));

let resultsBody = `<div class="row">`;
let resultsBody = `<div id="resultsBody" class="show row resultsToggle">`;
resultsBody += describeRolls(rollstats);
resultsBody += rerollReport(rollstats) + outcomesReport(rollstats) + outcomeBalancesReport(rollstats);
resultsBody += `</div>`;
resultsCardBody.append(resultsBody);


Ładowanie…
Anuluj
Zapisz