Quellcode durchsuchen

(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 vor 3 Jahren
Ursprung
Commit
295c9a73f7
2 geänderte Dateien mit 17 neuen und 4 gelöschten Zeilen
  1. +1
    -1
      src/html/index.html
  2. +16
    -3
      src/ts/frontend.ts

+ 1
- 1
src/html/index.html Datei anzeigen

@@ -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 Datei anzeigen

@@ -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);


Laden…
Abbrechen
Speichern