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

Refactor Module teaser Limit texts to two lines

This commit is contained in:
Lorenz Padberg 2023-09-13 11:34:20 +02:00
parent 10417bba13
commit da4eb0112e
1 changed files with 47 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
client/src/components/modules/ModuleTeaser.vue
View File

@ -8,13 +8,16 @@
class="module-teaser__image" class="module-teaser__image"
/> />
<div class="module-teaser__body"> <div class="module-teaser__body">
<h3 class="module-teaser__meta-title">{{ metaTitle }}</h3> <div class="module-teaser__content">
<h3 class="module-teaser__title"> <h3 class="module-teaser__content-meta-title">{{ metaTitle }}</h3>
{{ title }} <h3 class="module-teaser__content-title">
</h3> {{ title }}
<p class="module-teaser__description"> </h3>
{{ teaser }} <p class="module-teaser__content-description">
</p> {{ teaser }}
</p>
</div>
<div <div
class="module-teaser__pills" class="module-teaser__pills"
v-if="$flavor.showModuleFilter" v-if="$flavor.showModuleFilter"
@ -62,22 +65,36 @@ const moduleLink = computed(() => {
<style scoped lang="scss"> <style scoped lang="scss">
@import 'styles/helpers'; @import 'styles/helpers';
@mixin two-line-text {
//Max height of text 2 lines and truncate with ... when overflowing
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.module-teaser { .module-teaser {
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
height: 390px; min-height: 390px;
width: 100%; width: 100%;
border-radius: 12px; border-radius: $default-border-radius;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
max-width: $topic-mobile-width; max-width: $topic-mobile-width;
display: flex;
flex-direction: column;
justify-content: space-between;
align-content: start;
@include desktop { @include desktop {
max-width: $topic-desktop-width; max-width: $topic-desktop-width;
} }
&--small { &--small {
min-height: 300px;
height: 300px; height: 300px;
} }
@ -88,30 +105,41 @@ const moduleLink = computed(() => {
background-position: center; background-position: center;
background-size: 100% auto; background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
// prevent image from shrinking
flex-shrink: 0;
} }
&__body { &__body {
padding: 20px; display: flex;
flex-direction: column;
flex-grow: 1;
padding: $medium-spacing;
} }
&__meta-title { &__pills {
margin-top: auto;
}
&__content {
margin-bottom: $medium-spacing;
}
&__content-meta-title {
color: $color-silver-dark; color: $color-silver-dark;
margin-bottom: $large-spacing; margin-bottom: $large-spacing;
@include regular-text; @include regular-text;
} }
&__title { &__content-title {
@include heading-3; @include heading-3;
margin-bottom: 5px; margin-bottom: $small-spacing;
@include two-line-text;
} }
&__description { &__content-description {
line-height: $default-line-height; line-height: $default-line-height;
font-size: 1.2rem; font-size: 1.2rem;
} @include two-line-text;
&__pills {
margin-top: $medium-spacing;
} }
} }
</style> </style>