rattail/tailbone
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

fix: improve collapse panels for butterball theme

Browse source
This commit is contained in:
Lance Edgar 2024-07-05 12:53:14 -05:00
parent 2988ff3ee9
commit 735327e46b
2 changed files with 87 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

10
tailbone/templates/custorders/create.mako
View file

@ -78,15 +78,16 @@
<b-icon v-if="props.open"
pack="fas"
icon="angle-down">
icon="caret-down">
</b-icon>
<span v-if="!props.open">
<b-icon pack="fas"
icon="angle-right">
icon="caret-right">
</b-icon>
</span>
&nbsp;
<strong v-html="customerPanelHeader"></strong>
</div>
</template>
@ -525,15 +526,16 @@
<b-icon v-if="props.open"
pack="fas"
icon="angle-down">
icon="caret-down">
</b-icon>
<span v-if="!props.open">
<b-icon pack="fas"
icon="angle-right">
icon="caret-right">
</b-icon>
</span>
&nbsp;
<strong v-html="itemsPanelHeader"></strong>
</div>
</template>

117
tailbone/templates/people/view_profile.mako
View file

@ -836,20 +836,35 @@
</div>
<br />
<b-collapse v-for="member in members"
:key="member.uuid"
class="panel"
:open="members.length == 1">
<${b}-collapse v-for="member in members"
:key="member.uuid"
class="panel"
:open="members.length == 1">
<div slot="trigger"
slot-scope="props"
class="panel-heading"
role="button">
<b-icon pack="fas"
icon="caret-right">
</b-icon>
<strong>{{ member._key }} - {{ member.display }}</strong>
</div>
<template #trigger="props">
<div class="panel-heading"
role="button"
style="cursor: pointer;">
## TODO: for some reason buefy will "reuse" the icon
## element in such a way that its display does not
## refresh. so to work around that, we use different
## structure for the two icons, so buefy is forced to
## re-draw
<b-icon v-if="props.open"
pack="fas"
icon="caret-down" />
<span v-if="!props.open">
<b-icon pack="fas"
icon="caret-right" />
</span>
&nbsp;
<strong>{{ member._key }} - {{ member.display }}</strong>
</div>
</template>
<div class="panel-block">
<div style="display: flex; justify-content: space-between; width: 100%;">
@ -917,7 +932,7 @@
</div>
</div>
</div>
</b-collapse>
</${b}-collapse>
</div>
<div v-if="!members.length">
@ -957,20 +972,35 @@
</div>
<br />
<b-collapse v-for="customer in customers"
:key="customer.uuid"
class="panel"
:open="customers.length == 1">
<${b}-collapse v-for="customer in customers"
:key="customer.uuid"
class="panel"
:open="customers.length == 1">
<div slot="trigger"
slot-scope="props"
class="panel-heading"
role="button">
<b-icon pack="fas"
icon="caret-right">
</b-icon>
<strong>{{ customer._key }} - {{ customer.name }}</strong>
</div>
<template #trigger="props">
<div class="panel-heading"
role="button"
style="cursor: pointer;">
## TODO: for some reason buefy will "reuse" the icon
## element in such a way that its display does not
## refresh. so to work around that, we use different
## structure for the two icons, so buefy is forced to
## re-draw
<b-icon v-if="props.open"
pack="fas"
icon="caret-down" />
<span v-if="!props.open">
<b-icon pack="fas"
icon="caret-right" />
</span>
&nbsp;
<strong>{{ customer._key }} - {{ customer.name }}</strong>
</div>
</template>
<div class="panel-block">
<div style="display: flex; justify-content: space-between; width: 100%;">
@ -1045,7 +1075,7 @@
</div>
</div>
</div>
</b-collapse>
</${b}-collapse>
</div>
<div v-if="!customers.length">
@ -1639,15 +1669,30 @@
:key="user.uuid"
class="panel">
<div slot="trigger"
slot-scope="props"
class="panel-heading"
role="button">
<b-icon pack="fas"
icon="caret-right">
</b-icon>
<template #trigger="props">
<div class="panel-heading"
role="button"
style="cursor: pointer;">
## TODO: for some reason buefy will "reuse" the icon
## element in such a way that its display does not
## refresh. so to work around that, we use different
## structure for the two icons, so buefy is forced to
## re-draw
<b-icon v-if="props.open"
pack="fas"
icon="caret-down" />
<span v-if="!props.open">
<b-icon pack="fas"
icon="caret-right" />
</span>
&nbsp;
<strong>{{ user.username }}</strong>
</div>
</div>
</template>
<div class="panel-block">
<div style="display: flex; justify-content: space-between; width: 100%;">