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

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

@ -21,9 +21,7 @@
</option> </option>
</select> </select>
</div> </div>
</div>
<div class="topic__modules"> <div class="topic__modules">
<module-teaser <module-teaser
v-for="module in filteredModules" v-for="module in filteredModules"
@ -33,12 +31,6 @@
</div> </div>
</div>
</div> </div>
</template> </template>
@ -90,12 +82,12 @@
return filteredModules; return filteredModules;
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import 'styles/helpers'; @import 'styles/helpers';
.container { .container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -123,8 +115,19 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.topic {
display: grid;
padding: $large-spacing $small-spacing;
@include desktop {
padding: $large-spacing 0;
}
grid-template-columns: 1fr;
@include desktop {
grid-template-columns: 300px 1fr;
}
topic__modules {
&__modules {
margin-top: 40px; margin-top: 40px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -138,4 +141,13 @@
grid-template-columns: repeat(3, minmax(auto, 380px)); 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>