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"; @import "mixins.scss";
.bergamot-exercise { .bergamot-exercise {
@include bordered-block;
padding: 1em;
counter-increment: bergamot-exercise; counter-increment: bergamot-exercise;
.bergamot-root { .bergamot-root {
@ -69,7 +67,7 @@
} }
.bergamot-button-group { .bergamot-button-group {
margin-top: 0.5em; margin-top: 1em;
} }
} }

View File

@ -1,18 +1,21 @@
<div class="bergamot-exercise"> <div class="bergamot-exercise">
<span class="bergamot-exercise-label"> <details open>
{{ partial "icon.html" "edit-2" }} <summary>
<span class="bergamot-exercise-number"></span> <span class="bergamot-exercise-label">
{{ if or (eq (.Get "label") "") (eq (.Get "label") nil) }}{{ else }}({{ .Get "label" }}){{ end }}: <span class="bergamot-exercise-number"></span>
</span> {{ if or (eq (.Get "label") "") (eq (.Get "label") nil) }}{{ else }}({{ .Get "label" }}){{ end }}:
{{ .Inner }} </span>
</summary>
{{ .Inner }}
<div class="bergamot-button-group"> <div class="bergamot-button-group">
{{ if or (eq (.Get "preset") "") (eq (.Get "preset") nil) }} {{ if or (eq (.Get "preset") "") (eq (.Get "preset") nil) }}
{{ else }} {{ 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-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> <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 }} {{ end }}
</div> </div>
<div id="bergamot-widget-container-{{ .Get "id" }}"></div> <div id="bergamot-widget-container-{{ .Get "id" }}"></div>
</details>
</div> </div>

View File

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