Make exercises into details (so they can be collapsed)

This commit is contained in:
Danila Fedorin 2023-12-28 00:12:51 -08:00
parent 72fb69d87b
commit 0d3100ba33
3 changed files with 19 additions and 17 deletions

View File

@ -2,8 +2,6 @@
@import "mixins.scss";
.bergamot-exercise {
@include bordered-block;
padding: 1em;
counter-increment: bergamot-exercise;
.bergamot-root {
@ -69,7 +67,7 @@
}
.bergamot-button-group {
margin-top: 0.5em;
margin-top: 1em;
}
}

View File

@ -1,18 +1,21 @@
<div class="bergamot-exercise">
<span class="bergamot-exercise-label">
{{ partial "icon.html" "edit-2" }}
<span class="bergamot-exercise-number"></span>
{{ if or (eq (.Get "label") "") (eq (.Get "label") nil) }}{{ else }}({{ .Get "label" }}){{ end }}:
</span>
{{ .Inner }}
<details open>
<summary>
<span class="bergamot-exercise-label">
<span class="bergamot-exercise-number"></span>
{{ if or (eq (.Get "label") "") (eq (.Get "label") nil) }}{{ else }}({{ .Get "label" }}){{ end }}:
</span>
</summary>
{{ .Inner }}
<div class="bergamot-button-group">
{{ if or (eq (.Get "preset") "") (eq (.Get "preset") nil) }}
{{ else }}
<button class="bergamot-button bergamot-play" onclick='window.Bergamot.runPreset(this.parentElement, "bergamot-widget-container-{{ .Get "id" }}", "{{ .Get "preset" }}")'>{{ partial "icon.html" "play" }}Start Bergamot</button>
<button class="bergamot-button bergamot-close bergamot-hidden" onclick='window.Bergamot.close(this.parentElement, "bergamot-widget-container-{{ .Get "id" }}")'>{{ partial "icon.html" "x" }}Close Bergamot</button>
{{ end }}
</div>
<div class="bergamot-button-group">
{{ if or (eq (.Get "preset") "") (eq (.Get "preset") nil) }}
{{ else }}
<button class="bergamot-button bergamot-play" onclick='window.Bergamot.runPreset(this.parentElement, "bergamot-widget-container-{{ .Get "id" }}", "{{ .Get "preset" }}")'>{{ partial "icon.html" "play" }}Start Bergamot</button>
<button class="bergamot-button bergamot-close bergamot-hidden" onclick='window.Bergamot.close(this.parentElement, "bergamot-widget-container-{{ .Get "id" }}")'>{{ partial "icon.html" "x" }}Close Bergamot</button>
{{ end }}
</div>
<div id="bergamot-widget-container-{{ .Get "id" }}"></div>
<div id="bergamot-widget-container-{{ .Get "id" }}"></div>
</details>
</div>

View File

@ -2,5 +2,6 @@
window.Bergamot.presets['{{ .Get "name" }}'] = {
rules: '{{ .Inner }}',
inputPrompt: '{{ .Get "prompt" }}',
query: '{{ .Get "query" }}',
};
</script>