chg: [front] Improved UI for small screens

This commit is contained in:
Sami Mokaddem 2024-07-15 11:07:42 +02:00
parent 87401f7ac0
commit f4f67656ad
2 changed files with 4 additions and 3 deletions

View file

@ -43,8 +43,8 @@ body {
@apply 3xl:container mx-auto; @apply 3xl:container mx-auto;
@apply mx-auto; @apply mx-auto;
@apply mt-4; @apply mt-4;
@apply 3xl:w-11/12; @apply lg:w-11/12;
@apply lg:w-5/6; @apply 3xl:w-5/6;
} }
</style> </style>

View file

@ -38,13 +38,14 @@
v-for="(exercise, exercise_index) in exercises" v-for="(exercise, exercise_index) in exercises"
:key="exercise.name" :key="exercise.name"
> >
<div :class="fullscreen_panel === false ? 'relative' : ''"> <div :class="fullscreen_panel === false ? 'relative min-w-fit' : ''">
<span <span
v-show="fullscreen_panel === false || fullscreen_panel === exercise_index" v-show="fullscreen_panel === false || fullscreen_panel === exercise_index"
:class="['inline-block absolute shadow-lg z-50', fullscreen_panel === false ? 'top-0 -right-7' : 'top-2 right-2']" :class="['inline-block absolute shadow-lg z-50', fullscreen_panel === false ? 'top-0 -right-7' : 'top-2 right-2']"
> >
<button <button
@click="toggleFullScreen(exercise_index)" @click="toggleFullScreen(exercise_index)"
title="Toggle fullscreen mode"
:class="` :class="`
w-7 p-1 focus-outline font-semibold w-7 p-1 focus-outline font-semibold
text-slate-800 bg-slate-100 hover:bg-slate-200 dark:text-slate-200 dark:bg-slate-800 dark:hover:bg-slate-900 text-slate-800 bg-slate-100 hover:bg-slate-200 dark:text-slate-200 dark:bg-slate-800 dark:hover:bg-slate-900