Fix mobile navigation and minor mobile problems
This commit is contained in:
Daniel Egger
parent
db40368244
commit
abddf3079a
|
|
@ -3,6 +3,7 @@ import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
|
|||
import type { UserState } from "@/stores/user";
|
||||
import type { CourseSession } from "@/types";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -21,6 +22,8 @@ const clickLink = (to: string | undefined) => {
|
|||
emit("closemodal");
|
||||
}
|
||||
};
|
||||
|
||||
const courseSessionsStore = useCourseSessionsStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -49,20 +52,38 @@ const clickLink = (to: string | undefined) => {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="courseSession" class="mt-6 border-b pb-6">
|
||||
<div v-if="courseSession" class="mt-6 border-b">
|
||||
<h4 class="text-sm text-gray-900">{{ courseSession?.course.title }}</h4>
|
||||
<ul class="mt-6">
|
||||
<li>
|
||||
<button @click="clickLink(courseSession?.learning_path_url)">
|
||||
{{ $t("general.learningPath") }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="mt-6">
|
||||
<li
|
||||
v-if="courseSessionsStore.currentCourseSessionHasCockpit"
|
||||
class="mb-6"
|
||||
>
|
||||
<button @click="clickLink(`${courseSession?.course_url}/cockpit`)">
|
||||
{{ $t("cockpit.title") }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="mt-6">
|
||||
<li class="mb-6">
|
||||
<button @click="clickLink(courseSession?.learning_path_url)">
|
||||
{{ $t("general.learningPath") }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="mb-6">
|
||||
<button
|
||||
@click="
|
||||
clickLink(
|
||||
courseSession?.competence_url.replace(
|
||||
// TODO: remove the `competence_url` with url to Navi...
|
||||
'/competences',
|
||||
''
|
||||
)
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ $t("competences.title") }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="mb-6">
|
||||
<button
|
||||
data-cy="medialibrary-link"
|
||||
@click="clickLink(`${courseSession?.media_library_url}`)"
|
||||
|
|
@ -72,16 +93,12 @@ const clickLink = (to: string | undefined) => {
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-6 border-b pb-6">
|
||||
<div class="mt-6 border-b">
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
class="nav-item"
|
||||
target="_blank"
|
||||
href="https://bildung.vbv.ch/ilp/pages/catalogsearch.jsf"
|
||||
>
|
||||
Shop
|
||||
</a>
|
||||
<li class="mb-6">
|
||||
<button data-cy="medialibrary-link" @click="clickLink('/')">
|
||||
myVBV
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ function toggleOpen() {
|
|||
<div class="text-xl lg:w-3/4">
|
||||
{{ $t("competence.listPageDescription") }}
|
||||
</div>
|
||||
<div class="whitespace-nowrap">
|
||||
<div class="lg:whitespace-nowrap">
|
||||
<button class="link" @click="toggleOpen()">
|
||||
<span v-if="isOpenAll">
|
||||
{{ $t("a.Alle zuklappen") }}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const getIconName = () => {
|
|||
:data-cy="`assignment-${assignment.slug}`"
|
||||
>
|
||||
<component :is="getIconName()" class="mr-4 hidden h-9 w-9 lg:block"></component>
|
||||
<div class="flex w-[420px] flex-col">
|
||||
<div class="flex flex-col lg:w-[420px]">
|
||||
<h3 class="text-bold flex items-center gap-2">{{ assignment.title }}</h3>
|
||||
<p class="text-gray-800">
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ const performanceCriteriaStatusCount = computed(() => {
|
|||
class="mb-6 flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8"
|
||||
>
|
||||
<li
|
||||
class="mb-4 inline-block w-1/3 flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:border-r lg:pb-0"
|
||||
class="mb-4 inline-block flex-1 border-b pb-4 lg:mb-0 lg:w-1/3 lg:border-b-0 lg:border-r lg:pb-0"
|
||||
>
|
||||
<h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.no") }}»</h5>
|
||||
<div class="flex flex-row items-center">
|
||||
|
|
@ -153,7 +153,7 @@ const performanceCriteriaStatusCount = computed(() => {
|
|||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="mb-4 inline-block w-1/3 flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:border-r lg:pb-0"
|
||||
class="mb-4 inline-block flex-1 border-b pb-4 lg:mb-0 lg:w-1/3 lg:border-b-0 lg:border-r lg:pb-0"
|
||||
>
|
||||
<h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.yes") }}»</h5>
|
||||
<div class="flex flex-row items-center">
|
||||
|
|
@ -166,7 +166,7 @@ const performanceCriteriaStatusCount = computed(() => {
|
|||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="w-1/3 flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:pb-0">
|
||||
<li class="flex-1 border-b pb-4 lg:mb-0 lg:w-1/3 lg:border-b-0 lg:pb-0">
|
||||
<h5 class="mb-4 text-gray-700">{{ $t("competences.notAssessed") }}</h5>
|
||||
<div class="flex flex-row items-center">
|
||||
<it-icon-smiley-neutral class="h-16 w-16"></it-icon-smiley-neutral>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
{{ criteria.title }}
|
||||
</div>
|
||||
</div>
|
||||
<span class="whitespace-nowrap">
|
||||
<span class="lg:whitespace-nowrap">
|
||||
<router-link
|
||||
v-if="props.showAssessAgain"
|
||||
class="link"
|
||||
|
|
|
|||
Loading…
Reference in New Issue