tommy/mobilizon
1
0
Fork 0
forked from potsda.mn/mobilizon
Code Pull requests Activity

Redesign organizer picker with tailwind

Browse source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-04-03 22:13:06 +02:00
parent 4e3eb33d01
commit 59c39efb80
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 44 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
js/src/components/Event/OrganizerPicker.vue
View file

@ -5,33 +5,48 @@
:placeholder="$t('Filter by profile or group name')" :placeholder="$t('Filter by profile or group name')"
v-model="actorFilter" v-model="actorFilter"
/> />
<b-radio-button <transition-group
v-model="selectedActor" tag="ul"
:native-value="availableActor" class="grid grid-cols-1 gap-y-3 m-5 max-w-md mx-auto"
class="list-item" enter-active-class="duration-300 ease-out"
v-for="availableActor in actualFilteredAvailableActors" enter-from-class="transform opacity-0"
:key="availableActor.id" enter-to-class="opacity-100"
leave-active-class="duration-200 ease-in"
leave-from-class="opacity-100"
leave-to-class="transform opacity-0"
> >
<div class="media" dir="auto"> <li
<figure class="image is-48x48" v-if="availableActor.avatar"> class="relative focus-within:shadow-lg"
<img v-for="availableActor in actualFilteredAvailableActors"
class="image is-rounded" :key="availableActor.id"
:src="availableActor.avatar.url" >
alt="" <input
/> class="sr-only peer"
</figure> type="radio"
<b-icon :value="availableActor"
class="media-left" name="availableActors"
v-else v-model="selectedActor"
size="is-large" :id="`availableActor-${availableActor.id}`"
icon="account-circle"
/> />
<div class="media-content"> <label
<h3>{{ availableActor.name }}</h3> class="flex flex-wrap p-3 bg-white border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
<small>{{ `@${availableActor.preferredUsername}` }}</small> :for="`availableActor-${availableActor.id}`"
</div> >
</div> <figure class="image is-48x48" v-if="availableActor.avatar">
</b-radio-button> <img
class="image is-rounded"
:src="availableActor.avatar.url"
alt=""
/>
</figure>
<b-icon v-else size="is-large" icon="account-circle" />
<div>
<h3>{{ availableActor.name }}</h3>
<small>{{ `@${availableActor.preferredUsername}` }}</small>
</div>
</label>
</li>
</transition-group>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">

5
js/src/components/Event/OrganizerPickerWrapper.vue
View file

@ -1,5 +1,8 @@
<template> <template>
<div class="organizer-picker" v-if="selectedActor"> <div
class="bg-white border border-gray-300 rounded-lg cursor-pointer"
v-if="selectedActor"
>
<!-- If we have a current actor (inline) --> <!-- If we have a current actor (inline) -->
<div <div
v-if="inline && selectedActor.id" v-if="inline && selectedActor.id"