Make responsive
This commit is contained in:
Daniel Egger
parent
500ed0f111
commit
16a4c8ccb4
|
|
@ -21,9 +21,9 @@ const block = computed(() => {
|
|||
<div>
|
||||
<nav
|
||||
class="
|
||||
px-8
|
||||
px-4 lg:px-8
|
||||
py-4
|
||||
lg:flex lg:justify-between lg:items-center
|
||||
flex justify-between items-center
|
||||
border-b border-gray-500
|
||||
"
|
||||
>
|
||||
|
|
@ -33,10 +33,10 @@ const block = computed(() => {
|
|||
@click="circleStore.closeLearningContent()"
|
||||
>
|
||||
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
|
||||
<span class="">zurück zum Circle</span>
|
||||
<span class="hidden lg:inline">zurück zum Circle</span>
|
||||
</button>
|
||||
|
||||
<h1 class="text-xl">{{ learningContent.title }}</h1>
|
||||
<h1 class="text-xl hidden lg:block">{{ learningContent.title }}</h1>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -48,7 +48,7 @@ const block = computed(() => {
|
|||
</nav>
|
||||
|
||||
|
||||
<div class="mx-auto max-w-5xl px-8 py-4">
|
||||
<div class="mx-auto max-w-5xl px-4 lg:px-8 py-4">
|
||||
<p>{{ block.value.description }}</p>
|
||||
|
||||
<div v-if="block.type === 'video'">
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@ function handleContinue() {
|
|||
<div>
|
||||
<nav
|
||||
class="
|
||||
px-8
|
||||
px-4 lg:px-8
|
||||
py-4
|
||||
lg:flex lg:justify-between lg:items-center
|
||||
flex justify-between items-center
|
||||
border-b border-gray-500
|
||||
"
|
||||
>
|
||||
|
|
@ -43,10 +43,10 @@ function handleContinue() {
|
|||
@click="circleStore.closeSelfEvaluation()"
|
||||
>
|
||||
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
|
||||
<span class="">zurück zum Circle</span>
|
||||
<span class="hidden lg:inline">zurück zum Circle</span>
|
||||
</button>
|
||||
|
||||
<h1 class="text-xl">{{ circleStore.currentSelfEvaluation.title }}</h1>
|
||||
<h1 class="text-xl hidden lg:block">{{ circleStore.currentSelfEvaluation.title }}</h1>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -58,19 +58,19 @@ function handleContinue() {
|
|||
</nav>
|
||||
|
||||
|
||||
<div class="mx-auto max-w-6xl px-8 py-4">
|
||||
<div class="mx-auto max-w-6xl px-4 lg:px-8 py-4">
|
||||
|
||||
<div class="mt-8 text-gray-700">Schritt {{ state.questionIndex + 1 }} von {{ questions.length }}</div>
|
||||
<div class="mt-2 lg:mt-8 text-gray-700">Schritt {{ state.questionIndex + 1 }} von {{ questions.length }}</div>
|
||||
|
||||
<p class="text-xl mt-4">
|
||||
Überprüfe, ob du in der Lernheinheit <span class="font-bold">"{{ circleStore.currentSelfEvaluation.title }}"</span> alles verstanden hast.<br>
|
||||
Lies die folgende Aussage und bewerte sie:
|
||||
</p>
|
||||
|
||||
<div class="mt-8 p-12 border border-gray-500">
|
||||
<div class="mt-4 lg:mt-8 p-6 lg:p-12 border border-gray-500">
|
||||
<h2 class="heading-2">{{ currentQuestion.title }}</h2>
|
||||
|
||||
<div class="mt-12 flex justify-between gap-6">
|
||||
<div class="mt-4 lg:mt-8 flex flex-col lg:flex-row justify-between gap-6">
|
||||
<button
|
||||
@click="circleStore.markCompletion(currentQuestion, true)"
|
||||
class="flex-1 inline-flex items-center text-left p-4 border"
|
||||
|
|
@ -101,7 +101,7 @@ function handleContinue() {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-12">Schau dein Fortschritt in deinem Kompetenzprofil: Kompetenzprofil öffnen</div>
|
||||
<div class="mt-6 lg:mt-12">Schau dein Fortschritt in deinem Kompetenzprofil: Kompetenzprofil öffnen</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ onMounted(async () => {
|
|||
|
||||
<div class="circle">
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="flex-initial lg:w-128 px-4 py-8 lg:px-8">
|
||||
<div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:py-8">
|
||||
<h1 class="text-blue-dark text-7xl">
|
||||
{{ circleStore.circleData.title }}
|
||||
</h1>
|
||||
|
|
@ -48,21 +48,37 @@ onMounted(async () => {
|
|||
<img src="@/assets/circle-analyse.svg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="outcome border border-gray-500 mt-8 p-6">
|
||||
<h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
|
||||
<div class="prose mt-4">
|
||||
{{ circleStore.circleData.description }}
|
||||
<div class="border-t-2 border-gray-500 mt-4 lg:hidden">
|
||||
<div
|
||||
class="mt-4 inline-flex items-center"
|
||||
@click="circleStore.page = 'OVERVIEW'"
|
||||
>
|
||||
<it-icon-info class="mr-2"/>
|
||||
Das lernst du in diesem Circle
|
||||
</div>
|
||||
<div class="inline-flex items-center">
|
||||
<it-icon-message class="mr-2"/>
|
||||
Fachexpertin kontaktieren
|
||||
</div>
|
||||
|
||||
<button class="btn-primary mt-4" @click="circleStore.page = 'OVERVIEW'">Erfahre mehr dazu</button>
|
||||
</div>
|
||||
|
||||
<div class="expert border border-gray-500 mt-8 p-6">
|
||||
<h3 class="text-blue-dark">Hast du Fragen?</h3>
|
||||
<div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
|
||||
<button class="btn-secondary mt-4">
|
||||
Fachexpertin kontaktieren
|
||||
</button>
|
||||
<div class="hidden lg:block">
|
||||
<div class="block border border-gray-500 mt-8 p-6">
|
||||
<h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
|
||||
<div class="prose mt-4">
|
||||
{{ circleStore.circleData.description }}
|
||||
</div>
|
||||
|
||||
<button class="btn-primary mt-4" @click="circleStore.page = 'OVERVIEW'">Erfahre mehr dazu</button>
|
||||
</div>
|
||||
|
||||
<div class="expert border border-gray-500 mt-8 p-6">
|
||||
<h3 class="text-blue-dark">Hast du Fragen?</h3>
|
||||
<div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
|
||||
<button class="btn-secondary mt-4">
|
||||
Fachexpertin kontaktieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -207,6 +207,78 @@ Fachspezialisten bei.
|
|||
contents=[('exercise', ExerciseBlockFactory())]
|
||||
)
|
||||
|
||||
lu = LearningUnitFactory(title='Pensionierung', parent=circe_analyse)
|
||||
LearningUnitQuestionFactory(
|
||||
title='Passende Frage zu "Pensionierung"',
|
||||
parent=lu
|
||||
)
|
||||
LearningContentFactory(
|
||||
title='3-Säulen-Prinzip',
|
||||
parent=circe_analyse,
|
||||
minutes=240,
|
||||
contents=[('competence', CompetenceBlockFactory())]
|
||||
)
|
||||
LearningContentFactory(
|
||||
title='Altersvorsorge',
|
||||
parent=circe_analyse,
|
||||
minutes=240,
|
||||
contents=[('competence', CompetenceBlockFactory())]
|
||||
)
|
||||
LearningContentFactory(
|
||||
title='AHV',
|
||||
parent=circe_analyse,
|
||||
minutes=120,
|
||||
contents=[('document', DocumentBlockFactory())]
|
||||
)
|
||||
LearningContentFactory(
|
||||
title='Altersvorsorge planen',
|
||||
parent=circe_analyse,
|
||||
minutes=120,
|
||||
contents=[('exercise', ExerciseBlockFactory())]
|
||||
)
|
||||
|
||||
lu = LearningUnitFactory(title='Reisen', parent=circe_analyse)
|
||||
LearningUnitQuestionFactory(
|
||||
title='Passende Frage zu "Reisen"',
|
||||
parent=lu
|
||||
)
|
||||
LearningContentFactory(
|
||||
title='Reiseversicherung',
|
||||
parent=circe_analyse,
|
||||
minutes=240,
|
||||
contents=[('competence', CompetenceBlockFactory())]
|
||||
)
|
||||
LearningContentFactory(
|
||||
title='Sorgenfrei reisen',
|
||||
parent=circe_analyse,
|
||||
minutes=120,
|
||||
contents=[('exercise', ExerciseBlockFactory())]
|
||||
)
|
||||
|
||||
lu = LearningUnitFactory(title='Haushalt', parent=circe_analyse)
|
||||
LearningUnitQuestionFactory(
|
||||
title='Passende Frage zu "Haushalt"',
|
||||
parent=lu
|
||||
)
|
||||
LearningContentFactory(
|
||||
title='Privathaftpflicht',
|
||||
parent=circe_analyse,
|
||||
minutes=240,
|
||||
contents=[('competence', CompetenceBlockFactory())]
|
||||
)
|
||||
LearningContentFactory(
|
||||
title='Zusatzversicherung',
|
||||
parent=circe_analyse,
|
||||
minutes=120,
|
||||
contents=[('document', DocumentBlockFactory())]
|
||||
)
|
||||
LearningContentFactory(
|
||||
title='Einen eigenen Haushalt führen',
|
||||
parent=circe_analyse,
|
||||
minutes=120,
|
||||
contents=[('exercise', ExerciseBlockFactory())]
|
||||
)
|
||||
|
||||
LearningSequenceFactory(title='Üben', parent=circe_analyse, icon='it-icon-ls-practice')
|
||||
lu = LearningUnitFactory(title='Kind zieht von zu Hause aus', parent=circe_analyse)
|
||||
LearningUnitQuestionFactory(
|
||||
|
|
@ -232,6 +304,43 @@ Fachspezialisten bei.
|
|||
contents=[('competence', CompetenceBlockFactory())]
|
||||
)
|
||||
|
||||
LearningSequenceFactory(title='Testen', parent=circe_analyse, icon='it-icon-ls-test')
|
||||
lu = LearningUnitFactory(title='Kind zieht von zu Hause aus "Testen"', parent=circe_analyse)
|
||||
LearningContentFactory(
|
||||
title='Das erwartet dich im Test',
|
||||
parent=circe_analyse,
|
||||
minutes=30,
|
||||
contents=[('document', CompetenceBlockFactory())]
|
||||
)
|
||||
LearningContentFactory(
|
||||
title='Test durchführen',
|
||||
parent=circe_analyse,
|
||||
minutes=30,
|
||||
contents=[('document', CompetenceBlockFactory())]
|
||||
)
|
||||
|
||||
LearningSequenceFactory(title='Vernetzen', parent=circe_analyse, icon='it-icon-ls-network')
|
||||
LearningContentFactory(
|
||||
title='Online Training',
|
||||
parent=circe_analyse,
|
||||
minutes=60,
|
||||
contents=[('document', CompetenceBlockFactory())]
|
||||
)
|
||||
|
||||
LearningSequenceFactory(title='Beenden', parent=circe_analyse, icon='it-icon-ls-end')
|
||||
LearningContentFactory(
|
||||
title='Kompetenzprofil anschauen',
|
||||
parent=circe_analyse,
|
||||
minutes=30,
|
||||
contents=[('document', CompetenceBlockFactory())]
|
||||
)
|
||||
LearningContentFactory(
|
||||
title='Circle "Analyse" abschliessen',
|
||||
parent=circe_analyse,
|
||||
minutes=30,
|
||||
contents=[('document', CompetenceBlockFactory())]
|
||||
)
|
||||
|
||||
# learning_unit = LearningUnitFactory.create(title='** Einstieg Video"', parent=circle_4)
|
||||
# video_url = "https://www.vbv.ch/fileadmin/vbv/Videos/Statements_Externe/Janos_M/Testimonial_Janos_Mischler_PositiveEffekte.mp4"
|
||||
# video_title = "Ausbildung ist pflicht"
|
||||
|
|
|
|||
Loading…
Reference in New Issue