Run prettier on 2d0bce143a
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user