forked from potsda.mn/mobilizon
fix(front): uI fixes
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
7c51ef79b9
commit
0948cce83e
|
|
@ -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(
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue