Skip to content

Commit

Permalink
feat: Integrate Konsta UI components and Tailwind CSS for improved st…
Browse files Browse the repository at this point in the history 
…yling and layout
  • Loading branch information
@ebanDev
ebanDev committed Jan 7, 2025
1 parent c43d0a1 commit f50040f
Show file tree
Hide file tree
Showing 20 changed files with 771 additions and 638 deletions.
9 changes: 6 additions & 3 deletions app.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<k-app theme="material">
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</k-app>
</template>

<style>
Expand All @@ -17,6 +19,7 @@
</style>

<script setup>
import { kApp } from 'konsta/vue';
let deferredPrompt;
const userPrefs = useUserPrefsStore();
Expand Down
Binary file modified bun.lockb
View file
Binary file not shown.
121 changes: 46 additions & 75 deletions components/ProgressCircle.vue
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,51 @@
<template>
<div class="progress-circle">
<svg :width="size" :height="size">
<circle
class="progress-ring__background"
:stroke-width="strokeWidth"
:r="normalizedRadius"
:cx="radius"
:cy="radius"
/>
<circle
class="progress-ring__circle"
:stroke-width="strokeWidth"
:stroke-dasharray="circumference + ' ' + circumference"
:stroke-dashoffset="strokeDashoffset"
stroke-linecap="round"
:r="normalizedRadius"
:cx="radius"
:cy="radius"
/>
<circle
v-if="progress > 100"
class="progress-ring__circle--extra"
:stroke-width="strokeWidth"
:stroke-dasharray="circumference + ' ' + circumference"
:stroke-dashoffset="extraStrokeDashoffset"
stroke-linecap="round"
:r="normalizedRadius"
:cx="radius"
:cy="radius"
/>
</svg>
<div v-if="text" class="progress-text">{{ text }} <span>{{ subtext }}</span></div>
<div class="relative inline-block">
<svg :width="size" :height="size" class="rotate-[-90deg]">
<circle
class="fill-transparent stroke-md-light-outline-variant dark:stroke-md-dark-outline"
:stroke-width="strokeWidth"
:r="normalizedRadius"
:cx="radius"
:cy="radius"
stroke-color="#000"
/>
<circle
class="fill-transparent stroke-md-light-primary dark:stroke-md-dark-primary transition-all duration-300"
:stroke-width="strokeWidth"
:stroke-dasharray="circumference + ' ' + circumference"
:stroke-dashoffset="strokeDashoffset"
stroke-linecap="round"
:r="normalizedRadius"
:cx="radius"
:cy="radius"
/>
<circle
v-if="progress > 100"
class="fill-transparent stroke-md-light-on-primary-container transition-all duration-300"
:stroke-width="strokeWidth"
:stroke-dasharray="circumference + ' ' + circumference"
:stroke-dashoffset="extraStrokeDashoffset"
stroke-linecap="round"
:r="normalizedRadius"
:cx="radius"
:cy="radius"
/>
</svg>
<div
v-if="text"
class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center flex flex-col items-center"
>
<span class="text-[1.75rem] font-extrabold text-md-light-on-surface dark:text-md-dark-on-surface">
{{ text }}
</span>
<span
v-if="subtext"
class="text-[1.2rem] font-semibold text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant whitespace-nowrap"
>
{{ subtext }}
</span>
</div>
</div>
</template>

<script setup>
Expand Down Expand Up @@ -67,46 +81,3 @@ const circumference = computed(() => 2 * Math.PI * normalizedRadius.value);
const strokeDashoffset = computed(() => circumference.value - (Math.min(props.progress, 100) / 100) * circumference.value);
const extraStrokeDashoffset = computed(() => circumference.value - ((props.progress - 100) / 100) * circumference.value);
</script>

<style scoped>
.progress-circle {
position: relative;
display: inline-block;
}
svg {
transform: rotate(-90deg);
}
.progress-ring__background {
fill: transparent;
stroke: var(--border-color);
}
.progress-ring__circle {
fill: transparent;
stroke: var(--cta-color);
transition: stroke-dashoffset var(--transition) linear;
}
.progress-ring__circle--extra {
fill: transparent;
stroke: var(--cta-hover-color);
transition: stroke-dashoffset var(--transition) linear;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.75rem;
font-weight: bolder;
color: var(--text-color);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
span {
font-size: 1.2rem;
font-weight: 600;
text-wrap: nowrap;
}
}
</style>
88 changes: 23 additions & 65 deletions components/TabBar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,29 @@
<script setup lang="ts">
const currentRoute = useRoute()
import { kTabbar, kTabbarLink } from 'konsta/vue';
const currentRoute = useRoute();
</script>

<template>
<nav class="tab-bar">
<div class="item" :class="{ active: currentRoute.path === '/' }">
<nuxt-link to="/">
<Icon name="i-tabler-home"/>
</nuxt-link>
<span>Accueil</span>
</div>
<div class="item" :class="{ active: currentRoute.path === '/results' }">
<nuxt-link to="/results">
<Icon name="i-tabler-chart-bar"/>
</nuxt-link>
<span>Analyses</span>
</div>
<div class="item" :class="{ active: currentRoute.path === '/info' }">
<nuxt-link to="/info">
<Icon name="i-tabler-info-circle"/>
</nuxt-link>
<span>Infos</span>
</div>
</nav>
</template>

<style scoped>
nav {
display: flex;
justify-content: space-around;
background-color: var(--tabbar-color);
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px 0;
z-index: 2;
width: 100vw;
.item {
transition: all 0.1s;
display: flex;
flex-direction: column;
align-items: center;
<k-tabbar :labels="true" :icons="true" class="left-0 bottom-0 fixed">
<k-tabbar-link :active="currentRoute.path === '/'" @click="navigateTo('/')">
<template #icon>
<Icon name="i-tabler-home" class="text-2xl" />
</template>
<template #label>Accueil</template>
</k-tabbar-link>

span:not(.iconify) {
font-size: 13px;
};
}
<k-tabbar-link :active="currentRoute.path === '/results'" @click="navigateTo('/results')">
<template #icon>
<Icon name="i-tabler-chart-bar" class="text-2xl" />
</template>
<template #label>Analyses</template>
</k-tabbar-link>

a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--text-color);
padding: 5px 15px;
border-radius: 15px;
.iconify {
font-size: 24px;
}
}
.item.active a {
color: var(--cta-hover-color);
background: var(--tabbar-active-color);
}
}
</style>
<k-tabbar-link :active="currentRoute.path === '/info'" @click="navigateTo('/info')">
<template #icon>
<Icon name="i-tabler-info-circle" class="text-2xl" />
</template>
<template #label>Infos</template>
</k-tabbar-link>
</k-tabbar>
</template>
96 changes: 40 additions & 56 deletions components/TopBar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<script setup lang="ts">
import { kNavbar, kButton } from 'konsta/vue';
import { useTime } from '~/composables/useTime';
import { useSessionGroups } from '~/composables/useSessionGroups';
const route = useRoute();
const showSettings = ref(false);
const showChatAssistant = ref(false);
const settingsOpened = ref(false);
const chatAssistantOpened = ref(false);
const { wearingSessions, dayStartAt, wearingGoal } = storeToRefs(useUserPrefsStore());
Expand All @@ -28,58 +29,41 @@ const streak = computed(() => {
</script>

<template>
<header>
<h1>
<Icon name="i-tabler-left-fill" v-if="route.meta.showBackButton" @click="$router.back()" />
{{ route.meta.title }}
</h1>
<div class="left">
<span class="streak">
<Icon name="i-tabler-flame" />
{{ streak }}
</span>
<button @click="showChatAssistant = true">
<Icon name="i-tabler-message-chatbot" />
</button>
<button @click="showSettings = true">
<Icon name="i-tabler-settings" />
</button>
</div>
</header>
<dialogs-settings v-if="showSettings" @close="showSettings = false" />
<dialogs-chat-assistant v-if="showChatAssistant" @close="showChatAssistant = false" />
<k-navbar class="sticky top-0 z-10">
<template #title>
<div class="flex items-center gap-2">
<Icon
name="i-tabler-left-fill"
v-if="route.meta.showBackButton"
@click="$router.back()"
class="cursor-pointer"
/>
{{ route.meta.title }}
</div>
</template>

<template #right>
<div class="flex items-center gap-2 mr-2">
<span class="flex items-center gap-1 text-xl font-bold bg-md-light-secondary-container px-3 py-1 h-10 rounded-lg">
<Icon name="i-tabler-flame" />
{{ streak }}
</span>
<k-button @click="chatAssistantOpened = true" class="!w-10 h-10 !p-0">
<Icon name="i-tabler-message-chatbot" class="text-xl" />
</k-button>
<k-button @click="settingsOpened = true" class="!w-10 h-10 !p-0">
<Icon name="i-tabler-settings" class="text-xl" />
</k-button>
</div>
</template>
</k-navbar>

<dialogs-settings
:opened="settingsOpened"
@close="settingsOpened = false"
/>
<dialogs-chat-assistant
:opened="chatAssistantOpened"
@close="chatAssistantOpened = false"
/>
</template>

<style scoped>
.streak {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 1.3rem;
font-weight: bold;
background: var(--tabbar-active-color);
padding: 0.25rem 0.75rem;
border-radius: 0.5rem;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: var(--tabbar-color);
z-index: 999;
position: sticky;
top: 0;
width: 100%;
gap: 1rem;
h1 {
font-size: 1.5rem;
font-weight: bold;
display: flex;
align-items: center;
gap: 0.5rem;
}
.left { display: flex; align-items: center; gap: .5rem; button { padding: 0.5rem; border-radius: 2rem; } }}</style>
Loading

0 comments on commit f50040f

Please sign in to comment.