Pārlūkot izejas kodu

(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 pirms 3 gadiem
vecāks
revīzija
295c9a73f7
2 mainītis faili ar 17 papildinājumiem un 4 dzēšanām
  1. +1
    -1
      src/html/index.html
  2. +16
    -3
      src/ts/frontend.ts

+ 1
- 1
src/html/index.html Parādīt failu

@@ -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 Parādīt failu

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


Notiek ielāde…
Atcelt
Saglabāt