piratify: fix expand and tabs for Pirates RTL #469

This commit is contained in:
Sören Weber 2023-02-08 21:59:28 +01:00
parent 56bc99b79a
commit 5d9e1b6d47
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
5 changed files with 8 additions and 10 deletions

View file

@ -6,15 +6,14 @@
{{- if eq (printf "%T" $expanded) "string" }}
{{- $expanded = (eq $expanded "true") }}
{{- end }}
{{- $direction := T "Reading-direction" | default "ltr" }}
{{- with $context }}
{{- $id := partial "make-random-md5.hugo" }}
<div class="expand">
<input type="checkbox" id="expand-{{ $id }}" aria-controls="expandcontent-{{ $id }}" {{ if $expanded }} checked{{ end }}>
<label class="expand-label" for="expand-{{ $id }}" >
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-left expand-rtl direction-{{ $direction }}"></i>
<i class="fas fa-chevron-right expand-ltr direction-{{ $direction }}"></i>
<i class="fas fa-chevron-left expand-rtl"></i>
<i class="fas fa-chevron-right expand-ltr"></i>
{{ $title }}
</label>
<div id="expandcontent-{{ $id }}" class="expand-content">

View file

@ -1,14 +1,13 @@
{{- $context := .context }}
{{- $tabs := .tabs | default slice }}
{{- $groupid := .groupid | default "default" }}
{{- $direction := T "Reading-direction" | default "ltr" }}
{{- with $context }}
<div class="tab-panel" data-tab-group="{{ $groupid }}">
<div class="tab-nav">
{{- range $idx, $tab := $tabs }}
<button
data-tab-item="{{ .name }}"
class="tab-nav-button direction-{{ $direction }} {{ cond (eq $idx 0) "active" ""}}"
class="tab-nav-button{{ cond (eq $idx 0) " active" ""}}"
onclick="switchTab('{{ $groupid }}','{{ .name }}')"
>
<span>{{ .name }}</span></button>
@ -18,7 +17,7 @@
{{- range $idx, $tab := $tabs }}
<div
data-tab-item="{{ .name }}"
class="tab-content-text {{ cond (eq $idx 0) "active" ""}}"
class="tab-content-text{{ cond (eq $idx 0) " active" ""}}"
>
{{ .content | safeHTML }}
</div>

View file

@ -44,7 +44,7 @@
#body .tab-nav-button {
margin-left: 4px;
}
#body .tab-nav-button.direction-rtl {
html[dir="rtl"] #body .tab-nav-button {
float: left;
}
#body .tab-nav-button:first-child {

View file

@ -20,7 +20,7 @@
padding: 6px 12px;
position: relative;
}
#body .tab-nav-button.direction-rtl{
html[dir="rtl"] #body .tab-nav-button{
float: right;
}

View file

@ -1118,8 +1118,8 @@ option {
}
/* turn off unsuitable expander for this reading direction */
.expand > .expand-label > .expand-rtl.direction-ltr,
.expand > .expand-label > .expand-ltr.direction-rtl {
html[dir="ltr"] .expand > .expand-label > .expand-rtl,
html[dir="rtl"] .expand > .expand-label > .expand-ltr {
display: none;
}