ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Move modules to modules filter

This commit is contained in:
Lorenz Padberg 2023-07-24 13:55:05 +02:00
parent a06f7af44a
commit 38c9b7623d
2 changed files with 63 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
client/src/components/modules/ModuleFilter.vue
View File

@ -1,30 +1,28 @@
<template> <template>
<div> <div>
<div class="container"> <div class="container">
<div class="radio-group"> <div class="radio-group">
<div v-for="(category, index) in firstLevelCategories" :key="index" class="radio-item"> <div v-for="(category, index) in firstLevelCategories" :key="index" class="radio-item">
<input <input
type="radio" type="radio"
:value="category" :value="category"
:id="'category-' + index" :id="'category-' + index"
v-model="selectedCategory" v-model="selectedCategory"
@change="filterModules" @change="filterModules"
/> />
<label :for="'category-' + index">{{ category }}</label> <label :for="'category-' + index">{{ category }}</label>
</div>
</div>
<div class="dropdown-container">
<select id="lernfeld-select" v-model="selectedLernfeld" @change="filterModules">
<option v-for="(lernfeld, index) in lernfeldOptions" :key="index" :value="lernfeld"
>
{{ lernfeld }}
</option>
</select>
</div> </div>
</div> </div>
<div class="dropdown-container"> <div class="topic__modules">
<select id="lernfeld-select" v-model="selectedLernfeld" @change="filterModules">
<option v-for="(lernfeld, index) in lernfeldOptions" :key="index" :value="lernfeld"
>
{{ lernfeld }}
</option>
</select>
</div>
<div class="topic__modules">
<module-teaser <module-teaser
v-for="module in filteredModules" v-for="module in filteredModules"
v-bind="module" v-bind="module"
@ -33,12 +31,6 @@
</div> </div>
</div>
</div> </div>
</template> </template>
@ -59,7 +51,7 @@
const firstLevelCategories = computed(() => { const firstLevelCategories = computed(() => {
return ["1. Lehrjahr", "2. Lehrjahr", "3. Lehrjahr", ]; return ["1. Lehrjahr", "2. Lehrjahr", "3. Lehrjahr",];
}); });
let filteredModules = computed(() => { let filteredModules = computed(() => {
@ -90,16 +82,16 @@
return filteredModules; return filteredModules;
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import 'styles/helpers'; @import 'styles/helpers';
.container {
display: flex; .container {
flex-wrap: wrap; display: flex;
} flex-wrap: wrap;
}
.module-filter { .module-filter {
@ -119,23 +111,43 @@
} }
.dropdown-container { .dropdown-container {
margin-left: 40px; margin-left: 40px;
display: flex;
align-items: center;
}
topic__modules {
margin-top: 40px;
display: flex; display: flex;
flex-wrap: wrap; align-items: center;
@supports (display: grid) { }
display: grid; .topic {
} display: grid;
grid-column-gap: $large-spacing; padding: $large-spacing $small-spacing;
grid-row-gap: $large-spacing;
@include desktop { @include desktop {
grid-template-columns: repeat(3, minmax(auto, 380px)); padding: $large-spacing 0;
}
grid-template-columns: 1fr;
@include desktop {
grid-template-columns: 300px 1fr;
}
&__modules {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
@supports (display: grid) {
display: grid;
}
grid-column-gap: $large-spacing;
grid-row-gap: $large-spacing;
@include desktop {
grid-template-columns: repeat(3, minmax(auto, 380px));
}
}
&__teaser {
color: $color-charcoal-dark;
width: 90%;
@include lead-paragraph;
margin-bottom: $large-spacing;
} }
} }
</style> </style>

28
client/src/pages/topic-page.vue
View File

@ -15,7 +15,7 @@
{{ topic.teaser }} {{ topic.teaser }}
</p> </p>
<div class="topic__modulefilter"> <div class="topic__modulefilter">
<module-filter></module-filter> <module-filter :modules="modules"></module-filter>
</div> </div>
<div class="topic__links"> <div class="topic__links">
<div <div
@ -36,13 +36,7 @@
<span class="topic__link-description">Anweisungen zum {{ $flavor.textTopic }} anzeigen</span> <span class="topic__link-description">Anweisungen zum {{ $flavor.textTopic }} anzeigen</span>
</a> </a>
</div> </div>
<div class="topic__modules">
<module-teaser
v-for="module in modules"
v-bind="module"
:key="module.slug"
/>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -175,10 +169,6 @@ export default {
grid-template-columns: 300px 1fr; grid-template-columns: 300px 1fr;
} }
&__modulefilter {
width: 90%;
height: 40px;
}
&__navigation { &__navigation {
padding: 0 $medium-spacing; padding: 0 $medium-spacing;
@ -220,19 +210,5 @@ export default {
@include heading-3; @include heading-3;
} }
&__modules {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
@supports (display: grid) {
display: grid;
}
grid-column-gap: $large-spacing;
grid-row-gap: $large-spacing;
@include desktop {
grid-template-columns: repeat(3, minmax(auto, 380px));
}
}
} }
</style> </style>