YunoHost/yunohost-portal
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-portal.git synced 2024-09-03 20:06:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

update tiles page

Browse source
This commit is contained in:
axolotle 2023-07-26 01:25:42 +02:00
parent 28d0295f0c
commit bb72f01edd
3 changed files with 62 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
layouts/default.vue
View file

@ -36,13 +36,16 @@ async function logout() {
</script> </script>
<template> <template>
<div class="container mx-auto p-5 min-h-screen flex flex-col"> <div class="container mx-auto p-10 min-h-screen flex flex-col">
<Html :lang="head.htmlAttrs?.lang" :dir="head.htmlAttrs?.dir"></Html> <Html :lang="head.htmlAttrs?.lang" :dir="head.htmlAttrs?.dir"></Html>
<header class="py-10"> <header class="py-10">
<slot name="header"> <slot name="header">
<div class="flex flex-row flex-wrap items-center min-w-full"> <div class="flex flex-row flex-wrap items-center min-w-full">
<NuxtLink to="/">
<span class="sr-only">{{ t('back_to_apps') }}</span>
<Icon name="mdi:account-circle" size="5em" class="mr-3" /> <Icon name="mdi:account-circle" size="5em" class="mr-3" />
</NuxtLink>
<div> <div>
<h2 class="text-2xl font-extrabold leading-none tracking-tight"> <h2 class="text-2xl font-extrabold leading-none tracking-tight">

2
locales/en-US.json
View file

@ -1,4 +1,5 @@
{ {
"back_to_apps": "Go back to app list",
"portal": "YunoHost Portal", "portal": "YunoHost Portal",
"information": "Your info", "information": "Your info",
"username": "Username", "username": "Username",
@ -19,6 +20,7 @@
"confirm": "Confirm", "confirm": "Confirm",
"login": "Log in", "login": "Log in",
"logout": "Log out", "logout": "Log out",
"no_apps": "There is no app to list here, either because no web app yet is installed on the server, or because you don't have access to any. Please check with the admins of the server for more infos!",
"password_changed": "Password changed", "password_changed": "Password changed",
"password_changed_error": "Could not change password", "password_changed_error": "Could not change password",
"password_not_match": "The passwords don't match", "password_not_match": "The passwords don't match",

78
pages/index.vue
View file

@ -4,16 +4,26 @@ const userData = await useUserInfo()
const me = computed(() => { const me = computed(() => {
const appTileColors = [ const appTileColors = [
'bg-red-500', ['bg-primary', 'text-primary-content'],
'bg-orange-500', ['bg-secondary', 'text-secondary-content'],
'bg-yellow-500', ['bg-accent', 'text-accent-content'],
'bg-lime-500', ['bg-neutral', 'text-neutral-content'],
'bg-green-500', ['bg-info', 'text-info-content'],
'bg-teal-500', ['bg-success', 'text-success-content'],
'bg-indigo-500', ['bg-warning', 'text-warning-content'],
'bg-sky-500', ['bg-error', 'text-error-content'],
'bg-purple-500', // FIXME currently using daisyui theme colors,
'bg-rose-500', // if we want more colors we need to adapt those to every themes.
// ['bg-red-500', 'text-red-100'],
// ['bg-orange-500', 'text-orange-100'],
// ['bg-yellow-500', 'text-yellow-100'],
// ['bg-lime-500', 'text-lime-100'],
// ['bg-green-500', 'text-green-100'],
// ['bg-teal-500', 'text-teal-100'],
// ['bg-indigo-500', 'text-indigo-100'],
// ['bg-primary', 'text-primary-content'],
// ['bg-purple-500', 'text-purple-100'],
// ['bg-rose-500', 'text-rose-100'],
] ]
if (!userData.value) return if (!userData.value) return
return { return {
@ -22,7 +32,8 @@ const me = computed(() => {
return { return {
...app, ...app,
id, id,
color: appTileColors[parseInt(app.label, 36) % appTileColors.length], url: '//' + app.url,
colors: appTileColors[parseInt(app.label, 36) % appTileColors.length],
} }
}), }),
} }
@ -31,29 +42,50 @@ const me = computed(() => {
<template> <template>
<div v-if="me"> <div v-if="me">
<div id="apps" class="p-10"> <div id="apps" class="py-10">
<div v-if="!me.apps.length"> <div v-if="!me.apps.length" class="w-2/3">
<em class="text-gray-400" <em>{{ t('no_apps') }}</em>
>There is no app to list here, either because no web app yet is
installed on the server, or because you don't have access to any.
Please check with the admins of the server for more infos!</em
>
</div> </div>
<ul v-else class="flex space-x-4"> <ul v-else class="tile-container">
<li <li
v-for="app in me.apps" v-for="app in me.apps"
:key="app.id" :key="app.id"
:class="'text-center leading-none p-5 card h-32 w-32 ' + app.color" class="leading-none card h-40 w-40 relative mr-7 mb-7"
> >
<a> <div class="tile-layer" :class="[app.colors[0], 'brightness-75']" />
<div class="text-6xl font-extrabold"> <a :href="app.url" class="tile-layer p-5" :class="app.colors">
<div class="text-6xl font-extrabold mb-1" aria-hidden="true">
{{ app.label.substring(0, 2) }} {{ app.label.substring(0, 2) }}
</div> </div>
<span class="leading-tight">{{ app.label }}</span> <span class="leading-tight mt-2">{{ app.label }}</span>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</template> </template>
<style>
.tile-container {
display: grid;
grid-template-columns: repeat(auto-fit, 10rem);
grid-auto-rows: 10rem;
grid-gap: 1.5rem;
}
.tile-layer {
z-index: -1;
position: absolute;
@apply inset-0;
@apply rounded-2xl;
transform: translate(0rem, 0rem);
}
#apps li.card:hover div.tile-layer {
transform: translate(0.75rem, 0.75rem);
}
#apps li.card:hover {
transform: translate(-0.75rem, -0.75rem);
}
</style>