Run prettier on 2d0bce143a

This commit is contained in:
2026-03-15 15:53:48 +01:00
parent 7fdadf4b0b
commit bc75334590
2 changed files with 84 additions and 79 deletions

View File

@@ -112,7 +112,12 @@ function goToAuthor() {
<div class="my-5" v-if="data.isbn">ISBN: {{ data.isbn }}</div> <div class="my-5" v-if="data.isbn">ISBN: {{ data.isbn }}</div>
<div class="my-5" v-if="data.inventaireid">Inventaire ID: {{ data.inventaireid }}</div> <div class="my-5" v-if="data.inventaireid">Inventaire ID: {{ data.inventaireid }}</div>
<div class="my-5" v-if="data.openlibraryid">OLID: {{ data.openlibraryid }}</div> <div class="my-5" v-if="data.openlibraryid">OLID: {{ data.openlibraryid }}</div>
<ReviewWidget :reviewtext="data.review" :rating="data.rating" @on-review-update="onReviewUpdate" @on-rating-update="onRatingUpdate"/> <ReviewWidget
:reviewtext="data.review"
:rating="data.rating"
@on-review-update="onReviewUpdate"
@on-rating-update="onRatingUpdate"
/>
</div> </div>
<div class="column"> <div class="column">
<BookFormIcons <BookFormIcons

View File

@@ -12,7 +12,8 @@ const isTextareaTransitionEnabled = ref(true)
defineEmits('onRatingUpdate', 'onReviewUpdate') defineEmits('onRatingUpdate', 'onReviewUpdate')
function computeTextareaClass() { function computeTextareaClass() {
let classAttr = isTextareaExpanded && isTextareaExpanded.value ? 'textarea-expanded' : 'textarea-normal' let classAttr =
isTextareaExpanded && isTextareaExpanded.value ? 'textarea-expanded' : 'textarea-normal'
if (isTextareaTransitionEnabled && isTextareaTransitionEnabled.value) { if (isTextareaTransitionEnabled && isTextareaTransitionEnabled.value) {
classAttr += ' transition-height' classAttr += ' transition-height'
} }
@@ -25,16 +26,15 @@ function onTextAreaFocus() {
isTextareaTransitionEnabled.value = false isTextareaTransitionEnabled.value = false
}, 500) }, 500)
} }
</script> </script>
<template> <template>
<div class="maincontainer py-5"> <div class="maincontainer py-5">
<div class="widget-header mb-5 full-width"> <div class="widget-header mb-5 full-width">
<div class="widget-title ml-3"> <div class="widget-title ml-3">
<h2>{{$t('review.title')}}</h2> <h2>{{ $t('review.title') }}</h2>
<span class="ml-3"> <span class="ml-3">
<b-icon-pen/> <b-icon-pen />
</span> </span>
</div> </div>
<VRating <VRating
@@ -55,13 +55,15 @@ function onTextAreaFocus() {
class="widget-textarea mx-4" class="widget-textarea mx-4"
@change="(e) => $emit('onReviewUpdate', e.target.value)" @change="(e) => $emit('onReviewUpdate', e.target.value)"
@focus="onTextAreaFocus" @focus="onTextAreaFocus"
:class="computeTextareaClass()">{{reviewtext}}</textarea> :class="computeTextareaClass()"
>{{ reviewtext }}</textarea
>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.maincontainer { .maincontainer {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -69,57 +71,56 @@ function onTextAreaFocus() {
border: solid; border: solid;
border-radius: 20px; border-radius: 20px;
padding: 10px; padding: 10px;
} }
.widget-header { .widget-header {
display: flex; display: flex;
} }
.widget-title { .widget-title {
flex: 2; flex: 2;
font-size: 2em; font-size: 2em;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.widget-title h2 { .widget-title h2 {
font-weight: bold; font-weight: bold;
} }
.widget-rating { .widget-rating {
flex: 2; flex: 2;
} }
.widget-textarea { .widget-textarea {
color: var(--bulma-body-color); color: var(--bulma-body-color);
background-color: var(--bulma-text-20); background-color: var(--bulma-text-20);
width: 95%; width: 95%;
border-radius: 30px; border-radius: 30px;
border: none; border: none;
padding: 15px; padding: 15px;
} }
.textarea-normal { .textarea-normal {
height: 80px; height: 80px;
resize: none; resize: none;
} }
.textarea-expanded { .textarea-expanded {
height: 350px; height: 350px;
resize: vertical; resize: vertical;
} }
.transition-height { .transition-height {
transition: height 0.5s; transition: height 0.5s;
} }
.full-width { .full-width {
width: 100%; width: 100%;
} }
@media (max-width: 1024px) {
@media (max-width: 1024px) {
.widget-header { .widget-header {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -129,6 +130,5 @@ function onTextAreaFocus() {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
</style> </style>