chg: [front] Small UI improvement for colors and sizing

This commit is contained in:
Sami Mokaddem 2024-07-15 14:08:04 +02:00
parent cd28a560cc
commit 218a74b1cf
2 changed files with 5 additions and 4 deletions

View file

@ -23,13 +23,13 @@
const colorRanges = [0, 1, 2, 3, 4, 5, 1000] const colorRanges = [0, 1, 2, 3, 4, 5, 1000]
const palleteColor = 'blue' const palleteColor = 'blue'
const colorPalleteIndexDark = [ const colorPalleteIndexDark = [
'950',
'900', '900',
'700', '700',
'600', '600',
'500', '500',
'400', '400',
'300', '300',
'200',
] ]
const colorPalleteIndexLight = [ const colorPalleteIndexLight = [
'50', '50',

View file

@ -96,6 +96,7 @@
} }
const compactGrid = computed(() => { return userCount.value > 70 }) const compactGrid = computed(() => { return userCount.value > 70 })
const ultraCompactGrid = computed(() => { return userCount.value > 100 })
const hasProgress = computed(() => Object.keys(progresses.value).length > 0) const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => { const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => {
if (a.email < b.email) { if (a.email < b.email) {
@ -192,7 +193,7 @@
flex p-2 mb-1 flex p-2 mb-1
text-slate-600 dark:text-slate-400 text-slate-600 dark:text-slate-400
"> ">
<span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'}`"> <span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'} ${compactGrid ? '' : 'mb-1'}`">
<span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate mb-1"> <span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate mb-1">
<FontAwesomeIcon <FontAwesomeIcon
v-if="progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score == 1" v-if="progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score == 1"
@ -203,8 +204,8 @@
</span> </span>
<LiveLogsUserActivityGraph <LiveLogsUserActivityGraph
:user_id="progress.user_id" :user_id="progress.user_id"
:compact_view="true" :compact_view="compactGrid"
:ultra_compact_view="true" :ultra_compact_view="ultraCompactGrid"
></LiveLogsUserActivityGraph> ></LiveLogsUserActivityGraph>
</span> </span>
</span> </span>