mirror of
https://github.com/YunoHost/yunohost-portal.git
synced 2024-09-03 20:06:23 +02:00
style: misc update of some of aleks propositions
This commit is contained in:
axolotle
parent
ad828c7377
commit
95e75fe117
4 changed files with 66 additions and 46 deletions
7
app.vue
7
app.vue
|
|
@ -30,4 +30,11 @@ body {
|
|||
#__nuxt {
|
||||
@apply min-h-screen flex;
|
||||
}
|
||||
|
||||
/* GLOBAL */
|
||||
.btn,
|
||||
.select {
|
||||
min-height: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,33 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
text?: string
|
||||
}>()
|
||||
srOnly?: boolean
|
||||
}>(),
|
||||
{
|
||||
text: undefined,
|
||||
srOnly: false,
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1 id="main-target" tabindex="-1" class="text-4xl font-bold mb-3">
|
||||
<h1
|
||||
id="main-target"
|
||||
tabindex="-1"
|
||||
class="inline-block text-4xl font-bold"
|
||||
:class="{ 'sr-only focus:not-sr-only': srOnly }"
|
||||
>
|
||||
<slot name="default">
|
||||
{{ text }}
|
||||
</slot>
|
||||
</h1>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
/* Need some override here because of `not-sr-only` styles */
|
||||
margin-top: 2rem !important;
|
||||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ async function logout() {
|
|||
|
||||
<template>
|
||||
<div class="container mx-auto p-10 min-h-screen flex flex-col">
|
||||
<header class="py-10">
|
||||
<header class="py-2">
|
||||
<div class="h-10 -mt-10">
|
||||
<a
|
||||
id="skip-link"
|
||||
|
|
|
|||
|
|
@ -11,27 +11,27 @@ useHead({
|
|||
})
|
||||
|
||||
const apps = computed(() => {
|
||||
const appTileColors = [
|
||||
['bg-primary', 'text-primary-content'],
|
||||
['bg-secondary', 'text-secondary-content'],
|
||||
['bg-accent', 'text-accent-content'],
|
||||
['bg-neutral', 'text-neutral-content'],
|
||||
['bg-info', 'text-info-content'],
|
||||
['bg-success', 'text-success-content'],
|
||||
['bg-warning', 'text-warning-content'],
|
||||
['bg-error', 'text-error-content'],
|
||||
// FIXME currently using daisyui theme colors,
|
||||
// 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'],
|
||||
const appTileVariant = [
|
||||
'btn-primary',
|
||||
'btn-secondary',
|
||||
'btn-accent',
|
||||
'btn-neutral',
|
||||
'btn-info',
|
||||
'btn-success',
|
||||
'btn-warning',
|
||||
'btn-error',
|
||||
// FIXME currently using daisyui btn colors to get focus/hover styles,
|
||||
// if we want more colors we need to add btn variants based on daisyui colors.
|
||||
// 'bg-red-500'
|
||||
// 'bg-orange-500'
|
||||
// 'bg-yellow-500'
|
||||
// 'bg-lime-500'
|
||||
// 'bg-green-500'
|
||||
// 'bg-teal-500'
|
||||
// 'bg-indigo-500'
|
||||
// 'bg-primary',
|
||||
// 'bg-purple-500'
|
||||
// 'bg-rose-500'
|
||||
]
|
||||
|
||||
return Object.entries(appsData.value).map(([id, app]) => {
|
||||
|
|
@ -39,7 +39,7 @@ const apps = computed(() => {
|
|||
...app,
|
||||
id,
|
||||
url: '//' + app.url,
|
||||
colors: appTileColors[parseInt(app.label, 36) % appTileColors.length],
|
||||
variant: appTileVariant[parseInt(app.label, 36) % appTileVariant.length],
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -47,7 +47,7 @@ const apps = computed(() => {
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<PageTitle :text="$t('app_list')" />
|
||||
<PageTitle :text="$t('app_list')" sr-only />
|
||||
|
||||
<div id="apps" class="my-10">
|
||||
<div v-if="!apps.length" class="w-2/3">
|
||||
|
|
@ -55,13 +55,8 @@ const apps = computed(() => {
|
|||
</div>
|
||||
|
||||
<ul v-else class="tile-container">
|
||||
<li
|
||||
v-for="app in apps"
|
||||
:key="app.id"
|
||||
class="leading-none card h-40 w-40 relative mr-7 mb-7"
|
||||
>
|
||||
<div class="tile-layer" :class="[app.colors[0], 'brightness-75']" />
|
||||
<a :href="app.url" class="tile-layer p-5" :class="app.colors">
|
||||
<li v-for="app in apps" :key="app.id" class="tile relative">
|
||||
<a :href="app.url" class="btn p-5" :class="app.variant">
|
||||
<div class="text-6xl font-extrabold mb-1" aria-hidden="true">
|
||||
{{ app.label.substring(0, 2) }}
|
||||
</div>
|
||||
|
|
@ -81,18 +76,16 @@ const apps = computed(() => {
|
|||
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);
|
||||
.tile a {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#apps li.card:hover {
|
||||
transform: translate(-0.75rem, -0.75rem);
|
||||
.tile:hover a,
|
||||
.tile a:focus {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue