digimedialoop/dml_frontend
digimedialoop/dml_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

article optimized

Browse Source
This commit is contained in:
Sabrina Hennrich 2025-06-08 21:23:48 +02:00
parent 1c61d1ccb3
commit ae39985f4c
3 changed files with 59 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/Breadcrumbs.vue
View File

@ -143,12 +143,12 @@ watch(() => route.fullPath, () => {
<style lang="sass" scoped> <style lang="sass" scoped>
.breadcrumbs .breadcrumbs
position: fixed position: fixed
top: 22vh top: 12vh
left: -5px left: -12px
background-color: rgba(white, .98) background-color: rgba(white, .98)
border: 1px solid darken($lightgrey, 5%) border: 1px solid darken($lightgrey, 5%)
z-index: 22 z-index: 22
padding: .25rem padding: .2rem 0
border-top-right-radius: .8rem border-top-right-radius: .8rem
border-bottom-right-radius: .8rem border-bottom-right-radius: .8rem
transition: all 0.4s ease transition: all 0.4s ease
@ -169,6 +169,7 @@ watch(() => route.fullPath, () => {
svg svg
width: 1rem width: 1rem
height: 1rem height: 1rem
transform: translateX(10px)
path path
fill: darken($lightgrey, 20%) fill: darken($lightgrey, 20%)
@ -198,9 +199,9 @@ watch(() => route.fullPath, () => {
opacity: 0 opacity: 0
li li
font-size: 1.2rem font-size: 1.1rem
display: flex display: flex
padding: .5rem padding: 0.1rem .3rem
align-items: center align-items: center
color: $darkgrey color: $darkgrey
@ -214,7 +215,7 @@ watch(() => route.fullPath, () => {
.close-btn .close-btn
cursor: pointer cursor: pointer
font-size: 1.4rem font-size: 1.2rem
font-weight: bold font-weight: bold
background-color: darken($beige, 10%) background-color: darken($beige, 10%)
color: white color: white
@ -222,7 +223,7 @@ watch(() => route.fullPath, () => {
height: 1.5rem height: 1.5rem
border-radius: 50% border-radius: 50%
position: relative position: relative
margin: .5rem .5rem 0 2rem margin: .2rem .5rem 0 1rem
&::before &::before
position: absolute position: absolute

88
pages/article/[link].vue
View File

@ -3,43 +3,43 @@
<SideBarNaviSlider link="/wissenswertes"> <SideBarNaviSlider link="/wissenswertes">
{{ $t('pages.article.artikelUebersicht') }} {{ $t('pages.article.artikelUebersicht') }}
</SideBarNaviSlider> </SideBarNaviSlider>
<div class="paper">
<section class="teaserBox topSpace"> <section class="teaserBox topSpace">
<div class="container-10"> <div class="container-10">
<p class="articleInfo"> <p class="articleInfo">
<b>{{ $t('pages.article.autor') }}</b> {{ author }} <!--| <b>{{ $t('pages.article.autor') }}</b> {{ author }} <!--|
<b>{{ $t('pages.article.aktualisiert') }}</b> {{ formattedDate }}--> <b>{{ $t('pages.article.aktualisiert') }}</b> {{ formattedDate }}-->
</p> </p>
<NuxtImg <NuxtImg
v-if="article.image?.url" v-if="article.image?.url"
:src="article.image.url" :src="article.image.url"
:alt="article.image.alternativeText || article.header" :alt="article.image.alternativeText || article.header"
class="img_detail" class="img_detail"
width="350" width="350"
height="auto" height="auto"
priority provider="strapi"
provider="strapi" :sizes="'(max-width: 600px) 90vw, 350px'"
:sizes="'(max-width: 600px) 90vw, 350px'" role="img"
role="img" />
/> <h1>{{ article.header }}</h1>
<p class="teaser">{{ article.teaser }}</p>
</div>
</section>
<h1>{{ article.header }}</h1> <section class="articleBox container">
<p class="teaser">{{ article.teaser }}</p> <div class="content" v-html="htmlContent(article.content)"/>
</div> <button
</section> class="pinkBtn"
role="button"
<section class="articleBox container"> aria-label="Kontakt aufnehmen"
<div class="content" v-html="htmlContent(article.content)"/> @click.prevent="toggleContactBubble"
<button >
class="pinkBtn" {{ $t('pages.article.kontaktieren') }}
role="button" </button>
aria-label="Kontakt aufnehmen" </section>
@click.prevent="toggleContactBubble" </div>
>
{{ $t('pages.article.kontaktieren') }}
</button>
</section>
</div> </div>
<div v-else class="container topSpace"> <div v-else class="container topSpace">
@ -159,11 +159,11 @@
</script> </script>
<style scoped lang="sass"> <style lang="sass">
.article .article
margin-top: 2rem margin-top: 2rem
.teaserBox .teaserBox
margin-bottom: 1.5rem !important margin-bottom: 1.5rem
.teaser .teaser
font-family: 'Mainfont-Bold' font-family: 'Mainfont-Bold'
.articleInfo .articleInfo
@ -182,12 +182,24 @@
float: right float: right
margin: 0 0 2rem 2rem margin: 0 0 2rem 2rem
border-radius: 1rem border-radius: 1rem
filter: grayscale(100%) //filter: grayscale(100%)
.articleBox .articleBox
display: flex display: flex
flex-direction: column flex-direction: column
align-items: flex-start align-items: flex-start
.content
line-height: 140%
h2, h3, h4
margin: 2rem auto .8rem auto
h2
font-size: 1.6rem !important
color: darken($primaryColor, 40%)
h3
font-size: 1.3rem !important
color: darken($primaryColor, 30%)
li
margin-bottom: .5rem
font-size: 1.05rem
.pinkBtn .pinkBtn
clear: both clear: both
display: block display: block

2
stores/main.ts
View File

@ -224,7 +224,7 @@ export const useMainStore = defineStore('main', {
$fetch(`${cfg.cmsBaseUrl}/api/references?populate=projectImages,Technologien,customer&sort=launchDate:desc`, { $fetch(`${cfg.cmsBaseUrl}/api/references?populate=projectImages,Technologien,customer&sort=launchDate:desc`, {
headers: { Authorization: `Bearer ${cfg.cmsToken}` }, headers: { Authorization: `Bearer ${cfg.cmsToken}` },
}), }),
$fetch(`${cfg.cmsBaseUrl}/api/newsarticels?populate=image,SEO,author&locale=all`, { $fetch(`${cfg.cmsBaseUrl}/api/newsarticels?populate=image,SEO,author&locale=all&sort=createdAt:desc`, {
headers: { Authorization: `Bearer ${cfg.cmsToken}` }, headers: { Authorization: `Bearer ${cfg.cmsToken}` },
}), }),
]) ])