potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

fix(front): uI fixes

Browse source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2023-12-22 18:07:47 +01:00
parent 7c51ef79b9
commit 0948cce83e
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 61 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/core/MaterialIcon.vue
View file

@ -262,6 +262,8 @@ const icons: Record<string, () => Promise<any>> = {
import(`../../../node_modules/vue-material-design-icons/PencilOutline.vue`), import(`../../../node_modules/vue-material-design-icons/PencilOutline.vue`),
Apps: () => Apps: () =>
import(`../../../node_modules/vue-material-design-icons/Apps.vue`), import(`../../../node_modules/vue-material-design-icons/Apps.vue`),
Server: () =>
import(`../../../node_modules/vue-material-design-icons/Server.vue`),
}; };
const props = withDefaults( const props = withDefaults(

68
src/views/Admin/InstancesView.vue
View file

@ -72,11 +72,11 @@
name: RouteName.INSTANCE, name: RouteName.INSTANCE,
params: { domain: instance.domain }, params: { domain: instance.domain },
}" }"
class="flex items-center mb-2 rounded bg-mbz-yellow-alt-300 hover:bg-mbz-yellow-alt-200 dark:bg-mbz-purple-600 dark:hover:bg-mbz-purple-700 p-4 flex-wrap justify-center gap-x-2 gap-y-3" class="min-w-0 flex items-center mb-2 rounded bg-mbz-yellow-alt-300 hover:bg-mbz-yellow-alt-200 dark:bg-mbz-purple-600 dark:hover:bg-mbz-purple-700 p-4 flex-wrap md:flex-nowrap justify-center gap-x-2 gap-y-3"
v-for="instance in instances.elements" v-for="instance in instances.elements"
:key="instance.domain" :key="instance.domain"
> >
<div class="grow overflow-hidden flex items-center gap-1"> <div class="flex-1 overflow-hidden flex items-center gap-1">
<img <img
class="w-12" class="w-12"
v-if="instance.software === 'Mobilizon'" v-if="instance.software === 'Mobilizon'"
@ -104,7 +104,7 @@
<div class=""> <div class="">
<h3 <h3
class="text-lg truncate font-bold text-slate-800 dark:text-slate-100" class="text-lg truncate font-bold line-clamp-1 text-slate-800 dark:text-slate-100"
v-if="instance.instanceName" v-if="instance.instanceName"
> >
{{ instance.instanceName }} {{ instance.instanceName }}
@ -115,52 +115,62 @@
> >
{{ instance.domain }} {{ instance.domain }}
</h3> </h3>
<div>
<div class="flex flex-wrap gap-x-2 gap-y-1">
<p <p
v-if="instance.instanceName" v-if="instance.instanceName"
class="inline-flex gap-2 text-slate-700 dark:text-slate-300" class="min-w-0 inline-flex gap-1 truncate text-slate-700 dark:text-slate-300"
> >
<span class="capitalize" v-if="instance.software">{{ <o-icon icon="web" />
instance.software
}}</span>
-
<span>{{ instance.domain }}</span> <span>{{ instance.domain }}</span>
</p> </p>
<p <p
v-else-if="instance.software" v-if="instance.software"
class="capitalize text-slate-700 dark:text-slate-300" class="capitalize text-slate-700 dark:text-slate-300 inline-flex gap-1"
> >
<o-icon icon="server" />
{{ instance.software }} {{ instance.software }}
</p> </p>
<span </div>
class="text-sm" <div>
v-if="instance.followedStatus === InstanceFollowStatus.APPROVED" <p
class="inline-flex gap-1 text-slate-700 dark:text-slate-300"
v-if="
instance.followedStatus === InstanceFollowStatus.APPROVED
"
> >
<o-icon icon="inbox-arrow-down" /> <o-icon icon="inbox-arrow-down" />
{{ t("Followed") }}</span {{ t("Followed") }}
> </p>
<span <p
class="text-sm" class="inline-flex gap-1 text-slate-700 dark:text-slate-300"
v-else-if=" v-else-if="
instance.followedStatus === InstanceFollowStatus.PENDING instance.followedStatus === InstanceFollowStatus.PENDING
" "
> >
<o-icon icon="inbox-arrow-down" /> <o-icon icon="inbox-arrow-down" />
{{ t("Followed, pending response") }}</span {{ t("Followed, pending response") }}
> </p>
<span <p
class="text-sm" class="inline-flex gap-1 text-slate-700 dark:text-slate-300"
v-if="instance.followerStatus == InstanceFollowStatus.APPROVED" v-if="
instance.followerStatus == InstanceFollowStatus.APPROVED
"
> >
<o-icon icon="inbox-arrow-up" /> <o-icon icon="inbox-arrow-up" />
{{ t("Follows us") }}</span {{ t("Follows us") }}
> </p>
<span <p
class="text-sm" class="inline-flex gap-1 text-slate-700 dark:text-slate-300"
v-if="instance.followerStatus == InstanceFollowStatus.PENDING" v-else-if="
instance.followerStatus == InstanceFollowStatus.PENDING
"
> >
<o-icon icon="inbox-arrow-up" /> <o-icon icon="inbox-arrow-up" />
{{ t("Follows us, pending approval") }}</span {{ t("Follows us, pending approval") }}
> </p>
</div>
</div>
</div> </div>
</div> </div>
<div class="flex-none flex gap-3 ltr:ml-3 rtl:mr-3"> <div class="flex-none flex gap-3 ltr:ml-3 rtl:mr-3">