adoralaura/hugo-book-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

#39, Finish tabs shortcode

Browse source
This commit is contained in:
Alex Shpak 2019-05-23 17:48:30 +02:00
parent f3796f43f3
commit 9f90c40517
5 changed files with 37 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
assets/_shortcode.scss
View file

@ -9,6 +9,7 @@
} }
} }
// {{< expand "Label" "icon" >}}
.book-expand { .book-expand {
border: 1px solid $gray-200; border: 1px solid $gray-200;
@ -28,29 +29,34 @@
} }
} }
// {{< tabs >}}
.book-tabs { .book-tabs {
border: 1px solid $gray-200; border: 1px solid $gray-200;
display: flex;
.book-tabs-head { flex-wrap: wrap;
border-bottom: $padding-1 solid $gray-100;
label { label {
display: inline-block; display: inline-block;
padding: $padding-8 $padding-16; padding: $padding-8 $padding-16;
cursor: pointer; cursor: pointer;
} }
}
.book-tabs-content { .book-tabs-content {
order: 999; //Move content blocks to the end
border-top: $padding-1 solid $gray-100;
padding: $padding-16; padding: $padding-16;
display: none; display: none;
} }
input[type="radio"]:checked + .book-tabs-content { input[type="radio"]:checked + label {
border-bottom: $padding-1 solid $color-link;
}
input[type="radio"]:checked + label + .book-tabs-content {
display: block; display: block;
} }
} }
// {{< columns >}}
.book-columns > { .book-columns > {
div + div { div + div {
margin-left: $padding-16 * 2; margin-left: $padding-16 * 2;

2
exampleSite/resources/_gen/assets/scss/book.scss_48b060fe05b0a273d182ef83c0605941.content
View file

File diff suppressed because one or more lines are too long

2
exampleSite/resources/_gen/assets/scss/book.scss_48b060fe05b0a273d182ef83c0605941.json
View file

@ -1 +1 @@
{"Target":"book.min.321975a033bb785de7028de6f009001beb23305b2dd699f53eb5987690eb5265.css","MediaType":"text/css","Data":{"Integrity":"sha256-Mhl1oDO7eF3nAo3m8AkAG+sjMFst1pn1PrWYdpDrUmU="}} {"Target":"book.min.1eed0ce8b9904e3795315033369d6179d45f04b26f5d726c6248ce01da3922da.css","MediaType":"text/css","Data":{"Integrity":"sha256-Hu0M6LmQTjeVMVAzNp1hedRfBLJvXXJsYkjOAdo5Ito="}}

2
layouts/shortcodes/mermaid.html
View file

@ -1,6 +1,6 @@
{{ if not (.Page.Scratch.Get "mermaid") }} {{ if not (.Page.Scratch.Get "mermaid") }}
<!-- Include mermaid only first time --> <!-- Include mermaid only first time -->
<script src="{{ "mermaid.min.js" | absURL }}"></script> <script src="{{ "mermaid.min.js" | relURL }}"></script>
{{ .Page.Scratch.Set "mermaid" true }} {{ .Page.Scratch.Set "mermaid" true }}
{{ end }} {{ end }}

24
layouts/shortcodes/tabs.html
View file

@ -2,18 +2,32 @@
{{ $id := .Get 0 }} {{ $id := .Get 0 }}
{{ $group := printf "tabs-%s" $id }} {{ $group := printf "tabs-%s" $id }}
<!--
<div class="book-tabs"> <div class="book-tabs">
<div class="book-tabs-head"> <div class="book-tabs-head">
{{ range $index, $tab := .Scratch.Get $group}} {{ range $index, $tab := .Scratch.Get $group }}
<label for="{{ printf "%s-%d" $group $index }}"> <label for="{{ printf "%s-%d" $group $index }}">
<span>{{ $tab.Name }}</span> {{ $tab.Name }}
</label> </label>
{{ end }} {{ end }}
</div> </div>
{{ range $index, $tab := .Scratch.Get $group}} {{ range $index, $tab := .Scratch.Get $group }}
<input type="radio" name="{{ $group }}" style="display: none;" id="{{ printf "%s-%d" $group $index }}" {{ if not $index }}checked="checked"{{ end }} /> <input type="radio" name="{{ $group }}" style="display: none;" id="{{ printf "%s-%d" $group $index }}" {{ if not $index }}checked="checked"{{ end }} />
<div class="book-tabs-content markdown-inner"> <div class="book-tabs-content book-tabs-{{ $index }} markdown-inner">
<span>{{ .Content | markdownify }}</span> {{ .Content | markdownify }}
</div> </div>
{{ end }} {{ end }}
</div> </div>
-->
<div class="book-tabs">
{{ range $index, $tab := .Scratch.Get $group }}
<input type="radio" name="{{ $group }}" style="display: none;" id="{{ printf "%s-%d" $group $index }}" {{ if not $index }}checked="checked"{{ end }} />
<label for="{{ printf "%s-%d" $group $index }}">
{{ $tab.Name }}
</label>
<div class="book-tabs-content markdown-inner">
{{ .Content | markdownify }}
</div>
{{ end }}
</div>