소스 검색

(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 년 전
부모
커밋
295c9a73f7
2개의 변경된 파일17개의 추가작업 그리고 4개의 파일을 삭제
  1. +1
    -1
      src/html/index.html
  2. +16
    -3
      src/ts/frontend.ts

+ 1
- 1
src/html/index.html 파일 보기

@@ -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 파일 보기

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


불러오는 중...
취소
저장