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

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

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

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